/*
 * edusys components.css — every selector below is EITHER a verbatim reuse of
 * a selector from Task 1's override map (docs/design-surface.md §1.8, "the
 * map"), OR falls inside the styleguide's own `.edusys-sg-*` namespace
 * (Task 3, plugins/edusys/src/Design/Styleguide.php). Nothing here is
 * improvised: tests/unit/design_components.test.php asserts both this
 * namespace rule and the zero-raw-literal rule below, over this exact file.
 *
 * ZERO RAW HEX/PX COLOR-SIZE LITERALS OUTSIDE var(...) — the unit-test-
 * enforced rule. Every color/size value below is one of the
 * `--edusys-color-*` / `--edusys-space-*` / `--edusys-type-*` /
 * `--edusys-font-*` tokens from tokens.css (Task 2), referenced via var().
 * The only two exceptions, both allowlisted by the test:
 *   - `0` (any property) — never a color/size decision, needs no token.
 *   - `1px` hairline borders, EACH documented at its own declaration with
 *     the word "hairline" in an adjacent comment (the test greps for it).
 *
 * BREAKPOINTS AS TOKENS (req 81, mobile-first): CSS custom properties
 * cannot be substituted into an `@media` feature condition (no browser
 * resolves `var()` there), so the two breakpoints below are NOT var()-able
 * — this is a CSS-spec constraint, not a discipline lapse, and is the one
 * place this file states a bare number more than once. Canonical values,
 * stated ONCE here and referenced literally at every `@media` block below:
 *   --edusys-bp-md: 768px   (req 81's first layer)
 *   --edusys-bp-lg: 1280px  (req 81's second layer)
 * Base styles below (no media wrapper) are the >=360px mobile layout.
 *
 * SOURCE-ORDER DISCIPLINE (Task 1 M1, docs/design-surface.md §1.8): every
 * live-surface selector below matches the theme's/core's/plugin's OWN
 * selector at EQUAL specificity — Module::enqueue() registers this handle
 * on `wp_enqueue_scripts` priority 20 (after the theme's/core's priority-10
 * registration), so this file wins ties by printing later in <head>. NO
 * `!important` anywhere in this file for that reason — the one selector
 * given an escalation below (the cookie table) explains why the escalation
 * is a plain specificity bump, not `!important`, and is argued at its own
 * declaration, per the Global Constraints.
 */

/* === LIVE SURFACES (docs/design-surface.md §1.8) === */

/* Body typography — (0,0,1), same specificity as theme.json's own `body`
   rule, wins by enqueue-after source order (§1.6). */
body {
	font-family: var(--edusys-font-body);
	color: var(--edusys-color-ink);
	background-color: var(--edusys-color-paper);
}

/* Headings pick up the display serif — no live selector measured for these
   in the map (theme.json emits per-level H1-H6 rules, none color/bg, out of
   scope here), so this rule is the ONE deliberate exception to "selector
   must be in the map": bare type selectors, zero specificity risk, and the
   property touched (font-family only) is exactly what M2 vendored the font
   for. Recorded here rather than silently added. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--edusys-font-display);
}

/* Plain links — (0,0,1), matches twentytwentyfive-style-inline-css's own
   bare `a` rule (§1.2). Hover/focus stay monochrome on purpose: S1 forbids
   any accent as arbitrary text-on-white, so the hover state changes
   decoration weight, never color. */
a {
	color: var(--edusys-color-ink);
}
a:hover,
a:focus-visible {
	text-decoration-thickness: var(--edusys-space-1);
}

/* Buttons/links — (0,1,0), matches `:root :where(.wp-element-button,
   .wp-block-button__link)` verbatim (§1.2). Hover swaps to the yellow
   accent as BACKGROUND with ink text — S1's own approved pairing
   (17.3:1), never yellow-as-text. */
.wp-element-button,
.wp-block-button__link {
	display: inline-block;
	background-color: var(--edusys-color-ink);
	color: var(--edusys-color-paper);
	font-family: var(--edusys-font-body);
	font-size: var(--edusys-type-m);
	padding: var(--edusys-space-2) var(--edusys-space-4);
	border: 0;
	border-radius: var(--edusys-space-1);
	text-decoration: none;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	background-color: var(--edusys-color-accent-yellow);
	color: var(--edusys-color-ink);
}

/* Nav item content — (0,3,0), matches
   `.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content`
   verbatim (§1.1); the two ancestor `!important` rules on the responsive
   container set background/color to inherit/transparent (never fought,
   per the map's own finding) so styling the header ancestor, not here, is
   what actually paints the nav background — this rule only sets the link
   token colors and spacing that ARE reachable at this selector. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	color: var(--edusys-color-ink);
	font-family: var(--edusys-font-body);
	padding: var(--edusys-space-2) var(--edusys-space-3);
}

/* Language switcher (Task 3's own addition — the demo measurably lacked
   one, docs/design-surface.md §1.1's finding). Rendered by
   Module::renderLanguageSwitcher() on `wp_body_open` (see that method's
   docblock for the placement argument): plain document flow at the very
   top of <body>, so it never occupies fixed screen coordinates and cannot
   collide with the two fixed-position widgets (the sausainiai reopen pill,
   bottom-right; the contrast toggle, bottom-left) at any viewport. Exactly
   the two classes Polylang's own switcher.php emits (§1.1: `.lang-item`,
   `.current-lang`, both (0,1,0), zero Polylang frontend CSS to beat) —
   `display: inline-block` on `.lang-item` both lays the languages out
   horizontally AND removes the list-marker a bare `<li>` would otherwise
   carry (list-style only paints on a `display: list-item` box), so no
   `ul`/`li`/`nav` wrapper selector is needed at all — one fewer selector to
   justify against the map. */
.lang-item {
	display: inline-block;
	margin: 0 var(--edusys-space-2) 0 0;
	font-family: var(--edusys-font-body);
	font-size: var(--edusys-type-s);
}
.lang-item a {
	color: var(--edusys-color-ink);
	text-decoration: none;
	padding: var(--edusys-space-1) var(--edusys-space-2);
}
.current-lang a {
	font-weight: 700;
	text-decoration: underline;
}

/* Cookie table (the live §11 table, both privacy-page and styleguide-demo
   instances) — reuses the plugin's own selectors verbatim (§1.4), but with
   ONE argued escalation. The map computed these at (0,2,0)/(0,2,1) and
   predicted an enqueue-after win; re-examined for THIS surface specifically
   because tobalt-sausainiai prints its `<style>` block INLINE, at the point
   the `[tobalt_sausainiai_cookies]` shortcode renders inside page content —
   i.e. inside <body>, after this file's <link> in <head> — so for this one
   surface (and only this one; every other row in the map is a <head>-only
   enqueue-vs-enqueue race where source order truly does resolve it) later-
   in-document-order, not enqueue priority, decides the tie, and the body
   `<style>` would win a dead heat. The fix is a plain specificity bump, NOT
   `!important`: prefixing `body ` (itself a map-approved selector, §1.6)
   raises (0,2,0)->(0,2,1) and (0,2,1)->(0,2,2), unconditionally ahead of the
   plugin's own (0,2,0)/(0,2,1) rules regardless of document order. Verified
   live in the Step 4 deploy fetch (raw diff of the served `<style>` vs this
   file's position, and a computed-style check on the fetched table). */
body .tobalt-sausainiai-cookies-list .tsc-cat {
	margin: var(--edusys-space-4) 0 var(--edusys-space-1);
	font-family: var(--edusys-font-display);
	color: var(--edusys-color-ink);
}
body .tobalt-sausainiai-cookies-list .tsc-table {
	width: 100%; /* literal-ok: fills the table's container — a proportion, not a design-token size */
	border-collapse: collapse;
	margin: 0 0 var(--edusys-space-3);
	font-family: var(--edusys-font-body);
	font-size: var(--edusys-type-s);
}
body .tobalt-sausainiai-cookies-list .tsc-table th,
body .tobalt-sausainiai-cookies-list .tsc-table td {
	border: 1px solid var(--edusys-color-ink); /* hairline */
	padding: var(--edusys-space-2);
	text-align: left;
	vertical-align: top;
}
body .tobalt-sausainiai-cookies-list .tsc-table th {
	background-color: var(--edusys-color-accent-yellow);
	color: var(--edusys-color-ink);
	font-weight: 700;
}

/* The sausainiai banner (§4/M4) — the two-tier route. Primary identity (4
   color settings: primary_color/background_color/text_color/
   button_text_color) is aligned through the plugin's OWN settings API by
   tools/design-setup.php, never here — writing competing CSS at `#cc-main`
   for those four would just re-declare what the plugin already emits as
   `--cc-*` custom properties from its own stored settings, for no benefit.
   The remaining vendor `--cc-*` variables (40 of 46, §4) have NO settings
   key at all — CSS at `#cc-main`, (1,0,0), is the only honest route for
   those, and M4 confirms it already beats the vendor's own `:root`-scoped
   defaults by specificity with no escalation needed. This rule touches only
   the 5 of those ~40 whose NAME docs/design-surface.md §4 actually confirms
   (grepped from the vendored cookieconsent.css, not guessed) — a wrong
   guessed custom-property name is a silent no-op, so fewer, correctly-named
   ones beat a fuller but partly-invented list. */
#cc-main {
	--cc-btn-primary-hover-bg: var(--edusys-color-accent-yellow);
	--cc-btn-secondary-hover-bg: var(--edusys-color-paper);
	--cc-toggle-off-bg: var(--edusys-color-ink);
	--cc-toggle-on-knob-bg: var(--edusys-color-paper);
	--cc-cookie-category-block-bg: var(--edusys-color-paper);
}

/* === STYLEGUIDE-ONLY (.edusys-sg-* namespace) ===
 * Everything below renders ONLY inside [edusys_dizaino_sistema]
 * (Styleguide.php) — none of it is speculative sitewide styling. Forms in
 * particular: Task 1 measured ZERO live form on the demo (§1.3, "re-measure
 * if added") — styling a bare `input`/`form` selector here would be
 * speculating past that measurement, so the form demo is fenced to this
 * namespace instead, exactly like the palette/spacing/icon documentation
 * that has no live counterpart to reuse a selector from at all.
 */

.edusys-sg-section {
	margin: 0 0 var(--edusys-space-6);
}

.edusys-sg-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--edusys-space-3);
}
@media (min-width: 768px) {
	.edusys-sg-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1280px) {
	.edusys-sg-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.edusys-sg-card {
	border: 1px solid var(--edusys-color-ink); /* hairline */
	padding: var(--edusys-space-3);
	background-color: var(--edusys-color-paper);
	color: var(--edusys-color-ink);
}

/* Palette swatches — one class per token, so the visible documentation is
   built the same way every live component is: a class styled from the
   token, never an inline hex. */
.edusys-sg-swatch {
	display: block;
	padding: var(--edusys-space-4);
	margin: 0 0 var(--edusys-space-2);
	font-family: var(--edusys-font-body);
	font-size: var(--edusys-type-s);
	border: 1px solid var(--edusys-color-ink); /* hairline */
}
.edusys-sg-swatch-ink {
	background-color: var(--edusys-color-ink);
	color: var(--edusys-color-paper);
}
.edusys-sg-swatch-paper {
	background-color: var(--edusys-color-paper);
	color: var(--edusys-color-ink);
}
.edusys-sg-swatch-yellow {
	background-color: var(--edusys-color-accent-yellow);
	color: var(--edusys-color-ink);
}
/* Green carries NO text inside its own block — S1: "niekada patys neneša
   teksto ant balto" (never itself carries text on white). progress.md's
   Task 4 ARM 2 mechanically forbids pairing the green accent token
   (--edusys-color-accent-green) with any property whose name starts
   "background" — it cannot know a future edit's text-color choice, so it
   forbids the assignment class outright, not just the unsafe pairing.
   The color below is shown as a border frame around the swatch's own
   paper fill instead — a genuinely different property, not the forbidden
   one under a new name — and its caption lives in the separate
   `.edusys-sg-swatch-caption` block, ink-on-paper, never inside the
   colored element itself. Fix round 1 (task-5-brief.md Step A.1): the
   PREVIOUS rule painted this token onto that forbidden property, paired
   with white caption text — computed 2.61:1, a genuine WCAG AA failure
   (task-4-report.md ARM 2, live-confirmed). */
.edusys-sg-swatch-green {
	background-color: var(--edusys-color-paper);
	border: var(--edusys-space-2) solid var(--edusys-color-accent-green);
}
.edusys-sg-swatch-caption {
	display: block;
	font-family: var(--edusys-font-body);
	font-size: var(--edusys-type-s);
	color: var(--edusys-color-ink);
	background-color: var(--edusys-color-paper);
	margin: 0 0 var(--edusys-space-2);
}
.edusys-sg-swatch-pink {
	background-color: var(--edusys-color-accent-pink);
	color: var(--edusys-color-ink);
}

/* Type scale demonstration. */
.edusys-sg-type-s { font-size: var(--edusys-type-s); font-family: var(--edusys-font-body); }
.edusys-sg-type-m { font-size: var(--edusys-type-m); font-family: var(--edusys-font-body); }
.edusys-sg-type-l { font-size: var(--edusys-type-l); font-family: var(--edusys-font-body); }
.edusys-sg-type-xl { font-size: var(--edusys-type-xl); font-family: var(--edusys-font-display); }
.edusys-sg-type-xxl { font-size: var(--edusys-type-xxl); font-family: var(--edusys-font-display); }

/* Spacing scale demonstration — each block's WIDTH is the token itself.
   Colored with ink, not an accent: this bar carries no text and was
   compliant either way (content-free, per task-4-report.md ARM 2's own
   reading), but progress.md's Task 4 ARM 2 forbids pairing the green
   accent token with any property whose name starts "background" in this
   file, regardless of text presence — ink is the always-safe, non-accent
   token, so the demonstration keeps its purpose without touching the
   forbidden assignment class at all. Fix round 1 (task-5-brief.md Step
   A.1). */
.edusys-sg-space {
	display: block;
	height: var(--edusys-space-3);
	margin: 0 0 var(--edusys-space-2);
	background-color: var(--edusys-color-ink);
}
.edusys-sg-space-1 { width: var(--edusys-space-1); }
.edusys-sg-space-2 { width: var(--edusys-space-2); }
.edusys-sg-space-3 { width: var(--edusys-space-3); }
.edusys-sg-space-4 { width: var(--edusys-space-4); }
.edusys-sg-space-5 { width: var(--edusys-space-5); }
.edusys-sg-space-6 { width: var(--edusys-space-6); }

/* Form demonstration (no live selector exists to reuse — §1.3). */
.edusys-sg-form label {
	display: block;
	font-family: var(--edusys-font-body);
	font-size: var(--edusys-type-s);
	margin: 0 0 var(--edusys-space-1);
}
.edusys-sg-form input,
.edusys-sg-form textarea,
.edusys-sg-form select {
	display: block;
	width: 100%; /* literal-ok: fills its parent field — a proportion, not a design-token size */
	font-family: var(--edusys-font-body);
	font-size: var(--edusys-type-m);
	color: var(--edusys-color-ink);
	background-color: var(--edusys-color-paper);
	border: 1px solid var(--edusys-color-ink); /* hairline */
	padding: var(--edusys-space-2);
	margin: 0 0 var(--edusys-space-3);
}
.edusys-sg-form input:focus-visible,
.edusys-sg-form textarea:focus-visible,
.edusys-sg-form select:focus-visible {
	outline: var(--edusys-space-1) solid var(--edusys-color-accent-pink);
	outline-offset: var(--edusys-space-1);
}

/* Icon set — the sprite's own documented consumption class (M3): sized off
   the inherited font-size (`1em`), colored by `currentColor`, so no
   `--edusys-color-*` var() is even needed on the icon itself — it inherits
   whatever ink/paper/accent the surrounding text already resolved to. */
/* Components.css-LOCAL token (not part of Task 2's frozen tokens.css
   contract — that file's :root property SET is pinned exact by
   design_module.test.php, so a new value lives here instead). Fix round 1
   (review F1): was a bare -0.125em on .edusys-sg-icon; tokenized rather
   than left as a repeated literal, because it is a real, reusable design
   value (icon/text baseline alignment) that every consumer should reach
   via var(), not a one-off structural constant like the 100%s below.
   Fix round 1b (review 1b-F1): a custom-property DEFINITION is NOT a
   structural exemption from the literal scan (that used to be true here,
   and the reviewer found it let ANY literal launder through an
   arbitrarily-named local `--edusys-sg-*` property) — this is the one
   declaration in the whole file allowed to hold this value, and like every
   other allowed literal, that is argued with its OWN literal-ok marker, on
   the line the checker actually reads, not only in this surrounding
   comment. */
:root {
	--edusys-icon-baseline: -0.125em; /* literal-ok: the ONE declaration allowed to hold this value — every consumer reaches it via var(--edusys-icon-baseline), never restates it */
}
.edusys-sg-icon {
	width: 1em; /* literal-ok: sized to the surrounding text — the standard inline-icon idiom, not a space-scale value */
	height: 1em; /* literal-ok: sized to the surrounding text — the standard inline-icon idiom, not a space-scale value */
	vertical-align: var(--edusys-icon-baseline);
}
.edusys-sg-icon-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--edusys-space-3);
}
@media (min-width: 768px) {
	.edusys-sg-icon-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.edusys-sg-icon-item {
	display: flex;
	align-items: center;
	gap: var(--edusys-space-2);
	font-family: var(--edusys-font-body);
	font-size: var(--edusys-type-s);
}

/* The forced high-contrast preview panel — sets the SAME attribute
   tokens.css's own [data-edusys-contrast="high"] selector matches (Task 2),
   on a plain <div> rather than <html>, so the token cascade demonstrates
   itself locally without needing the visitor's actual toggle/OS state. */
.edusys-sg-hc-panel {
	padding: var(--edusys-space-4);
	border: 1px solid var(--edusys-color-ink); /* hairline */
}