/*
Theme Name: SNAPViolations
Theme URI: https://snapviolations.com
Author: Spodek Law Group P.C.
Description: Editorial block theme for SNAPViolations.com — USDA SNAP retailer defense, nationwide. Edition 02 design system: Archivo display, Libre Franklin body, IBM Plex Mono labels, Verdict Red as a thread.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: snapviolations
*/

/* ---------- base (design ships its own margins/paddings inline-turned-atlas;
   no global reset beyond what the design's own base <style> carried) ---------- */
body { margin: 0; background: var(--wp--preset--color--paper); -webkit-text-size-adjust: 100%; }
a { color: var(--wp--preset--color--ink); }
a:hover { color: var(--wp--preset--color--verdict-red); }
input, select, button, textarea { font-family: var(--wp--preset--font-family--libre-franklin); }
/* width/height attrs are CLS hints only — the design sizes images via width:100% + aspect-ratio */
img { max-width: 100%; height: auto; }

/* keyboard focus — visible everywhere, ink-on-paper and paper-on-ink both read */
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* skip link */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--label); letter-spacing: var(--wp--custom--letter-spacing--mono);
	padding: 12px 18px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- responsive navigation (design switched wide/narrow at 1010px via JS;
   here it is pure CSS, and the drawer is a native <details>) ---------- */
.sv-drawer { position: static; flex: none; }
.sv-drawer > summary {
	list-style: none; display: inline-block; background: none; cursor: pointer;
	border: 1px solid var(--wp--preset--color--ink); padding: 10px 13px;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--letter-spacing--mono);
	color: var(--wp--preset--color--ink);
	transition: background .15s ease;
}
.sv-drawer > summary::-webkit-details-marker { display: none; }
.sv-drawer > summary:hover { background: var(--wp--preset--color--off-white); }
.sv-l-close { display: none; }
.sv-drawer[open] .sv-l-menu { display: none; }
.sv-drawer[open] .sv-l-close { display: inline; }
.sv-drawer-panel {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
	background: var(--wp--preset--color--ink);
	border-top: 1px solid var(--wp--preset--color--ink-rule);
	padding: 8px var(--wp--preset--spacing--section-x) 20px;
	display: flex; flex-direction: column;
}
@media (min-width: 1011px) { .sv-drawer { display: none; } }
@media (max-width: 1010px) { .sv-links { display: none; } }

/* sticky nav below the logged-in admin bar */
body.admin-bar nav[aria-label="Primary"] { top: 32px; }
@media (max-width: 782px) { body.admin-bar nav[aria-label="Primary"] { top: 46px; } }

/* ---------- image slot placeholder (design-tool component replaced with an inert box) ---------- */
.sv-img-slot {
	width: 100%; height: 100%; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--off-white);
	border: 1px solid var(--wp--preset--color--rule); text-align: center; padding: 20px;
}
.sv-img-slot span {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--label-xs);
	letter-spacing: var(--wp--custom--letter-spacing--mono);
	color: var(--wp--preset--color--mono-grey);
}

/* ---------- WordPress chrome kept out of the design ---------- */
.wp-block-post-content { display: block; }
.wp-block-template-part { display: block; }
/* the header wrapper must not become the sticky nav's containing block -
   display:contents lifts the nav to body scope so it sticks for the whole page */
header.wp-block-template-part { display: contents; }

/* ---------- article elements from the content pipeline ----------
   The imported design markup is fully classed; these rules style only BARE
   elements (future long-form content: subheads, lists, tables, blockquotes,
   FAQ blocks, in-text links) in the design's article idiom. Table/blockquote
   have no design precedent - derived from the system (rule border, mono
   labels, red thread) and flagged in the build report. */
:where(.wp-block-post-content) :is(p, ul, ol, li, blockquote, td, th):where(:not([class])) {
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--lede-lg);
	color: var(--wp--preset--color--body-grey);
	line-height: var(--wp--custom--line-height--article);
}
:where(.wp-block-post-content) :is(p, ul, ol):where(:not([class])) { max-width: 720px; margin: 18px 0 0; }
:where(.wp-block-post-content) :is(ul, ol):where(:not([class])) { padding-left: 26px; }
:where(.wp-block-post-content) li:where(:not([class])) { margin-top: 8px; }
:where(.wp-block-post-content) h2:where(:not([class])) {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 300;
	font-size: clamp(20px, 2.3vw, 27px); /* the design post-body H2, exactly */
	color: var(--wp--preset--color--ink);
	letter-spacing: -.7px;
	line-height: 1.2;
	max-width: 720px;
	margin: 34px 0 0;
}
:where(.wp-block-post-content) h3:where(:not([class])) {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 400;
	font-size: 18px;
	color: var(--wp--preset--color--ink);
	letter-spacing: -.4px;
	line-height: 1.3;
	max-width: 720px;
	margin: 28px 0 0;
}
:where(.wp-block-post-content) blockquote:where(:not([class])) {
	border: 1px solid var(--wp--preset--color--ink);
	border-left: 3px solid var(--wp--preset--color--verdict-red);
	padding: 22px 26px;
	margin: 26px 0 0;
	max-width: 680px;
}
:where(.wp-block-post-content) blockquote:where(:not([class])) p { margin: 0; color: var(--wp--preset--color--ink); }
:where(.wp-block-post-content) table:where(:not([class])) {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 26px 0 0;
	max-width: 720px;
}
:where(.wp-block-post-content) table:where(:not([class])) :is(td, th) {
	border: 1px solid var(--wp--preset--color--rule);
	padding: 12px 16px;
	text-align: left;
	font-size: var(--wp--preset--font-size--body-sm);
}
:where(.wp-block-post-content) table:where(:not([class])) th {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--label-xs);
	letter-spacing: var(--wp--custom--letter-spacing--monoMd);
	text-transform: uppercase;
	color: var(--wp--preset--color--mono-grey);
	background: var(--wp--preset--color--off-white);
}
/* internal links must read as links (design idiom: ink text on a red 1.5px underline) */
:where(.wp-block-post-content) :is(p, li, td):where(:not([class])) a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1.5px solid var(--wp--preset--color--verdict-red);
	padding-bottom: 1px;
}
:where(.wp-block-post-content) :is(p, li, td):where(:not([class])) a:hover { color: var(--wp--preset--color--verdict-red); }
/* FAQ blocks: native disclosure, red-thread marker */
:where(.wp-block-post-content) details:where(:not([class])) {
	border-top: 1px solid var(--wp--preset--color--rule);
	max-width: 720px;
	padding: 16px 0;
}
:where(.wp-block-post-content) details:where(:not([class])) summary {
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--lede);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
:where(.wp-block-post-content) details:where(:not([class])) summary::marker { color: var(--wp--preset--color--verdict-red); }

/* JS-managed panels stay hidden even against inline display (design runtime writes inline styles) */
[hidden] { display: none !important; }

/* ---------- mobile call bar: fixed to the viewport bottom, ink with red hover,
   design button idiom. Desktop keeps the nav's Call 24/7 button instead. ---------- */
.sv-call-bar {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--libre-franklin);
	font-weight: 500; font-size: 14px; letter-spacing: .4px; line-height: 1.2;
	text-align: center; text-decoration: none;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wp--preset--color--ink-rule);
	transition: background .15s ease;
}
.sv-call-bar:hover, .sv-call-bar:focus-visible { background: var(--wp--preset--color--verdict-red); color: var(--wp--preset--color--paper); }
@media (max-width: 1010px) {
	.sv-call-bar { display: block; }
	/* the bar must never cover the page's last content */
	body { padding-bottom: 52px; }
}