@charset "UTF-8";
/* =========================================================================
   atlasprehrane.hr — main.css
   Design profile: "evidence-desk".
   Axes: text-serif-inverse / lookup-board / margin-rail / data-row /
         imprint-stack / ledger-rule
   Source: hr-nutrition-desk/DESIGN-ALLOCATION.md v1.0 (BINDING),
           hr-nutrition-desk/mockups/assets/mockup.css (reference build),
           hr-nutrition-desk/research/00-DESIGN-BRIEF.md.

   THREE LAWS THIS FILE ENFORCES
     L1  apparatus-density — the rail is ad-free by construction (§3.3), the ad
         well can never adopt card styling (§18), commercial chrome is heavier
         than display chrome (S7).
     L2  chromatic — four indigos and nothing else is brand. Green / amber / red
         belong to the evidence scale alone; --surface-ad is the one near-neutral
         on the site. NO hex value appears in this file outside the :root block;
         every other colour is a token or a color-mix() of a token.
     L3  mono-numeral — every numeral that is a FACT is --font-mono with
         font-variant-numeric: tabular-nums lining-nums. Prose numerals stay in
         the body serif. No Croatian text ever enters the mono stack.

   ZERO external requests. System fonts only. No @import, no url(), no image.

    1. Design tokens (:root)
    2. Reset / base + the L3 numeral utilities
    3. Layout (container, bands, the three-zone .apd-article grid, .apd-rail)
    4. Buttons + links + form fields
    5. Header / nav / masthead (imprint-stack)
    6. Hero (lookup-board)
    7. Trust signals (.apd-trust) / Open Now
    8. Cards (data-row) + hub/silo grids
    9. FAQ accordion
   10. CTA banner
   11. Testimonials
   12. E-E-A-T (byline, checked, author box, sources, correction, credentials,
       awards, team, guarantees, freshness, myth/fact)
   13. Breadcrumbs / prose / blog / pagination / read-more
   14. Footer (the dark floor)
   15. Utilities / a11y / motion
   16. Newsletter + contact form layout
   17. Signature object (.apd-record, .apd-nutri, .apd-matrix, evidence kit)
   18. Display-ad slots (.apd-ad*) + commerce (.apd-commercial, .apd-disclosure)
   19. Misc components (video facade, map embed, tool page, consent banner)
   20. evidence-desk profile overrides (dp-* axes) — texture: ledger-rule
   ====================================================================== */


/* 1. TOKENS -------------------------------------------------------------
   DESIGN-ALLOCATION §3.4, verbatim, plus the documented additions in 1.3.
   DESIGN-CONSTRAINTS §6.2: every custom property referenced anywhere in this
   file must exist here, or the whole declaration is dropped and elements
   overlap. */
:root{
	/* ---- colour: brand (four indigos, and nothing else — law L2) ---- */
	--primary:#2A1B54; --accent:#4B30A8; --accent-hover:#3C2586; --accent-on-dark:#B9A8F5;
	--cta-ink:#FFFFFF;
	/* ---- colour: ink + surface ---- */
	--text:#1A1826; --muted:#55506B;
	--surface:#F4F3F8; --surface-2:#EAE8F2; --surface-ad:#EFEEEE;
	--border:#D5D2E2; --rule:#DFDCEA; --rule-strong:#ADA8C2;
	/* ---- colour: dark floor (footer band; no full dark mode ships) ---- */
	--dark-surface:#17142A; --dark-surface-2:#211D3A; --dark-text:#E9E7F2;
	--dark-muted:#A9A4BF; --dark-border:#332E52;
	/* ---- colour: semantics (evidence certainty ONLY) ---- */
	--ev-strong:#1C6B3A; --ev-moderate:#8A6407; --ev-limited:#A63423; --ev-none:#5F5B72;
	/* ---- type ---- */
	--font-display:Candara,"Trebuchet MS",Cantarell,Ubuntu,"Segoe UI",system-ui,sans-serif;
	--font-body:Charter,"Bitstream Charter",Constantia,Georgia,"Noto Serif","Liberation Serif",serif;
	--font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Liberation Sans",sans-serif;
	--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;
	--fs-body:1.1875rem; --lh-body:1.62;
	--fs-h1:2.45rem; --fs-h2:2.05rem; --fs-h3:1.71rem; --fs-h4:1.43rem;
	--lh-h1:1.14; --lh-h2:1.20; --lh-h3:1.30; --lh-h4:1.35;
	--tr-h1:-.012em; --tr-h2:-.008em; --tr-h3:-.004em;
	--fs-label:.6875rem; --tr-label:.14em;
	/* ---- space ---- */
	--space-1:.25rem;  --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
	--space-5:1.5rem;  --space-6:2rem;   --space-8:2.5rem; --space-12:3.5rem;
	--space-16:4rem;   --space-20:5.5rem;
	--space-ad-gap:4.5rem;              /* S1 — no component other than .apd-ad may use this */
	/* ---- layout ---- */
	--gutter:1.5rem; --rail-w:8.75rem; --rail-gap:1.75rem;
	--measure:40rem; --measure-wide:46rem;      /* wide = Hub 7, which has no aside */
	--aside-w:300px; --aside-gap:2.5rem;
	--ad-bleed:5rem;                    /* desktop right-bleed only — §18.2 and DESIGN-ALLOCATION §11 W6 */
	--header-h:0px;                     /* header is NOT sticky; exposed so the ad offset is computed */
	--sticky-top:1.5rem;
	--row-h:2.25rem;                    /* table row height AND the ledger-rule pitch */
	/* ---- form ---- */
	--radius-sm:0; --radius-md:2px; --radius-lg:2px;   /* a record has no radius */
	--shadow-sm:none; --shadow-md:none; --shadow-lg:none; /* elevation is carried by hairlines */
	--focus-ring:2px solid var(--accent); --focus-offset:2px;

	/* ---- 1.3 ADDED TOKENS — not in §3.4. Each exists because a component in
	     §5–§19 needs it and §3.4 did not name it. No new hue is introduced:
	     every added colour is a color-mix() of an existing token, so law L2's
	     "list the distinct hues" audit still returns four indigos + four
	     evidence colours + one neutral. ---- */

	/* page shell: 24 gutter + 140 rail + 28 + 640 body + 40 + 300 aside + 24
	   gutter = 1196px — the exact width DESIGN-ALLOCATION §6.2 proves fits at
	   1200px with 4px slack. Header, hero and footer share it so rows line up. */
	--page-max:1196px;

	/* secondary type sizes used across the component kit */
	--fs-lead:1.0625rem;   /* .apd-tldr body, .apd-row__title, lede paragraphs   */
	--fs-small:.9375rem;   /* .apd-row__dek, table cells, secondary prose        */
	--fs-meta:.8125rem;    /* byline lines, rail stamps, figure-source lines     */
	--fs-micro:.75rem;     /* thead labels, badges                               */
	--lh-label:1.35;       /* §4.3 "rail label 1.35"                             */
	--lh-cell:1.25;        /* §4.3 "table cell 1.25"                             */
	--lh-tight:1.45;       /* provenance body, notes, captions                   */
	--tr-h4:0;             /* §4.3 gives H4 tracking as 0; named for completeness*/
	--tr-wordmark:.09em;   /* §2.6 wordmark tracking                             */
	--tr-thead:.09em;      /* §5 thead tracking                                  */

	/* component metrics */
	--pip-size:1rem;             /* §8 #2: "4 pips, 1rem squares"                */
	--pip-gap:.25rem;
	--rail-rule-w:3px;           /* the rail's mobile left rule; also .apd-tldr  */
	--accent-rule-w:3px;         /* .apd-lookup bottom rule, .apd-correction     */
	--ad-nofill-w:2.5rem;        /* width of the empty-well hairline mark        */
	--field-h:2.875rem;          /* search input / button height (>=44px target) */
	--tap-min:44px;              /* minimum interactive target                   */
	--readmore-h:480px;          /* collapsed height of a JS read-more block     */

	/* ledger-rule texture (§20 declares these on the texture class; they are
	   mirrored here so a var() can never resolve to nothing) */
	--lr-pitch:var(--row-h);
	--lr-ink:color-mix(in srgb, var(--primary) 5%, transparent);
	--lr-band:color-mix(in srgb, var(--primary) 9%, transparent);
	--lr-offset:0;

	/* evidence fill, re-pointed by the .apd-evidence--* modifiers */
	--ev-fill:var(--ev-none);
}

/* 1.4 <600px overrides — §3.4, verbatim */
@media(max-width:599px){
	:root{ --fs-body:1.125rem; --lh-body:1.60; --fs-h1:1.85rem;
	       --gutter:1.25rem; --space-ad-gap:2.75rem; }
}


/* 2. RESET / BASE ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
	scroll-behavior:smooth;
	scroll-padding-top:var(--space-6);
}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul{margin:0;padding:0;}
ol[class],ul[class]{list-style:none;}
img,svg,video{max-width:100%;height:auto;display:block;}
svg{flex:none;}               /* intrinsic width/height attrs stay authoritative */
button,input,select,textarea{font:inherit;color:inherit;}
table{border-collapse:collapse;}
:target{scroll-margin-top:var(--space-6);}

body{
	background:var(--surface);
	color:var(--text);
	font-family:var(--font-body);
	font-size:var(--fs-body);
	line-height:var(--lh-body);
	font-weight:400;
	/* overflow-x:clip (not hidden) lets the mobile ad well bleed to the viewport
	   edge without creating a scroll container — position:sticky on the rail and
	   on .apd-ad--sidebar-sticky keeps working. */
	overflow-x:clip;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
}

/* §4.3: sentence case on H1–H4, never uppercase. The display face is the
   humanist sans; the body serif never sets a heading. Negative tracking H1–H3. */
h1,h2,h3,h4,h5,h6,
.apd-h1,.apd-h2,.apd-h3,.apd-h4{
	font-family:var(--font-display);
	font-weight:600;
	color:var(--primary);
	text-wrap:balance;
}
h1,.apd-h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1);}
h2,.apd-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);}
h3,.apd-h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);}
h4,.apd-h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--tr-h4);}
h5,h6{font-size:var(--fs-lead);line-height:var(--lh-h4);letter-spacing:0;}

p{margin:0 0 var(--space-5);}
p:last-child{margin-bottom:0;}

/* §4.2 prohibition 1: the body serif is capped at 700. Charter Black and Charter
   Black Italic are missing Đ; font-weight:900 on a <strong> would silently swap
   that one glyph mid-word. */
strong,b{font-weight:700;}
em,i{font-style:italic;}

a{color:var(--accent);text-underline-offset:.16em;text-decoration-thickness:from-font;}
a:hover{color:var(--accent-hover);}
@media(hover:hover){a:hover{text-decoration-thickness:2px;}}

blockquote{margin:0 0 var(--space-5);}
hr{border:0;border-top:1px solid var(--rule);margin:var(--space-8) 0;}
small{font-size:var(--fs-meta);}
sup{font-size:.7em;line-height:0;vertical-align:super;}

/* The prose flow container — the article's own text stream. Ads are NEVER a
   descendant of this element (S4); they are siblings of it. */
.apd-prose > * + *{margin-top:var(--space-5);}
.apd-prose h2{margin-top:var(--space-12);}
.apd-prose h3{margin-top:var(--space-8);}
.apd-prose ul,.apd-prose ol{padding-left:1.35em;}
.apd-prose li + li{margin-top:var(--space-2);}
.apd-prose ul{list-style:square;}
.apd-prose ol{list-style:decimal;}
.apd-prose li::marker{color:var(--rule-strong);}
.apd-prose ol li::marker{font-family:var(--font-mono);font-size:.85em;color:var(--muted);}

/* The eyebrow / rail-label treatment — §4.3, used by a dozen components. */
.apd-label,
.apd-eyebrow{
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	line-height:var(--lh-label);
	text-transform:uppercase;
	letter-spacing:var(--tr-label);
	color:var(--muted);
	font-weight:600;
	margin:0;
}

/* 2.4 NUMERALS — the L3 utilities.
   .apd-num wraps every numeral that is a FACT: kcal, grams, prices, dates,
   counts, per-row figures. Croatian text never goes inside it. */
.apd-num{
	font-family:var(--font-mono);
	font-variant-numeric:tabular-nums lining-nums;
	font-feature-settings:"zero" 0;   /* no slashed zero — a publication, not a terminal */
	letter-spacing:0;
}
.apd-unit{font-family:var(--font-mono);color:var(--muted);white-space:nowrap;}
/* Household measures (žlica, žličica, šalica, komad, kriška, dl) are Croatian
   words — DESIGN-ALLOCATION §5 markup rule 4 puts them in the UI sans, never in
   mono. */
.apd-measure{font-family:var(--font-ui);font-size:.95em;color:var(--muted);}


/* 3. LAYOUT ------------------------------------------------------------- */

/* 3.1 container / bands / sections */
.apd-container,
.container{
	width:100%;
	max-width:var(--page-max);
	margin-inline:auto;
	padding-inline:var(--gutter);
}
.apd-container--narrow,
.content-narrow{max-width:calc(var(--measure) + 2 * var(--gutter));margin-inline:auto;}

.apd-band,
.section{padding-block:var(--space-12);}
.apd-band + .apd-band{border-top:1px solid var(--rule);}
/* .band--tinted is the texture's own hook (§20) — keep the name */
.band--tinted,
.apd-band--tinted,
.section--surface{background:var(--surface-2);}
.section--surface{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
/* dark feature band — the same floor the footer uses */
.section--dark{background:var(--dark-surface);color:var(--dark-text);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--dark-text);}
.section--dark a{color:var(--accent-on-dark);}

.apd-section{margin-block:var(--space-12);}
.apd-section-head,
.section-head{
	display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3) var(--space-4);
	padding-bottom:var(--space-3);
	border-bottom:2px solid var(--rule-strong);
	margin-bottom:var(--space-6);
}
.apd-section-head__title,
.section-head__title{font-size:var(--fs-h3);margin:0;}
.apd-section-head__more,
.section-head__more{margin-left:auto;font-family:var(--font-ui);font-size:var(--fs-meta);}
.section-head__eyebrow{
	flex:1 1 100%;
	font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
	text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--muted);
	margin:0;
}
.section-head p{flex:1 1 100%;margin:0;font-family:var(--font-body);font-size:var(--fs-lead);color:var(--muted);max-width:60ch;}

/* generic grids kept for the surviving donor templates — flat, ruled, no cards */
.grid{display:grid;gap:var(--space-6);grid-template-columns:minmax(0,1fr);}
@media(min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:960px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* 3.2 .apd-article — the three-zone grid (DESIGN-ALLOCATION §6.2)
   Apparatus left · article centre · commerce right.

   Two deliberate arithmetic corrections to the §6.2 snippet, neither a
   redesign:
   (a) §6.2 writes `column-gap: 1.75rem 2.5rem`. column-gap is a single-value
       property, so that declaration is dropped and BOTH gaps collapse to 0.
       Two different column gaps require explicit gutter tracks. The track list
       below reproduces the document's own numbers exactly:
          140 + 28 + 640 + 40 + 300 = 1148  (+ 2 x 24 gutter = 1196 = --page-max)
       so at 1200px the layout still fits with the 4px slack §6.2 states.
   (b) §6.2 writes `minmax(0,1fr)` for <1024px, but the measure table it ships
       requires the single column to CAP at 40rem (768px viewport -> 640px
       column, not 720px). minmax(0, var(--measure)) with justify-content:center
       reproduces every row of that table. */
.apd-article{
	display:grid;
	grid-template-columns:minmax(0,var(--measure));   /* <1024px */
	column-gap:0;
	row-gap:0;
	width:100%;
	max-width:var(--page-max);
	margin-inline:auto;
	padding-inline:var(--gutter);
	justify-content:center;
}
/* Hub 7 (Mitovi): no aside at any width, measure opens to 46rem (§6.2, §7.5) */
.apd-article--wide{--measure:var(--measure-wide);}

.apd-article__head,
.apd-body,
.apd-rail,
.apd-aside{min-width:0;}

.apd-body{grid-column:1;}
.apd-article__head{grid-column:1;}
.apd-rail{grid-column:1;}
.apd-aside{grid-column:1;}

/* full-width escape: a block that spans rail + body (§6.3 — "the rail never
   renders empty": a section with no marker, stamp or figure number spans both
   columns rather than leaving a 140px hole). */
.apd-section--full,
.apd-article__full{grid-column:1 / -1;}

@media(min-width:1024px){                 /* body + aside; rail flips inline */
	.apd-article{
		grid-template-columns:minmax(0,var(--measure)) var(--aside-gap) var(--aside-w);
	}
	.apd-article--wide{grid-template-columns:minmax(0,var(--measure));}
	.apd-article__head,
	.apd-body,
	.apd-rail{grid-column:1;}
	.apd-aside{grid-column:3;grid-row:1 / span 99;}
	.apd-article--wide .apd-aside{display:none;}
	.apd-section--full,
	.apd-article__full{grid-column:1;}
}

@media(min-width:1200px){                 /* rail + body + aside */
	.apd-article{
		grid-template-columns:
			var(--rail-w)             /* 1 · apparatus */
			var(--rail-gap)           /* 2 · gutter    */
			minmax(0,var(--measure))  /* 3 · article   */
			var(--aside-gap)          /* 4 · gutter    */
			var(--aside-w);           /* 5 · commerce  */
	}
	.apd-article--wide{
		grid-template-columns:var(--rail-w) var(--rail-gap) minmax(0,var(--measure));
	}
	.apd-article__head{grid-column:3;}
	.apd-body{grid-column:3;}
	.apd-aside{grid-column:5;grid-row:1 / span 99;}
	.apd-rail{
		grid-column:1;
		grid-row:1 / span 99;
		position:sticky;
		top:var(--sticky-top);
		align-self:start;
	}
	.apd-section--full,
	.apd-article__full{grid-column:1 / 4;}
}

/* 3.3 .apd-rail — the apparatus gutter.
   §2.4 deltas vs the unbuilt field-notes allocation: 8.75rem not 8.5; gap
   1.75rem not 2.5; LEFT-aligned; NO border-right divider on desktop; flip at
   1200px not 1024px; carries the sticky TOC and per-claim source markers. */
.apd-rail{
	font-family:var(--font-ui);
	font-size:var(--fs-meta);
	line-height:var(--lh-label);
	color:var(--muted);
	/* <1200px the rail is a left-ruled block in normal flow (§6.3 mobile #4) */
	border-left:var(--rail-rule-w) solid var(--rule-strong);
	padding-left:var(--space-4);
	margin-block:var(--space-6);
}
@media(min-width:1200px){
	.apd-rail{
		border-left:0;                 /* §2.4: no divider on desktop — whitespace  */
		padding-left:0;                /* and the rail's own type scale separate it */
		margin-block:0;
		text-align:left;               /* §2.4: left-aligned, hanging on the edge   */
	}
}
.apd-rail > * + *{margin-top:var(--space-5);}
.apd-rail__block{display:block;}
.apd-rail__label{
	font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tr-label);
	font-weight:600;color:var(--muted);margin:0 0 var(--space-2);
}
/* per-claim source markers, baseline-aligned to the claim they qualify */
.apd-rail__marker{
	display:block;
	font-family:var(--font-mono);
	font-variant-numeric:tabular-nums lining-nums;
	font-size:var(--fs-meta);
	color:var(--accent);
}
.apd-rail__marker + .apd-rail__marker{margin-top:var(--space-1);}
/* checked-on stamp — meta-driven, never hard-coded */
.apd-rail__stamp{
	display:block;
	border-top:1px solid var(--rule);
	padding-top:var(--space-2);
	color:var(--muted);
}
.apd-rail__stamp .apd-num{font-size:var(--fs-meta);color:var(--text);}

/* ---- THE RAIL'S AD-FREE COVENANT, ENFORCED (DESIGN-ALLOCATION §6.4) ------
   The checking apparatus is never for sale. Note that .apd-row is deliberately
   absent from this selector and from every .apd-ad selector in this file: S3
   requires that .apd-row and .apd-ad never share a CSS rule, so the separation
   is greppable. */
.apd-rail :is(.apd-ad, .adsbygoogle, ins, iframe[src*="doubleclick"], iframe[src*="googlesyndication"]),
.apd-rail [data-slot]{display:none !important;}

/* The commerce column. Below 1024px it drops out of the grid's side position and
   stacks after the body; the ad slots inside it are display:none there anyway
   (§18), so what survives on mobile is only the editorial Povezano. */
.apd-aside{font-family:var(--font-ui);}
.apd-aside > * + *{margin-top:var(--space-6);}
/* NOTE: .apd-aside must NOT get align-self:start. It spans grid-row 1/span 99
   and stretches, which is what gives .apd-ad--sidebar-sticky a containing block
   tall enough to travel in. A content-height aside kills the sticky unit
   silently — it renders, it just never sticks. */
.apd-aside__title,
.blog-sidebar__title{
	font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
	text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--muted);
	padding-bottom:var(--space-2);border-bottom:2px solid var(--rule-strong);
	margin:0 0 var(--space-3);
}
.blog-sidebar{font-family:var(--font-ui);font-size:var(--fs-small);}
.blog-sidebar ul{list-style:none;margin:0;padding:0;}
.blog-sidebar li + li{margin-top:var(--space-2);}


/* 4. BUTTONS + FIELDS ---------------------------------------------------
   On-light and on-dark pair. --radius 2px, no shadow: a record does not float,
   so elevation is a hairline everywhere on this site. */
.btn,
.apd-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
	min-height:var(--field-h);
	padding:0 var(--space-5);
	font-family:var(--font-ui);font-size:var(--fs-small);font-weight:600;
	letter-spacing:.01em;
	color:var(--cta-ink);
	background:var(--accent);          /* 9.18:1 with --cta-ink */
	border:1px solid var(--accent);
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-sm);
	text-decoration:none;
	cursor:pointer;
}
.btn:hover,.apd-btn:hover{
	background:var(--accent-hover);    /* DARKER, never lighter (§3.2 rule 2) */
	border-color:var(--accent-hover);
	color:var(--cta-ink);
	text-decoration:none;
}
/* donor button variants, remapped onto the two-state pair */
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--cta-ink);}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn--accent{background:var(--primary);border-color:var(--primary);color:var(--cta-ink);}
.btn--accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--cta-ink);}
.apd-btn--quiet,
.btn--secondary,
.btn--ghost{
	background:none;color:var(--primary);border-color:var(--rule-strong);
}
.apd-btn--quiet:hover,
.btn--secondary:hover,
.btn--ghost:hover{background:var(--surface-2);color:var(--primary);border-color:var(--muted);}
.btn--on-dark,
.apd-btn--on-dark{
	background:var(--accent-on-dark);  /* 8.53:1 with --dark-surface ink */
	border-color:var(--accent-on-dark);
	color:var(--dark-surface);
}
.btn--on-dark:hover,
.apd-btn--on-dark:hover{
	background:var(--dark-text);border-color:var(--dark-text);color:var(--dark-surface);
}
.btn--lg{min-height:calc(var(--field-h) + var(--space-2));padding-inline:var(--space-6);font-size:var(--fs-lead);}
.btn--block{width:100%;}

/* text/search input — the one field style on the site */
.apd-field{
	font-family:var(--font-ui);
	font-size:var(--fs-small);
	height:var(--field-h);
	padding:0 var(--space-3);
	color:var(--text);
	background:var(--surface);
	border:1px solid var(--rule-strong);
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-sm);
	min-width:0;
}
.apd-field::placeholder{color:var(--muted);opacity:1;}
.apd-field:hover{border-color:var(--muted);}


/* 5. HEADER / MASTHEAD — imprint-stack (DESIGN-ALLOCATION §2.6) ----------
   Three rows. The middle row is the brief §2.5 lockup and its markup is
   REQUIRED, not optional: a two-line wordmark bisected by a wordmark-width
   hairline, with an accountable "Uređuje" line beneath. Drop either the rule or
   the editor line and the token is gone.

   THE HEADER IS NOT STICKY. This is a declaration, not an omission (§7.4): a
   ~152px sticky masthead would sit over sidebar_sticky, which is "Google-served
   ads obscuring content" — a policy violation, not a UX nit. --header-h stays
   exposed at 0px so the sticky ad's offset is computed rather than hard-coded. */
.apd-header,
.site-header{
	background:var(--surface);
	border-bottom:1px solid var(--rule);
	position:static;                 /* explicit: never sticky, never fixed */
}

/* 5.1 row 1 · trust strip.
   Accountability facts ONLY. Never a phone number, never a CTA, never the
   medical disclaimer (§1.3d). "Recenzirano: N" renders a real count or the item
   is omitted — never a fabricated number, never an em dash. */
.apd-trust,
.trust-bar{
	background:var(--surface-2);
	border-bottom:1px solid var(--rule);
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	line-height:var(--lh-label);
	letter-spacing:.06em;
	color:var(--muted);
}
.apd-trust__list,
.trust-bar__inner{
	display:flex;flex-wrap:wrap;align-items:center;
	gap:var(--space-2) var(--space-4);
	padding-block:var(--space-2);
	list-style:none;margin:0;
}
.apd-trust__item{display:flex;align-items:center;gap:var(--space-2);}
.apd-trust__item + .apd-trust__item::before{
	content:"";
	width:1px;height:.85em;
	background:var(--rule-strong);
	margin-right:var(--space-2);
}
.apd-trust__item a{color:var(--muted);text-decoration:underline;}
.apd-trust__item a:hover{color:var(--accent);}
.apd-trust .apd-num{font-size:1em;color:var(--text);}
/* mobile: the strip collapses to two items — mark the droppables (§2.6) */
@media(max-width:719px){
	.apd-trust__item--optional{display:none;}
	.apd-trust__item--optional + .apd-trust__item::before{display:none;}
}

/* 5.2 row 2 · THE LOCKUP */
.apd-lockup-row{border-bottom:1px solid var(--rule);}
.apd-lockup-row__inner,
.site-header__inner{
	display:flex;flex-wrap:wrap;align-items:flex-end;
	gap:var(--space-4) var(--space-8);
	padding-block:var(--space-5);
}
.apd-lockup,
.site-branding{display:block;flex:1 1 auto;min-width:0;}

/* The wordmark is TYPE ONLY — no pictogram, no mark, no leaf (cliché 1). That is
   also what lets the identity survive a rename to Kalorimetar or Nutritivni
   atlas at the cost of one string. */
.apd-lockup__mark,
.site-title a{
	display:block;
	width:max-content;               /* the hairline is the width of the WORDMARK, */
	max-width:100%;                  /* not of the container — §2.6, load-bearing  */
	font-family:var(--font-display);
	font-size:clamp(1.35rem,1.05rem + 1.25vw,1.72rem);
	font-weight:600;
	line-height:1.05;
	letter-spacing:var(--tr-wordmark);
	text-transform:uppercase;
	color:var(--primary);
	text-decoration:none;
	padding-bottom:var(--space-2);
	border-bottom:1px solid var(--rule-strong);   /* the bisecting hairline */
}
.site-title{margin:0;font-size:inherit;}
a.apd-lockup__mark:hover,
.site-title a:hover{color:var(--accent);text-decoration:none;}
.apd-lockup__editor,
.site-tagline{
	margin-top:var(--space-2);
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	line-height:var(--lh-label);
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:var(--tr-label);
	color:var(--muted);
}
.apd-lockup__editor a{color:var(--muted);text-decoration:underline;}
.apd-lockup__editor a:hover{color:var(--accent);}
/* the tagline is optional chrome; the editor line is not */
.apd-lockup__tagline{
	margin-top:var(--space-2);
	font-family:var(--font-body);
	font-size:var(--fs-meta);
	color:var(--muted);
	text-transform:none;
	letter-spacing:0;
	font-weight:400;
}

/* 5.3 header search — moves into the hero below 900px (§2.6) */
.apd-headsearch,
.header-search{display:flex;gap:var(--space-2);flex:0 0 auto;}
.header-actions{display:flex;align-items:center;gap:var(--space-3);flex:0 0 auto;}
@media(max-width:899px){.apd-headsearch,.header-search{display:none;}}
.apd-header-cta{
	display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
	min-height:var(--field-h);padding:0 var(--space-4);
	font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
	color:var(--primary);background:none;
	border:1px solid var(--rule-strong);border-radius:var(--radius-md);
	text-decoration:none;white-space:nowrap;
}
.apd-header-cta:hover{background:var(--surface-2);color:var(--primary);text-decoration:none;}
@media(max-width:767px){.apd-header-cta{display:none;}}

/* 5.4 row 3 · nav.
   Full-width nav on a 1px top rule. Desktop dropdowns are pure CSS (:hover
   scoped to hover-capable pointers, plus :focus-within) so the nested menu works
   with JS off. Mobile is a JS accordion: the collapse only engages once the
   inline bootstrap script has added .apd-has-js to <html>, so a JS-off reader
   gets a plain, fully expanded, fully readable nav. */
.apd-navbar{background:var(--surface);}
.apd-navbar__inner{
	display:flex;align-items:center;gap:var(--space-4);
	min-height:var(--tap-min);
}

.apd-navtoggle,
.menu-toggle{
	display:none;
	align-items:center;gap:var(--space-2);
	min-height:var(--tap-min);
	padding:var(--space-2) 0;
	font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
	text-transform:uppercase;letter-spacing:.08em;
	color:var(--primary);
	background:none;border:0;border-radius:var(--radius-sm);
	cursor:pointer;
}
/* the burger exists only below the desktop nav breakpoint, and only once the
   inline bootstrap has added .apd-has-js — a JS-off reader gets the plain,
   fully expanded list instead of a button that does nothing */
@media(max-width:899px){
	.apd-has-js .apd-navtoggle,
	.js .menu-toggle{display:inline-flex;}
}
.apd-navtoggle__bars{display:block;}

.apd-nav,
.main-nav{flex:1 1 auto;min-width:0;}
.apd-nav__list,
.main-nav > ul{
	display:flex;flex-wrap:wrap;align-items:stretch;
	gap:0 var(--space-5);
	list-style:none;margin:0;padding:0;
}
.apd-nav__item,
.main-nav li{position:relative;}
.apd-nav__link,
.main-nav a{
	display:inline-flex;align-items:center;gap:var(--space-1);
	min-height:var(--tap-min);
	padding-block:var(--space-2);
	font-family:var(--font-display);
	font-size:1rem;
	font-weight:600;
	letter-spacing:-.002em;
	color:var(--primary);
	text-decoration:none;
	border-bottom:2px solid transparent;
}
.apd-nav__link:hover,
.apd-nav__link:focus-visible,
.main-nav a:hover{color:var(--accent);text-decoration:none;}
.apd-nav__link[aria-current="page"],
.main-nav .current-menu-item > a{border-bottom-color:var(--primary);color:var(--primary);}

/* the dropdown caret is inline SVG in the markup and carries intrinsic
   width/height (DESIGN-CONSTRAINTS §6.3) — CSS only rotates it */
.apd-nav__caret{transition:transform .15s ease;}

.apd-nav__sub,
.main-nav .sub-menu{list-style:none;margin:0;padding:0;}
.apd-nav__sublink,
.main-nav .sub-menu a{
	display:block;
	min-height:0;
	padding:var(--space-2) var(--space-3);
	font-family:var(--font-ui);
	font-size:var(--fs-small);
	font-weight:400;
	color:var(--text);
	text-decoration:none;
	border-bottom:0;
}
.apd-nav__sublink:hover,
.main-nav .sub-menu a:hover{background:var(--surface-2);color:var(--accent);}

/* -- desktop: real nested dropdown -- */
@media(min-width:900px){
	.apd-navbar{border-top:1px solid var(--rule);}
	.apd-nav__sub,
	.main-nav .sub-menu{
		position:absolute;top:100%;left:calc(-1 * var(--space-3));z-index:20;
		min-width:15rem;
		background:var(--surface);
		border:1px solid var(--border);
		border-top:2px solid var(--primary);
		border-radius:var(--radius-sm);
		box-shadow:var(--shadow-md);
		padding-block:var(--space-2);
		/* visibility, not display:none — so it can animate and stays a11y-sane */
		opacity:0;visibility:hidden;transform:translateY(-2px);
		transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
	}
	.apd-nav__item--has-children:focus-within > .apd-nav__sub,
	.apd-nav__item--has-children > .apd-nav__sub:hover,
	.apd-nav__item--has-children > .apd-nav__toggle[aria-expanded="true"] + .apd-nav__sub,
	.main-nav .menu-item-has-children:focus-within > .sub-menu,
	.main-nav .menu-item-has-children > .sub-menu:hover{
		opacity:1;visibility:visible;transform:none;transition-delay:0s;
	}
	@media(hover:hover){
		.apd-nav__item--has-children:hover > .apd-nav__sub,
		.main-nav .menu-item-has-children:hover > .sub-menu{
			opacity:1;visibility:visible;transform:none;transition-delay:0s;
		}
	}
	/* the accordion button is a mobile affordance only; on desktop the CSS
	   :hover / :focus-within pair opens the submenu, so the button leaves the
	   tab order entirely rather than sitting in it invisibly */
	.apd-nav__toggle{display:none;}
	.apd-nav__item--has-children:hover .apd-nav__caret,
	.apd-nav__item--has-children:focus-within .apd-nav__caret{transform:rotate(180deg);}
	.menu-toggle{display:none;}
}

/* -- mobile: accordion -- */
@media(max-width:899px){
	.apd-navbar__inner{flex-direction:column;align-items:stretch;}
	.apd-navtoggle{align-self:flex-start;}   /* not a full-width bar */
	.apd-nav,.main-nav{padding-bottom:var(--space-3);}
	.apd-nav__list,.main-nav > ul{flex-direction:column;gap:0;}
	.apd-nav__item,.main-nav > ul > li{border-top:1px solid var(--rule);}
	.apd-nav__item:first-child,.main-nav > ul > li:first-child{border-top:0;}
	.apd-nav__link,.main-nav a{padding-block:var(--space-3);font-size:var(--fs-lead);}
	.apd-nav__item--has-children{
		display:grid;grid-template-columns:minmax(0,1fr) var(--tap-min);
		align-items:center;
	}
	.apd-nav__item--has-children > .apd-nav__sub{grid-column:1 / -1;}
	.apd-nav__toggle{
		display:inline-flex;align-items:center;justify-content:center;
		width:var(--tap-min);height:var(--tap-min);
		background:none;border:0;cursor:pointer;color:var(--primary);
	}
	.apd-nav__toggle[aria-expanded="true"] .apd-nav__caret{transform:rotate(180deg);}
	.apd-nav__sub,.main-nav .sub-menu{
		padding-left:var(--space-4);
		border-left:1px solid var(--rule);
		margin:0 0 var(--space-3) var(--space-2);
	}
	.apd-nav__sublink,.main-nav .sub-menu a{
		padding-inline:0;min-height:var(--tap-min);display:flex;align-items:center;
	}

	/* JS-off: everything above is already visible and usable.
	   JS-on: collapse until opened. */
	.apd-has-js .apd-nav,
	.js .main-nav{display:none;}
	.apd-has-js .apd-nav.is-open,
	.js .main-nav.is-open{display:block;}
	.apd-has-js .apd-nav__sub,
	.js .main-nav .sub-menu{display:none;}
	.apd-has-js .apd-nav__toggle[aria-expanded="true"] + .apd-nav__sub,
	.apd-has-js .apd-nav__sub.is-open,
	.js .main-nav .menu-item-has-children.is-open > .sub-menu{display:block;}
}


/* 6. HERO — lookup-board (DESIGN-ALLOCATION §2.3) ------------------------
   The hero IS the lookup, with its own answer already showing. No photograph,
   no CTA-bait, no research figure. A 3px --primary rule along the BOTTOM edge
   closes the masthead region; it never opens a coloured band.
   LCP element is the H1 text block: the form and the list follow it in source
   order so neither can become the LCP candidate. */
.apd-lookup{
	background:var(--surface);
	border-bottom:var(--accent-rule-w) solid var(--primary);
	padding-block:var(--space-12) var(--space-8);
}
.apd-lookup__inner{max-width:var(--page-max);}
.apd-lookup__title{
	font-size:var(--fs-h1);
	line-height:var(--lh-h1);
	letter-spacing:var(--tr-h1);
	max-width:22ch;
	margin:0;
}
.apd-lookup__deck{
	margin:var(--space-4) 0 0;
	font-family:var(--font-body);
	font-size:var(--fs-lead);
	color:var(--muted);
	max-width:52ch;
}

/* the lookup form — a real GET form over the site's own archive. Works with JS
   off and returns a real page. JS only ADDS a typeahead. */
.apd-lookup__form{
	position:relative;
	margin-top:var(--space-6);
	max-width:34rem;
}
.apd-lookup__label{
	display:block;
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	text-transform:uppercase;
	letter-spacing:var(--tr-label);
	font-weight:600;
	color:var(--muted);
	margin-bottom:var(--space-2);
}
.apd-lookup__field{display:flex;gap:var(--space-2);}
.apd-lookup__input{flex:1 1 auto;}
.apd-lookup__submit{flex:0 0 auto;}
/* typeahead panel is absolutely positioned so it can never shift layout */
.apd-lookup__typeahead{
	position:absolute;z-index:15;left:0;right:0;top:100%;
	margin-top:var(--space-1);
	background:var(--surface);
	border:1px solid var(--border);
	border-top:2px solid var(--primary);
	max-height:19rem;overflow-y:auto;
}
.apd-lookup__typeahead[hidden]{display:none;}

/* the standing list — 6 rows in data-row form, editor-ordered, never by traffic
   (which would make it a popularity widget). Reserved height so a slow query
   cannot shift the page. */
.apd-lookup__list{
	margin-top:var(--space-8);
	min-height:calc(6 * var(--row-h));
}
.apd-lookup__more{
	margin-top:var(--space-4);
	font-family:var(--font-ui);
	font-size:var(--fs-small);
}
@media(max-width:599px){
	.apd-lookup{padding-block:var(--space-8) var(--space-6);}
	.apd-lookup__form{max-width:none;}
}

/* Donor hero shell, kept flat so a surviving page template cannot reintroduce a
   floating card or a photographic field (hero: boxed-card is dead). */
.hero{background:var(--surface);border-bottom:var(--accent-rule-w) solid var(--primary);}
.hero__inner{padding-block:var(--space-12) var(--space-8);}
.hero__media,.hero__form-shell{display:none;}
.hero__eyebrow{
	display:block;font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
	text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--muted);
	margin-bottom:var(--space-3);
}
.hero__title{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1);max-width:22ch;margin:0;}
.hero__subtitle{margin:var(--space-4) 0 0;font-family:var(--font-body);font-size:var(--fs-lead);color:var(--muted);max-width:52ch;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);}


/* 7. TRUST SIGNALS / OPEN NOW -------------------------------------------
   NAP is empty on this build — this is a publication, not a business — so every
   call/text/hours affordance self-hides. The chrome below exists only so a
   surviving donor part degrades to quiet apparatus rather than to a brand
   gesture. */
.trust-badges,
.credentials,
.awards{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:center;padding-block:var(--space-5);}
.trust-badge,
.trust-chip,
.credential{
	display:inline-flex;align-items:center;gap:var(--space-2);
	font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--text);
	border:1px solid var(--rule-strong);border-radius:var(--radius-sm);
	padding:var(--space-2) var(--space-3);
	background:none;
}
.credential__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;color:var(--primary);}
.trust-metric{display:flex;flex-direction:column;font-family:var(--font-ui);}
.trust-metric__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-h4);color:var(--primary);line-height:1.1;}
.trust-metric__label{font-size:var(--fs-meta);color:var(--muted);}
/* No star rating on a food, ever (banned cliché). Where the donor's testimonial
   part still emits stars they are ink, never a chroma. */
.stars{display:inline-flex;color:var(--muted);}
.open-now{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-size:var(--fs-meta);}
.open-now__dot{width:8px;height:8px;background:var(--muted);border-radius:0;}
.open-now.is-open .open-now__dot{background:var(--ev-strong);}
.open-now.is-closed .open-now__dot{background:var(--ev-limited);}


/* 8. CARDS — data-row (DESIGN-ALLOCATION §2.5) --------------------------
   A flat ruled record row. There is no card. There is no <img> and no
   aspect-ratio box anywhere in the component, so "cards must look finished with
   no image" is satisfied by construction rather than by discipline.
   NOTE (S3): .apd-row never shares a rule with .apd-ad, anywhere in this file. */
.apd-rows{list-style:none;margin:0;padding:0;}

.apd-row{
	display:grid;
	grid-template-columns:4.5rem minmax(0,1fr) 7rem;   /* figure · text · meta */
	column-gap:var(--space-4);
	align-items:baseline;
	padding:var(--space-3) 0;
	border-top:1px solid var(--rule);
	background:none;            /* never a fill */
	border-radius:0;            /* never a radius */
	box-shadow:none;            /* never a shadow */
}
.apd-row:first-child{border-top-width:2px;border-top-color:var(--rule-strong);}
.apd-row:last-child{border-bottom:2px solid var(--rule-strong);}
.apd-row__figure{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;
                 font-size:1.0625rem;text-align:right;color:var(--primary);}
.apd-row__title{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;
                line-height:1.3;letter-spacing:-.004em;}
.apd-row__dek{font-family:var(--font-body);font-size:.9375rem;color:var(--muted);margin-top:.15rem;}
.apd-row__meta{font-family:var(--font-mono);font-size:.8125rem;color:var(--muted);
               text-align:right;font-variant-numeric:tabular-nums;}
.apd-row:hover .apd-row__title,
.apd-row:focus-within .apd-row__title{text-decoration:underline;text-underline-offset:.18em;}
@media(max-width:599px){
	.apd-row{grid-template-columns:3.75rem minmax(0,1fr);}
	.apd-row__meta{grid-column:2;text-align:left;margin-top:.2rem;}
}
/* the title's link inherits the row's typography — no coloured title link, which
   is what separates data-row from result-card (§2.5 "what it is not") */
.apd-row__title a{color:var(--primary);text-decoration:none;}
.apd-row__body{min-width:0;}
/* the first column holds whatever the row's number IS: kcal/100 g on a food row,
   the evidence pip on an article row, the child count on a hub row. */
.apd-row__figure .apd-unit{display:block;font-size:.6875rem;line-height:1.2;}
.apd-row__figure--pip{display:flex;justify-content:flex-end;}

/* Donor .card / .post-list entries, re-skinned to the record gesture: a top
   hairline, no fill, no radius, no shadow, no image box. */
.card,
.post-list > article{
	display:flex;flex-direction:column;gap:var(--space-2);
	background:none;border:0;border-top:1px solid var(--rule);
	border-radius:0;box-shadow:none;
	padding-block:var(--space-4);
}
.card__media,.post-thumb{display:none;}
.card__title{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;margin:0;letter-spacing:-.004em;}
.card__title a{color:var(--primary);text-decoration:none;}
.card__title a:hover{text-decoration:underline;text-underline-offset:.18em;}
.card__excerpt{font-family:var(--font-body);font-size:var(--fs-small);color:var(--muted);margin:0;}
.card__cta{margin-top:auto;font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;color:var(--accent);}
.card__body{display:contents;}

/* Hub / silo link groups — the topic grid that survives as [apd_teme]. */
.silo,
.local-areas{margin-block:var(--space-12);padding-block:var(--space-8);border-top:2px solid var(--rule-strong);}
.silo__heading,
.local-areas__heading{font-size:var(--fs-h3);margin:0 0 var(--space-5);}
.silo__links,
.area-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0;}
.silo__links a,
.area-chips a{
	display:inline-flex;align-items:center;min-height:var(--tap-min);
	padding:var(--space-2) var(--space-3);
	font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
	color:var(--primary);text-decoration:none;
	border:1px solid var(--rule-strong);border-radius:var(--radius-sm);
}
.silo__links a:hover,
.area-chips a:hover{background:var(--surface-2);border-color:var(--muted);color:var(--primary);}


/* 9. FAQ ACCORDION ------------------------------------------------------
   <details>-based, so it works with JS off. */
.apd-faq,
.faq{margin-block:var(--space-8);}
.faq__heading{font-size:var(--fs-h3);margin:0 0 var(--space-5);}
.faq__list{list-style:none;margin:0;padding:0;}
.apd-faq__item,
.faq__item{border-top:1px solid var(--rule);background:none;border-radius:0;box-shadow:none;}
.apd-faq__item:last-child,
.faq__item:last-child{border-bottom:1px solid var(--rule);}
.apd-faq__q,
.faq__summary{
	display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
	min-height:var(--tap-min);
	padding-block:var(--space-3);
	font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;
	color:var(--primary);
	cursor:pointer;list-style:none;
}
.apd-faq__q::-webkit-details-marker,
.faq__summary::-webkit-details-marker{display:none;}
.apd-faq__q::marker,
.faq__summary::marker{content:"";}
.faq-question{font-family:inherit;font-size:inherit;font-weight:inherit;margin:0;color:inherit;}
.apd-faq__a,
.faq__answer{padding-bottom:var(--space-4);font-family:var(--font-body);font-size:var(--fs-small);color:var(--text);}
.apd-faq__item[open] .apd-faq__caret,
.faq__item[open] .faq__chevron{transform:rotate(180deg);}
.faq__chevron{flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);}


/* 10. CTA BANNER -------------------------------------------------------
    The dark floor used as a mid-page band. No gradient, no glow, no radius. */
.cta-banner{
	background:var(--dark-surface);
	color:var(--dark-text);
	border:0;border-top:2px solid var(--primary);border-radius:0;
	padding:var(--space-12) var(--space-6);
	margin-block:var(--space-12);
}
.cta-banner h2,.cta-banner h3{color:var(--dark-text);}
.cta-banner p{color:var(--dark-muted);margin-bottom:var(--space-5);}
.cta-banner a{color:var(--accent-on-dark);}
.cta-banner__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);}


/* 11. TESTIMONIALS -----------------------------------------------------
    Kept as a ruled record list; never a floating quote card. */
.testimonials{padding-block:var(--space-12);}
.testimonials__track{display:grid;gap:0;}
.testimonial{
	background:none;border:0;border-top:1px solid var(--rule);border-radius:0;
	padding-block:var(--space-5);
}
.testimonial:last-child{border-bottom:2px solid var(--rule-strong);}
.testimonial__stars{margin-bottom:var(--space-2);}
.testimonial__text{font-family:var(--font-body);font-size:var(--fs-lead);margin:0 0 var(--space-3);}
.testimonial__author{font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;color:var(--text);}
.testimonial__location{font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);}


/* 12. E-E-A-T ----------------------------------------------------------- */

/* 12.1 .apd-byline — the byline block (brief §2.5 device 3)
   Napisao/la · Stručno pregledao/la, <degree or licence> · Objavljeno ·
   Zadnja provjera · Sljedeća provjera.
   REVIEWER HONESTY: .apd-byline__reviewer renders only when a real reviewer
   record exists. Never an empty badge, never a placeholder. The word "licenca"
   is only permitted for a chambered profession (HLK / HLJK).
   L1: this block alone renders 5–6 apparatus elements, before the rail
   contributes anything. */
.apd-byline,
.entry-meta{
	font-family:var(--font-ui);
	font-size:var(--fs-meta);
	line-height:1.5;
	color:var(--muted);
	border-top:1px solid var(--rule);
	border-bottom:1px solid var(--rule);
	padding-block:var(--space-3);
	margin-block:var(--space-5);
}
.apd-byline__line{margin:0;}
.apd-byline__line + .apd-byline__line{margin-top:var(--space-2);}
.apd-byline__role{
	font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tr-label);
	font-weight:600;color:var(--muted);
}
.apd-byline__name{color:var(--text);font-weight:600;}
.apd-byline__name a{color:var(--text);}
.apd-byline__name a:hover{color:var(--accent);}
.apd-byline__reviewer .apd-byline__name{color:var(--primary);}
.apd-byline__cred{color:var(--muted);}
.apd-byline .apd-num{color:var(--text);font-size:var(--fs-meta);}

/* Zadnja provjera / Sljedeća provjera — separate from the publish date,
   rendered next to it, never instead of it (§8 #11). */
.apd-checked,
.freshness{
	display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
	font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);
}
.apd-checked__item{display:inline-flex;align-items:baseline;gap:var(--space-2);}
.apd-checked__key{
	font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tr-label);
	font-weight:600;
}
.apd-checked__val{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;color:var(--text);}

/* 12.2 the standalone author / reviewer card at the foot of an article */
.apd-author-box,
.author-box{
	border-top:2px solid var(--rule-strong);
	padding-top:var(--space-5);
	margin-top:var(--space-8);
	font-family:var(--font-body);
	font-size:var(--fs-small);
	background:none;border-radius:0;box-shadow:none;
	display:block;
}
.apd-author-box__name,
.author-box__name{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--primary);margin:0;}
.apd-author-box__role,
.author-box__eyebrow,
.author-box__creds{
	font-family:var(--font-ui);font-size:var(--fs-label);
	text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--muted);
	margin:var(--space-1) 0 var(--space-3);
}
.apd-author-box__licence{
	font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);
	margin-top:var(--space-2);
}
.apd-author-box__licence .apd-num{color:var(--text);}
.author-box__photo{display:none;}   /* zero photographs (N1) */
.author-box__body{min-width:0;}
.author-box__social{display:flex;gap:var(--space-3);margin-top:var(--space-3);}
.author-box__all{font-family:var(--font-ui);font-size:var(--fs-meta);}
.author-archive-head{border-bottom:2px solid var(--rule-strong);padding-bottom:var(--space-4);margin-bottom:var(--space-6);}

/* 12.3 .apd-sources — Izvori (§8 #12)
   Numbered <ol>; each entry authors/institution · title · publication · year ·
   DOI/PubMed link. Expanded on desktop, collapsible on mobile. */
.apd-sources{
	border-top:2px solid var(--rule-strong);
	padding-top:var(--space-5);
	margin-top:var(--space-12);
}
.apd-sources__title{font-size:var(--fs-h4);margin:0 0 var(--space-4);}
.apd-sources__list{
	list-style:none;counter-reset:apdsrc;margin:0;padding:0;
	font-family:var(--font-body);font-size:var(--fs-small);line-height:var(--lh-tight);
}
.apd-sources__list > li{
	counter-increment:apdsrc;
	position:relative;
	padding-left:2.25rem;
	padding-block:var(--space-3);
	border-top:1px solid var(--rule);
}
.apd-sources__list > li:first-child{border-top:0;}
.apd-sources__list > li::before{
	content:counter(apdsrc) ".";
	position:absolute;left:0;top:var(--space-3);
	font-family:var(--font-mono);
	font-variant-numeric:tabular-nums lining-nums;
	font-size:var(--fs-meta);
	color:var(--muted);
}
.apd-sources__meta{display:block;color:var(--muted);margin-top:var(--space-1);}
.apd-sources__meta .apd-num{font-size:var(--fs-meta);}
/* in-text superscript marker — the mobile form of the rail's source markers */
.apd-srcmark{
	font-family:var(--font-mono);
	font-variant-numeric:lining-nums;
	font-size:.68em;line-height:0;vertical-align:super;
	color:var(--accent);text-decoration:none;
	padding-inline:.1em;
}

/* 12.4 .apd-correction — Ispravak (§8 #17)
   Dated block at the TOP of a corrected article. --ev-limited 3px left rule is
   the ONLY editorial use of the warning colour anywhere on the site. */
.apd-correction{
	border-left:var(--accent-rule-w) solid var(--ev-limited);
	background:var(--surface-2);
	padding:var(--space-4);
	margin-block:var(--space-6);
	font-family:var(--font-body);
	font-size:var(--fs-small);
	line-height:var(--lh-tight);
}
.apd-correction__title{
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	text-transform:uppercase;letter-spacing:var(--tr-label);font-weight:600;
	color:var(--muted);
	margin:0 0 var(--space-2);
}
.apd-correction__date{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;color:var(--text);}

/* 12.5 .apd-myth — Mit / Činjenica (§8 #8, adapted from the donor .fact-check)
   Three parts: Mit → Što zapravo znamo → Odakle mit dolazi (the origin line is
   the differentiator). R18: the heading hard-wraps the claim as
   "Mit: … — što zapravo znamo", so an unqualified false claim can never reach an
   H2, a <title> or a meta description on its own. */
.apd-myth{
	border-top:2px solid var(--primary);
	border-bottom:2px solid var(--rule-strong);
	padding-block:var(--space-5);
	margin-block:var(--space-8);
}
.apd-myth__head{font-size:var(--fs-h3);margin:0 0 var(--space-4);}
.apd-myth__part + .apd-myth__part{
	margin-top:var(--space-5);
	padding-top:var(--space-5);
	border-top:1px solid var(--rule);
}
.apd-myth__label{
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	text-transform:uppercase;
	letter-spacing:var(--tr-label);
	font-weight:600;
	color:var(--muted);
	margin:0 0 var(--space-2);
}
.apd-myth__claim{
	font-family:var(--font-body);
	font-style:italic;
	font-size:var(--fs-lead);
	color:var(--text);
	border-left:var(--rail-rule-w) solid var(--rule-strong);
	padding-left:var(--space-4);
	margin:0;
}
/* all three parts are required; the fact label is the one that takes brand ink,
   because it is the part the reader must land on */
.apd-myth__part--myth   .apd-myth__label{color:var(--muted);}
.apd-myth__part--fact   .apd-myth__label{color:var(--primary);}
.apd-myth__part--origin .apd-myth__label{color:var(--muted);}
.apd-myth__body{font-family:var(--font-body);}

/* the donor's inline fact-check line, kept as a quiet apparatus row */
.fact-check{
	position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
	font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);
	margin-block:var(--space-3);
}
.fact-check__details summary{cursor:pointer;color:var(--accent);list-style:none;display:inline-flex;align-items:center;}
.fact-check__details summary::-webkit-details-marker{display:none;}
.fact-check__details summary::marker{content:"";}
.fact-check__panel{
	position:absolute;top:calc(100% + 6px);left:0;min-width:16rem;max-width:min(26rem,90vw);
	background:var(--surface);color:var(--text);
	border:1px solid var(--border);border-top:2px solid var(--primary);border-radius:0;
	box-shadow:var(--shadow-lg);
	padding:var(--space-4);z-index:20;
	font-family:var(--font-body);font-size:var(--fs-small);
}
.fact-check__panel p{margin:0 0 var(--space-2);}
.fact-check__panel p:last-child{margin-bottom:0;}

/* 12.6 remaining donor E-E-A-T parts, flattened to the record gesture */
.projects__grid,.team-grid,.guarantees{display:grid;gap:0;grid-template-columns:minmax(0,1fr);}
@media(min-width:640px){.projects__grid,.team-grid,.guarantees{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-6);}}
@media(min-width:960px){.projects__grid,.team-grid,.guarantees{grid-template-columns:repeat(3,minmax(0,1fr));}}
.project-card,.team-card,.guarantee{
	background:none;border:0;border-top:1px solid var(--rule);border-radius:0;
	padding-block:var(--space-4);text-align:left;
}
.project-card__images,.team-card__photo{display:none;}   /* zero photographs (N1) */
.project-card__body{padding:0;}
.project-card__meta{font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);margin-bottom:var(--space-2);}
.awards img{max-height:2.5rem;width:auto;}


/* 13. BREADCRUMBS / PROSE / BLOG / PAGINATION --------------------------- */
.breadcrumbs,
.apd-breadcrumbs{
	font-family:var(--font-ui);
	font-size:var(--fs-meta);
	color:var(--muted);
	background:none;
	padding:0;
	margin-bottom:var(--space-4);
}
.apd-breadcrumbs ol,
.breadcrumbs__list{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0;}
.apd-breadcrumbs li + li::before,
.breadcrumbs__item + .breadcrumbs__item::before{content:"/";margin-right:var(--space-2);color:var(--rule-strong);}
.apd-breadcrumbs a,
.breadcrumbs a{color:var(--muted);}
.apd-breadcrumbs a:hover,
.breadcrumbs a:hover{color:var(--accent);}

.prose-content{
	max-width:var(--measure);
	margin-inline:auto;
	padding-block:var(--space-12);
	font-family:var(--font-body);
	font-size:var(--fs-body);
}
.prose-content h2{margin-top:var(--space-12);}
.prose-content h3{margin-top:var(--space-8);}
.prose-content h2:first-child,.prose-content h3:first-child{margin-top:0;}
.prose-content a{text-decoration:underline;}
.prose-content img{border-radius:0;margin-block:var(--space-6);}
.entry-header{margin-bottom:var(--space-4);}
.entry-content > * + *{margin-top:var(--space-5);}
.post-list{display:grid;gap:0;list-style:none;margin:0;padding:0;}

/* numbered pagination — never infinite scroll (cliché 11) */
.pagination,
.apd-pagination,
.apd-posts__pagination{
	display:flex;flex-wrap:wrap;gap:var(--space-2);
	margin-top:var(--space-8);
	font-family:var(--font-mono);
	font-variant-numeric:tabular-nums lining-nums;
	font-size:var(--fs-small);
}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.apd-pagination a,
.apd-pagination span,
.pagination .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:var(--tap-min);min-height:var(--tap-min);
	padding-inline:var(--space-2);
	border:1px solid var(--rule-strong);
	border-radius:var(--radius-md);
	text-decoration:none;color:var(--primary);
}
.apd-pagination a:hover,
.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}
.apd-pagination [aria-current="page"],
.pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:var(--cta-ink);}

/* Read More (collapsible content) — JS-gated so no-JS shows everything. */
.readmore__btn{display:none;margin-top:var(--space-5);}
.readmore--center{text-align:center;}
.readmore--right{text-align:right;}
.readmore__visible,.readmore__hidden,.readmore__inner{text-align:left;}
.js .readmore.is-ready .readmore__btn{display:inline-flex;}
.js .readmore--block.is-ready .readmore__btn{display:flex;width:100%;}
.js .readmore.is-collapsed .readmore__hidden{display:none;}
/* More-tag mode takes no height clamp — the cut is exactly where the editor put
   the More block. The modifier is a hook; collapsing is done by the generic
   .readmore.is-collapsed rule above, so this only normalises the seam. */
.readmore--more .readmore__hidden{margin-top:0;}
.readmore--height{position:relative;}
.js .readmore--height.is-collapsed .readmore__inner{
	max-height:var(--readmore-h,480px);overflow:hidden;
	/* the mask reads alpha only — any opaque token works, and using one keeps
	   law L2's "no hex outside :root" sweep clean */
	-webkit-mask-image:linear-gradient(180deg,var(--text) 70%,transparent);
	mask-image:linear-gradient(180deg,var(--text) 70%,transparent);
}

/* comments */
.comments-area{border-top:2px solid var(--rule-strong);margin-top:var(--space-12);padding-top:var(--space-5);}
.comments-title{font-size:var(--fs-h4);margin:0 0 var(--space-4);}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list li{border-top:1px solid var(--rule);padding-block:var(--space-4);}
.no-comments{font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);}


/* 14. FOOTER — the dark floor -------------------------------------------
    Impressum line + Postavke kolačića + legal links. No full dark mode ships;
    this is a band, not a theme. */
.apd-footer,
.site-footer{
	background:var(--dark-surface);
	color:var(--dark-text);
	font-family:var(--font-ui);
	font-size:var(--fs-small);
	line-height:1.55;
	margin-top:var(--space-16);
	padding-block:var(--space-12) var(--space-8);
}
.apd-footer a,
.site-footer a{color:var(--accent-on-dark);}        /* 8.53:1 on --dark-surface */
.apd-footer a:hover,
.site-footer a:hover{color:var(--dark-text);}
.apd-footer h2,.apd-footer h3,.apd-footer h4,
.site-footer h2,.site-footer h3,.site-footer h4{color:var(--dark-text);}
.site-footer p{color:var(--dark-muted);}

.apd-footer__grid,
.footer-grid{
	display:grid;grid-template-columns:minmax(0,1fr);
	gap:var(--space-8);
}
@media(min-width:720px){
	.apd-footer__grid,
	.footer-grid{grid-template-columns:1.4fr repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8);}
}
@media(min-width:1024px){
	.apd-footer__grid,
	.footer-grid{grid-template-columns:1.6fr repeat(3,minmax(0,1fr));}
}
.apd-footer__title,
.footer-widget__title,
.footer-col h3{
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	text-transform:uppercase;letter-spacing:var(--tr-label);font-weight:600;
	color:var(--dark-muted);
	margin:0 0 var(--space-3);
	padding-bottom:var(--space-2);
	border-bottom:1px solid var(--dark-border);
}
.apd-footer__list,
.footer-menu,
.footer-col ul{list-style:none;margin:0;padding:0;}
.apd-footer__list li + li,
.footer-menu li + li,
.footer-col li + li{margin-top:var(--space-2);}
.footer-about,.footer-contact,.footer-disclosure{color:var(--dark-muted);}
.footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-4);}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;
	width:var(--tap-min);height:var(--tap-min);
	border:1px solid var(--dark-border);border-radius:var(--radius-md);}
.footer-social a:hover{border-color:var(--accent-on-dark);}

/* the footer wordmark keeps the lockup device — rule + editor line */
.apd-footer .apd-lockup__mark{color:var(--dark-text);border-bottom-color:var(--dark-border);}
.apd-footer .apd-lockup__editor{color:var(--dark-muted);}
.apd-footer .apd-lockup__editor a{color:var(--dark-muted);}

/* impressum panel — legally load-bearing, and it doubles as the trust page */
.apd-footer__impressum{
	background:var(--dark-surface-2);
	border:1px solid var(--dark-border);
	padding:var(--space-4);
	font-size:var(--fs-meta);
	color:var(--dark-muted);
	margin-top:var(--space-8);
}
.apd-footer__impressum dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--space-1) var(--space-4);margin:0;}
.apd-footer__impressum dt{color:var(--dark-muted);}
.apd-footer__impressum dd{margin:0;color:var(--dark-text);}
.apd-footer__impressum .apd-num{color:var(--dark-text);}

.apd-footer__legal,
.footer-bottom,
.footer-colophon{
	margin-top:var(--space-8);
	padding-top:var(--space-4);
	border-top:1px solid var(--dark-border);
	font-size:var(--fs-meta);
	color:var(--dark-muted);
	display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
	align-items:center;
}
.apd-footer__legal ul,
.footer-policy{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);list-style:none;margin:0;padding:0;}
/* C4 — withdrawal as easy as giving: a persistent link, not a buried one */
.apd-cookie-settings{
	background:none;
	border:1px solid var(--dark-border);
	border-radius:var(--radius-md);
	color:var(--accent-on-dark);
	font-family:var(--font-ui);font-size:var(--fs-meta);
	min-height:var(--tap-min);
	padding:var(--space-2) var(--space-3);
	cursor:pointer;
}
.apd-cookie-settings:hover{border-color:var(--accent-on-dark);}

/* focus ring must be visible against the dark floor too */
.apd-footer :where(a,button,input,summary,[tabindex]):focus-visible,
.site-footer :where(a,button,input,summary,[tabindex]):focus-visible{
	outline:2px solid var(--accent-on-dark);
	outline-offset:var(--focus-offset);
}


/* 15. UTILITIES / A11Y / MOTION ---------------------------------------- */

/* focus, from §3.4, verbatim */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
	outline:var(--focus-ring);outline-offset:var(--focus-offset);
}

/* skip link */
.skip-link,
.apd-skip-link{
	position:absolute;left:var(--space-3);top:var(--space-3);
	z-index:100;
	transform:translateY(-200%);
	background:var(--primary);
	color:var(--cta-ink);
	font-family:var(--font-ui);font-size:var(--fs-small);font-weight:600;
	padding:var(--space-3) var(--space-4);
	border-radius:var(--radius-md);
	text-decoration:none;
}
.skip-link:focus,
.apd-skip-link:focus{transform:none;}

/* screen-reader text */
.screen-reader-text,
.apd-sr-only{
	position:absolute !important;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}
.screen-reader-text:focus-visible,
.apd-sr-only:focus-visible{
	position:static !important;
	width:auto;height:auto;margin:0;clip-path:none;white-space:normal;
}

/* generic utilities */
.apd-hidden{display:none !important;}
.apd-stack > * + *{margin-top:var(--space-4);}
.apd-stack--wide > * + *{margin-top:var(--space-6);}
.apd-muted{color:var(--muted);}
.apd-ui{font-family:var(--font-ui);}
.apd-lede{font-family:var(--font-body);font-size:var(--fs-lead);color:var(--muted);}
.apd-dek{font-family:var(--font-body);font-size:var(--fs-lead);color:var(--muted);margin-top:var(--space-4);max-width:56ch;}
.apd-rule{border:0;border-top:1px solid var(--rule);margin-block:var(--space-6);}
.apd-rule--strong{border-top:2px solid var(--rule-strong);}
.apd-nowrap{white-space:nowrap;}
.apd-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.text-center{text-align:center;}

/* development aid for law L1 — apparatus vs commercial counts are logged in an
   HTML comment; this makes the two element families greppable in the DOM too */
[data-apparatus],[data-commercial]{}

/* Scroll reveal is disabled by design: nothing on this site animates in.
   The hooks stay so a surviving donor part cannot render invisible content. */
.js .reveal,
.no-js .reveal{opacity:1;transform:none;}

/* reduced motion — §3.4, verbatim. Nothing on this site animates by design (no
   countdowns, no urgency, no carousels); this block exists so an enhancement can
   never reintroduce motion. */
@media(prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
	                     transition-duration:.01ms !important;scroll-behavior:auto !important;}
	html{scroll-behavior:auto;}
}

/* forced colours — the evidence pips are the one place where meaning is carried
   partly by colour. In forced-colours mode the fill collapses, so give the "on"
   pip a border weight the OS cannot flatten. The word beside the pips already
   carries the meaning in text, which is why this is a nicety and not a fix. */
@media(forced-colors:active){
	.apd-evidence__pip{border:1px solid CanvasText;}
	.apd-evidence__pip.is-on{background:CanvasText;}
	.apd-ad{border-block:1px solid CanvasText;}
}


/* 16. NEWSLETTER + CONTACT FORM ----------------------------------------
    .apd-signup — Prijavite se na tjedni pregled (§8 #20). One inline
    mid-article variant + one end-of-article variant. NO modal, NO exit-intent,
    NO overlay (cliché 11). The donor lead form is relabelled as the newsletter
    and "prijavi pogrešku" contact path and shares this chrome. */
.apd-signup,
.quote-form-wrap,
.newsletter-form{
	border-top:2px solid var(--primary);
	border-bottom:2px solid var(--rule-strong);
	background:var(--surface-2);
	padding:var(--space-5) var(--space-4);
	margin-block:var(--space-8);
	box-shadow:none;border-radius:0;
}
.apd-signup__title,
.newsletter-form__title,
.quote-form-wrap h2{font-size:var(--fs-h4);margin:0 0 var(--space-2);}
.apd-signup__deck,
.newsletter-form__sub{
	font-family:var(--font-body);font-size:var(--fs-small);color:var(--muted);
	margin:0 0 var(--space-4);max-width:46ch;
}
.apd-signup__form,
.newsletter-form__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:flex-start;}
.apd-signup__input{flex:1 1 16rem;min-width:0;}
.apd-signup__consent,
.newsletter-form__consent,
.quote-form__consent,
.field--consent{
	flex:1 1 100%;
	display:flex;align-items:flex-start;gap:var(--space-2);
	font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);
	line-height:var(--lh-tight);
	margin-top:var(--space-2);
}
.apd-signup--inline{padding-inline:var(--space-4);}
.apd-signup--end{margin-top:var(--space-12);}
.newsletter-form__trust{font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);margin-top:var(--space-3);}
.newsletter-grid{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr);}
@media(min-width:900px){.newsletter-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}

/* fields shared by every form on the site */
.quote-form .field,
.contact-form .field{margin-bottom:var(--space-4);}
.field--full{grid-column:1 / -1;}
.quote-form label,
.contact-form label{
	display:block;font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
	color:var(--text);margin-bottom:var(--space-2);
}
.quote-form input,.quote-form select,.quote-form textarea,
.contact-form input,.contact-form select,.contact-form textarea,
.search-field,.regular-text{
	width:100%;
	font-family:var(--font-ui);font-size:var(--fs-small);
	min-height:var(--field-h);
	padding:var(--space-2) var(--space-3);
	color:var(--text);background:var(--surface);
	border:1px solid var(--rule-strong);border-radius:var(--radius-md);
	box-shadow:var(--shadow-sm);
}
.quote-form textarea,.contact-form textarea{min-height:7rem;resize:vertical;line-height:var(--lh-tight);}
.quote-form__consent input[type="checkbox"],
.field--consent input[type="checkbox"]{width:auto;min-height:0;margin-top:.2em;flex:none;accent-color:var(--accent);}
.quote-form__hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}
.quote-form__feedback{margin-top:var(--space-3);font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;}
.quote-form__feedback.is-success{color:var(--ev-strong);}
.quote-form__feedback.is-error{color:var(--ev-limited);}
.form-fallback{background:var(--surface-2);padding:var(--space-5);font-family:var(--font-ui);font-size:var(--fs-small);}
.spinner{display:none;width:1rem;height:1rem;border:2px solid var(--rule-strong);border-top-color:var(--cta-ink);border-radius:50%;}
.is-loading .spinner{display:inline-block;animation:apd-spin .7s linear infinite;}
@keyframes apd-spin{to{transform:rotate(360deg);}}
.search-form{display:flex;gap:var(--space-2);}

/* admin-ish tables kept by the donor's settings screens */
.form-table th{text-align:left;font-family:var(--font-ui);font-size:var(--fs-meta);}
.striped tr:nth-child(odd){background:var(--surface-2);}

/* notices */
.notice{
	font-family:var(--font-ui);font-size:var(--fs-meta);line-height:var(--lh-tight);
	border-left:var(--rail-rule-w) solid var(--rule-strong);
	background:var(--surface-2);
	padding:var(--space-3) var(--space-4);
	margin-block:var(--space-4);
}
.notice-success{border-left-color:var(--ev-strong);}
.notice-warning{border-left-color:var(--ev-moderate);}
.notice-error{border-left-color:var(--ev-limited);}
.notice-info{border-left-color:var(--primary);}


/* 17. THE SIGNATURE OBJECT — .apd-record (DESIGN-ALLOCATION §5) ---------
    Brzi odgovor + nutrient table + provenance, as one indivisible block. The
    moat is not the number and not the table: it is the number WITH its source
    attached. A provenance line that can be detached from the figure will
    eventually be detached from the figure — so it is welded. */
.apd-record{
	--row-h:2.25rem;                        /* the ledger pitch (§20) */
	margin-block:var(--space-8);
	border-top:2px solid var(--primary);
	border-bottom:2px solid var(--rule-strong);
	background:var(--surface);
}

/* 17.1 Brzi odgovor — the large answer */
.apd-record__answer{
	display:grid;
	grid-template-columns:max-content minmax(0,1fr);
	align-items:last baseline;
	column-gap:var(--space-4);
	padding-block:var(--space-5) var(--space-4);
}
.apd-record__figure{
	font-family:var(--font-mono);
	font-variant-numeric:tabular-nums lining-nums;
	font-weight:700;
	font-size:clamp(2.6rem, 1.6rem + 4.2vw, 3.6rem);
	line-height:.92;
	letter-spacing:-.02em;
	color:var(--primary);
	font-feature-settings:"zero" 0;         /* no slashed zero: a publication, not a terminal */
}
.apd-record__unit{
	font-family:var(--font-mono);
	font-size:1rem;
	color:var(--muted);
	white-space:nowrap;
}
.apd-record__portion{                      /* "≈ 96 kcal po komadu (120 g)" */
	grid-column:1 / -1;
	font-family:var(--font-body);
	font-size:1rem;
	color:var(--muted);
	margin-top:var(--space-2);
}
.apd-record__portion b{font-family:var(--font-mono);font-weight:400;font-variant-numeric:tabular-nums;}

/* 17.2 Izvor podataka — the moat, welded to the figure */
.apd-record__provenance{
	display:grid;
	grid-template-columns:max-content minmax(0,1fr);
	column-gap:var(--space-3);
	align-items:baseline;
	padding-block:var(--space-3);
	border-top:1px solid var(--rule);
	border-bottom:1px solid var(--rule);
	background:var(--surface-2);
	padding-inline:var(--space-3);
}
.apd-record__provenance-label{
	font-family:var(--font-ui);
	font-size:.6875rem;
	text-transform:uppercase;
	letter-spacing:.14em;
	color:var(--muted);
	white-space:nowrap;
}
.apd-record__provenance-body{font-family:var(--font-body);font-size:.9375rem;line-height:1.45;}
.apd-record__provenance-body a{color:var(--accent);text-underline-offset:.16em;}
.apd-record__provenance-body .id,
.apd-record__provenance-body .date{
	font-family:var(--font-mono);
	font-variant-numeric:tabular-nums;
	font-size:.875rem;
}
/* Fails closed: no source record, no figure. */
.apd-record:not(:has(.apd-record__provenance)) .apd-record__answer{display:none;}
/* the provenance line may also stand under a chart or a standalone table */
.apd-record__provenance--standalone{border-top-width:2px;border-top-color:var(--primary);}

/* 17.3 Nutritivne vrijednosti na 100 g */
.apd-record__scroll,
.apd-nutri__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.apd-nutri{
	width:100%;
	border-collapse:collapse;
	font-variant-numeric:tabular-nums lining-nums;
	table-layout:fixed;
}
.apd-nutri caption{
	caption-side:top;
	text-align:left;
	font-family:var(--font-ui);
	font-size:.6875rem;
	text-transform:uppercase;
	letter-spacing:.14em;
	color:var(--muted);
	padding-block:var(--space-4) var(--space-2);
}
.apd-nutri th,.apd-nutri td{
	height:var(--row-h);
	padding:0 var(--space-3);
	border:0;                                 /* the ledger-rule wash IS the row separator (§20) */
	line-height:1.25;
	vertical-align:baseline;
}
.apd-nutri thead th{
	font-family:var(--font-ui);
	font-size:.75rem;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.09em;
	color:var(--muted);
	border-bottom:2px solid var(--rule-strong);
	text-align:right;
}
.apd-nutri thead th:first-child{text-align:left;}
.apd-nutri tbody th{                          /* the nutrient name — a row header, not a cell */
	font-family:var(--font-body);
	font-weight:400;
	text-align:left;
	color:var(--text);
	position:sticky;left:0;                   /* sticky first column on mobile */
	background:var(--surface);
	padding-left:0;
}
.apd-nutri td{
	font-family:var(--font-mono);
	font-size:.9375rem;
	text-align:right;
	color:var(--text);
}
.apd-nutri .is-sub th{padding-left:var(--space-4);color:var(--muted);font-size:.9375rem;}
.apd-nutri tbody tr:nth-child(4n) td,
.apd-nutri tbody tr:nth-child(4n) th{border-bottom:1px solid var(--rule-strong);}

/* 17.4 the table's own source line (brief §7.3 #12) */
.apd-record__figsource{
	font-family:var(--font-body);
	font-size:.8125rem;
	color:var(--muted);
	padding-block:var(--space-2) var(--space-4);
	border-top:1px solid var(--rule);
}

/* 17.5 the portion toggle — a class flip, never a fetch (§5 rule 3) */
.apd-record__toggle{
	display:flex;flex-wrap:wrap;gap:var(--space-2);
	padding-block:var(--space-3);
	border-top:1px solid var(--rule);
}
.apd-record__toggle-btn{
	font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
	min-height:var(--tap-min);
	padding:var(--space-2) var(--space-3);
	color:var(--primary);
	background:none;
	border:1px solid var(--rule-strong);
	border-radius:var(--radius-md);
	cursor:pointer;
}
.apd-record__toggle-btn[aria-pressed="true"]{
	background:var(--primary);color:var(--cta-ink);border-color:var(--primary);
}

/* 17.6 mobile */
@media(max-width:599px){
	.apd-record__answer{grid-template-columns:minmax(0,1fr);}
	.apd-record__unit{grid-column:1;margin-top:.15rem;}
	.apd-record__provenance{grid-template-columns:minmax(0,1fr);row-gap:.35rem;}
	.apd-nutri{table-layout:auto;min-width:22rem;}
}

/* 17.7 accessibility */
.apd-record a:focus-visible,
.apd-record button:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:2px;
	border-radius:1px;
}
@media(prefers-reduced-motion:reduce){
	.apd-record *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}

/* 17.8 .apd-matrix — Usporedba (§8 #6)
   3–8 rows, ONE cell type per column (short text, OR a 4-step pip, OR a number
   with a unit). Mixing icon/number/star in one matrix is exactly what makes a
   comparison table look like affiliate spam. Sticky first column, horizontal
   scroll, NEVER collapses to stacked cards — side-by-side is the whole point. */
.apd-matrix__scroll{
	overflow-x:auto;-webkit-overflow-scrolling:touch;
	border-top:2px solid var(--primary);
}
.apd-matrix{
	width:100%;
	min-width:34rem;                 /* never collapses; it scrolls instead */
	border-collapse:collapse;
	font-variant-numeric:tabular-nums lining-nums;
}
.apd-matrix caption{
	caption-side:top;text-align:left;
	font-family:var(--font-ui);font-size:var(--fs-label);
	text-transform:uppercase;letter-spacing:var(--tr-label);
	color:var(--muted);
	padding-block:var(--space-4) var(--space-2);
}
.apd-matrix caption .apd-num{font-size:1em;color:var(--text);}
.apd-matrix th,.apd-matrix td{
	padding:var(--space-3);
	border:0;
	line-height:var(--lh-cell);
	vertical-align:baseline;
	text-align:left;
}
.apd-matrix thead th{
	font-family:var(--font-ui);font-size:var(--fs-micro);font-weight:600;
	text-transform:uppercase;letter-spacing:var(--tr-thead);
	color:var(--muted);
	border-bottom:2px solid var(--rule-strong);
	white-space:nowrap;
}
.apd-matrix tbody th{
	font-family:var(--font-display);font-weight:600;font-size:var(--fs-small);
	color:var(--primary);
	position:sticky;left:0;
	background:var(--surface);
	padding-left:0;
}
.apd-matrix tbody td{font-family:var(--font-body);font-size:var(--fs-small);color:var(--text);}
.apd-matrix tbody tr + tr th,
.apd-matrix tbody tr + tr td{border-top:1px solid var(--rule);}
.apd-matrix tbody tr:last-child th,
.apd-matrix tbody tr:last-child td{border-bottom:2px solid var(--rule-strong);}
/* column modifiers — one cell type per column, declared on the cells */
.apd-matrix .is-num{
	font-family:var(--font-mono);font-size:var(--fs-small);
	text-align:right;font-variant-numeric:tabular-nums lining-nums;
}
.apd-matrix .is-pip{white-space:nowrap;}
.apd-matrix .is-text{font-family:var(--font-body);}
/* the ranking-methodology block that must sit directly above every ranked table
   (ZZP čl. 37 t. 17). Never optional. */
.apd-method{
	font-family:var(--font-ui);
	font-size:var(--fs-meta);
	line-height:var(--lh-tight);
	color:var(--text);
	background:var(--surface-2);
	border-left:var(--rail-rule-w) solid var(--rule-strong);
	padding:var(--space-3) var(--space-4);
	margin-block:var(--space-4);
}

/* 17.9 .apd-evidence — Snaga dokaza (§8 #2)
   Four fixed levels, rendered as a 4-step pip filled left-to-right, with the
   WORD always beside the pips and a plain Croatian sentence always below. Never
   stars, never a percentage, never a letter grade. This is the only place on the
   site where green / amber / red are allowed to appear (law L2).
   The --ev-fill modifier MUST be emitted on the pip container itself; an
   ancestor-only modifier renders every inline pip grey. */
.apd-evidence{font-family:var(--font-ui);}
.apd-evidence__label{
	font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tr-label);
	font-weight:600;color:var(--muted);margin:0 0 var(--space-2);
}
.apd-evidence__scale{
	display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);
	margin:0;
}
.apd-evidence__pips{display:inline-flex;gap:var(--pip-gap);flex:none;}
.apd-evidence__pip{
	display:block;
	width:var(--pip-size);height:var(--pip-size);
	border:1px solid var(--rule-strong);      /* empty state */
	background:transparent;
	border-radius:0;
}
.apd-evidence__pip.is-on{
	background:var(--ev-fill);
	border-color:var(--ev-fill);
}
.apd-evidence__word{
	font-size:var(--fs-meta);font-weight:600;
	color:var(--text);                        /* the WORD is ink, never the evidence hue —
	                                             no evidence colour is ever a fill behind text */
}
.apd-evidence__note{
	margin:var(--space-2) 0 0;
	font-family:var(--font-body);
	font-size:var(--fs-small);
	line-height:var(--lh-tight);
	color:var(--muted);
}
.apd-evidence--strong  {--ev-fill:var(--ev-strong);}
.apd-evidence--moderate{--ev-fill:var(--ev-moderate);}
.apd-evidence--limited {--ev-fill:var(--ev-limited);}
.apd-evidence--none    {--ev-fill:var(--ev-none);}
/* rail placement: stacked, tighter */
.apd-rail .apd-evidence__scale{flex-direction:column;align-items:flex-start;gap:var(--space-2);}

/* the same pip used inline inside a matrix cell or a data-row figure column */
.apd-pips{display:inline-flex;gap:var(--pip-gap);vertical-align:middle;}
.apd-pips .apd-evidence__pip{width:.75rem;height:.75rem;}

/* 17.10 .apd-direction — Smjer učinka (§8 #3)
   ↑ povećava · ↓ smanjuje · – nema učinka · ↕ ovisi.
   The glyph is inline SVG WITH intrinsic width/height attributes; the word is
   always present, so the component is never colour-only. Law L2 keeps this in
   the indigo family: direction is not certainty, so it may not borrow the
   evidence hues. */
.apd-direction{
	display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);
	font-family:var(--font-ui);
	padding:var(--space-2) var(--space-3);
	border:1px solid var(--rule-strong);
	border-radius:var(--radius-md);
	background:var(--surface);
}
.apd-direction__label{
	font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tr-label);
	font-weight:600;color:var(--muted);
}
.apd-direction__value{
	display:inline-flex;align-items:center;gap:var(--space-2);
	font-size:var(--fs-meta);font-weight:600;color:var(--primary);
}
.apd-direction__icon{color:var(--primary);}
/* the four declared states. --up and --down keep the primary ink; the two
   "no clear effect" states drop to --muted. They are listed explicitly so the
   contract's modifier set and the CSS's modifier set are the same grep. */
.apd-direction--up   .apd-direction__icon,
.apd-direction--down .apd-direction__icon{color:var(--primary);}
.apd-direction--none .apd-direction__icon,
.apd-direction--depends .apd-direction__icon{color:var(--muted);}

/* 17.11 .apd-tldr — Ukratko (§8 #1)
   --surface-2 ground, 3px --primary left rule, body serif at 1.0625rem. ALWAYS
   the first content block; must read as the whole article. */
.apd-tldr{
	background:var(--surface-2);
	border-left:var(--rail-rule-w) solid var(--primary);
	padding:var(--space-5) var(--space-5) var(--space-5) var(--space-4);
	margin-block:var(--space-6);
}
.apd-tldr__title{
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	text-transform:uppercase;
	letter-spacing:var(--tr-label);
	font-weight:600;
	color:var(--muted);
	margin:0 0 var(--space-3);
}
.apd-tldr__list{list-style:none;margin:0;padding:0;}
.apd-tldr__list li{
	font-family:var(--font-body);
	font-size:var(--fs-lead);
	line-height:1.5;
	padding-left:var(--space-4);
	position:relative;
}
.apd-tldr__list li + li{margin-top:var(--space-3);}
.apd-tldr__list li::before{
	content:"";
	position:absolute;left:0;top:.62em;
	width:.5rem;height:1px;
	background:var(--rule-strong);
}

/* 17.12 .apd-proscons — Prednosti i nedostaci (§8 #7)
   Two ruled columns desktop, stacked mobile. The template refuses to render with
   fewer than 2 cons — a one-sided box reads as an ad. Markers are typographic,
   not coloured: green and red belong to the evidence scale (law L2). */
.apd-proscons{
	display:grid;grid-template-columns:minmax(0,1fr);
	gap:var(--space-5);
	border-top:2px solid var(--rule-strong);
	border-bottom:2px solid var(--rule-strong);
	padding-block:var(--space-5);
	margin-block:var(--space-8);
}
@media(min-width:600px){
	.apd-proscons{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);}
	.apd-proscons__col + .apd-proscons__col{
		border-left:1px solid var(--rule);
		padding-left:var(--space-6);
	}
}
.apd-proscons__title{
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	text-transform:uppercase;
	letter-spacing:var(--tr-label);
	font-weight:600;
	color:var(--muted);
	margin:0 0 var(--space-3);
}
.apd-proscons__list{list-style:none;margin:0;padding:0;font-family:var(--font-body);font-size:var(--fs-small);}
.apd-proscons__list li{position:relative;padding-left:var(--space-5);line-height:var(--lh-tight);}
.apd-proscons__list li + li{margin-top:var(--space-3);}
.apd-proscons__list li::before{
	position:absolute;left:0;top:0;
	font-family:var(--font-mono);
	color:var(--muted);
}
.apd-proscons__col--pros .apd-proscons__list li::before{content:"+";}
.apd-proscons__col--cons .apd-proscons__list li::before{content:"\2212";}  /* U+2212 minus */

/* 17.13 .apd-known — Što znamo / Što ne znamo / Što bi promijenilo naš zaključak
   (§8 #9) Three ruled panels, text + pips only, NO icons. Pinned under the dek,
   before the first ad. "Što ne znamo" is what separates this desk from every
   competitor — nobody in the niche publishes their uncertainty. */
.apd-known{
	display:grid;grid-template-columns:minmax(0,1fr);
	border-top:2px solid var(--primary);
	border-bottom:2px solid var(--rule-strong);
	margin-block:var(--space-8);
}
.apd-known__panel{padding:var(--space-5) 0;}
.apd-known__panel + .apd-known__panel{border-top:1px solid var(--rule);}
/* stacked below 900px, three ruled panels above it — the media query must come
   AFTER the base rules or the stacked border-top wins back at desktop. The left
   inset only exists once the panels are side by side; stacked, every panel hangs
   on the same left edge as the rest of the article. */
@media(min-width:900px){
	.apd-known{grid-template-columns:repeat(3,minmax(0,1fr));}
	.apd-known__panel{padding:var(--space-5) var(--space-4);}
	.apd-known__panel:first-child{padding-left:0;}
	.apd-known__panel + .apd-known__panel{border-left:1px solid var(--rule);border-top:0;}
}
.apd-known__title{
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	text-transform:uppercase;
	letter-spacing:var(--tr-label);
	font-weight:600;
	color:var(--muted);
	margin:0 0 var(--space-3);
}
.apd-known__list{list-style:none;margin:0;padding:0;font-family:var(--font-body);font-size:var(--fs-small);line-height:var(--lh-tight);}
.apd-known__list li + li{margin-top:var(--space-3);}
.apd-known__panel--unknown .apd-known__title{color:var(--primary);}

/* 17.14 .apd-toc — Sadržaj (§8 #18)
   Lives in the RAIL on desktop (it is navigation apparatus, not commerce, which
   is why it does not compete with sidebar_top / sidebar_sticky for the 300px
   column). <details> on mobile WITH a reserved summary height so opening it is
   the only shift and it is user-initiated. */
.apd-toc{font-family:var(--font-ui);font-size:var(--fs-meta);}
.apd-toc__summary{
	display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
	min-height:var(--tap-min);          /* reserved height — no CLS on open */
	padding-block:var(--space-2);
	border-top:1px solid var(--rule-strong);
	border-bottom:1px solid var(--rule-strong);
	font-size:var(--fs-label);
	text-transform:uppercase;letter-spacing:var(--tr-label);font-weight:600;
	color:var(--muted);
	cursor:pointer;
	list-style:none;
}
.apd-toc__summary::-webkit-details-marker{display:none;}
.apd-toc[open] .apd-toc__caret{transform:rotate(180deg);}
.apd-toc__list{list-style:none;margin:var(--space-3) 0 0;padding:0;}
.apd-toc__list li + li{margin-top:var(--space-2);}
.apd-toc__list a{
	color:var(--text);text-decoration:none;
	display:block;line-height:var(--lh-label);
	border-left:1px solid var(--rule);padding-left:var(--space-3);
}
.apd-toc__list a:hover{color:var(--accent);border-left-color:var(--accent);}
.apd-toc__list .is-sub{padding-left:var(--space-4);}
@media(min-width:1200px){
	/* in the rail the TOC is always open and needs no disclosure affordance */
	.apd-rail .apd-toc__summary{cursor:default;pointer-events:none;}
	.apd-rail .apd-toc__caret{display:none;}
}

/* 17.15 disclaimer / gate / practice
   §8 #13 — Ovo nije medicinski savjet. Fixed text, identical everywhere. ARTICLE
   FOOTER. Never in the header, never in the utility bar (§1.3d): a permanent
   site-wide clinical disclaimer reads as pharmacy hedging, not as a publication.
   --lede is the stronger Hub 8 variant that ALSO renders at the top. */
.apd-disclaimer{
	border-top:1px solid var(--rule-strong);
	border-bottom:1px solid var(--rule-strong);
	padding-block:var(--space-4);
	margin-block:var(--space-8);
	font-family:var(--font-ui);
	font-size:var(--fs-meta);
	line-height:var(--lh-tight);
	color:var(--muted);
}
.apd-disclaimer__title{
	font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tr-label);
	font-weight:600;color:var(--text);margin:0 0 var(--space-2);
}
.apd-disclaimer--lede{
	background:var(--surface-2);
	border-left:var(--rail-rule-w) solid var(--primary);
	padding-inline:var(--space-4);
	color:var(--text);
}

/* §8 #15 — Provjerite s liječnikom. Renders ABOVE the commercial block, never
   below. The commercial block takes this gate as a required argument in a health
   context. */
.apd-gate{
	border:1px solid var(--rule-strong);
	border-left:var(--accent-rule-w) solid var(--primary);
	background:var(--surface);
	padding:var(--space-4);
	margin-block:var(--space-6) var(--space-4);
	font-family:var(--font-ui);
	font-size:var(--fs-meta);
	line-height:var(--lh-tight);
}
.apd-gate__title{
	font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;
	color:var(--primary);margin:0 0 var(--space-2);
}

/* §8 #16 — U praksi */
.apd-practice{
	border-left:var(--rail-rule-w) solid var(--rule-strong);
	background:var(--surface);
	padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5);
	margin-block:var(--space-6);
	font-family:var(--font-body);
}
.apd-practice__title{
	font-family:var(--font-ui);font-size:var(--fs-label);
	text-transform:uppercase;letter-spacing:var(--tr-label);font-weight:600;
	color:var(--muted);margin:0 0 var(--space-2);
}

/* 17.16 §8 #19 — Povezani članci, re-skinned to data-row. On Hub 7 and Hub 8
   this must not surface commercial-hub content (a taxonomy filter, not a
   habit). */
.apd-related,
.related-posts{margin-top:var(--space-12);}
.apd-related__title,
.related-posts__title{
	font-family:var(--font-ui);font-size:var(--fs-label);
	text-transform:uppercase;letter-spacing:var(--tr-label);font-weight:600;
	color:var(--muted);
	padding-bottom:var(--space-2);
	border-bottom:2px solid var(--rule-strong);
	margin:0 0 var(--space-3);
}


/* 18. DISPLAY-AD SLOTS + COMMERCE --------------------------------------- */

/* 18.1 .apd-ad — the reserved well (DESIGN-ALLOCATION §7.1)
   An EMPTY, fixed-min-height container present in the initial HTML, sized per
   breakpoint, NEVER collapsed on no-fill, never resized to fit the creative,
   never injected by JavaScript. Removing space set aside for an element causes
   as much CLS as inserting content.

   NOT a bordered well — flat neutral tint, hairlines top and bottom, no border
   box, no radius, no shadow. It is the one near-neutral grey on the site and the
   disharmony IS the separation signal.

   S3 note: no rule in this file names .apd-ad and .apd-row together. */
.apd-ad{
	display:grid;place-items:center;
	margin-inline:auto;
	contain:layout;
	background:var(--surface-ad);             /* the site's only neutral surface */
	border:0;                                  /* NOT a bordered well */
	border-radius:0;
	box-shadow:none;
	border-block:1px solid var(--border);      /* hairlines top and bottom, per S3 */
	margin-block:var(--space-ad-gap);          /* 72px desktop / 44px mobile — the page's largest gap */
	width:100%;
}
.apd-ad--inline        {min-height:280px;}
.apd-ad--endcap        {min-height:280px;}
.apd-ad--list          {min-height:280px;}
.apd-ad--feed          {min-height:280px;}
.apd-ad--tool          {min-height:280px;}
.apd-ad--sidebar       {min-height:250px;}
.apd-ad--sidebar-sticky{min-height:600px;position:sticky;top:calc(var(--header-h, 0px) + 1.5rem);}
@media(max-width:1023px){.apd-ad--sidebar,.apd-ad--sidebar-sticky{display:none;}}
@media(prefers-reduced-motion:reduce){.apd-ad *{animation:none !important;}}

/* ---- S4 + S6, ENFORCED (the same covenant §3.3 gives the rail) ----------
   S4: ads are <aside>, siblings of .apd-prose and direct children of .apd-body —
   NEVER inside the prose flow container.
   S6: never inside a data table — no comparison table, no nutrition table, no
   numbered protocol. An ad inside a data table destroys the credibility the
   whole positioning rests on.
   Note that .apd-rows / li.apd-ad (the archive list_inline slot) is deliberately
   NOT matched — that placement is legal and is not a data table. */
.apd-prose :is(.apd-ad, .adsbygoogle, ins, iframe[src*="doubleclick"], iframe[src*="googlesyndication"]),
.apd-prose [data-slot],
:is(table, thead, tbody, tfoot, tr, td, th, caption, .apd-matrix__scroll)
  :is(.apd-ad, .adsbygoogle, ins, iframe[src*="doubleclick"], iframe[src*="googlesyndication"]),
:is(table, thead, tbody, tfoot, tr, td, th, caption, .apd-matrix__scroll) [data-slot]{
	display:none !important;
}

/* .apd-ad--list is an <li> inside a .apd-rows loop. Reset the list-item box so
   the well is identical to every other slot. */
li.apd-ad{list-style:none;}

/* S8 — where a label exists it sits ABOVE the slot, never inside it (creatives
   crop inside-the-box labels), and it is non-clickable.
   Programmatic display slots ship UNLABELLED. This class exists for the paid
   native case only; do not put it above art_inline_*, art_endcap, sidebar_*,
   list_inline, home_feed or a display tool_result_adj. */
.apd-ad__label{
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	text-transform:uppercase;
	letter-spacing:var(--tr-label);
	font-weight:600;
	color:var(--muted);
	margin:0 0 var(--space-2);
	padding-bottom:var(--space-1);
	border-bottom:1px solid var(--border);
	pointer-events:none;
}

/* The honest no-fill state: a single hairline mark in an otherwise empty box.
   Optional, decorative, aria-hidden. It must never grow into a card. */
.apd-ad__nofill{
	display:block;
	width:var(--ad-nofill-w);height:1px;
	background:var(--rule-strong);
	opacity:.7;
}

/* 18.2 THE BLEED ARITHMETIC (S2)
   Mobile / tablet: true full bleed, edge to edge, against a 350–640px measure.
   body{overflow-x:clip} above keeps 100vw from producing a horizontal scrollbar
   while leaving position:sticky intact.

   Desktop: a RIGHT bleed only. A left bleed would cross the rail, and the rail
   covenant wins (§11 W6 records this as the honest weak point). --ad-bleed is
   5rem/80px. With an aside present the available space to the right of the body
   column is exactly --aside-gap (40px); bleeding the full 80px would put the well
   40px underneath the commerce column and on top of sidebar_top /
   sidebar_sticky — "ads obscuring ads", the same policy violation as a sticky
   header over an ad. So the full --ad-bleed is spent only where there is no
   aside; with an aside the bleed is clamped to the gutter. */
@media(max-width:1023px){
	.apd-ad--inline,
	.apd-ad--endcap,
	.apd-ad--feed,
	.apd-ad--tool,
	.apd-ad--list{
		width:100vw;
		max-width:100vw;
		margin-inline:calc(50% - 50vw);
	}
}
@media(min-width:1024px){
	.apd-body > .apd-ad--inline,
	.apd-body > .apd-ad--endcap,
	.apd-body > .apd-ad--tool{
		width:calc(100% + var(--aside-gap));
		margin-right:calc(-1 * var(--aside-gap));
		margin-left:0;
	}
	/* no commerce column on this template — spend the whole declared bleed */
	.apd-article:not(:has(.apd-aside)) .apd-body > .apd-ad--inline,
	.apd-article:not(:has(.apd-aside)) .apd-body > .apd-ad--endcap,
	.apd-article:not(:has(.apd-aside)) .apd-body > .apd-ad--tool{
		width:calc(100% + var(--ad-bleed));
		margin-right:calc(-1 * var(--ad-bleed));
	}
}

/* 18.3 .apd-commercial — the commercial-unit wrapper (§8 #14, S7)
   Cannot render without (a) a filled disclosure slot and (b) a paid flag.
   Non-compliance is a template error, not a copywriting habit — the :has() rule
   below is the CSS half of that contract.

   S7 arithmetic: affiliate sits FURTHER from editorial than display.
     Display well total separation = --space-ad-gap            = 72px desktop
     Commercial total separation   = --space-12 (56px)
                                   + --space-6  (32px inner padding)
                                   + the disclosure band (~50px)
                                   ~= 138px, plus 2px --rule-strong top and bottom.
   NOTE: --space-ad-gap is a RESERVED token (§3.4). No component other than
   .apd-ad references it anywhere in this file — if anything else did, S1 would be
   dead, because the ad gap is only the largest gap on the page if nothing else is
   allowed to be that large. The commercial wrapper therefore builds its larger
   separation out of --space-12 + chrome, never out of --space-ad-gap. */
.apd-commercial{
	margin-block:var(--space-12);
	padding-block:var(--space-6);
	border-top:2px solid var(--rule-strong);
	border-bottom:2px solid var(--rule-strong);
	background:none;
}
/* fails closed: no disclosure band, no commercial body */
.apd-commercial:not(:has(.apd-disclosure)) .apd-commercial__body{display:none;}

.apd-commercial__title{font-size:var(--fs-h3);margin:0 0 var(--space-4);}
.apd-commercial__body > * + *{margin-top:var(--space-5);}
.apd-commercial__method{
	font-family:var(--font-ui);font-size:var(--fs-meta);
	margin-top:var(--space-4);
}

/* The Oglas badge. `Oglas` is the root token the Croatian guidelines name;
   `Plaćeni oglas` distinguishes cash-paid placement. A badge in the row, never a
   superscript (ZZP čl. 37 t. 17). */
.apd-badge{
	display:inline-flex;align-items:center;
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:var(--tr-label);
	color:var(--text);
	background:var(--surface-ad);
	border:1px solid var(--rule-strong);
	border-radius:var(--radius-sm);
	padding:.2em .5em;
	white-space:nowrap;
}
.apd-badge--paid{background:var(--surface-ad);border-color:var(--muted);}

/* §8 #14 — Napomena o partnerskim poveznicama. Own block at --surface-ad,
   --rule-strong above and below, ABOVE the first commercial link. Never
   footer-only. "Vidljivo odijeljen" is a VISUAL legal standard: a grey 11px
   footnote does not satisfy it. */
.apd-disclosure{
	background:var(--surface-ad);
	border-top:2px solid var(--rule-strong);
	border-bottom:2px solid var(--rule-strong);
	padding:var(--space-4);
	margin-block:0 var(--space-5);
	font-family:var(--font-ui);
	font-size:var(--fs-meta);
	line-height:var(--lh-tight);
	color:var(--text);              /* 15.08:1 on --surface-ad — real contrast */
}
.apd-disclosure p{margin:0;}
.apd-disclosure p + p{margin-top:var(--space-2);}
.apd-disclosure .apd-badge{margin-right:var(--space-2);}
/* the two declared variants (brief §6.2 disclosure_variant) */
.apd-disclosure--full{padding:var(--space-4);}
.apd-disclosure--compact{padding:var(--space-3) var(--space-4);}

/* Paid native / sponsored article: full-width band ABOVE the headline, and
   repeated on the article card in every listing. */
.apd-sponsored-band,
.footer-disclosure{
	background:var(--surface-ad);
	border-top:2px solid var(--rule-strong);
	border-bottom:2px solid var(--rule-strong);
	padding-block:var(--space-3);
	font-family:var(--font-ui);
	font-size:var(--fs-meta);
	color:var(--text);
}
.footer-disclosure{background:none;border:0;color:var(--dark-muted);}

/* §7.5 — how a commercial template announces itself before a word is read. The
   product region sits on --surface-2; the editorial article is --surface
   throughout, so the page is visibly a shade deeper below the disclosure band. */
.apd-commercial-region{background:var(--surface-2);}
/* the only rubric chip in the system, so its presence identifies the template */
.apd-rubric{
	display:inline-block;
	font-family:var(--font-ui);
	font-size:var(--fs-label);
	text-transform:uppercase;
	letter-spacing:var(--tr-label);
	font-weight:600;
	color:var(--muted);
	border-bottom:2px solid var(--rule-strong);
	padding-bottom:var(--space-1);
	margin-bottom:var(--space-3);
}
/* price + its as-of stamp. price_checked_on renders beside every price, always. */
.apd-price{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;
           font-size:var(--fs-lead);color:var(--primary);font-weight:700;}
.apd-price__asof{font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);font-weight:400;}
.apd-price__asof .apd-num{color:var(--text);}

/* the offer layer inherits the donor's directory chrome, flattened to the record
   gesture: no card, no fill, no radius, no star, no rank medal. */
.directory__list{display:grid;gap:0;grid-template-columns:minmax(0,1fr);list-style:none;margin:0;padding:0;}
.directory__card{
	position:relative;display:flex;flex-direction:column;gap:var(--space-2);
	background:none;border:0;border-top:1px solid var(--rule);border-radius:0;box-shadow:none;
	padding-block:var(--space-4);
}
.directory__card:last-child{border-bottom:2px solid var(--rule-strong);}
.directory__rank{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;color:var(--primary);}
.directory__name{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;margin:0;color:var(--primary);}
.directory__desc,.directory__meta{margin:0;font-family:var(--font-body);font-size:var(--fs-small);color:var(--muted);}
.directory__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2);}
.directory__action{
	display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);
	padding:0 var(--space-4);
	font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
	color:var(--cta-ink);background:var(--accent);
	border:1px solid var(--accent);border-radius:var(--radius-md);text-decoration:none;
}
.directory__action:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--cta-ink);text-decoration:none;}
.directory__action--secondary{background:none;color:var(--primary);border-color:var(--rule-strong);}
.directory__action--secondary:hover{background:var(--surface-2);color:var(--primary);border-color:var(--muted);}
.apd-status{font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);}


/* 19. MISC COMPONENTS --------------------------------------------------- */

/* Video facade — click-to-load privacy embed. Flat, ruled, no gradient. */
.video-facade{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
	margin-top:var(--space-4);padding:var(--space-8) var(--space-4);
	background:var(--surface-2);
	border:1px solid var(--rule-strong);border-radius:0;
	color:var(--primary);
	font-family:var(--font-ui);font-size:var(--fs-meta);font-weight:600;
	text-decoration:none;
}
.video-facade:hover{background:var(--surface);color:var(--primary);text-decoration:none;}
.video-facade__play{
	display:inline-flex;align-items:center;justify-content:center;
	width:3rem;height:3rem;
	border:1px solid var(--primary);border-radius:0;color:var(--primary);
}
.video-embed{margin-top:var(--space-4);}
.video-embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0;}

/* Map embed — shared iframe sizing. */
.map-embed{padding-block:var(--space-12);}
.map-embed iframe,.apd-map iframe{display:block;width:100%;min-height:20rem;border:0;}

/* Tool page (page-tool.php) — deliberately quiet chrome for linkable assets. */
.tool-header{border-bottom:1px solid var(--rule);padding-block:var(--space-3);background:var(--surface);}
.tool-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
.tool-header__title{margin:0;font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;}
.tool-header__title a{color:var(--primary);text-decoration:none;}
.tool-page__inner{max-width:calc(var(--measure) + 2 * var(--gutter));padding-block:var(--space-8) var(--space-12);}
.tool-page__title{font-size:var(--fs-h2);margin:0 0 var(--space-6);}
.tool-footer{border-top:1px solid var(--rule);padding-block:var(--space-6);margin-top:var(--space-8);}
.tool-footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-4);font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);}
.tool-footer__inner p{margin:0;}
.tool-footer__inner a{color:inherit;}

/* Area check widget (kept as a generic lookup result panel). */
.area-check{margin-block:var(--space-6);}
.area-check__label{font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
	text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--muted);display:block;margin-bottom:var(--space-2);}
.area-check__result{font-family:var(--font-ui);font-size:var(--fs-meta);margin-top:var(--space-3);}
.area-check__msg.is-yes{color:var(--ev-strong);}
.area-check__msg.is-no{color:var(--ev-limited);}

/* Promo bar — a quiet full-width notice strip, never a countdown, never urgency. */
.promo-bar{background:var(--surface-2);border-bottom:1px solid var(--rule);}
.promo-bar__inner{
	display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);
	padding-block:var(--space-2);
	font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--muted);
}

/* Cookie-consent banner. The plugin prints its own inline <style> in the footer
   with donor token names + hard-coded fallbacks, so these rules carry one
   ancestor for specificity and re-point the banner at the dark floor. */
body .apd-consent{
	position:fixed;left:0;right:0;bottom:0;z-index:90;
	display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
	gap:var(--space-3);
	padding:var(--space-3) var(--space-4);
	background:var(--dark-surface);
	color:var(--dark-text);
	border-top:1px solid var(--dark-border);
	box-shadow:none;
	font-family:var(--font-ui);font-size:var(--fs-meta);line-height:var(--lh-tight);
}
body .apd-consent__text{margin:0;max-width:46rem;}
body .apd-consent__text a{color:var(--accent-on-dark);text-decoration:underline;}
body .apd-consent__actions{display:flex;gap:var(--space-2);flex:none;}
body .apd-consent__btn{
	cursor:pointer;
	min-height:var(--tap-min);
	padding:var(--space-2) var(--space-4);
	font-family:var(--font-ui);font-size:inherit;font-weight:600;
	border:1px solid transparent;border-radius:var(--radius-md);
}
body .apd-consent__btn--accept{background:var(--accent-on-dark);border-color:var(--accent-on-dark);color:var(--dark-surface);}
body .apd-consent__btn--accept:hover{background:var(--dark-text);border-color:var(--dark-text);color:var(--dark-surface);}
body .apd-consent__btn--decline{background:none;border-color:var(--dark-border);color:var(--dark-text);}
body .apd-consent__btn--decline:hover{border-color:var(--accent-on-dark);color:var(--accent-on-dark);}

/* 19.1 Remaining donor hooks. Every class the surviving template parts still
   emit gets a rule here so nothing renders unstyled; each one is expressed in
   the new tokens and none of them reintroduces a card, a fill or a radius. */
.site-main{display:block;}
.apd-posts{display:grid;gap:0;}
.eyebrow{
	display:block;font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
	text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--muted);
	margin-bottom:var(--space-2);
}
/* header: imprint-stack is left-aligned. The donor's centred-masthead modifier
   must not re-centre it — the token is declared dead, so neutralise the class
   rather than leave it live. */
.site-header--centered .site-header__inner{justify-content:flex-start;text-align:left;}
.hero__content{max-width:none;margin:0;text-align:left;}
.hero__card,.hero__form,.hero__calendar{display:contents;}
.projects{margin-block:var(--space-12);}
.author-box__bio{font-family:var(--font-body);font-size:var(--fs-small);margin-top:var(--space-2);}
.trust-rating{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-size:var(--fs-meta);}
.open-now__label{font-weight:600;color:var(--text);}
.open-now__next{color:var(--muted);}
.silo__links-item{display:inline-flex;}
.btn-label{display:inline-flex;align-items:center;}
.video-facade__label{display:block;text-align:center;}
.form-field{margin-bottom:var(--space-4);}
.newsletter-form__head{margin-bottom:var(--space-4);}
.newsletter-submit{flex:0 0 auto;}
.contact-info{font-family:var(--font-ui);font-size:var(--fs-small);}
.contact-list{list-style:none;margin:0;padding:0;}
.contact-list li + li{margin-top:var(--space-2);}
.tool-page{display:block;}
.tool-page__content > * + *{margin-top:var(--space-5);}
/* footer columns + widget areas share the dark-floor list treatment in §14 */
.footer-col,.footer-widget,.widget{margin:0;}
.footer-col--brand{grid-column:span 1;}
.footer-col--newsletter .apd-signup{background:var(--dark-surface-2);border-top-color:var(--accent-on-dark);border-bottom-color:var(--dark-border);color:var(--dark-text);}
.footer-col--newsletter .apd-signup__title{color:var(--dark-text);}
.footer-col--newsletter .apd-signup__deck,
.footer-col--newsletter .apd-signup__consent{color:var(--dark-muted);}
.widget-area > * + *{margin-top:var(--space-6);}
.widget__title{
	font-family:var(--font-ui);font-size:var(--fs-label);font-weight:600;
	text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--muted);
	padding-bottom:var(--space-2);border-bottom:2px solid var(--rule-strong);
	margin:0 0 var(--space-3);
}


/* =========================================================================
   20. EVIDENCE-DESK PROFILE OVERRIDES (DESIGN-MANIFEST.json)
   Profile: evidence-desk.
   Axes: typography=text-serif-inverse · hero=lookup-board
       · section_rhythm=margin-rail · cards=data-row · header=imprint-stack
       · texture=ledger-rule.

   Five of the six axes are structural and are built above, in the sections that
   own them: text-serif-inverse in §2 (--font-display is a SANS, --font-body is a
   SERIF — literally the inverse of transitional-serif), lookup-board in §6,
   margin-rail in §3.2–3.3, data-row in §8, imprint-stack in §5. Only the texture
   axis needs a body-class hook, and it is below.

   TEXTURE — ledger-rule (DESIGN-ALLOCATION §2.7)
   The data table's own row rhythm, escaping the table. ONE axis only; there are
   no verticals anywhere in this token. Two layers: a 1px hairline every
   --lr-pitch, and every fourth hairline doubled as a group rule — the same
   rhythm a nutrition declaration uses to group energy / macro / micro. Alpha
   ceiling 5% fine / 9% group. NEVER behind body copy: tinted bands and the table
   interior only.
   The pitch is BOUND to --row-h. A texture whose pitch is a free number is
   decoration; one whose pitch is the table's is derived. (§11 W2: contract review
   must confirm --lr-pitch is var(--row-h) and not a free number.)
   ====================================================================== */
.dp-texture-ledger-rule{
	--lr-pitch: var(--row-h);                                /* == the table row height */
	--lr-ink:   color-mix(in srgb, var(--primary) 5%, transparent);
	--lr-band:  color-mix(in srgb, var(--primary) 9%, transparent);
}
/* tinted bands and the inside of every data table — nowhere else */
.dp-texture-ledger-rule .band--tinted,
.dp-texture-ledger-rule .apd-band--tinted,
.dp-texture-ledger-rule .apd-nutri__scroll,
.dp-texture-ledger-rule .apd-record__scroll{
	background-image:
		repeating-linear-gradient(to bottom,
			transparent 0 calc(var(--lr-pitch) - 1px),
			var(--lr-ink) calc(var(--lr-pitch) - 1px) var(--lr-pitch)),
		repeating-linear-gradient(to bottom,
			transparent 0 calc(var(--lr-pitch) * 4 - 1px),
			var(--lr-band) calc(var(--lr-pitch) * 4 - 1px) calc(var(--lr-pitch) * 4));
	background-position: 0 var(--lr-offset, 0);
}
/* Safety net for the sixth axis (§11 W2 — "a build that ships without it will
   look almost identical, and that is the definition of a fake axis"). The
   dp-texture-* body class is seeded from APD_DESIGN_PROFILE in functions.php; if
   that constant is ever out of step with the manifest, the wash below still
   renders on exactly the same two surfaces and nowhere else. The tokens it reads
   are the :root mirrors declared in §1.3, so --lr-pitch is still var(--row-h). */
body:not(.dp-texture-ledger-rule) .band--tinted,
body:not(.dp-texture-ledger-rule) .apd-band--tinted,
body:not(.dp-texture-ledger-rule) .apd-nutri__scroll,
body:not(.dp-texture-ledger-rule) .apd-record__scroll{
	background-image:
		repeating-linear-gradient(to bottom,
			transparent 0 calc(var(--lr-pitch) - 1px),
			var(--lr-ink) calc(var(--lr-pitch) - 1px) var(--lr-pitch)),
		repeating-linear-gradient(to bottom,
			transparent 0 calc(var(--lr-pitch) * 4 - 1px),
			var(--lr-band) calc(var(--lr-pitch) * 4 - 1px) calc(var(--lr-pitch) * 4));
	background-position: 0 var(--lr-offset, 0);
}