/* =========================================================================
Bravar.org — main.css
Profile: grade-plate (new, declared — see DESIGN-MANIFEST.json).
Ink + zinc + ONE signal aqua. The site reads as a specification sheet:
riveted zinc rating plates (hero, CTA band, postal checker), inset riveted
section plates on a white sheet, key-tag cards with a punched corner hole,
stamped keyline codes in a DIN 1451-class condensed face.
Axes: typography din-engineering · hero rating-plate ·
section_rhythm riveted-inset · cards key-tag · header tag-overhang ·
texture brushed-satin.
1. Tokens (:root) + non-integer-DPR texture fallback
2. Reset / base
3. Axis — typography: din-engineering
4. Layout: container, sections, grids, section heads, stamps
5. Axis — hero: rating-plate
6. Axis — section rhythm: riveted-inset
7. Axis — cards: key-tag
8. Axis — header: tag-overhang (header + navigation)
9. Buttons: engine, variants, sizes, states, [brv_button], core/button,
the one-accent table (tel-first), consent bar
10. Postal-code module: per-city section, checker, results, index
11. Chrome: topbar, promo bar, breadcrumbs
12. Hero details + the quote form (the plate's label field) + forms
13. Trust, open-now, chips, silo, local areas, area check, map, video
14. Process plate, FAQ, CTA band, testimonials, directory (listing tiers,
sell box, disclosure), plans, free-slots table, advertiser page
15. E-E-A-T, prose, tables, blog, contact, legal boxes, pagination, read more
16. Footer + mobile sticky bar
17. Tool page
18. Utilities / a11y / motion
====================================================================== */
/* 1. TOKENS --------------------------------------------------------------- */
:root{
/* ---- colour: ink + zinc + ONE signal aqua (Customizer overrides primary / accent / text; accent-ink is derived, §3.5) ---- */
--color-primary:#1D2324; --color-primary-hover:#0F1415; --color-primary-strong:#1D2324; --color-primary-ink:#1D2324;
--color-accent:#56DBDA; --color-accent-hover:#3EC8C6; --color-accent-active:#32B7B5; --color-accent-on-dark-hover:#83E8E6;
--color-accent-ink:#141A1B; --color-accent-tint:#DCF7F6; --color-accent-tint-2:#BEEDEC;
--color-text:#141A1B; --color-muted:#4A5656;
--color-white:#FFFFFF; --color-page:#FFFFFF; --color-surface-card:#FFFFFF;
--color-surface:#F1F4F4; --color-plate:#E3E9E9; --color-surface-2:#D3DBDB;
--color-border:#C0CACA; --color-border-strong:#758282; --color-field-border:#687474;
--color-engrave:rgba(29,35,36,.30);
--color-star:#1D2324;
--color-success:#141A1B; --color-success-bg:#DCF7F6; --color-success-rule:#32B7B5;
--color-error:#A62B21; --color-error-on-dark:#FF958A; --color-error-bg:#FBEAE8;
--color-dark:#182021; --color-dark-2:#0F1415; --color-dark-3:#232C2E; --color-dark-border:#374345;
--color-on-dark:#F1F4F4; --color-on-dark-muted:#B2BEBF; --color-on-dark-disabled:#7F8C8D;
--color-rivet-body:#9AA6A6;
--rule-2tone:linear-gradient(90deg,var(--color-accent) 0 100%); /* DEPRECATED alias kept: companion analytics.php:152 reads it */
/* ---- type ---- */
--font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Helvetica Neue',Arial,'Liberation Sans',sans-serif;
--font-display:'DIN Condensed','Bahnschrift Condensed',Bahnschrift,'sans-serif-condensed','Roboto Condensed','DejaVu Sans Condensed','Liberation Sans Narrow','Arial Narrow',sans-serif;
--fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-display:700;
--text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem;
--text-2xl:clamp(1.25rem,1.15rem + .35vw,1.414rem); /* H3 21.3 -> 24.0px */
--text-3xl:clamp(1.625rem,1.35rem + 1vw,2rem); /* H2 27.6 -> 34px */
--text-4xl:clamp(2.125rem,1.7rem + 1.6vw,2.824rem); /* H1 36.1 -> 48px */
--text-5xl:2.824rem; --text-6xl:4rem; /* next sqrt2 steps (48 / 68px) */
--text-label:.875rem; --text-code:1.5rem; --text-code-lg:1.75rem; --text-card-title:1.375rem;
--text-btn:1.1875rem; --text-btn-sm:1rem; --text-btn-lg:1.3125rem;
--lh-tight:1.14; --lh-h2:1.18; --lh-h3:1.22; --lh-snug:1.4; --lh-normal:1.6; --lh-btn:1.1;
--track-h1:0; --track-h2:.005em; --track-h3:.01em; --track-label:.10em; --track-eyebrow:.10em; /* --track-eyebrow = donor alias */
--track-btn:.01em; --track-code:.02em; --track-wordmark:.01em;
/* ---- space (gap-free; --space-10 added) ---- */
--space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem;
--space-8:2rem; --space-10:2.5rem; --space-12:2.75rem; --space-16:3.5rem; --space-20:4.5rem; --space-24:6rem;
--plate-pad-y:clamp(2rem,4vw,3.25rem); --plate-pad-x:clamp(1rem,3.5vw,2.75rem);
--width-content:720px; --width-wide:1140px; --prose-measure:66ch;
/* ---- shape: small radii, NO elevation shadow (inset edges + focus rings only) ---- */
--radius-sm:2px; --radius:4px; --radius-md:6px; --radius-lg:8px; --radius-full:999px;
--radius-btn:4px; --radius-plate:6px; --radius-tag:6px;
--shadow-sm:none; --shadow:none; --shadow-lg:none;
--keyline:2px;
--btn-edge:inset 0 -3px 0 rgba(20,26,27,.30); --btn-edge-pressed:inset 0 2px 0 rgba(20,26,27,.30);
--focus-w:3px; --focus-offset:3px;
/* ---- plate hardware ---- */
--rivet:9px; --rivet-inset:12px;
--rivet-light:radial-gradient(circle,#FFFFFF 0 .8px,var(--color-border) 1.6px,var(--color-rivet-body) 2.8px,var(--color-muted) 3.8px 4.2px,transparent 4.6px);
--rivet-dark:radial-gradient(circle,rgba(255,255,255,.5) 0 .8px,var(--color-muted) 1.6px,var(--color-dark-3) 3.2px,var(--color-dark-2) 3.8px 4.2px,transparent 4.6px);
--tag-hole:5px; --tag-hole-x:12px; --tag-hole-y:12px; --tag-overhang:18px;
/* ---- texture: brushed-satin (ceilings §1.6) ---- */
--brush-light:repeating-linear-gradient(180deg,rgba(0,0,0,.045) 0 1px,transparent 1px 3px),
repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 1px,transparent 1px 7px),
repeating-linear-gradient(180deg,rgba(0,0,0,.03) 0 1px,transparent 1px 11px);
--brush-light-safe:repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 1px,transparent 1px 7px),
repeating-linear-gradient(180deg,rgba(0,0,0,.03) 0 1px,transparent 1px 11px);
--sheen-light:linear-gradient(100deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.22) 30%,rgba(255,255,255,0) 50%,
rgba(255,255,255,0) 62%,rgba(255,255,255,.12) 78%,rgba(255,255,255,0) 92%);
--brush-dark:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 7px),
repeating-linear-gradient(180deg,rgba(0,0,0,.12) 0 1px,transparent 1px 11px);
--brush-dark-safe:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 7px),
repeating-linear-gradient(180deg,rgba(0,0,0,.12) 0 1px,transparent 1px 11px);
--sheen-dark:linear-gradient(100deg,rgba(255,255,255,0) 10%,rgba(255,255,255,.06) 32%,rgba(255,255,255,0) 52%);
/* ---- button surface sets: LIGHT (default). Dark surfaces re-set them (§5.2). p=primary s=secondary k=ink skin d=disabled ---- */
--btn-p-bg:var(--color-accent); --btn-p-bg-hover:var(--color-accent-hover); --btn-p-bg-active:var(--color-accent-active);
--btn-p-ink:var(--color-accent-ink); --btn-p-line:var(--color-primary);
--btn-s-bg:var(--color-page); --btn-s-bg-hover:var(--color-accent-tint); --btn-s-bg-active:var(--color-accent-tint-2);
--btn-s-ink:var(--color-primary); --btn-s-ink-hover:var(--color-primary); --btn-s-line:var(--color-primary);
--btn-k-bg:var(--color-primary); --btn-k-bg-hover:var(--color-primary-hover); --btn-k-ink:var(--color-white); --btn-k-line:var(--color-primary);
--btn-d-bg:var(--color-surface-2); --btn-d-ink:var(--color-muted); --btn-d-line:var(--color-border-strong);
--ring:var(--color-primary);
/* ---- chrome / motion / runtime ---- */
--transition:160ms ease; --header-h:64px; --header-h-shrunk:56px; --sticky-h:64px;
--consent-h:0px; /* set at runtime by the companion consent banner */
--readmore-h:480px; /* read-more collapse height (donor main.css:640) */
}
@media (max-width:767px){:root{--tag-overhang:12px;--header-h:56px;}}
/* brushed-satin: at non-integer device-pixel ratios the 3px grain layer is
dropped (moire guard); the -safe sets keep the 7px and 11px layers. */
@media (min-resolution:1.1dppx) and (max-resolution:1.9dppx),(min-resolution:2.1dppx) and (max-resolution:2.9dppx){
:root{--brush-light:var(--brush-light-safe);--brush-dark:var(--brush-dark-safe);}}
/* 2. RESET / BASE --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
/* 17px base (106.25%); every rem scales from here. */
html{font-size:106.25%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;font-family:var(--font);font-size:var(--text-base);line-height:var(--lh-normal);color:var(--color-text);
background-color:var(--color-page);-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
svg,video,iframe{max-width:100%;}
/* Link ink on light is the ink token, so the underline IS the affordance. */
a{color:var(--color-primary);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;}
a:hover{text-decoration-thickness:3px;}
p{margin:0 0 var(--space-4);}
ul,ol{margin:0 0 var(--space-4);padding-left:1.25rem;}
b,strong{font-weight:var(--fw-bold);}
button,input,select,textarea{font:inherit;color:inherit;}
[hidden]{display:none!important;}
/* One focus language: a 3px ring at a 3px offset in the surface's ring colour
(ink on light, on-dark on dark surfaces — the button source sets re-set --ring). */
:focus-visible{outline:var(--focus-w) solid var(--ring);outline-offset:var(--focus-offset);}
::selection{background-color:var(--color-accent-tint-2);color:var(--color-text);}
/* In-page anchors clear the docked header. */
#quote-form-container,#provjera-postanskog-broja,#postanski-brojevi,[id^="pb-"],[id^="pbr-"],
#bravari,#gradovi,#paketi,#prijava,#slobodna-mjesta,#brv-prijava{scroll-margin-top:calc(var(--header-h-shrunk) + var(--space-4));}
/* 3. AXIS — TYPOGRAPHY: din-engineering ----------------------------------- */
/* One display weight (700), sentence case, zero or positive tracking, ratio
1.414 on desktop. UPPERCASE only on <= 4-word plate stamps. No monospace. */
h1,h2,h3,.hero__title,.card__title,.cta-banner__title,.postal-check__title,.postal-index__city{font-family:var(--font-display);
font-stretch:condensed;font-weight:var(--fw-display);font-synthesis:none;text-transform:none;color:var(--color-primary);
text-wrap:balance;overflow-wrap:break-word;hyphens:manual;}
h1,h2,h3{margin:0 0 var(--space-4);}
h1,.hero__title{font-size:var(--text-4xl);line-height:var(--lh-tight);letter-spacing:var(--track-h1);}
h2{font-size:var(--text-3xl);line-height:var(--lh-h2);letter-spacing:var(--track-h2);}
h3{font-size:var(--text-2xl);line-height:var(--lh-h3);letter-spacing:var(--track-h3);}
h4,h5,h6,.faq-question{font-family:var(--font);font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:0;}
h4,h5,h6{color:var(--color-text);margin:0 0 var(--space-3);}
h4{font-size:var(--text-lg);} h5{font-size:var(--text-base);} h6{font-size:var(--text-sm);}
/* The condensed cut is single-style: emphasis inside a heading stays upright. */
h1 em,h2 em,h3 em,h1 i,h2 i,h3 i{font-style:normal;}
h1 strong,h2 strong,h3 strong{font-weight:inherit;}
p,li,dd,blockquote,figcaption{hyphens:auto;hyphenate-limit-chars:8 4 4;}
/* Tabular lining figures on every code, phone number and metric (DIN digits are all one width). */
.postal-code__num,.trust-metric__value,td.num,th.num,.hero__fact-value,.process__num,
.topbar a,.footer-col a[href^="tel"],.open-now__next,.hero__call span,.footer-license,.postal-index__range,
.listing__call,.listing__row-call,.listing__rating,.directory__intro,.directory__sell-text,.slots{font-variant-numeric:tabular-nums lining-nums;}
/* Label centring for the DIN labels (ascent = cap height); box height kept by min-height. */
@supports (text-box: trim-both cap alphabetic){
.section-head__eyebrow,.hero__eyebrow,.postal-code__num,.trust-badge{text-box:trim-both cap alphabetic;}}
/* 4. LAYOUT ---------------------------------------------------------------- */
.container{width:100%;max-width:var(--width-wide);margin:0 auto;padding:0 var(--space-4);}
.site-main{display:block;}
.section{position:relative;padding:var(--space-20) 0;}
/* Base surfaces (the riveted-inset axis turns them into inset plates, §6). */
.section--surface{background-color:var(--color-surface);}
.section--dark{background-color:var(--color-dark);color:var(--color-on-dark);}
/* The donor .section--dark descendant list — kept as the only descendant-element
rules on a band (the process plate stays dark, so they stay correct). New
component CSS never adds to this list; it targets its own BEM classes. */
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--color-on-dark);}
.section--dark p{color:var(--color-on-dark-muted);}
.section--dark a:not(.btn){color:var(--color-on-dark);}
.section--dark .section-head__eyebrow{color:var(--color-accent);}
.section--dark .section-head p{color:var(--color-on-dark-muted);}
.grid{display:grid;gap:var(--space-4);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{gap:var(--space-5);}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}}
.grid-more{margin:var(--space-8) 0 0;}
.text-center{text-align:center;}
.content-narrow{max-width:var(--prose-measure);margin-left:auto;margin-right:auto;}
/* Section heads: left-aligned — stamp eyebrow → H2 → intro <= 60ch. */
.section-head{max-width:46rem;margin:0 0 var(--space-8);text-align:left;}
.section-head h1,.section-head h2{margin-bottom:var(--space-3);}
h2.section-head{font-size:var(--text-3xl);max-width:none;}
.section-head p{color:var(--color-muted);max-width:60ch;margin:var(--space-3) 0 0;}
.section-head p + p{margin-top:var(--space-2);}
/* The stamp: eyebrows are keyline plate labels (display 700, UPPERCASE, +.10em). */
.section-head__eyebrow,.hero__eyebrow,.author-box__eyebrow{display:inline-flex;align-items:center;gap:.5em;padding:.38em .6em;
border:1.5px solid currentColor;border-radius:var(--radius-sm);font-family:var(--font-display);font-stretch:condensed;
font-weight:var(--fw-display);font-size:var(--text-label);letter-spacing:var(--track-label);text-transform:uppercase;line-height:1;
color:var(--color-primary);margin-bottom:var(--space-3);}
.section-head__eyebrow svg,.author-box__eyebrow svg{width:1.1em;height:1.1em;flex:0 0 auto;}
/* On a zinc plate the stamp is engraved. */
.hero--rating-plate .hero__eyebrow,.dp-rhythm-riveted-inset .section--surface .section-head__eyebrow{text-shadow:0 1px 0 rgba(255,255,255,.65);}
/* 5. AXIS — HERO: rating-plate -------------------------------------------- */
/* One riveted zinc plate: 2px ink border, 6px radius, four 9px rivets at 12px
insets, an engraved keyline at 7px, brushed satin. A 2px ink rule divides
the content field from the white label field (the quote form). */
.hero{position:relative;isolation:isolate;}
.hero--rating-plate{background:var(--color-page);color:var(--color-text);overflow:visible;
padding:calc(var(--tag-overhang) + var(--space-5)) 0 var(--space-6);}
.hero--rating-plate .hero__inner{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);
gap:0;padding:0;
background-color:var(--color-plate);background-image:var(--sheen-light),var(--brush-light);
border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-plate);}
.hero--rating-plate .hero__inner::after{content:"";position:absolute;inset:7px;z-index:-1;pointer-events:none;
border:1px solid var(--color-engrave);border-radius:var(--radius-sm);}
.hero--rating-plate .hero__inner::before{content:"";position:absolute;inset:var(--rivet-inset);z-index:2;pointer-events:none;
background:var(--rivet-light) left top/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right top/var(--rivet) var(--rivet) no-repeat,
var(--rivet-light) left bottom/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right bottom/var(--rivet) var(--rivet) no-repeat;}
.hero--rating-plate .hero__content{min-width:0;}
.hero--rating-plate .hero__title{margin:var(--space-3) 0 var(--space-4);color:var(--color-primary);}
.hero--rating-plate .hero__subtitle{font-size:var(--text-lg);color:var(--color-muted);max-width:44ch;margin:0 0 var(--space-6);}
.hero--rating-plate .hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);}
.hero--rating-plate .hero__inner{max-width:52rem;} /* 2.0: no form panel — the plate shrinks to its content */
.hero--rating-plate .hero__content{padding:var(--space-12) clamp(1rem,4vw,3.5rem);}
.hero .reveal,.hero--rating-plate .hero__content{opacity:1;transform:none;} /* LCP guard */
@media (max-width:639px){
.hero--rating-plate > .container{padding:0;}
.hero--rating-plate .hero__inner{border-left:0;border-right:0;border-radius:0;}
.hero--rating-plate .hero__inner::after{inset:7px 0;border-left:0;border-right:0;border-radius:0;}
.hero--rating-plate .hero__inner::before{background:var(--rivet-light) left top/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right top/var(--rivet) var(--rivet) no-repeat;}
.hero--rating-plate .hero__content{padding:var(--space-8) var(--space-4) var(--space-6);}
.hero--rating-plate .hero__ctas .btn{flex:1 1 100%;}}
/* Photo-optional path: the photo is the WALL the opaque plate is mounted on, so
text contrast never depends on it (the only path with an ![]()
). */
.hero--has-media{padding-block:var(--space-12);}
.hero__media{position:absolute;inset:0;z-index:-1;}
.hero__media img{object-fit:cover;width:100%;height:100%;}
@media (max-width:639px){
.hero--has-media{padding-top:0;}
.hero--has-media .hero__media{position:relative;height:9rem;}}
/* 6. AXIS — SECTION RHYTHM: riveted-inset --------------------------------- */
/* No band touches the viewport edges above the footer. White sections are the
open sheet; tinted sections and the one dark process band are inset plates. */
.dp-rhythm-riveted-inset .section{padding:var(--space-20) 0;}
.dp-rhythm-riveted-inset :is(.section--surface,.section--dark){background:transparent;padding:var(--space-6) 0;}
.dp-rhythm-riveted-inset :is(.section--surface,.section--dark) > .container{position:relative;isolation:isolate;
padding:var(--plate-pad-y) calc(var(--space-4) + var(--plate-pad-x));}
.dp-rhythm-riveted-inset :is(.section--surface,.section--dark) > .container::before{content:"";position:absolute;
inset:0 var(--space-4);z-index:-1;border-radius:var(--radius-lg);}
.dp-rhythm-riveted-inset .section--surface > .container::before{background-color:var(--color-surface);
background-image:var(--sheen-light),var(--brush-light);border:1px solid var(--color-border);}
.dp-rhythm-riveted-inset .section--dark > .container::before{background-color:var(--color-dark);
background-image:var(--sheen-dark),var(--brush-dark);border:1px solid var(--color-dark-border);}
.dp-rhythm-riveted-inset :is(.section--surface,.section--dark) > .container::after{content:"";position:absolute;z-index:-1;
pointer-events:none;inset:var(--rivet-inset) calc(var(--space-4) + var(--rivet-inset));
background:var(--rivet-light) left top/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right top/var(--rivet) var(--rivet) no-repeat,
var(--rivet-light) left bottom/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right bottom/var(--rivet) var(--rivet) no-repeat;}
.dp-rhythm-riveted-inset .section--dark > .container::after{
background:var(--rivet-dark) left top/var(--rivet) var(--rivet) no-repeat,var(--rivet-dark) right top/var(--rivet) var(--rivet) no-repeat,
var(--rivet-dark) left bottom/var(--rivet) var(--rivet) no-repeat,var(--rivet-dark) right bottom/var(--rivet) var(--rivet) no-repeat;}
@media (max-width:639px){
.dp-rhythm-riveted-inset :is(.section--surface,.section--dark) > .container{padding:var(--space-8) calc(var(--space-2) + var(--space-4));}
.dp-rhythm-riveted-inset :is(.section--surface,.section--dark) > .container::before{inset:0 var(--space-2);border-radius:var(--radius-md);}
.dp-rhythm-riveted-inset :is(.section--surface,.section--dark) > .container::after{inset:9px calc(var(--space-2) + 9px);}}
/* 7. AXIS — CARDS: key-tag ------------------------------------------------ */
/* A white 6px tag with a 1px border-strong keyline and a punched hole (5px,
with a 1px rim) at (12px, 12px). The hole ends at 18.5px; the top padding is
25.5px, so it can never touch content. Hover swings the tag about its hole. */
.dp-cards-key-tag :is(.card,.content-card,.credential,.guarantee,.team-card,.project-card,.testimonial,.listing--standardni,.plan){
position:relative;background-color:var(--color-surface-card);
border:1px solid var(--color-border-strong);border-radius:var(--radius-tag);
padding:var(--space-6) var(--space-5) var(--space-5);box-shadow:none;
transform-origin:var(--tag-hole-x) var(--tag-hole-y);
background-image:radial-gradient(circle at var(--tag-hole-x) var(--tag-hole-y),transparent var(--tag-hole),
var(--color-border-strong) var(--tag-hole),var(--color-border-strong) calc(var(--tag-hole) + 1px),transparent calc(var(--tag-hole) + 1.5px));
background-repeat:no-repeat;
-webkit-mask:radial-gradient(circle var(--tag-hole) at var(--tag-hole-x) var(--tag-hole-y),#0000 calc(100% - .5px),#000 100%);
mask:radial-gradient(circle var(--tag-hole) at var(--tag-hole-x) var(--tag-hole-y),#0000 calc(100% - .5px),#000 100%);
transition:border-color var(--transition),background-color var(--transition);}
.dp-cards-key-tag .card__title{padding-left:0;padding-bottom:var(--space-3);margin:0 0 var(--space-3);
border-bottom:1px solid var(--color-border);font-size:var(--text-card-title);line-height:1.15;letter-spacing:var(--track-h3);}
.dp-cards-key-tag .card__title a{color:var(--color-primary);text-decoration:none;}
.dp-cards-key-tag .card__title a::after{content:"";position:absolute;inset:0;} /* whole tag is the tap target */
.dp-cards-key-tag .card__title a:focus-visible{outline:none;}
.dp-cards-key-tag .card__cta{position:relative;z-index:1;}
.dp-cards-key-tag :is(.card,.content-card,.team-card,.project-card,.listing--standardni,.plan):focus-within{
box-shadow:inset 0 0 0 2px var(--color-primary);border-color:var(--color-primary);} /* 3px of ink, INSIDE the mask box */
@media (hover:hover) and (pointer:fine){
.dp-cards-key-tag :is(.card,.content-card,.team-card,.project-card):hover{border-color:var(--color-primary);background-color:var(--color-surface);}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.dp-cards-key-tag :is(.card,.content-card,.team-card,.project-card){
transition:border-color var(--transition),background-color var(--transition),transform 240ms cubic-bezier(.3,.7,.4,1.2);}
.dp-cards-key-tag :is(.card,.content-card,.team-card,.project-card):hover{transform:rotate(-1.25deg);}}
/* Card internals (zero-photo: the tag is finished without an image). */
.card,.project-card{display:flex;flex-direction:column;}
.card__media{display:block;margin:calc(var(--space-6) * -1) calc(var(--space-5) * -1) var(--space-4);text-decoration:none;
border-radius:var(--radius-tag) var(--radius-tag) 0 0;overflow:hidden;}
.card__media img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.card__body{display:flex;flex-direction:column;gap:var(--space-2);flex:1 1 auto;min-width:0;}
.card__title{font-size:var(--text-card-title);line-height:1.15;margin:0;}
.card__title a{color:var(--color-primary);text-decoration:none;}
.card__title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em;}
.card__title svg{width:.9em;height:.9em;vertical-align:-.1em;margin-right:.3em;}
.card__excerpt{color:var(--color-muted);font-size:var(--text-sm);margin:0;}
/* City cards: the directory count „{N} bravara” as a small keyline stamp (only when N >= 1). */
.card__count{align-self:flex-start;display:inline-flex;align-items:center;margin:0;padding:.32em .5em;border:1.5px solid var(--color-primary);
border-radius:var(--radius-sm);background-color:var(--color-page);color:var(--color-primary);font-family:var(--font-display);font-stretch:condensed;
font-weight:var(--fw-display);font-size:var(--text-label);letter-spacing:var(--track-label);text-transform:uppercase;line-height:1;
font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;}
.card__body .entry-meta{margin:0;}
/* .card__cta: ink text links (1.5px underline at .18em, 3px on hover) — no filled buttons in grids. */
.card__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-1);color:var(--color-primary);
font-weight:var(--fw-bold);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;}
.card__cta{margin-top:auto;padding-top:var(--space-2);}
.card__cta:hover{text-decoration-thickness:3px;}
.card__cta svg{width:1em;height:1em;flex:0 0 auto;}
@media (prefers-reduced-motion:no-preference){
.card__cta svg{transition:transform var(--transition);}
.card__cta:hover svg{transform:translateX(3px);}}
/* Content cards — the per-page [brv_cards] set. */
.content-cards{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);margin:var(--space-8) 0;}
@media (min-width:560px){.content-cards--2,.content-cards--3,.content-cards--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:900px){
.content-cards--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.content-cards--4{grid-template-columns:repeat(4,minmax(0,1fr));}}
.content-card .card__title,.content-card__title{font-size:var(--text-card-title);line-height:1.15;margin:0 0 var(--space-2);}
.content-card__text{font-size:var(--text-base);line-height:var(--lh-normal);color:var(--color-text);}
.content-card__text > :first-child{margin-top:0;}
.content-card__text > :last-child{margin-bottom:0;}
/* 8. AXIS — HEADER: tag-overhang ------------------------------------------ */
/* A white sticky bar closed by a 2px ink rule. The wordmark is a dark key tag
(ink block, 8px bottom radii, punched hole at its left) that overhangs the
rule by --tag-overhang and retracts flush when the header docks. */
.site-header{position:sticky;top:0;z-index:100;background:var(--color-page);color:var(--color-primary);
border-bottom:var(--keyline) solid var(--color-primary);}
.site-header__inner{display:flex;align-items:stretch;justify-content:space-between;}
.site-header__main{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
min-height:var(--header-h);padding-inline:max(var(--space-4),calc((100% - var(--width-wide)) / 2 + var(--space-4)));}
.site-branding{display:flex;align-items:center;min-width:0;}
.site-title{margin:0;font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:1.375rem;
letter-spacing:var(--track-wordmark);text-transform:none;line-height:1;white-space:nowrap;}
.site-title a{text-decoration:none;}
.custom-logo-link{display:inline-flex;align-items:center;text-decoration:none;}
.custom-logo-link img{max-height:44px;object-fit:contain;object-position:left center;}
.dp-header-tag-overhang .site-header{position:sticky;top:0;z-index:100;background:var(--color-page);color:var(--color-primary);
border-bottom:var(--keyline) solid var(--color-primary);box-shadow:none;}
.dp-header-tag-overhang .site-header.is-shrunk,.dp-header-tag-overhang .site-header.is-open{--tag-overhang:0px;}
.dp-header-tag-overhang .site-header__main{min-height:var(--header-h);gap:var(--space-4);
padding-inline:max(var(--space-4),calc((100% - var(--width-wide)) / 2 + var(--space-4)));}
.dp-header-tag-overhang .site-header.is-shrunk .site-header__main{min-height:var(--header-h-shrunk);}
.dp-header-tag-overhang .site-branding{position:relative;z-index:3;align-self:stretch;display:flex;align-items:center;flex:0 1 auto;min-width:0;
margin-bottom:calc(var(--tag-overhang) * -1);padding:0 var(--space-4) 0 calc(var(--space-4) + 1.1rem);
background-color:var(--color-primary);border-radius:0 0 var(--radius-lg) var(--radius-lg);
background-image:radial-gradient(circle at 1.05rem 50%,transparent var(--tag-hole),rgba(255,255,255,.4) var(--tag-hole),
rgba(255,255,255,.4) calc(var(--tag-hole) + 1px),transparent calc(var(--tag-hole) + 1.5px));background-repeat:no-repeat;
-webkit-mask:radial-gradient(circle var(--tag-hole) at 1.05rem 50%,#0000 calc(100% - .5px),#000 100%);
mask:radial-gradient(circle var(--tag-hole) at 1.05rem 50%,#0000 calc(100% - .5px),#000 100%);}
.dp-header-tag-overhang .site-title{margin:0;font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);
font-size:1.375rem;letter-spacing:var(--track-wordmark);text-transform:none;line-height:1;white-space:nowrap;}
.dp-header-tag-overhang .site-title a{color:var(--color-on-dark);text-decoration:none;}
.dp-header-tag-overhang .site-title a:focus-visible{outline:2px solid var(--color-on-dark);outline-offset:-5px;}
.dp-header-tag-overhang .site-branding:has(.custom-logo-link){background-color:var(--color-page);border:var(--keyline) solid var(--color-primary);border-top:0;}
.dp-header-tag-overhang .header-actions{display:flex;align-items:center;gap:var(--space-3);}
.dp-header-tag-overhang .brv-header-cta{min-height:44px;padding:0 var(--space-4);font-size:var(--text-btn-sm);white-space:nowrap;}
.dp-header-tag-overhang .menu-toggle{width:44px;height:44px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-btn);background:var(--color-page);}
.dp-header-tag-overhang .menu-toggle span{display:block;width:20px;height:2px;background:var(--color-primary);}
.dp-header-tag-overhang .menu-toggle:focus-visible{outline:var(--focus-w) solid var(--color-primary);outline-offset:2px;}
@media (prefers-reduced-motion:no-preference){
.dp-header-tag-overhang .site-branding{transition:margin-bottom 180ms ease;}
.dp-header-tag-overhang .site-header__main{transition:min-height 180ms ease;}}
.header-actions{display:flex;align-items:center;gap:var(--space-3);}
.menu-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;
border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-btn);background:var(--color-page);cursor:pointer;}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--color-primary);}
/* Header search (optional, Customizer): a white field + a small Sekundarni. */
.header-search form{display:flex;gap:var(--space-2);}
.header-search .search-field{min-width:0;max-width:11rem;min-height:40px;padding:var(--space-1) var(--space-3);
border:1.5px solid var(--color-field-border);border-radius:3px;background-color:var(--color-page);color:var(--color-text);font-size:var(--text-sm);}
.header-search .search-field::placeholder{color:var(--color-muted);opacity:1;}
.header-search .btn{min-height:40px;padding:0 var(--space-3);font-size:var(--text-btn-sm);}
@media (max-width:767px){.header-search{display:none;}}
/* Parent chevron (border chevron) — a real nested menu is expected (§21.14). */
.main-nav ul{list-style:none;margin:0;padding:0;}
.main-nav .menu-item-has-children > a::after{content:"";display:inline-block;flex:0 0 auto;width:.4em;height:.4em;margin-left:.45em;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);}
/* desktop nav >= 960 (matches main.js) */
@media (min-width:960px){
.dp-header-tag-overhang .menu-toggle,.menu-toggle{display:none;}
.main-nav{margin-inline:auto;}
.main-nav > ul{display:flex;align-items:stretch;gap:var(--space-5);margin:0;padding:0;list-style:none;}
.main-nav > ul > li{position:relative;display:flex;}
.main-nav > ul > li > a{display:flex;align-items:center;min-height:var(--header-h);font:var(--fw-semibold) .9375rem/1.2 var(--font);
color:var(--color-primary);white-space:nowrap;text-decoration:none;}
.main-nav > ul > li > a:hover,.main-nav > ul > li > a:focus-visible{text-decoration:underline 2px;text-underline-offset:6px;
box-shadow:inset 0 -4px 0 var(--color-accent);} /* brand-colour cue (§21.14) */
.main-nav .current-menu-item > a,.main-nav .current-menu-ancestor > a{box-shadow:inset 0 -4px 0 var(--color-primary);}
.site-header.is-shrunk .main-nav > ul > li > a{min-height:var(--header-h-shrunk);}
.main-nav .sub-menu{position:absolute;top:100%;left:calc(var(--space-3) * -1);min-width:16rem;margin:0;padding:var(--space-1) 0;list-style:none;
background:var(--color-page);border:var(--keyline) solid var(--color-primary);border-top:0;border-radius:0 0 var(--radius-md) var(--radius-md);
visibility:hidden;opacity:0;z-index:10;}
.main-nav li:hover > .sub-menu,.main-nav li:focus-within > .sub-menu{visibility:visible;opacity:1;}
.main-nav .sub-menu li + li{border-top:1px solid var(--color-border);}
.main-nav .sub-menu a{display:block;padding:var(--space-3) var(--space-4);font-weight:var(--fw-medium);white-space:normal;color:var(--color-primary);text-decoration:none;}
.main-nav .sub-menu a:hover,.main-nav .sub-menu a:focus-visible{background:var(--color-surface);text-decoration:underline 2px;
box-shadow:inset 4px 0 0 var(--color-accent);}}
/* mobile sheet < 960 (tap accordion: first tap opens a parent, second navigates) */
@media (max-width:959px){
.main-nav{position:absolute;top:100%;inset-inline:0;z-index:90;background:var(--color-page);border-bottom:var(--keyline) solid var(--color-primary);
max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;}
.site-header.is-open .main-nav,.main-nav.is-open{visibility:visible;opacity:1;}
.main-nav ul{list-style:none;margin:0;padding:0 var(--space-4);}
.main-nav li{border-bottom:1px solid var(--color-border);}
.main-nav a{display:block;padding:var(--space-4) 0;font:var(--fw-semibold) 1.0625rem/1.3 var(--font);color:var(--color-primary);text-decoration:none;}
.main-nav .menu-item-has-children > a::after{float:right;margin-top:.4em;}
.main-nav .sub-menu{display:none;border-left:var(--keyline) solid var(--color-primary);margin:0 0 var(--space-3) var(--space-1);padding-left:var(--space-4);}
.main-nav li.is-open > .sub-menu{display:block;}
.main-nav .sub-menu li{border-bottom:0;}
.main-nav .sub-menu a{padding:var(--space-3) 0;font-weight:var(--fw-medium);}
.main-nav li.is-open > a::after{transform:translateY(2px) rotate(-135deg);}
.main-nav .current-menu-item > a{box-shadow:inset 4px 0 0 var(--color-primary);padding-left:var(--space-3);}
/* no-JS fallback: the toggle cannot work, so the menu is shown inline below the header row */
.no-js .site-header{position:relative;}
.no-js .site-header__main{flex-wrap:wrap;}
.no-js .main-nav{position:static;order:3;flex:1 0 100%;visibility:visible;opacity:1;max-height:none;overflow:visible;border-bottom:0;}
.no-js .main-nav .sub-menu{display:block;}
.no-js .menu-toggle{display:none;}}
@media (prefers-reduced-motion:no-preference) and (max-width:959px){
.main-nav{transition:opacity 160ms ease,visibility 160ms;}
.main-nav .menu-item-has-children > a::after{transition:transform var(--transition);}}
/* header CTA strategy: phones show the compact CTA only while no sticky call bar exists */
@media (max-width:767px){
.dp-header-tag-overhang .brv-header-cta{display:none;}
body.dp-header-tag-overhang:not(:has(> .sticky-bar)) .brv-header-cta{display:inline-flex;min-height:40px;padding:0 var(--space-2);}}
@media (max-width:399px){
.dp-header-tag-overhang .site-header__main{gap:.375rem;}
.dp-header-tag-overhang .header-actions{gap:.375rem;}
.dp-header-tag-overhang .site-title{font-size:1.0625rem;}
.dp-header-tag-overhang .site-branding{padding:0 var(--space-2) 0 1.25rem;
background-image:radial-gradient(circle at .8rem 50%,transparent var(--tag-hole),rgba(255,255,255,.4) var(--tag-hole),
rgba(255,255,255,.4) calc(var(--tag-hole) + 1px),transparent calc(var(--tag-hole) + 1.5px));
-webkit-mask:radial-gradient(circle var(--tag-hole) at .8rem 50%,#0000 calc(100% - .5px),#000 100%);
mask:radial-gradient(circle var(--tag-hole) at .8rem 50%,#0000 calc(100% - .5px),#000 100%);}}
@media (max-width:349px){.dp-header-tag-overhang .brv-header-cta{display:none !important;}}
/* 9. BUTTONS --------------------------------------------------------------- */
/* Two roles (Primarni / Sekundarni), four variants, one extra ink skin.
Surfaces set the SOURCE sets (--btn-p/s/k/d-*); variants and context rules
set only the ENGINE variables; the base reads only engine variables, and
hover/active are written once on the base. */
/* 1. dark surfaces re-set the source sets (they inherit to every button inside) */
:is(.section--dark,.site-footer,.sticky-bar,.topbar,.promo-bar,.cta-banner--dark,.brv-consent,.has-dark-background-color,.has-dark-2-background-color){
--btn-p-bg:var(--color-accent); --btn-p-bg-hover:var(--color-accent-on-dark-hover); --btn-p-bg-active:var(--color-accent-hover);
--btn-p-ink:var(--color-accent-ink); --btn-p-line:var(--color-accent);
--btn-s-bg:transparent; --btn-s-bg-hover:var(--color-on-dark); --btn-s-bg-active:var(--color-on-dark-muted);
--btn-s-ink:var(--color-on-dark); --btn-s-ink-hover:var(--color-text); --btn-s-line:var(--color-on-dark-muted);
--btn-k-bg:var(--color-on-dark); --btn-k-bg-hover:var(--color-on-dark-muted); --btn-k-ink:var(--color-text); --btn-k-line:var(--color-on-dark);
--btn-d-bg:transparent; --btn-d-ink:var(--color-on-dark-disabled); --btn-d-line:var(--color-dark-border);
--ring:var(--color-on-dark);}
/* light islands inside dark contexts reset to the light set */
:is(.section--dark,.site-footer,.cta-banner--dark) :is(.quote-form-wrap,.form-fallback,.postal-check){
--btn-p-bg:var(--color-accent); --btn-p-bg-hover:var(--color-accent-hover); --btn-p-bg-active:var(--color-accent-active);
--btn-p-ink:var(--color-accent-ink); --btn-p-line:var(--color-primary);
--btn-s-bg:var(--color-page); --btn-s-bg-hover:var(--color-accent-tint); --btn-s-bg-active:var(--color-accent-tint-2);
--btn-s-ink:var(--color-primary); --btn-s-ink-hover:var(--color-primary); --btn-s-line:var(--color-primary);
--btn-k-bg:var(--color-primary); --btn-k-bg-hover:var(--color-primary-hover); --btn-k-ink:var(--color-white); --btn-k-line:var(--color-primary);
--btn-d-bg:var(--color-surface-2); --btn-d-ink:var(--color-muted); --btn-d-line:var(--color-border-strong);
--ring:var(--color-primary);}
/* 2. base: every button-like element reads ONLY engine variables (defaults = secondary) */
.btn,.wp-block-button__link,.brv-header-cta,.sticky-bar a{
--btn-bg:var(--btn-s-bg); --btn-bg-hover:var(--btn-s-bg-hover); --btn-bg-active:var(--btn-s-bg-active);
--btn-ink:var(--btn-s-ink); --btn-ink-hover:var(--btn-s-ink-hover); --btn-line:var(--btn-s-line); --btn-line-hover:var(--btn-s-line);
--btn-shadow:none; --btn-shadow-active:none;
display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
min-height:48px;max-width:100%;padding:var(--space-2) var(--space-5);
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-btn);
line-height:var(--lh-btn);letter-spacing:var(--track-btn);text-transform:none;text-align:center;text-decoration:none;
white-space:normal;text-wrap:balance;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
background-color:var(--btn-bg);color:var(--btn-ink);border:var(--keyline) solid var(--btn-line);
border-radius:var(--radius-btn);box-shadow:var(--btn-shadow);
transition:background-color var(--transition),color var(--transition),border-color var(--transition),box-shadow var(--transition);}
.btn:hover,.wp-block-button__link:hover,.brv-header-cta:hover,.sticky-bar a:hover{
background-color:var(--btn-bg-hover);color:var(--btn-ink-hover);border-color:var(--btn-line-hover);text-decoration:none;}
.btn:active,.wp-block-button__link:active,.brv-header-cta:active,.sticky-bar a:active{
background-color:var(--btn-bg-active);box-shadow:var(--btn-shadow-active);}
.btn:focus-visible,.wp-block-button__link:focus-visible,.brv-header-cta:focus-visible,.sticky-bar a:focus-visible{
outline:var(--focus-w) solid var(--ring);outline-offset:var(--focus-offset);}
.btn svg,.wp-block-button__link svg,.brv-header-cta svg,.sticky-bar a svg{width:1.05em;height:1.05em;flex:0 0 auto;}
@media (prefers-reduced-motion:no-preference){.btn:active,.wp-block-button__link:active{transform:translateY(1px);}}
/* 3. PRIMARNI */
.btn--primary,.wp-block-button__link,
.wp-block-button.is-style-brv-primary .wp-block-button__link,.wp-block-button.is-style-fill .wp-block-button__link,
.sticky-bar a:first-of-type{
--btn-bg:var(--btn-p-bg); --btn-bg-hover:var(--btn-p-bg-hover); --btn-bg-active:var(--btn-p-bg-active);
--btn-ink:var(--btn-p-ink); --btn-ink-hover:var(--btn-p-ink); --btn-line:var(--btn-p-line); --btn-line-hover:var(--btn-p-line);
--btn-shadow:var(--btn-edge); --btn-shadow-active:var(--btn-edge-pressed);}
/* 4. SEKUNDARNI (.btn--ghost and .btn--on-dark are frozen donor names -> aliases; tone comes from the surface) */
.btn--secondary,.btn--ghost,.btn--on-dark,.brv-button__link--secondary,.brv-header-cta,.sticky-bar a + a,
.wp-block-button.is-style-brv-secondary .wp-block-button__link,.wp-block-button.is-style-outline .wp-block-button__link{
--btn-bg:var(--btn-s-bg); --btn-bg-hover:var(--btn-s-bg-hover); --btn-bg-active:var(--btn-s-bg-active);
--btn-ink:var(--btn-s-ink); --btn-ink-hover:var(--btn-s-ink-hover); --btn-line:var(--btn-s-line); --btn-line-hover:var(--btn-s-line);
--btn-shadow:none; --btn-shadow-active:none;}
/* 5. sizes */
.btn--sm{min-height:40px;padding:var(--space-2) var(--space-3);font-size:var(--text-btn-sm);}
.btn--lg,.hero__ctas > .btn,.lead-form__submit,.cta-banner__actions > .btn,.postal-check__submit{
min-height:56px;padding:var(--space-3) var(--space-8);font-size:var(--text-btn-lg);}
.postal-check__submit{padding-inline:var(--space-5);}
.btn--block,.lead-form__submit{width:100%;}
/* 6. disabled (dashed = non-colour cue) and loading (keeps its live skin) */
:root :is(.btn,.wp-block-button__link):is(:disabled,[aria-disabled="true"]):not(.is-loading *){
--btn-bg:var(--btn-d-bg) !important; --btn-bg-hover:var(--btn-d-bg) !important; --btn-bg-active:var(--btn-d-bg) !important;
--btn-ink:var(--btn-d-ink) !important; --btn-ink-hover:var(--btn-d-ink) !important;
--btn-line:var(--btn-d-line) !important; --btn-line-hover:var(--btn-d-line) !important;
--btn-shadow:none !important; --btn-shadow-active:none !important; border-style:dashed; cursor:not-allowed; transform:none;}
.is-loading .lead-form__submit{cursor:progress;pointer-events:none;}
.spinner{display:none;}
.lead-form__submit .spinner{display:none;width:1em;height:1em;border:2.5px solid currentColor;border-right-color:transparent;
border-radius:50%;flex:0 0 auto;order:-1;}
.is-loading .lead-form__submit .spinner{display:inline-block;}
@media (prefers-reduced-motion:no-preference){.is-loading .lead-form__submit .spinner{animation:brv-spin .8s linear infinite;}}
@media (prefers-reduced-motion:reduce){.is-loading .lead-form__submit .spinner{border-right-color:currentColor;opacity:.55;}}
@keyframes brv-spin{to{transform:rotate(360deg);}}
@supports (text-box: trim-both cap alphabetic){.btn,.wp-block-button__link,.brv-header-cta,.sticky-bar a{text-box:trim-both cap alphabetic;}}
.btn-label{display:inline;}
/* [brv_button] — span.brv-button.brv-button--{align} > a.btn.brv-button__link */
.brv-button{display:block;margin:var(--space-6) 0;}
.brv-button--left{text-align:left;}
.brv-button--center{text-align:center;}
.brv-button--right{text-align:right;}
.brv-button a.brv-button__link{text-decoration:none;}
.brv-button a.brv-button__link::after{content:"";flex:0 0 auto;width:.45em;height:.45em;margin-left:-2px;
border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
@media (prefers-reduced-motion:no-preference){.brv-button a.brv-button__link::after{transition:transform var(--transition);}
.brv-button a.brv-button__link:hover::after{transform:translateX(3px) rotate(45deg);}}
/* Two or more buttons typed into one paragraph sit side by side and wrap as whole buttons. */
p:has(> .brv-button ~ .brv-button) > .brv-button{display:inline-block;vertical-align:middle;max-width:100%;margin:var(--space-3) var(--space-3) 0 0;}
p:has(> .brv-button ~ .brv-button) > .brv-button + br{display:none;}
p:has(> .brv-button--center:first-child ~ .brv-button){text-align:center;}
p:has(> .brv-button--right:first-child ~ .brv-button){text-align:right;}
p:is(.has-text-align-center,[style*="text-align: center"],[style*="text-align:center"]):has(> .brv-button ~ .brv-button) > .brv-button,
p:has(> .brv-button--center:first-child ~ .brv-button) > .brv-button{margin-left:calc(var(--space-3) / 2);margin-right:calc(var(--space-3) / 2);}
p:is(.has-text-align-right,[style*="text-align: right"],[style*="text-align:right"]):has(> .brv-button ~ .brv-button) > .brv-button,
p:has(> .brv-button--right:first-child ~ .brv-button) > .brv-button{margin-left:var(--space-3);margin-right:0;}
@media (max-width:479px){
p:has(> .brv-button ~ .brv-button) > .brv-button{display:block;margin:var(--space-3) 0 0;}
p:has(> .brv-button ~ .brv-button) > .brv-button > a{width:100%;}}
/* core/button: Primarni (default) / Sekundarni block styles; legacy fill/outline map onto them. */
.wp-block-buttons{gap:var(--space-3);}
@media (max-width:479px){.wp-block-buttons > .wp-block-button{flex:1 1 100%;}.wp-block-buttons .wp-block-button__link{width:100%;}}
/* The one-accent table ("who is aqua"), tel-first. Only custom properties are
set, so hover and active always follow the current skin. Postal promote /
demote rules are scoped to the match and the plain no-match results (C9):
invalid / PO box / customs / locker / empty keep both actions Sekundarni. */
/* demote to Sekundarni */
.hero__ctas:has(> .hero__call) > .btn--primary,
.cta-banner__actions:has(> a[href^="tel:"]) > .btn--primary,
.postal-check__result--match .postal-check__actions:has(> a[href^="tel:"]) > .btn--primary,
.postal-check__result--nomatch:not(.postal-check__result--pobox):not(.postal-check__result--empty) .postal-check__actions:has(> a[href^="tel:"]) > .btn--primary{
--btn-bg:var(--btn-s-bg); --btn-bg-hover:var(--btn-s-bg-hover); --btn-bg-active:var(--btn-s-bg-active);
--btn-ink:var(--btn-s-ink); --btn-ink-hover:var(--btn-s-ink-hover); --btn-line:var(--btn-s-line); --btn-line-hover:var(--btn-s-line);
--btn-shadow:none; --btn-shadow-active:none;}
/* promote to Primarni (tel-first) */
.hero__ctas > .hero__call,.cta-banner__actions > a.btn--ghost[href^="tel:"],
.postal-check__result--match .postal-check__actions > a.btn[href^="tel:"],
.postal-check__result--nomatch:not(.postal-check__result--pobox):not(.postal-check__result--empty) .postal-check__actions > a.btn[href^="tel:"]{
--btn-bg:var(--btn-p-bg); --btn-bg-hover:var(--btn-p-bg-hover); --btn-bg-active:var(--btn-p-bg-active);
--btn-ink:var(--btn-p-ink); --btn-ink-hover:var(--btn-p-ink); --btn-line:var(--btn-p-line); --btn-line-hover:var(--btn-p-line);
--btn-shadow:var(--btn-edge); --btn-shadow-active:var(--btn-edge-pressed);}
/* City / combo pages: when the directory below holds an Istaknuti call (the
section's one aqua), the hero anchor „Pogledajte bravare” (#bravari) steps
down to Sekundarni with a ↓ chevron from 960px, and so does a site-NAP
.hero__call — but only on screens tall enough (≥ 980px) for the hero and
the paid call to share the first viewport (the call ends ≈ 960px down at
1440 wide). On shorter desktops (1440×900, 1366×768) the hero anchor stays
Primarni so the first screen keeps its one aqua.
Below 960 the sticky bar (that listing's call) owns the aqua instead. */
@media (min-width:960px) and (min-height:980px){
.site-main:has(.listing--istaknuti .listing__call) .hero__ctas > :is(.btn--primary[href$="#bravari"],.hero__call){
--btn-bg:var(--btn-s-bg); --btn-bg-hover:var(--btn-s-bg-hover); --btn-bg-active:var(--btn-s-bg-active);
--btn-ink:var(--btn-s-ink); --btn-ink-hover:var(--btn-s-ink-hover); --btn-line:var(--btn-s-line); --btn-line-hover:var(--btn-s-line);
--btn-shadow:none; --btn-shadow-active:none;}
.site-main:has(.listing--istaknuti .listing__call) .hero__ctas > .btn--primary[href$="#bravari"]::after{content:"";width:.45em;height:.45em;
margin:-.2em 0 0 .15em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);}}
/* ink skin */
.postal-check__submit,.area-check > .btn--primary{
--btn-bg:var(--btn-k-bg); --btn-bg-hover:var(--btn-k-bg-hover); --btn-bg-active:var(--btn-k-bg-hover);
--btn-ink:var(--btn-k-ink); --btn-ink-hover:var(--btn-k-ink); --btn-line:var(--btn-k-line); --btn-line-hover:var(--btn-k-line);
--btn-shadow:none; --btn-shadow-active:none;}
@media (max-width:959px){
/* the sticky bar owns the aqua AND the call: in-page primaries -> ink skin, in-page tel buttons -> Sekundarni */
body:has(> .sticky-bar) .site-main :is(.btn--primary,.wp-block-button:not(.is-style-brv-secondary):not(.is-style-outline) > .wp-block-button__link,
.postal-check__result--nomatch:not(.postal-check__result--pobox):not(.postal-check__result--empty) .postal-check__actions:has(> a[href^="tel:"]) > .btn--primary){
--btn-bg:var(--btn-k-bg); --btn-bg-hover:var(--btn-k-bg-hover); --btn-bg-active:var(--btn-k-bg-hover);
--btn-ink:var(--btn-k-ink); --btn-ink-hover:var(--btn-k-ink); --btn-line:var(--btn-k-line); --btn-line-hover:var(--btn-k-line);
--btn-shadow:none; --btn-shadow-active:none;}
body:has(> .sticky-bar) .site-main :is(.hero__call,a.btn--ghost[href^="tel:"],.postal-check__actions > a.btn[href^="tel:"],
.postal-check__result--nomatch:not(.postal-check__result--pobox):not(.postal-check__result--empty) .postal-check__actions > a.btn[href^="tel:"]){
--btn-bg:var(--btn-s-bg); --btn-bg-hover:var(--btn-s-bg-hover); --btn-bg-active:var(--btn-s-bg-active);
--btn-ink:var(--btn-s-ink); --btn-ink-hover:var(--btn-s-ink-hover); --btn-line:var(--btn-s-line); --btn-line-hover:var(--btn-s-line);
--btn-shadow:none; --btn-shadow-active:none;}}
/* Consent bar (companion inline CSS prints after main.css): both actions are
Sekundarni on-dark of equal size — no deceptive-design tilt to "accept". */
body .brv-consent .brv-consent__btn{background-color:transparent;color:var(--color-on-dark);border:var(--keyline) solid var(--color-on-dark-muted);
min-height:48px;padding:var(--space-2) var(--space-5);font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);
font-size:var(--text-btn);border-radius:var(--radius-btn);}
body .brv-consent .brv-consent__btn:hover{background-color:var(--color-on-dark);color:var(--color-text);border-color:var(--color-on-dark);}
body .brv-consent .brv-consent__btn:focus-visible{outline:var(--focus-w) solid var(--color-on-dark);outline-offset:var(--focus-offset);box-shadow:none;}
body .brv-consent::before{background:var(--color-accent);}
body .brv-consent :is(.brv-consent__btn--accept,.brv-consent__btn--decline){min-width:8rem;}
/* The companion lifts the banner above a sticky bar whenever body.has-sticky-bar
is set; the bar only exists with a phone / WhatsApp number (NAP ships empty). */
@media (max-width:959px){
body.has-sticky-bar:not(:has(> .sticky-bar)) .brv-consent{bottom:0;}
body.has-sticky-bar.has-consent:not(:has(> .sticky-bar)){padding-bottom:var(--consent-h);}}
/* 10. POSTAL-CODE MODULE --------------------------------------------------- */
/* One checker per page: the area checker steps aside when the postal module renders (M7 backup). */
.site-main:has(.postal-check) :is(.area-check,.area-check__result){display:none;}
/* Per-city section: on the white sheet; the checker is the section's plate. */
.postal-codes__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);align-items:start;}
.postal-codes__main{min-width:0;}
/* the stamp: THE signature object */
.postal-code{display:inline-flex;align-items:center;gap:var(--space-3);min-width:0;}
.postal-code__num{display:inline-flex;align-items:center;justify-content:center;padding:.32em .45em; /* tabular digits = equal widths, no min-width */
border:1.5px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-page);color:var(--color-primary);
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-code);line-height:1;
letter-spacing:var(--track-code);font-variant-numeric:tabular-nums lining-nums;}
.postal-code__place{font-weight:var(--fw-semibold);line-height:1.3;color:var(--color-text);}
/* dense list (>= 4 codes): ruled spec-table rows */
.postal-codes__list{list-style:none;margin:0 0 var(--space-6);padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));column-gap:var(--space-6);border-top:2px solid var(--color-primary);}
.postal-codes__item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-3);row-gap:2px;align-items:center;
padding:var(--space-2) 0;min-height:52px;border-bottom:1px solid var(--color-border);scroll-margin-top:calc(var(--header-h-shrunk) + var(--space-8));}
.postal-codes__item > .postal-code{display:contents;} /* __num = column 1, __place = column 2 */
.postal-codes__serves{grid-column:2;font-size:var(--text-sm);line-height:1.4;color:var(--color-muted);}
.postal-codes__item:target{background:var(--color-accent-tint);box-shadow:inset 4px 0 0 var(--color-success-rule);
padding-left:var(--space-3);} /* result -> its row */
.postal-codes__group-title{font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);text-transform:uppercase;
letter-spacing:var(--track-label);font-size:var(--text-label);color:var(--color-muted);margin:var(--space-6) 0 var(--space-2);}
.postal-codes__lists > .postal-codes__group-title:first-child{margin-top:0;}
.postal-codes__more summary{cursor:pointer;list-style:none;font-size:var(--text-sm);color:var(--color-primary);
text-decoration:underline 1.5px;text-underline-offset:.18em;}
.postal-codes__more summary::-webkit-details-marker{display:none;}
.postal-codes__more summary::marker{content:"";}
.postal-codes__source{font-size:var(--text-sm);color:var(--color-muted);}
.postal-codes__all a{font-weight:var(--fw-semibold);color:var(--color-primary);text-decoration:underline 1.5px;text-underline-offset:.18em;}
.postal-codes__all a:hover{text-decoration-thickness:3px;}
/* 2-3 codes: key tags in a wrapping row (city section only) */
.postal-codes .postal-codes__list:not(:has(> li:nth-child(4))){display:flex;flex-wrap:wrap;gap:var(--space-4);border-top:0;}
.postal-codes .postal-codes__list:not(:has(> li:nth-child(4))) > .postal-codes__item{flex:1 1 16rem;max-width:24rem;
padding:var(--space-6) var(--space-5) var(--space-5);border:1px solid var(--color-border-strong);border-radius:var(--radius-tag);
background-color:var(--color-surface-card);
-webkit-mask:radial-gradient(circle var(--tag-hole) at var(--tag-hole-x) var(--tag-hole-y),#0000 calc(100% - .5px),#000 100%);
mask:radial-gradient(circle var(--tag-hole) at var(--tag-hole-x) var(--tag-hole-y),#0000 calc(100% - .5px),#000 100%);}
/* 1 code: one full-row tag */
.postal-codes .postal-codes__list:not(:has(> li:nth-child(2))) > .postal-codes__item{max-width:none;flex-basis:100%;}
/* whole-city row: the "Cijeli grad · " label is PHP text (span.postal-codes__whole, C8), styled like the area label */
.postal-codes__item--whole-city .postal-codes__serves{color:var(--color-muted);}
.postal-codes__area{color:var(--color-primary);font-weight:var(--fw-semibold);}
.postal-codes__whole{color:var(--color-primary);font-weight:var(--fw-semibold);}
.postal-codes__shared{color:var(--color-muted);}
.postal-codes__more{display:inline;}
.postal-codes__more summary{display:inline;white-space:nowrap;}
.postal-codes__more[open] summary{margin-right:.35em;}
.postal-codes__serves,.postal-code__place,.postal-index__city{hyphens:manual;}
.postal-codes__aliases,.postal-codes__group-note,.postal-check__note,.postal-index__intro,.postal-index__empty{font-size:var(--text-sm);color:var(--color-muted);max-width:60ch;}
.postal-codes__group-note{margin:0 0 var(--space-2);}
/* JS-only collapse (M9): the toggle shows only once JS marks the list ready */
.js .postal-codes__lists.is-collapsed{max-height:38rem;overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent);}
.postal-codes__toggle{display:none;}
.postal-codes__lists.is-ready + .postal-codes__toggle{display:flex;}
.postal-codes__toggle{margin:0 0 var(--space-6);}
@media (min-width:960px){
.postal-codes__layout{grid-template-columns:22rem minmax(0,1fr);gap:var(--space-10);}
.postal-codes__layout > .postal-check{position:sticky;top:calc(var(--header-h-shrunk) + var(--space-4));}}
/* The checker: a small riveted zinc plate, SSR GET form (works without JS). */
.postal-check{position:relative;isolation:isolate;padding:var(--space-6);background-color:var(--color-plate);
background-image:var(--sheen-light),var(--brush-light);border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-plate);
scroll-margin-top:calc(var(--header-h-shrunk) + var(--space-4));}
.postal-check::before{content:"";position:absolute;inset:var(--rivet-inset);z-index:-1;pointer-events:none;
background:var(--rivet-light) left top/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right top/var(--rivet) var(--rivet) no-repeat,
var(--rivet-light) left bottom/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right bottom/var(--rivet) var(--rivet) no-repeat;}
.postal-check[aria-busy="true"]{cursor:progress;}
.postal-check__title{font-size:var(--text-2xl);margin:0 0 var(--space-3);}
.postal-check__form{margin:0;}
.postal-check__label{display:block;margin:0 0 var(--space-2);font:var(--fw-semibold) var(--text-base)/1.3 var(--font);color:var(--color-text);}
.postal-check__row{display:flex;gap:var(--space-2);}
.postal-check__input{flex:1 1 auto;min-width:0;min-height:56px;padding:var(--space-2) var(--space-3);
border:var(--keyline) solid var(--color-field-border);border-radius:3px;background:var(--color-page);color:var(--color-text);
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-code-lg);
letter-spacing:.12em;font-variant-numeric:tabular-nums lining-nums;}
.postal-check__input::placeholder{color:var(--color-muted);letter-spacing:.04em;font-size:var(--text-xl);opacity:1;}
.postal-check__input:focus{outline:var(--focus-w) solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary);}
.postal-check__input[aria-invalid="true"]{border-color:var(--color-error);}
.postal-check__submit{flex:0 0 auto;}
.postal-check__hint{font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-2) 0 0;}
.postal-check__result{margin-top:var(--space-4);padding:var(--space-4);border:1.5px solid var(--color-border-strong);
border-radius:var(--radius);background:var(--color-page);}
.postal-check__result:focus{outline:var(--focus-w) solid var(--color-primary);outline-offset:2px;}
.postal-check__result-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-2);}
.postal-check__result-head .postal-code{flex:1 1 0;min-width:0;}
.postal-check__result-head .postal-code__place{min-width:0;}
/* The result icon: a shape per state, never colour alone (C20 sizes the wrapper). */
.postal-check__icon{display:inline-grid;place-items:center;flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:50%;font-size:1rem;}
.postal-check__icon svg{width:1em;height:1em;}
.postal-check__result--match .postal-check__icon{background:var(--color-primary);color:var(--color-white);}
.postal-check__result--nomatch .postal-check__icon{border:1.5px solid var(--color-primary);color:var(--color-primary);}
.postal-check__result--invalid .postal-check__icon{background:var(--color-error);color:var(--color-white);}
.postal-check__msg{font-weight:var(--fw-semibold);margin:0 0 var(--space-1);}
.postal-check__sub{font-size:var(--text-sm);color:var(--color-muted);margin:0 0 var(--space-4);}
.postal-check__note{margin:0 0 var(--space-4);}
.postal-check__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.postal-check__actions .btn{flex:1 1 11rem;}
.postal-check__jump{display:inline-block;margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-primary);
text-decoration:underline 1.5px;text-underline-offset:.18em;}
.postal-check__jump:hover{text-decoration-thickness:3px;}
/* States. --alias / --other-city carry --match; --unknown / --pobox / --customs / --empty carry
--nomatch; --locker carries --invalid — each takes its base look. */
.postal-check__result--match,.postal-check__result--alias,.postal-check__result--other-city{background:var(--color-success-bg);border-color:var(--color-primary);box-shadow:inset 4px 0 0 var(--color-success-rule);}
.postal-check__result--nomatch,.postal-check__result--unknown,.postal-check__result--pobox,.postal-check__result--customs,.postal-check__result--empty{background:var(--color-plate);}
.postal-check__result--invalid,.postal-check__result--locker{background:var(--color-error-bg);border:var(--keyline) solid var(--color-error);box-shadow:none;}
.postal-check__result--invalid .postal-check__msg{color:var(--color-error);}
@media (max-width:479px){.postal-check__actions .btn{flex:1 1 100%;}}
/* Front-page national checker (section.postal-home): the plate at a readable width. */
.postal-home .postal-check{max-width:44rem;}
/* Site-wide index (page-postal-codes.php / [brv_postal_index]). */
.postal-index{display:grid;gap:var(--space-8);}
.postal-index__intro{margin:0;}
.postal-index__empty{margin:0;padding:var(--space-3) var(--space-4);border:1px dashed var(--color-border-strong);border-radius:var(--radius);}
.postal-index__jump{background:var(--color-page);border-bottom:var(--keyline) solid var(--color-primary);padding:var(--space-2) 0;}
.postal-index__jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2);}
.postal-index__jump a{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);min-height:40px;
padding:var(--space-1) var(--space-3) var(--space-1) 1.6rem;border:1px solid var(--color-border-strong);border-radius:var(--radius);
background-color:var(--color-page);color:var(--color-primary);text-decoration:none;white-space:nowrap;
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-base);
-webkit-mask:radial-gradient(circle 3.5px at .7rem 50%,#0000 calc(100% - .5px),#000 100%);
mask:radial-gradient(circle 3.5px at .7rem 50%,#0000 calc(100% - .5px),#000 100%);}
.postal-index__jump a:hover{background-color:var(--color-primary);color:var(--color-white);}
.postal-index__jump a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary);} /* inside the mask box */
.postal-index__count{color:var(--color-muted);font-variant-numeric:tabular-nums lining-nums;}
.postal-index__jump a:hover .postal-index__count{color:var(--color-on-dark-muted);}
.postal-index__group{scroll-margin-top:calc(var(--header-h-shrunk) + 4rem);}
.postal-index__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-3);}
.postal-index__city{font-size:var(--text-2xl);margin:0;}
.postal-index__range{font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-label);
letter-spacing:var(--track-label);color:var(--color-muted);font-variant-numeric:tabular-nums lining-nums;}
.postal-index__meta{font-size:var(--text-sm);color:var(--color-muted);}
.postal-index__link,.postal-index__top{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--color-primary);
text-decoration:underline 1.5px;text-underline-offset:.18em;}
.postal-index__link:hover,.postal-index__top:hover{text-decoration-thickness:3px;}
.postal-index__top{display:inline-block;margin-bottom:var(--space-6);}
@media (max-width:959px){
.postal-index__jump{position:sticky;top:var(--header-h-shrunk);z-index:5;}
.postal-index__jump ul{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);}
.postal-index__jump li{scroll-snap-align:start;flex:0 0 auto;}}
@media (min-width:1100px){
.postal-index__groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-12);}
.postal-index__group--wide{grid-column:1 / -1;}}
/* 11. CHROME: TOPBAR, PROMO BAR, BREADCRUMBS ------------------------------ */
/* Topbar: dark-2, 36px, not sticky; renders only with children (PHP guard M10 + this backup). */
.topbar{background-color:var(--color-dark-2);color:var(--color-on-dark-muted);font-size:var(--text-sm);}
.topbar:not(:has(.topbar__inner > *)){display:none;}
.topbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-1) var(--space-6);min-height:36px;padding-block:var(--space-1);}
.topbar a{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-on-dark);text-decoration:none;
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-base);letter-spacing:var(--track-code);}
.topbar a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;}
.topbar a svg{width:1em;height:1em;flex:0 0 auto;}
.topbar .open-now{color:var(--color-on-dark);}
.topbar .open-now__next{color:var(--color-on-dark-muted);}
.topbar .open-now.is-closed .open-now__dot{background-color:var(--color-error-on-dark);}
.topbar__afterhours{color:var(--color-on-dark);}
@media (max-width:639px){.topbar__afterhours{display:none;}.topbar__inner{justify-content:center;}}
/* Promo bar: dark-2, display face, sentence case; self-hides (PHP) while empty or expired. */
.promo-bar{display:block;background-color:var(--color-dark-2);color:var(--color-on-dark);text-align:center;text-decoration:none;
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:.9375rem;letter-spacing:var(--track-btn);
border-bottom:1px solid var(--color-dark-border);}
.promo-bar__inner{display:block;padding:var(--space-2) var(--space-4);}
a.promo-bar{color:var(--color-on-dark);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;}
a.promo-bar:hover{text-decoration-thickness:3px;}
a.promo-bar:focus-visible{outline-offset:-4px;}
/* Breadcrumbs on the white sheet; they reserve the tag overhang. */
.breadcrumbs{padding:calc(var(--tag-overhang) + var(--space-3)) 0 var(--space-2);background:transparent;font-size:var(--text-sm);color:var(--color-muted);}
.breadcrumbs__list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin:0;padding:0;}
.breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--space-2);}
.breadcrumbs__item + .breadcrumbs__item::before{content:"\203A";color:var(--color-border-strong);}
.breadcrumbs__item a{color:var(--color-primary);text-decoration:none;}
.breadcrumbs__item a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;}
.breadcrumbs [aria-current]{color:var(--color-primary);font-weight:var(--fw-semibold);}
.breadcrumbs + .hero--rating-plate{padding-top:var(--space-3);}
/* 12. HERO DETAILS + QUOTE FORM + FORMS ------------------------------------ */
.hero__content{min-width:0;}
.hero__eyebrow{max-width:100%;}
.hero__subtitle{font-size:var(--text-lg);line-height:var(--lh-snug);color:var(--color-muted);}
/* Spec row (ships empty, self-hides): a certification row between an ink and a hairline rule. */
.hero__facts{margin:0 0 var(--space-6);border-top:1.5px solid var(--color-primary);border-bottom:1px solid var(--color-border-strong);}
.hero__facts-list{display:flex;flex-wrap:wrap;margin:0;padding:0;}
.hero__fact{margin:0;padding:var(--space-3) var(--space-5) var(--space-3) 0;}
.hero__fact + .hero__fact{border-left:1px solid var(--color-border-strong);padding-left:var(--space-5);}
.hero__fact-label{display:block;font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-label);
letter-spacing:var(--track-label);text-transform:uppercase;line-height:1;color:var(--color-muted);}
.hero__fact-value{display:block;margin:var(--space-2) 0 0;font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);
font-size:1.5rem;line-height:1;color:var(--color-primary);white-space:nowrap;}
@media (max-width:480px){
.hero__facts-list{display:grid;grid-template-columns:1fr 1fr;}
.hero__fact + .hero__fact{border-left:0;padding-left:0;}
.hero__fact:nth-child(even){border-left:1px solid var(--color-border-strong);padding-left:var(--space-5);}}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);}
/* „Provjerite poštanski broj” — the Sekundarni route to the checker (only when no phone is shown). */
.hero__postal-link{text-wrap:balance;}
/* The quote form = the plate's white label field, capped by an ink header strip. */
.quote-form-wrap{position:relative;padding:var(--space-6) var(--space-6) var(--space-5);background-color:var(--color-page);color:var(--color-text);
border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-plate);overflow:hidden;}
.quote-form,.lead-form{margin:0;}
/* The application form printed bare ([brv_quote_form] in page content or in
the sales page's #prijava section, without the theme's .quote-form-wrap)
draws its own white label plate so the ink head strip still fits. */
:not(.quote-form-wrap) > .quote-form{position:relative;max-width:44rem;padding:var(--space-6) var(--space-6) var(--space-5);
background-color:var(--color-page);color:var(--color-text);border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-plate);overflow:hidden;}
.booking-form__head{margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);padding:var(--space-3) var(--space-6);
background-color:var(--color-primary);color:var(--color-on-dark);}
.booking-form__title{margin:0;font-size:var(--text-btn-lg);line-height:var(--lh-h3);color:var(--color-on-dark);}
.booking-form__sub{margin:var(--space-1) 0 0;font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-on-dark-muted);}
@media (max-width:479px){
:is(.quote-form-wrap,:not(.quote-form-wrap) > .quote-form){padding-inline:var(--space-4);}
.booking-form__head{margin-inline:calc(var(--space-4) * -1);padding-inline:var(--space-4);}}
/* Fields are ruled datasheet rows; labels in body ink, never uppercase. */
.quote-form .field{margin:0;padding:var(--space-2) 0 var(--space-3);border-bottom:1px solid var(--color-border);}
.quote-form label{display:block;margin:0 0 var(--space-1);font:var(--fw-semibold) var(--text-base)/1.3 var(--font);color:var(--color-text);}
.quote-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){
display:block;width:100%;min-height:48px;padding:.625rem .75rem;border:1.5px solid var(--color-field-border);border-radius:3px;
background-color:var(--color-page);font:var(--fw-normal) var(--text-base)/1.4 var(--font);color:var(--color-text);}
.quote-form textarea{min-height:5.5rem;resize:vertical;}
.quote-form :is(input,textarea)::placeholder{color:var(--color-muted);opacity:1;}
.quote-form :is(input,select,textarea):focus{outline:var(--focus-w) solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary);}
.quote-form :is(input,select,textarea):user-invalid{border:2px solid var(--color-error);}
.quote-form[aria-busy="true"]{cursor:progress;}
.lead-form__row{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--space-4);}
@media (min-width:560px){.lead-form__row{grid-template-columns:repeat(2,minmax(0,1fr));}}
.field__hint{margin:var(--space-1) 0 0;font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-muted);}
.lead-form__submit{margin-top:var(--space-4);}
.booking-form__trust{margin:var(--space-3) 0 0;text-align:center;font-size:var(--text-sm);color:var(--color-muted);}
.booking-form__privacy{margin:var(--space-2) 0 0;text-align:center;font-size:var(--text-xs);line-height:var(--lh-snug);color:var(--color-muted);}
.booking-form__privacy a{color:var(--color-primary);}
.quote-form__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
/* Feedback: never a solid accent block. */
.quote-form__feedback{margin-top:var(--space-3);}
.quote-form__notice{margin:0 0 var(--space-4);}
.quote-form__feedback.is-success{padding:var(--space-3) var(--space-4);background-color:var(--color-success-bg);border:1.5px solid var(--color-primary);
border-radius:var(--radius);color:var(--color-success);font-weight:var(--fw-semibold);}
.quote-form__feedback.is-success::before{content:"\2713\00A0";}
.quote-form__feedback.is-error{padding:var(--space-3) var(--space-4);background-color:var(--color-error-bg);border:var(--keyline) solid var(--color-error);
border-radius:var(--radius);color:var(--color-error);font-weight:var(--fw-semibold);}
.form-fallback{color:var(--color-text);}
.form-fallback h2{font-size:var(--text-2xl);margin-bottom:var(--space-3);}
.form-fallback .btn{margin-top:var(--space-2);}
/* 13. TRUST, OPEN-NOW, CHIPS, SILO, LOCAL AREAS ----------------------------- */
.trust-bar{padding:var(--space-3) 0 var(--space-8);background:transparent;}
.trust-bar__inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);padding-bottom:var(--space-4);}
.trust-rating{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);}
.stars{display:inline-flex;color:var(--color-star);}
.stars svg{width:1.1em;height:1.1em;}
.trust-metric{display:flex;flex-direction:column;gap:var(--space-2);}
.trust-metric__value{font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:2rem;line-height:1;color:var(--color-primary);white-space:nowrap;}
.trust-metric__label{font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-label);
letter-spacing:var(--track-label);text-transform:uppercase;line-height:1;color:var(--color-muted);}
.trust-chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:36px;padding:var(--space-1) var(--space-3);
border:1px solid var(--color-border-strong);border-radius:var(--radius);background-color:var(--color-page);font-size:var(--text-sm);}
.trust-chip .trust-metric__label{font-family:var(--font);font-weight:var(--fw-normal);letter-spacing:0;text-transform:none;}
/* Trust badges are stamps; the stamp itself is the mark (the shield icon is hidden). */
.trust-badges{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.trust-badge{display:inline-flex;align-items:center;gap:var(--space-2);min-height:36px;padding:.45em .7em;border:1.5px solid var(--color-primary);
border-radius:var(--radius-sm);background-color:var(--color-page);color:var(--color-primary);font-family:var(--font-display);
font-stretch:condensed;font-weight:var(--fw-display);font-size:.9375rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;}
.trust-badge svg{display:none;}
/* Open-now: the word always carries the state; the dot is aqua when open. */
.open-now{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);font-size:var(--text-sm);}
.open-now__dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background-color:var(--color-border-strong);}
.open-now.is-open .open-now__dot{background-color:var(--color-accent);}
.open-now.is-closed .open-now__dot{background-color:var(--color-error);}
.open-now__label{white-space:nowrap;}
.open-now__next{font-weight:var(--fw-normal);white-space:nowrap;}
/* Micro key-tag chips (hole at .7rem / 50%, 3.5px). */
.area-chips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-8);padding:0;}
.area-chips li,.silo__links a,.silo__links-item{position:relative;display:inline-flex;align-items:center;min-height:36px;
padding:var(--space-1) var(--space-3) var(--space-1) 1.6rem;border:1px solid var(--color-border-strong);border-radius:var(--radius);
background-color:var(--color-page);color:var(--color-primary);font-size:var(--text-sm);font-weight:var(--fw-medium);line-height:1.3;
-webkit-mask:radial-gradient(circle 3.5px at .7rem 50%,#0000 calc(100% - .5px),#000 100%);
mask:radial-gradient(circle 3.5px at .7rem 50%,#0000 calc(100% - .5px),#000 100%);}
.silo{padding:var(--space-16) 0;}
.silo__heading{font-size:var(--text-3xl);margin:0 0 var(--space-6);}
.silo__links{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.silo__links a{min-height:40px;font-weight:var(--fw-semibold);text-decoration:none;
transition:background-color var(--transition),color var(--transition),border-color var(--transition);}
.silo__links a:hover{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white);}
.silo__links a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary);}
.silo__links-item{background-color:var(--color-surface);color:var(--color-muted);}
.local-areas{padding:var(--space-16) 0;}
.local-areas__heading{font-size:var(--text-3xl);margin:0 0 var(--space-6);}
/* Area check (only where the postal module is absent): the checker's language. */
.area-check{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2);max-width:36rem;margin:0;}
.area-check__label{flex:1 1 14rem;min-width:0;display:block;font:var(--fw-semibold) var(--text-base)/1.3 var(--font);color:var(--color-text);}
.area-check input:is([type="search"],[type="text"]){display:block;width:100%;min-height:56px;margin-top:var(--space-2);padding:var(--space-2) var(--space-3);
border:var(--keyline) solid var(--color-field-border);border-radius:3px;background-color:var(--color-page);
font:var(--fw-normal) var(--text-lg)/1.3 var(--font);color:var(--color-text);}
.area-check input:is([type="search"],[type="text"])::placeholder{color:var(--color-muted);opacity:1;}
.area-check input:focus{outline:var(--focus-w) solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary);}
.area-check > .btn{min-height:56px;}
.area-check__result{max-width:36rem;margin:var(--space-4) 0 0;padding:var(--space-4);border:1.5px solid var(--color-border-strong);
border-radius:var(--radius);background-color:var(--color-page);}
.area-check__result.is-yes{background-color:var(--color-success-bg);border-color:var(--color-primary);box-shadow:inset 4px 0 0 var(--color-success-rule);}
.area-check__result.is-no{background-color:var(--color-plate);}
.area-check__msg{font-weight:var(--fw-semibold);margin:0 0 var(--space-3);color:var(--color-text);}
/* Map embed + video facade. */
.map-embed{padding:var(--space-16) 0;}
.map-embed iframe,.brv-map iframe{display:block;width:100%;min-height:320px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);}
.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);border:1px solid var(--color-dark-border);border-radius:var(--radius-md);background-color:var(--color-dark);
color:var(--color-on-dark);font-weight:var(--fw-semibold);font-size:var(--text-sm);text-decoration:none;}
.video-facade:hover{color:var(--color-on-dark);border-color:var(--color-on-dark-muted);}
.video-facade__play{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
background-color:var(--color-on-dark);color:var(--color-text);font-size:var(--text-2xl);}
.video-facade__play svg{width:1em;height:1em;margin-left:2px;}
.video-facade__label{display:block;text-align:center;}
.video-embed{margin-top:var(--space-4);}
.video-embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-md);}
/* 14. PROCESS PLATE, FAQ, CTA BAND, TESTIMONIALS, DIRECTORY, PLANS ----------- */
/* The one dark plate per page: a procedure, not a promise. */
.process .section-head{margin-bottom:var(--space-8);}
.process__heading{color:var(--color-on-dark);}
.process__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--color-dark-border);}
.process__step{display:grid;grid-template-columns:3.5rem minmax(0,1fr);column-gap:var(--space-4);padding:var(--space-5) 0;
border-bottom:1px solid var(--color-dark-border);color:var(--color-on-dark);}
.process__num{grid-row:1 / span 2;display:block;font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);
font-size:2.5rem;line-height:1;color:var(--color-accent);}
.process__title{grid-column:2;margin:0 0 var(--space-2);font-size:var(--text-2xl);color:var(--color-on-dark);}
.process__text{grid-column:2;margin:0;color:var(--color-on-dark-muted);}
@media (min-width:960px){
.process__steps{grid-template-columns:repeat(4,minmax(0,1fr));}
.process__step{display:block;padding:var(--space-6) var(--space-5);border-bottom:0;}
.process__step + .process__step{border-left:1px solid var(--color-dark-border);}
.process__num{margin-bottom:var(--space-4);}}
/* FAQ: a ruled specification list (native , answers ship in the HTML). */
.faq{padding:var(--space-20) 0;}
.faq__heading{font-size:var(--text-3xl);margin:0 0 var(--space-8);}
.faq__list{max-width:52rem;margin:0;border-top:2px solid var(--color-primary);}
.faq__item{border-bottom:1px solid var(--color-border-strong);}
.faq__summary{display:grid;grid-template-columns:minmax(0,1fr) 2rem;gap:var(--space-4);align-items:center;padding:var(--space-4) 0;
cursor:pointer;list-style:none;}
.faq__summary::-webkit-details-marker{display:none;}
.faq__summary::marker{content:"";}
.faq__summary:focus-visible{outline:var(--focus-w) solid var(--color-primary);outline-offset:2px;}
.faq-question{margin:0;font-size:var(--text-lg);text-transform:none;}
.faq__summary:hover .faq-question{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em;}
.faq__chevron{width:2rem;height:2rem;display:grid;place-items:center;border:1.5px solid var(--color-primary);border-radius:var(--radius-sm);
background-color:var(--color-page);color:var(--color-primary);}
.faq__chevron svg{width:1rem;height:1rem;transform:rotate(90deg);}
.faq__item[open] .faq__chevron{background-color:var(--color-primary);color:var(--color-white);}
@media (prefers-reduced-motion:no-preference){
.faq__chevron svg{transition:transform var(--transition);}
.faq__item[open] .faq__chevron svg{transform:rotate(-90deg);}}
.faq__answer{margin:0 0 var(--space-5) var(--space-1);padding-left:var(--space-4);border-left:2px solid var(--color-primary);max-width:66ch;}
.faq__answer > :last-child{margin-bottom:0;}
/* CTA band: a LIGHT rating plate (never dark directly above the dark footer). */
.cta-banner{padding:var(--space-12) 0;}
.cta-banner__inner{position:relative;isolation:isolate;padding:var(--space-10) clamp(1.25rem,4vw,3rem);
background-color:var(--color-plate);background-image:var(--sheen-light),var(--brush-light);color:var(--color-text);
border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-plate);}
.cta-banner__inner::after{content:"";position:absolute;inset:7px;z-index:-1;pointer-events:none;
border:1px solid var(--color-engrave);border-radius:var(--radius-sm);}
.cta-banner__inner::before{content:"";position:absolute;inset:var(--rivet-inset);z-index:-1;pointer-events:none;
background:var(--rivet-light) left top/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right top/var(--rivet) var(--rivet) no-repeat,
var(--rivet-light) left bottom/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right bottom/var(--rivet) var(--rivet) no-repeat;}
.cta-banner__title{margin:0 0 var(--space-3);font-size:var(--text-3xl);line-height:var(--lh-h2);}
.cta-banner__text{margin:0 0 var(--space-6);max-width:60ch;font-size:var(--text-lg);color:var(--color-muted);}
.cta-banner__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);}
@media (min-width:900px){
.cta-banner__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-10);align-items:center;}
.cta-banner__title,.cta-banner__text{grid-column:1;}
.cta-banner__text{margin-bottom:0;}
.cta-banner__actions{grid-column:2;grid-row:1 / span 2;flex-direction:column;flex-wrap:nowrap;min-width:16rem;}}
@media (max-width:639px){.cta-banner__actions > .btn{flex:1 1 100%;}}
/* Operator option: a dark plate (never directly above the footer). */
.cta-banner--dark .cta-banner__inner{background-color:var(--color-dark);background-image:var(--sheen-dark),var(--brush-dark);
border-color:var(--color-dark-border);color:var(--color-on-dark);}
.cta-banner--dark .cta-banner__inner::after{border-color:var(--color-dark-border);}
.cta-banner--dark .cta-banner__inner::before{
background:var(--rivet-dark) left top/var(--rivet) var(--rivet) no-repeat,var(--rivet-dark) right top/var(--rivet) var(--rivet) no-repeat,
var(--rivet-dark) left bottom/var(--rivet) var(--rivet) no-repeat,var(--rivet-dark) right bottom/var(--rivet) var(--rivet) no-repeat;}
.cta-banner--dark .cta-banner__title{color:var(--color-on-dark);}
.cta-banner--dark .cta-banner__text{color:var(--color-on-dark-muted);}
/* Testimonials (ship empty, self-hide): key tags on the white sheet. */
.testimonials{padding:var(--space-20) 0;}
.testimonials__track{display:grid;gap:var(--space-4);}
@media (min-width:768px){.testimonials__track{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1040px){.testimonials__track{grid-template-columns:repeat(3,minmax(0,1fr));}}
.testimonial{margin:0;}
.testimonial__stars{display:flex;color:var(--color-star);margin-bottom:var(--space-3);}
.testimonial__stars svg{width:1.1em;height:1.1em;}
.testimonial__text{margin:0 0 var(--space-4);font-size:var(--text-base);}
.testimonial__text > :last-child{margin-bottom:0;}
.testimonial__author{display:inline-flex;align-items:center;padding:.38em .6em;border:1.5px solid var(--color-primary);border-radius:var(--radius-sm);
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-label);letter-spacing:var(--track-label);
text-transform:uppercase;line-height:1;color:var(--color-primary);}
.testimonial__location{display:block;margin-top:var(--space-2);color:var(--color-muted);font-size:var(--text-sm);}
/* Directory (2.0.0) — the paid locksmith imenik on city / combo pages
(section#bravari, companion brv_render_directory()). Tiers read top-down as
hardware of falling weight: Istaknuti = a riveted zinc plate whose white
label field holds the section's ONE aqua call; Standardni = key-tag cards,
two per row from 768px, Sekundarni calls; Osnovni + free entries = ruled
spec rows. Paid positions carry the small ink „OGLAS” stamp, free entries
never. The sell box is a light plate with a dashed keyline (an open slot). */
.directory{padding:var(--space-12) 0 var(--space-16);}
.directory__head{margin-bottom:var(--space-6);}
.directory__intro{max-width:62ch;hyphens:manual;}
.directory__intro a{font-weight:var(--fw-semibold);white-space:nowrap;}
/* shared listing parts */
.listing{position:relative;min-width:0;}
.listing svg{width:1em;height:1em;flex:0 0 auto;}
.listing__ad{display:inline-flex;align-items:center;padding:.32em .45em;border:1.5px solid var(--color-primary);border-radius:var(--radius-sm);
background-color:var(--color-page);color:var(--color-primary);font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);
font-size:var(--text-xs);letter-spacing:var(--track-label);text-transform:uppercase;line-height:1;white-space:nowrap;}
.listing--istaknuti > .listing__ad,.listing--standardni > .listing__ad{position:absolute;z-index:3;top:var(--space-3);right:var(--space-3);}
.listing--istaknuti > .listing__ad{top:var(--space-2);right:calc(var(--rivet-inset) + var(--rivet) + var(--space-2));}
.listing__badge{display:inline-flex;align-self:flex-start;align-items:center;gap:.5em;max-width:100%;padding:.38em .6em;
border:1.5px solid var(--color-primary);border-radius:var(--radius-sm);background-color:var(--color-page);color:var(--color-primary);
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-label);
letter-spacing:var(--track-label);text-transform:uppercase;line-height:1;}
.listing--istaknuti .listing__badge{background-color:var(--color-primary);color:var(--color-white);}
.listing__name{margin:0;font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-card-title);
line-height:1.15;letter-spacing:var(--track-h3);color:var(--color-primary);}
.listing__rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin:0;font-size:var(--text-sm);
font-weight:var(--fw-bold);line-height:var(--lh-snug);color:var(--color-text);}
.listing__rating svg{color:var(--color-star);}
.listing__desc{margin:0;max-width:62ch;font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-muted);}
/* services = micro key-tag chips (hole at .6rem / 50%) */
.listing__services{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);margin:0;padding:0;}
.listing__services li{display:inline-flex;align-items:center;min-height:30px;margin:0;padding:.2rem var(--space-2) .2rem 1.35rem;
border:1px solid var(--color-border-strong);border-radius:var(--radius);background-color:var(--color-page);color:var(--color-primary);
font-size:var(--text-xs);font-weight:var(--fw-semibold);line-height:1.3;hyphens:manual;
-webkit-mask:radial-gradient(circle 3px at .6rem 50%,#0000 calc(100% - .5px),#000 100%);
mask:radial-gradient(circle 3px at .6rem 50%,#0000 calc(100% - .5px),#000 100%);}
/* facts = a ruled datasheet: stamp label | value */
.listing__facts{margin:0;border-top:1.5px solid var(--color-primary);}
.listing__fact{display:grid;grid-template-columns:minmax(0,1fr);gap:2px var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border);}
.listing__fact dt{font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-xs);
letter-spacing:var(--track-label);text-transform:uppercase;line-height:1.3;color:var(--color-muted);}
.listing__fact dd{margin:0;font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-text);overflow-wrap:anywhere;}
@media (min-width:480px){
.listing__fact{grid-template-columns:8rem minmax(0,1fr);align-items:baseline;}}
.listing__actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:var(--space-2);}
.listing__actions .btn{flex:1 1 7rem;min-width:0;padding-inline:var(--space-3);}
.listing__actions .listing__call{flex-basis:100%;}
/* Istaknuti: the riveted plate; the actions are its white label field */
.listing--istaknuti{isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "body" "actions";
gap:var(--space-5);margin:0 0 var(--space-6);padding:var(--space-10) var(--space-5) var(--space-5);
background-color:var(--color-plate);background-image:var(--sheen-light),var(--brush-light);
border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-plate);}
.listing--istaknuti::after{content:"";position:absolute;inset:7px;z-index:-1;pointer-events:none;
border:1px solid var(--color-engrave);border-radius:var(--radius-sm);}
.listing--istaknuti::before{content:"";position:absolute;inset:var(--rivet-inset);z-index:2;pointer-events:none;
background:var(--rivet-light) left top/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right top/var(--rivet) var(--rivet) no-repeat,
var(--rivet-light) left bottom/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right bottom/var(--rivet) var(--rivet) no-repeat;}
.listing--istaknuti .listing__media{grid-area:media;display:grid;place-items:center;width:4.5rem;height:4.5rem;padding:var(--space-1);
background-color:var(--color-page);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);overflow:hidden;}
.listing--istaknuti .listing__media:empty{display:none;}
.listing--istaknuti .listing__media img{width:100%;height:100%;object-fit:contain;}
.listing--istaknuti .listing__body{grid-area:body;display:flex;flex-direction:column;gap:var(--space-3);min-width:0;}
.listing--istaknuti .listing__name{font-size:var(--text-3xl);line-height:var(--lh-h2);letter-spacing:var(--track-h2);}
.listing--istaknuti .listing__desc{font-size:var(--text-base);line-height:var(--lh-normal);color:var(--color-text);}
.listing--istaknuti .listing__actions{grid-area:actions;margin:0 calc(var(--space-5) * -1) calc(var(--space-5) * -1);
padding:var(--space-5);background-color:var(--color-page);border-top:var(--keyline) solid var(--color-primary);
border-radius:0 0 calc(var(--radius-plate) - 2px) calc(var(--radius-plate) - 2px);}
.listing--istaknuti .listing__call{min-height:56px;padding-inline:var(--space-5);font-size:var(--text-btn-lg);}
@media (min-width:640px){
.listing--istaknuti{padding:var(--space-10) var(--space-6) var(--space-6);column-gap:var(--space-6);}
.listing--istaknuti:has(> .listing__media > *){grid-template-columns:6rem minmax(0,1fr);grid-template-areas:"media body" "actions actions";}
.listing--istaknuti .listing__media{width:6rem;height:6rem;}
.listing--istaknuti .listing__actions{margin:0 calc(var(--space-6) * -1) calc(var(--space-6) * -1);padding:var(--space-5) var(--space-6) var(--space-6);}}
@media (min-width:960px){
.listing--istaknuti{grid-template-columns:minmax(0,1fr) 18rem;grid-template-areas:"body actions";column-gap:0;padding-right:0;}
.listing--istaknuti:has(> .listing__media > *){grid-template-columns:6rem minmax(0,1fr) 18rem;grid-template-areas:"media body actions";
column-gap:var(--space-6);}
.listing--istaknuti .listing__body{padding-right:var(--space-8);}
.listing--istaknuti .listing__actions{flex-direction:column;flex-wrap:nowrap;justify-content:center;align-self:stretch;
margin:calc(var(--space-10) * -1) 0 calc(var(--space-6) * -1);padding:var(--space-10) var(--space-6) var(--space-6);
border-top:0;border-left:var(--keyline) solid var(--color-primary);
border-radius:0 calc(var(--radius-plate) - 2px) calc(var(--radius-plate) - 2px) 0;}
.listing--istaknuti .listing__actions .btn{flex:0 0 auto;width:100%;}
.listing--istaknuti:has(> .listing__media > *) .listing__body{padding-right:var(--space-2);}}
/* Standardni: key-tag cards (the tag itself is the key-tag axis rule, §7) */
.directory__grid{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);margin:0 0 var(--space-6);}
@media (min-width:768px){.directory__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:960px){.directory__grid{gap:var(--space-5);}}
.listing--standardni{display:flex;flex-direction:column;gap:var(--space-4);}
.listing--standardni .listing__body{display:flex;flex-direction:column;gap:var(--space-3);flex:1 1 auto;min-width:0;}
.listing--standardni .listing__name{padding-right:4.5rem;}
.listing--standardni .listing__actions{margin-top:auto;padding-top:var(--space-2);}
/* Osnovni + free entries: ruled spec rows (stamp column | name + area | call) */
.directory__rows{list-style:none;margin:var(--space-6) 0 0;padding:0;border-top:var(--keyline) solid var(--color-primary);}
.directory__rows > .listing{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ad call" "text call";
align-items:center;column-gap:var(--space-3);min-height:64px;margin:0;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);}
.directory__rows .listing__ad{grid-area:ad;justify-self:start;margin:0 0 var(--space-1);}
.listing__row-text{grid-area:text;min-width:0;}
.directory__rows .listing__name{font-size:var(--text-xl);line-height:var(--lh-h3);}
.listing__area{margin:var(--space-1) 0 0;font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-muted);}
.listing__row-call{grid-area:call;display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);
border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-btn);background-color:var(--color-page);color:var(--color-primary);
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-btn-sm);line-height:1;
white-space:nowrap;text-decoration:none;transition:background-color var(--transition);}
.listing__row-call:hover{background-color:var(--color-accent-tint);text-decoration:none;}
.listing__row-call:active{background-color:var(--color-accent-tint-2);}
.listing__row-call:focus-visible{outline:var(--focus-w) solid var(--color-primary);outline-offset:var(--focus-offset);}
/* the row's number: tel: taps on phones, so it shows from 640px (desktop needs to read / copy it) */
.listing__row-num{display:none;font-variant-numeric:tabular-nums lining-nums;}
@media (min-width:640px){
.listing__row-num{display:inline;}
.directory__rows > .listing{grid-template-columns:4.75rem minmax(0,1fr) auto;grid-template-areas:"ad text call";column-gap:var(--space-4);}
.directory__rows .listing__ad{align-self:start;margin:.35rem 0 0;}}
/* the sell box: a light plate with a dashed keyline — an open slot */
.directory__sell{display:grid;gap:var(--space-3) var(--space-8);margin:var(--space-10) 0 0;padding:var(--space-6) var(--space-5);
background-color:var(--color-surface);background-image:var(--sheen-light),var(--brush-light);
border:var(--keyline) dashed var(--color-border-strong);border-radius:var(--radius-plate);}
.directory__sell-title{margin:0;font-size:var(--text-2xl);line-height:var(--lh-h3);}
.directory__sell-text{margin:0;max-width:60ch;color:var(--color-text);hyphens:manual;}
.directory__sell-text strong{font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:1.15em;
letter-spacing:var(--track-code);white-space:nowrap;}
.directory__sell-cta{justify-self:start;}
@media (min-width:768px){
.directory__sell{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:var(--space-6) var(--space-8);}
.directory__sell-title,.directory__sell-text{grid-column:1;}
.directory__sell-cta{grid-column:2;grid-row:1 / span 2;justify-self:end;}}
@media (max-width:479px){.directory__sell-cta{justify-self:stretch;}}
.directory__disclosure{margin:var(--space-5) 0 0;max-width:78ch;font-size:var(--text-xs);line-height:var(--lh-snug);color:var(--color-muted);}
/* Plans ([brv_plans]) — three advertiser packages, no prices. Standardni and
Osnovni are key tags (the axis rule adds the hole); Istaknuti is the riveted
zinc plate, and its CTA is the one Primarni of the row. One column below
960, three from 960. */
.plans{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);margin:0;}
.prose-content .plans,.prose-content .slots{margin:var(--space-8) 0;}
@media (min-width:960px){.plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);align-items:stretch;}}
.plan{position:relative;display:flex;flex-direction:column;gap:var(--space-3);min-width:0;margin:0;
padding:var(--space-6) var(--space-5) var(--space-5);background-color:var(--color-surface-card);
border:1px solid var(--color-border-strong);border-radius:var(--radius-tag);}
.plan__name{margin:0;font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-2xl);
line-height:var(--lh-h3);letter-spacing:var(--track-h3);color:var(--color-primary);}
.plan__tagline{margin:0;font-weight:var(--fw-semibold);line-height:var(--lh-snug);color:var(--color-muted);}
.plan__features{list-style:none;margin:var(--space-1) 0 var(--space-3);padding:0;border-top:1.5px solid var(--color-primary);}
.plan__features li{position:relative;margin:0;padding:var(--space-2) 0 var(--space-2) 1.6rem;border-bottom:1px solid var(--color-border);
font-size:var(--text-sm);line-height:var(--lh-snug);color:var(--color-text);}
.plan__features li::before{content:"";position:absolute;left:.3rem;top:calc(var(--space-2) + .2em);width:.4em;height:.75em;
border-right:2px solid var(--color-primary);border-bottom:2px solid var(--color-primary);transform:rotate(45deg);}
.plan__cta{align-self:stretch;margin-top:auto;}
.dp-cards-key-tag .plan--istaknuti,.plan--istaknuti{isolation:isolate;padding:var(--space-10) var(--space-6) var(--space-6);
background-color:var(--color-plate);background-image:var(--sheen-light),var(--brush-light);
border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-plate);-webkit-mask:none;mask:none;}
.plan--istaknuti::after{content:"";position:absolute;inset:7px;z-index:-1;pointer-events:none;
border:1px solid var(--color-engrave);border-radius:var(--radius-sm);}
.plan--istaknuti::before{content:"";position:absolute;inset:var(--rivet-inset);z-index:-1;pointer-events:none;
background:var(--rivet-light) left top/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right top/var(--rivet) var(--rivet) no-repeat,
var(--rivet-light) left bottom/var(--rivet) var(--rivet) no-repeat,var(--rivet-light) right bottom/var(--rivet) var(--rivet) no-repeat;}
.plan--istaknuti .plan__name{font-size:var(--text-3xl);line-height:var(--lh-h2);}
.plan--istaknuti .plan__tagline{color:var(--color-text);}
.plan--istaknuti .plan__cta{min-height:56px;font-size:var(--text-btn-lg);}
@media (max-width:639px){.plan--istaknuti{padding:var(--space-10) var(--space-5) var(--space-5);}}
/* Free slots ([brv_slots], #slobodna-mjesta) — a ruled certification table:
ink top rule, stamped ink head, zebra rows, tabular figures. Below 640 the
table tightens; when its cells carry data-label it stacks every row into a
two-column block (city on top, labelled values, the CTA at the right). */
table.slots,.slots table{width:100%;border-collapse:collapse;border-top:2px solid var(--color-primary);font-size:var(--text-base);
font-variant-numeric:tabular-nums lining-nums;}
.slots :is(th,td){padding:var(--space-3);border-bottom:1px solid var(--color-border);text-align:left;vertical-align:middle;}
.slots thead th{background-color:var(--color-primary);color:var(--color-on-dark);font-family:var(--font-display);font-stretch:condensed;
font-weight:var(--fw-display);font-size:var(--text-label);letter-spacing:var(--track-label);text-transform:uppercase;line-height:1.2;}
.slots tbody tr:nth-child(even){background-color:var(--color-surface);}
.slots tbody :is(th,td):first-child{font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-lg);
line-height:1.2;color:var(--color-primary);}
.slots tbody :is(th,td):first-child a{color:var(--color-primary);text-decoration:none;}
.slots tbody :is(th,td):first-child a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em;}
.slots tbody :is(th,td):last-child{text-align:right;white-space:nowrap;}
.slots tbody :is(th,td):last-child a{font-weight:var(--fw-bold);color:var(--color-primary);}
.slots caption{caption-side:top;margin-bottom:var(--space-2);text-align:left;font-family:var(--font-display);font-stretch:condensed;
font-weight:var(--fw-display);font-size:var(--text-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-muted);}
@media (max-width:639px){
.slots :is(th,td){padding:var(--space-2);font-size:var(--text-sm);}
.slots thead th{font-size:var(--text-xs);letter-spacing:.06em;}
.slots tbody :is(th,td):first-child{font-size:var(--text-base);}
:is(table.slots,.slots table):has(td[data-label]),:is(table.slots,.slots table):has(td[data-label]) tbody{display:block;}
:is(table.slots,.slots table):has(td[data-label]) thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;}
:is(table.slots,.slots table):has(td[data-label]) tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-3);
row-gap:var(--space-1);align-items:center;padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--color-border);}
:is(table.slots,.slots table):has(td[data-label]) :is(th,td){display:block;padding:0;border:0;}
:is(table.slots,.slots table):has(td[data-label]) tr > :first-child{grid-column:1 / -1;}
:is(table.slots,.slots table):has(td[data-label]) tr > :is(:nth-child(2),:nth-child(3)){grid-column:1;}
:is(table.slots,.slots table):has(td[data-label]) tbody tr > :last-child:not(:first-child){grid-column:2;grid-row:2 / span 2;}
.slots td[data-label]::before{content:attr(data-label) " ";margin-right:var(--space-1);font-family:var(--font-display);font-stretch:condensed;
font-weight:var(--fw-display);font-size:var(--text-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-muted);}
.slots tbody tr > :last-child[data-label]::before{content:none;}}
/* The application section of the sales page: the plate keeps the container
width like every other plate; the form sits centred on it. */
.dp-rhythm-riveted-inset section#prijava > .container{max-width:var(--width-wide);}
section#prijava .quote-form-wrap,section#prijava :not(.quote-form-wrap) > .quote-form{max-width:44rem;margin-inline:auto;}
/* 15. E-E-A-T, PROSE, TABLES, BLOG, CONTACT, LEGAL ------------------------- */
/* Author box: a 1px border-strong panel with a stamp eyebrow. */
.author-box{display:flex;flex-wrap:wrap;gap:var(--space-6);margin:var(--space-12) 0;padding:var(--space-8);background-color:var(--color-page);
border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);}
.author-box__photo img{width:96px;height:96px;border-radius:var(--radius-md);object-fit:cover;}
.author-box__body{flex:1 1 15rem;min-width:0;}
.author-box__eyebrow{margin-bottom:var(--space-2);}
.author-box__name{margin:var(--space-1) 0;font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);
font-size:var(--text-2xl);line-height:var(--lh-h3);letter-spacing:var(--track-h3);color:var(--color-primary);}
.author-box__creds{margin:0 0 var(--space-2);font-weight:var(--fw-semibold);font-size:var(--text-sm);color:var(--color-text);}
.author-box__bio > :last-child{margin-bottom:0;}
.author-box__social{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3);}
.author-box__social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--color-border-strong);
border-radius:var(--radius);background-color:var(--color-page);color:var(--color-primary);text-decoration:none;}
.author-box__social a:hover{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white);}
.author-box__social svg{width:1.2em;height:1.2em;}
.author-box__all{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:var(--fw-bold);}
.author-box__all svg{width:1em;height:1em;}
.author-archive-head{margin-bottom:var(--space-8);}
/* Fact-check line; its panel drops out of flow as a small ink-bordered plate (§21.15a). */
.fact-check{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-3) 0;font-size:var(--text-sm);color:var(--color-muted);}
.fact-check > svg{width:1.1em;height:1.1em;flex:none;color:var(--color-primary);}
.fact-check__details{display:inline-flex;align-items:center;}
.fact-check__details summary{display:inline-flex;align-items:center;cursor:pointer;list-style:none;color:var(--color-primary);}
.fact-check__details summary::-webkit-details-marker{display:none;}
.fact-check__details summary::marker{content:"";}
.fact-check__details summary svg{width:1.1em;height:1.1em;}
.fact-check__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:260px;max-width:min(420px,90vw);padding:var(--space-4);
background-color:var(--color-page);color:var(--color-text);border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-md);}
.fact-check__panel > :last-child{margin-bottom:0;}
.freshness{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0;font-size:var(--text-sm);color:var(--color-muted);}
.freshness svg{width:1.1em;height:1.1em;flex:none;}
/* Projects, credentials, awards, team, guarantees (key tags where they are cards). */
.projects{padding:var(--space-20) 0;}
.projects__grid{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);}
@media (min-width:640px){.projects__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:960px){.projects__grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.project-card__images{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:calc(var(--space-6) * -1) calc(var(--space-5) * -1) var(--space-4);
border-radius:var(--radius-tag) var(--radius-tag) 0 0;overflow:hidden;}
.project-card__images figure{position:relative;margin:0;}
.project-card__images img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.project-card__images figcaption{position:absolute;bottom:0;left:0;padding:3px 8px;background-color:var(--color-dark-2);color:var(--color-on-dark);
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-xs);letter-spacing:var(--track-label);text-transform:uppercase;}
.project-card__body{display:flex;flex-direction:column;gap:var(--space-2);flex:1 1 auto;}
.project-card__meta{margin:0;font-size:var(--text-sm);color:var(--color-muted);}
.credentials{display:flex;flex-wrap:wrap;gap:var(--space-4);padding:var(--space-8) 0;}
.credential{display:flex;align-items:center;gap:var(--space-2);}
.credential svg{width:1.4em;height:1.4em;flex:0 0 auto;color:var(--color-primary);}
.credential__value{font-weight:var(--fw-semibold);}
.awards{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);padding:var(--space-8) 0;}
.awards img{max-height:48px;width:auto;filter:grayscale(1);opacity:.75;transition:opacity var(--transition),filter var(--transition);}
.awards a:hover img,.awards img:hover{filter:grayscale(0);opacity:1;}
.team-grid{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);}
@media (min-width:640px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:960px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.team-card{text-align:left;}
.team-card__photo img{width:120px;height:120px;margin:0 0 var(--space-3);border-radius:var(--radius-md);object-fit:cover;}
.guarantees{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);}
@media (min-width:640px){.guarantees{grid-template-columns:repeat(3,minmax(0,1fr));}}
.guarantee{text-align:left;}
.guarantee svg{width:2.4em;height:2.4em;margin-bottom:var(--space-2);color:var(--color-primary);}
.team-section,.guarantees-section{margin-top:var(--space-16);}
.team-section .section-head,.guarantees-section .section-head{margin-bottom:var(--space-8);}
/* Prose: 66ch measure on the white sheet (never on a dark plate). */
.prose-content{max-width:var(--width-wide);margin:0 auto;padding:var(--space-12) var(--space-4);font-size:var(--text-lg);}
.prose-content.content-narrow{max-width:var(--width-wide);}
.container .prose-content{max-width:none;padding-left:0;padding-right:0;}
.prose-content > *{max-width:var(--prose-measure);}
.prose-content > :is(.alignwide,.alignfull,.content-cards,.wp-block-table,table,.wp-block-columns,.brv-map,.plans,.slots){max-width:none;}
.prose-content > :first-child{margin-top:0;}
.prose-content h2{font-size:var(--text-3xl);margin:var(--space-12) 0 var(--space-4);}
.prose-content h3{font-size:var(--text-2xl);margin:var(--space-8) 0 var(--space-3);}
.prose-content h4{margin-top:var(--space-6);}
.prose-content h2:first-child,.prose-content h3:first-child{margin-top:0;}
.prose-content a:not(.btn):not(.wp-block-button__link){color:var(--color-primary);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;}
.prose-content a:not(.btn):not(.wp-block-button__link):hover{text-decoration-thickness:3px;}
.prose-content li{margin-bottom:var(--space-2);}
.prose-content img{border-radius:var(--radius-md);}
.prose-content figure{margin:var(--space-6) 0;}
.prose-content blockquote{margin:var(--space-6) 0;padding:var(--space-2) 0 var(--space-2) var(--space-5);border-left:3px solid var(--color-primary);color:var(--color-muted);}
.prose-content hr{height:0;margin:var(--space-10) 0;border:0;border-top:2px solid var(--color-primary);}
/* Certification tables: ink top rule, stamped thead, zebra, tabular figures. */
.prose-content table{width:100%;margin:var(--space-6) 0;border-collapse:collapse;border-top:2px solid var(--color-primary);
font-size:var(--text-base);font-variant-numeric:tabular-nums lining-nums;}
.prose-content :is(th,td){padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top;}
.prose-content thead th{background-color:var(--color-primary);color:var(--color-on-dark);font-family:var(--font-display);font-stretch:condensed;
font-weight:var(--fw-display);font-size:var(--text-label);letter-spacing:var(--track-label);text-transform:uppercase;line-height:1.2;}
.prose-content tbody th{font-weight:var(--fw-bold);}
.prose-content tbody tr:nth-child(even){background-color:var(--color-surface);}
.prose-content caption{caption-side:top;margin-bottom:var(--space-2);text-align:left;font-family:var(--font-display);font-stretch:condensed;
font-weight:var(--fw-display);font-size:var(--text-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-muted);}
.prose-content :is(td,th).num{text-align:right;white-space:nowrap;}
.prose-content .wp-block-table{margin:var(--space-6) 0;}
.prose-content .wp-block-table table{margin:0;}
.prose-content .wp-block-table figcaption{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-muted);}
@media (max-width:767px){
.prose-content .wp-block-table{overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);}
.prose-content .wp-block-table table{min-width:32rem;}}
/* Grade codes: an inline stamp in the display face (typography for a code the editor writes). */
.prose-content code,.grade-code{display:inline-block;padding:.12em .4em;border:1.5px solid var(--color-primary);border-radius:var(--radius-sm);
background-color:var(--color-page);color:var(--color-primary);font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);
font-size:.95em;letter-spacing:var(--track-code);line-height:1.1;font-variant-numeric:tabular-nums lining-nums;}
.prose-content pre{overflow-x:auto;padding:var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background-color:var(--color-surface);}
.prose-content pre code{display:inline;padding:0;border:0;background:none;font-family:var(--font);letter-spacing:0;}
/* In-prose rights box ([brv_rights]): a small brushed plate, no rivets. */
.rights-box--inline{margin:var(--space-8) 0;padding:var(--space-6);background-color:var(--color-surface);background-image:var(--sheen-light),var(--brush-light);
border:1px solid var(--color-border);border-radius:var(--radius-lg);}
.rights-box--inline .section-head{margin:0 0 var(--space-3);}
.rights-box--inline .section-head h2,.prose-content .rights-box--inline h2{margin:0;font-size:var(--text-2xl);}
.rights-box__text{margin:0;max-width:66ch;}
.rights-box--inline .rights-box__text{font-size:var(--text-base);}
/* Section rights box (home): inherits the inset surface plate. */
.rights-box .section-head{margin-bottom:var(--space-4);}
/* Blog / archives / search / single. */
.post-thumb img{margin-bottom:var(--space-6);border-radius:var(--radius-md);}
.entry-header{margin-bottom:var(--space-6);}
.entry-header h1{margin-bottom:var(--space-3);}
.entry-meta{margin-bottom:var(--space-6);font-size:var(--text-sm);color:var(--color-muted);font-variant-numeric:tabular-nums lining-nums;}
.entry-content > :last-child{margin-bottom:0;}
.post-list{display:grid;gap:var(--space-4);}
.related-posts{padding-top:var(--space-12);}
.blog-sidebar,.widget-area{display:grid;gap:var(--space-8);}
.widget{margin:0 0 var(--space-8);}
.widget__title{margin:0 0 var(--space-3);font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-label);
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-muted);}
.comments-area{margin-top:var(--space-12);}
.comments-title{font-size:var(--text-2xl);}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list > li{padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);}
.no-comments{color:var(--color-muted);}
/* Search form (search.php, header search). */
.search-form{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.search-form .search-field{flex:1 1 12rem;min-width:0;min-height:48px;padding:.625rem .75rem;border:1.5px solid var(--color-field-border);border-radius:3px;
background-color:var(--color-page);color:var(--color-text);}
.search-form .search-field:focus{outline:var(--focus-w) solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary);}
/* Native pagination (blog index, archives, search) + the companion posts grid. */
.pagination{margin-top:var(--space-12);}
.pagination .nav-links,.brv-posts__pagination{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;}
.brv-posts__pagination{margin-top:var(--space-8);}
.pagination .page-numbers,.brv-posts__pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
padding:0 var(--space-3);border:var(--keyline) solid var(--color-primary);border-radius:var(--radius-btn);background-color:var(--color-page);
color:var(--color-primary);font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:var(--text-btn-sm);
text-decoration:none;font-variant-numeric:tabular-nums lining-nums;}
.pagination .page-numbers.current,.brv-posts__pagination .page-numbers.current{background-color:var(--color-primary);color:var(--color-white);}
.pagination a.page-numbers:hover,.brv-posts__pagination a.page-numbers:hover{background-color:var(--color-accent-tint);text-decoration:none;}
.pagination .page-numbers.dots,.brv-posts__pagination .page-numbers.dots{border-color:transparent;background-color:transparent;}
/* Contact page (page-contact.php) — the classes replace the donor inline styles. */
.contact-grid{align-items:start;margin-top:var(--space-8);}
.contact-intro{padding:0;max-width:none;}
.contact-info{margin-bottom:var(--space-8);}
.contact-list{list-style:none;padding:0;margin:var(--space-4) 0 0;}
.contact-list li{display:flex;align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-3);}
.contact-list svg{width:1.1em;height:1.1em;flex:none;margin-top:.25em;color:var(--color-primary);}
.contact-map{margin-top:var(--space-8);}
.contact-form{min-width:0;}
.contact-form .quote-form-wrap{max-width:40rem;}
/* Written complaints box (ZZP čl. 10) — only when the note is filled. */
.complaints-box{max-width:40rem;margin:var(--space-8) 0 0;padding:var(--space-6);background-color:var(--color-page);
border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);}
.complaints-box__title{margin:0 0 var(--space-3);font-size:var(--text-2xl);}
.complaints-box__text{font-size:var(--text-base);}
.complaints-box__text > :last-child{margin-bottom:0;}
/* Scope note under the hero on city pages (hub-off sentence). */
.scope-note{padding:var(--space-4) 0 0;}
.scope-note__text{margin:0;max-width:66ch;padding:var(--space-1) 0 var(--space-1) var(--space-4);border-left:var(--keyline) solid var(--color-primary);
font-size:var(--text-sm);color:var(--color-muted);}
/* Read more (collapsible content) — JS-gated, so no-JS shows everything. */
.readmore__btn{display:none;margin-top:var(--space-6);}
.readmore--left{text-align:left;}
.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;}
.readmore--more{position:relative;}
.readmore--height{position:relative;}
.js .readmore--height.is-collapsed .readmore__inner{max-height:var(--readmore-h);overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);}
@media (prefers-reduced-motion:no-preference){.js .readmore--height .readmore__inner{transition:max-height var(--transition);}}
/* 16. FOOTER + STICKY BAR -------------------------------------------------- */
/* The only full-bleed dark surface: the cabinet floor, with a rivet rail on top. */
.site-footer{position:relative;margin-top:var(--space-8);padding:var(--space-16) 0 var(--space-8);background-color:var(--color-dark-2);
background-image:var(--brush-dark);color:var(--color-on-dark-muted);}
.site-footer::before{content:"";position:absolute;top:var(--space-4);left:0;right:0;height:var(--rivet);pointer-events:none;
background:var(--rivet-dark) center top/64px var(--rivet) repeat-x;}
.footer-grid{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr);}
@media (min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr;}}
.footer-col{min-width:0;}
.footer-col h3,.footer-widget__title{margin:0 0 var(--space-4);font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);
font-size:1rem;letter-spacing:var(--track-label);text-transform:uppercase;line-height:1.2;color:var(--color-on-dark);}
/* The business name is the wordmark, typed as written (never uppercased). */
.footer-col:first-child > h3:first-child{font-size:1.375rem;letter-spacing:var(--track-wordmark);text-transform:none;}
.footer-col p{margin:0 0 var(--space-2);}
.footer-col a,.footer-bottom a,.footer-impressum a{color:var(--color-on-dark);text-decoration:none;}
.footer-col a:hover,.footer-bottom a:hover,.footer-impressum a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;}
.footer-col ul,.footer-menu{list-style:none;margin:0;padding:0;}
.footer-menu li{margin-bottom:var(--space-2);}
.footer-license{font-size:var(--text-sm);color:var(--color-on-dark-muted);}
.footer-social{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--color-dark-border);
border-radius:var(--radius);color:var(--color-on-dark);text-decoration:none;}
.footer-social a:hover{background-color:var(--color-on-dark);border-color:var(--color-on-dark);color:var(--color-text);text-decoration:none;}
.footer-social svg{width:1.4em;height:1.4em;}
/* Impressum (ZET čl. 6) — only when filled; before the copyright line. */
.footer-impressum{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-dark-border);}
.footer-impressum__title{margin:0 0 var(--space-3);font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:1rem;
letter-spacing:var(--track-label);text-transform:uppercase;line-height:1.2;color:var(--color-on-dark);}
.footer-impressum__text{margin:0;max-width:72ch;font-size:var(--text-sm);color:var(--color-on-dark-muted);font-variant-numeric:tabular-nums lining-nums;}
.footer-bottom{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-dark-border);font-size:var(--text-sm);}
.footer-bottom p{margin:0;}
/* Mobile sticky Call / WhatsApp bar (< 960; rendered only when a number exists). */
.sticky-bar{position:fixed;inset:auto 0 0 0;z-index:60;display:flex;flex-wrap:wrap;gap:6px;
padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--color-dark-2);border-top:1px solid var(--color-dark-border);}
.sticky-bar a{flex:1 1 0;min-width:0;min-height:52px;font-size:var(--text-btn-lg);}
/* A paid Istaknuti bar: a visible „Oglas · {naziv}” caption row above the buttons. */
.sticky-bar__ad{display:flex;align-items:center;gap:var(--space-2);flex:0 0 100%;min-width:0;height:22px;padding:0 2px;
font-size:var(--text-xs);line-height:1.2;color:var(--color-on-dark-muted);}
.sticky-bar__stamp{flex:0 0 auto;padding:.2em .4em;border:1px solid var(--color-on-dark-muted);border-radius:var(--radius-sm);
font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);letter-spacing:var(--track-label);
text-transform:uppercase;line-height:1;color:var(--color-on-dark);}
.sticky-bar__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body:has(> .sticky-bar > .sticky-bar__ad){--sticky-h:94px;}
@media (min-width:960px){.sticky-bar{display:none;}}
body.has-sticky-bar{padding-bottom:0;}
body.has-sticky-bar:has(> .sticky-bar){padding-bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom));}
@media (min-width:960px){body.has-sticky-bar:has(> .sticky-bar){padding-bottom:0;}}
/* 17. TOOL PAGE (page-tool.php) — quiet chrome for linkable assets --------- */
.tool-header{padding:var(--space-3) 0;border-bottom:var(--keyline) solid var(--color-primary);background-color:var(--color-page);}
.tool-header__inner{display:flex;align-items:center;justify-content:center;}
.tool-header .custom-logo-link img{max-height:36px;}
.tool-header__title{margin:0;font-family:var(--font-display);font-stretch:condensed;font-weight:var(--fw-display);font-size:1.375rem;
letter-spacing:var(--track-wordmark);line-height:1;}
.tool-header__title a{color:var(--color-primary);text-decoration:none;}
.tool-page{display:block;}
.tool-page__inner{max-width:var(--width-content);padding-top:var(--space-8);padding-bottom:var(--space-12);}
.tool-page__title{font-size:var(--text-3xl);margin:0 0 var(--space-6);}
.tool-page__content{padding:0;max-width:none;}
.tool-footer{margin-top:var(--space-8);padding:var(--space-6) 0;border-top:1px solid var(--color-border);}
.tool-footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;font-size:var(--text-sm);color:var(--color-muted);}
.tool-footer__inner p{margin:0;}
.tool-footer__inner a{color:inherit;}
/* 18. UTILITIES / A11Y / MOTION -------------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:var(--space-3);background-color:var(--color-page);color:var(--color-primary);text-decoration:underline;}
.skip-link:focus{left:var(--space-3);}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Scroll reveal: only with JS, only when motion is allowed; never on the hero (LCP). */
.js .reveal{opacity:0;transform:translateY(16px);}
@media (prefers-reduced-motion:no-preference){
.js .reveal{transition:opacity .5s ease,transform .5s ease;}
.js .reveal.is-visible{opacity:1;transform:none;}}
.no-js .reveal,.js .hero .reveal{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
.js .reveal{opacity:1;transform:none;}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}
/* Forced colours: keylines become system colours; the punched holes stay holes. */
@media (forced-colors:active){
.btn,.wp-block-button__link,.brv-header-cta,.sticky-bar a,.listing__row-call{border-color:ButtonText;}
.postal-code__num,.trust-badge,.section-head__eyebrow,.hero__eyebrow,.listing__ad,.listing__badge,.card__count,.directory__sell{border-color:CanvasText;}}