/*
Theme Name: Avtomehanika Papež
Theme URI: https://avtomehanika-papez.si
Author: Avtomehanika Papež
Description: Tema po meri za servis vozil in cenitve za zavarovalnice.
Version: 1.0
Text Domain: avtomehanika-papez
*/

/* ---------- Pisavi ----------
   Source Sans 3 (naslovi, besedilo, oznake) in Roboto (izključno gumbi),
   oba lasten podnabor: osnovna latinica + šumniki + potrebna ločila.
   Source Sans 3 je variabilen (os debeline 200–900) v eni datoteki, 21,3 KB;
   Roboto je statična instanca 400 (gumbi ne uporabljajo druge debeline), 16,1 KB.

   Gostimo ju sami, ker je CSP zaklenjen na 'self' — Google Fonts bi bil tiho
   blokiran, poleg tega bi bil Googlov nabor dve datoteki na družino (latin +
   latin-ext), ker slovensko besedilo zaradi šumnikov vedno potegne obe.
   Postopek ponovne izdelave obeh podnaborov je opisan v README.md.

   URL tu in v pp_preload_font() (functions.php) morata biti ZNAKOVNO ENAKA,
   brez ?ver= — različna URL-ja pomenita dva prenosa iste datoteke. */
@font-face{
  font-family:"Source Sans 3";
  src:url("fonts/source-sans-3-var.woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Roboto PP";
  src:url("fonts/roboto-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---------- Design tokens ----------
   Ena sama deklaracija. Temnega načina tema namenoma NIMA: referenčna
   postavitev je svetla, ob temnem načinu pa bi bilo treba vsako barvo
   vzdrževati na štirih mestih (:root, prefers-color-scheme, dva data-theme
   bloka), kar je bilo v prejšnji različici vir neusklajenosti. */
:root{
  --bg:#eeeeee;
  --surface:#ffffff;
  --surface-2:#f5f6f7;
  --ink:#212226;
  --muted:#5f6672;

  /* Mornarsko modra je nosilna barva: pasovi, gumbi, navigacija, noga.
     NI #001E50 — to je licencirana korporativna barva Volkswagna in
     Avtomehanika Papež ni pooblaščeni serviser nobene znamke.
     Belo besedilo na tej modri da 13,04:1. */
  --accent:#12305e;
  --accent-ink:#ffffff;
  --accent-hover:#1b4079;

  /* Vmesni modro-sivi pas. Referenca uporablja ~#6E80A6, kar da belemu
     besedilu 3,96:1 — pod mejo WCAG 2.2 AA (4,5:1). Potemnjeno na 5,17:1;
     vizualno razlika komaj zaznavna, napake pa ne prenašamo naprej. */
  --accent-2:#5a6d96;

  --line:#dde1e6;
  --ok:#2e7d52;

  /* Modri pasovi. Imena so ostala iz prejšnje ("karbonske") različice, ker
     jih uporablja ~40 selektorjev; vsebina je zdaj mornarsko modra. */
  --carbon:#12305e;
  --carbon-line:#2b4877;
  --on-carbon:#ffffff;
  --on-carbon-muted:#c2cde0;

  /* Ostri vogali povsod. Referenca ima --btn-border-radius: 0px in enako
     obravnava kartice in okvirje; 2px iz prejšnje različice je bil mehkejši. */
  --radius:0px;
  --radius-media:0px;

  /* Sence so komaj prisotne — postavitev drži skupaj 1px črta, ne globina. */
  --shadow:0 1px 2px rgba(33,34,38,.06);
  --shadow-lg:0 2px 10px rgba(33,34,38,.10);

  /* Navpični ritem sekcij. Tekoč, da med telefonom in namizjem ni skoka. */
  --section-y:clamp(56px, 6.5vw, 104px);
  --section-y-tight:clamp(40px, 4.5vw, 68px);

  --font-display:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Oznake ("instrumentna" pisava): verzalke s širokim razmikom. Prej je bil
     tu monospace; referenca za oznake uporablja isto družino kot besedilo,
     značaj nosita velikost in razmik črk, ne druga pisava. */
  --font-label:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Gumbi so edino mesto, kjer referenca uporablja Roboto (15px / 400). */
  --font-btn:"Roboto PP",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
/* Naslovi so verzalke s POZITIVNIM razmikom črk — prej je bil -.025em.
   Verzalke z negativnim razmikom se zlepijo v blok. */
h1,h2,h3,h4{
  font-family:var(--font-display);line-height:1.2;letter-spacing:.02em;
  text-transform:uppercase;text-wrap:balance;margin:0 0 .5em;
}
h1{font-size:clamp(1.85rem,2.9vw + 1rem,3rem);font-weight:700}
h2{font-size:clamp(1.5rem,2vw + .9rem,2.25rem);font-weight:700}
h3{font-size:1.06rem;font-weight:700}

/* Dvobarvni naslov: lahka polovica + krepka polovica. Poudarek nosi tisti del
   stavka, ki je obljuba, ne cel naslov. Referenca uporablja natanko ta prijem
   ("NAŠE STORITVE", "KATERE ZNAMKE VOZIL SERVISIRAMO?"). */
.h-duo{font-weight:300}
.h-duo .hl{font-weight:700}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.container{max-width:1180px;margin-inline:auto;padding-inline:24px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Zmanjšano gibanje: vse animacije in prehodi se skrčijo na nič.
   `animation-delay` je tu OBVEZEN — brez njega animacija z `both` in zamikom
   (npr. vstop heroja, .34s) obdrži začetno stanje ves čas zamika, torej
   opacity:0. Uporabnik z zmanjšanim gibanjem bi videl utrip prazne strani,
   kar je natanko nasprotno od namena te nastavitve. */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Utility ---------- */
/* Oznaka nad naslovom. Referenca je nima z vodilno črtico — je preprosta
   sredinska verzalna oznaka. */
.eyebrow{
  font-family:var(--font-label);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.section{padding:var(--section-y) 0}
.section-tight{padding:var(--section-y-tight) 0}

/* Sredinski naslov sekcije s kratko črtico pod njim — nosilni ritem reference.
   Črtica je na h2, ne na .section-head, da ostane tik pod naslovom tudi
   takrat, ko pod njim ni odstavka. */
.section-head{max-width:760px;margin:0 auto clamp(28px,3.4vw,52px);text-align:center}
.section-head p{color:var(--muted);margin-inline:auto;max-width:64ch}
.section-head .eyebrow{margin-bottom:12px}
.section-head h2::after,
.section-head h1::after{
  content:"";display:block;width:44px;height:2px;
  background:var(--accent);margin:20px auto 0;
}
.muted{color:var(--muted)}

/* Svetli vmesni pas. Prej je bil ta vzorec sedemkrat zapisan kot inline slog
   po predlogah; sprememba pasu je bila zato sedemkratna.

   Bel, ne --surface-2: podlaga strani je --bg #eeeeee, --surface-2 #f5f6f7 pa
   je od nje svetlejši za komaj zaznavno stopnjo in pas ne bi bral kot pas. */
.section-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Modro-sivi pas. Sredinska vsebina, belo besedilo. */
.section-slate{background:var(--accent-2);color:#fff;text-align:center}
.section-slate h1,.section-slate h2,.section-slate h3,.section-slate h4{color:#fff}
.section-slate p,.section-slate .muted{color:rgba(255,255,255,.88)}
.section-slate .eyebrow{color:rgba(255,255,255,.82)}
.section-slate .section-head h2::after{background:#fff}
.section-slate .btn-primary{background:var(--accent);color:#fff}
.section-slate .btn-primary:hover{background:var(--accent-hover)}
.section-slate .btn-secondary{color:#fff;border-color:rgba(255,255,255,.55)}
.section-slate .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.10)}
/* Okvirjena škatla znotraj pasu — referenca jo uporablja za blok o
   zavarovalnicah in za zaključno naročilo. */
.slate-box{
  border:1px solid rgba(255,255,255,.45);
  padding:clamp(28px,4vw,52px) clamp(20px,3.5vw,48px);
  max-width:880px;margin-inline:auto;
}
.slate-box p{margin-inline:auto;max-width:60ch}
.slate-box > :last-child{margin-bottom:0}

/* Modri ("temni") pas: hero, statistike, zaključni CTA. Največ trije na
   strani, sicer preneha biti poudarek. Barve potomcev so nastavljene
   izrecno, ker --ink/--muted na modri podlagi ne držita. */
.band-dark{background:var(--carbon);color:var(--on-carbon)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:var(--on-carbon)}
.band-dark p,.band-dark .muted{color:var(--on-carbon-muted)}
.band-dark .eyebrow{color:var(--on-carbon-muted)}
.band-dark .section-head h2::after{background:#fff}
/* GUMBI NA MODRI PODLAGI — vsa štiri mesta na enem mestu.
   Privzeti .btn-primary je moder in bi na modri podlagi izginil, privzeti
   .btn-secondary pa nosi besedilo in obrobo --ink #212226, kar na #12305e
   da 1,3:1. Ker so modre podlage štiri in NISO gnezdene ena v drugi
   (.cta-banner na domači strani stoji v navadni .section, .feature-panel
   prav tako), mora pravilo našteti vse štiri — sicer se napaka ponovi na
   tistem, ki je izpuščen. Belo na modrem da 13,04:1. */
.band-dark .btn-primary,
.cta-banner .btn-primary,
.feature-panel .btn-primary,
.page-hero .btn-primary{background:#fff;color:var(--accent)}
.band-dark .btn-primary:hover,
.cta-banner .btn-primary:hover,
.feature-panel .btn-primary:hover,
.page-hero .btn-primary:hover{background:var(--on-carbon-muted);box-shadow:none}
.band-dark .btn-secondary,
.cta-banner .btn-secondary,
.feature-panel .btn-secondary,
.page-hero .btn-secondary{color:var(--on-carbon);border-color:rgba(255,255,255,.45)}
.band-dark .btn-secondary:hover,
.cta-banner .btn-secondary:hover,
.feature-panel .btn-secondary:hover,
.page-hero .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- Buttons ----------
   Referenca: 15px, teža 400, Roboto, brez zaobljenih vogalov, brez obrobe,
   sredinsko poravnano besedilo, modra podlaga in belo besedilo. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-btn);font-size:15px;font-weight:400;letter-spacing:.01em;
  text-align:center;
  padding:14px 30px;border-radius:var(--radius);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .1s ease;
  white-space:nowrap;
}
/* Stanje pritiska: 1px navzdol. Namerno NI `scale()` — gumb v mobilni vrstici
   in v heroju stoji ob robu, pomanjšanje pa tam bere kot da je gumb odskočil. */
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:#fff}
.btn-block{width:100%}
.btn svg{flex:none}

/* ---------- Kontaktna vrstica nad glavo ---------- */
/* Ni v .site-header: glava je lepljiva in vrstica bi se lepila z njo. */
.topbar{background:var(--surface);color:var(--muted);border-bottom:1px solid var(--line)}
.topbar-row{
  display:flex;align-items:center;gap:22px;min-height:38px;
  font-family:var(--font-label);font-size:.78rem;letter-spacing:.04em;
}
.topbar-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar-item svg{flex:none;color:var(--accent);opacity:.9}
.topbar-accent{color:var(--accent)}
/* Dežurna številka v znački 24/7. NE uporablja `.topbar-link`: ta bi ji vzela
   poudarjeno barvo (pride pozneje v datoteki) in ji dodala `margin-left:auto`,
   kar bi značko odrinilo v desno skupino k številkama delavnice — torej ravno
   tja, kjer je bila zamenjava obeh linij sploh mogoča. */
.topbar-tow{text-decoration:none;font-weight:600;padding:9px 0;transition:color .15s}
.topbar-tow:hover{color:var(--accent-hover)}
/* Telefona odrineta na desno; vse pred njima ostane levo. */
.topbar-link{margin-left:auto;color:var(--muted);text-decoration:none;padding:9px 0;transition:color .15s}
.topbar-link + .topbar-link{margin-left:0}
.topbar-link:hover{color:var(--ink)}
.topbar-strong{color:var(--ink);font-weight:600}
.topbar-strong svg{color:var(--accent)}
@media (max-width:900px){.topbar{display:none}}

/* ---------- Header ---------- */
/* Višina glave je žeton, ker jo poleg .header-row potrebujeta še izvlečni meni
   (inset od vrha) in odmik sider ob drsenju. Prej je bila v vsakem od teh
   mest zapisana posebej in ležeči prelom (56px) je meniju pustil 16px reže. */
:root{--header-h:72px}
@media (max-width:900px){:root{--header-h:64px}}

/* NIKOLI `transform`, `filter`, `backdrop-filter` ali `will-change` na tem
   elementu ali čemerkoli, kar vsebuje `.site-nav` — vsak od njih ustvari nov
   containing block za `position:fixed` potomce in izvlečni mobilni meni se
   pritrdi na glavo namesto na okno. Kompaktnost ob drsenju je zato izpeljana
   samo prek žetona višine in sence, ki tega ne povzročita. */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--accent);
  border-bottom:1px solid var(--accent);
  transition:box-shadow .25s ease;
}
/* Razred doda js/main.js po ~24px drsenja. Višina gre prek --header-h, ker
   isto vrednost berejo še izvlečni meni (inset od vrha) in scroll-margin-top
   za sidra; zapis neposredno na .header-row bi ju razklenil. */
.site-header.is-scrolled{box-shadow:0 2px 12px -4px rgba(18,48,94,.45)}
/* Krčenje SAMO na namizju. Pod 900px se izvlečni meni pozicionira z
   `inset: var(--header-h) 0 0 0`, torej iz ŽETONA in ne iz dejanske višine
   vrstice — skrčena vrstica bi mu pustila 10px svetle reže pod glavo.
   Senca velja povsod, ta ničesar ne premakne. */
@media (min-width:901px){
  .site-header.is-scrolled .header-row{height:calc(var(--header-h) - 10px)}
}
.header-row{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--header-h);
  transition:height .25s cubic-bezier(.22,.61,.36,1);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand-mark{flex:none;display:flex;align-items:center}
/* Risani znak podjetja. Višina sledi glavi (--header-h 72/64/56), širina je
   samodejna — znak je razmerja 1,42:1 in fiksna širina bi ga popačila.
   Pri 901–1080px je glava najtesnejša: izmerjeno je med znamko in menijem
   74px zraka, znak pa je pri 40px visok širok 57px, kar se udobno izide.
   Ob zamenjavi znaka z drugačnim razmerjem to razmerje znova preveri. */
.brand-img{height:40px;width:auto;display:block}
@media (max-width:900px){.brand-img{height:36px}}
@media (max-width:400px){.brand-img{height:32px}}
/* V nogi je znak manjši od glave — tam je pod njim še večji znak kot podpis
   (.footer-logo) in enaka velikost bi ju postavila v tekmo. */
.footer-brand .brand-img{height:30px}
/* Ime podjetja v eni vrstici. Lomljeno "Avtomehanika / Papež" glavo optično
   podvoji in stlači; prostor raje vzamemo meniju in gumbu (glej pas spodaj). */
.brand-word{display:block;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.02em;line-height:1.1;text-transform:uppercase}
/* Oznaka pod imenom znamke se NE sme lomiti: dvovrstična podre navpično
   poravnavo cele glave. Namesto lomljenja jo v pretesnih pasovih skrijemo
   (glej media querye takoj spodaj). */
.brand-tag{display:block;white-space:nowrap;font-family:var(--font-label);font-size:.68rem;letter-spacing:.14em;color:rgba(255,255,255,.72);text-transform:uppercase;margin-top:2px}
/* Oznaka potrebuje ~250px. Nima jih v dveh pasovih:
   901–1080px — namizna glava s štirimi postavkami menija, jezikom in gumbom,
   pod 520px  — ozek telefon, kjer si širino deli s hamburgerjem.

   Pri 901px je vsota (znamka + meni + akcije + razmiki) praktično enaka
   notranji širini vsebnika. Zato v tem pasu poleg oznake stisnemo tudi meni
   in gumb — sicer bi se moralo lomiti ime podjetja. */
@media (min-width:901px) and (max-width:1080px){
  .brand-tag{display:none}
  .brand-word{font-size:1rem}
  .site-nav a{padding:10px 9px;font-size:.86rem}
  .header-actions .header-cta{padding:12px 16px;font-size:14px}
  .header-row{gap:16px}
}
@media (max-width:520px){
  .brand-tag{display:none}
  .brand-word{font-size:.98rem}
}
.site-nav{display:flex;align-items:center;gap:2px}
.site-nav ul{display:flex;align-items:center;gap:2px}
.site-nav a{
  display:inline-block;padding:10px 13px;text-decoration:none;color:rgba(255,255,255,.82);
  font-size:.9rem;font-weight:400;border-radius:var(--radius);transition:color .15s;
}
.site-nav a:hover,.site-nav a.is-active{color:#fff}
.site-nav .nav-cta{display:none}
.nav-contact{display:none}
.header-actions{display:flex;align-items:center;gap:10px}
/* Glavni gumb v modri glavi mora biti bel — moder na modrem ne bi bil viden. */
.header-actions .header-cta{background:#fff;color:var(--accent)}
.header-actions .header-cta:hover{background:var(--on-carbon-muted)}
.nav-toggle{
  display:none;background:none;border:1px solid rgba(255,255,255,.45);border-radius:var(--radius);
  width:44px;height:44px;align-items:center;justify-content:center;color:#fff;
}
.nav-toggle svg{width:20px;height:20px}

/* Sidra se sicer ustavijo pod lepljivo glavo — naslov sekcije je bil skrit
   pod njo pri vsakem kliku v meniju. VSAK nov id sekcije mora biti tu. */
#domov,#storitve,#potek,#kontakt,#povprasevanje{scroll-margin-top:calc(var(--header-h) + 16px)}
html{scroll-behavior:smooth}

@media (max-width:900px){
  .site-nav{
    position:fixed;inset:var(--header-h) 0 0 0;background:var(--accent);
    flex-direction:column;align-items:stretch;padding:8px 24px calc(24px + env(safe-area-inset-bottom,0px));
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .18s ease, transform .18s ease;
    overflow-y:auto;
  }
  /* align-items:center iz osnovnega pravila v navpični smeri stisne postavke
     na širino besedila in jih centrira — vrstice menija so bile sredinske,
     zadetna površina pa široka le toliko kot napis. */
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .site-nav a{display:block;padding:16px 4px;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.18)}
  .site-nav .nav-cta{display:flex;margin-top:18px}
  body.nav-open .site-nav{opacity:1;pointer-events:auto;transform:translateY(0)}
  /* Brez tega se stran za odprtim menijem še vedno pomika. */
  body.nav-open{overflow:hidden}
  .site-nav a.is-active{color:#fff;font-weight:700}
  /* .site-nav a (0,1,1) sicer prevlada nad .btn-primary (0,1,0) in gumb dobi
     prosojno belo besedilo na beli podlagi. Eksplicitno nazaj na gumbno barvo. */
  .site-nav .nav-cta{background:#fff;color:var(--accent);border-bottom:none;text-align:center}
  .nav-toggle{display:inline-flex}
  .header-actions .btn-primary.header-cta{display:none}

  /* Kontakt v odprtem meniju — glava je takrat zakrita. */
  .nav-contact{
    display:flex;flex-direction:column;gap:2px;margin-top:22px;padding-top:18px;
    border-top:1px solid rgba(255,255,255,.18);
  }
  .nav-contact a,.nav-contact span{
    display:flex;align-items:center;gap:10px;padding:9px 4px;
    font-size:.9rem;color:rgba(255,255,255,.82);text-decoration:none;border-bottom:none;
  }
  .nav-contact a{color:#fff}
  .nav-contact svg{flex:none;color:rgba(255,255,255,.7)}
}

/* ---------- Lepljiva akcijska vrstica (telefon) ---------- */
/* Privzeto skrita IZVEN media queryja — sicer bi bila na namizju vidna. */
.mobile-actions{display:none}
@media (max-width:900px){
  /* TRI dejanja: delavnica, dežurna vleka in navigacija. Telefonski vlogi sta
     ločeni tudi vizualno; nobena številka se ne predstavlja kot oboje. */
  .mobile-actions{
    display:grid;grid-template-columns:1.15fr 1.15fr .8fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--line);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .ma-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;
    min-height:56px;padding:9px 8px;background:var(--surface);color:var(--ink);
    font-family:var(--font-label);font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;font-weight:600;
    text-decoration:none;text-align:center;
  }
  .ma-btn svg{flex:none;color:var(--accent)}
  /* Telefonska gumba imata dvovrstično oznako; navigacija samo naslov. */
  .ma-label{display:flex;flex-direction:column;line-height:1.1;min-width:0}
  .ma-label small{
    font-size:.6rem;font-weight:400;letter-spacing:.04em;
    text-transform:none;opacity:.85;margin-top:1px;
  }
  .ma-btn-primary{background:var(--accent);color:#fff}
  .ma-btn-primary svg{color:#fff}
  .ma-btn-tow{background:var(--carbon);color:#fff}
  .ma-btn-tow svg{color:var(--accent-2)}
  .ma-btn:active{filter:brightness(.95)}
  /* Ko je meni odprt, je vrstica podvojena funkcija in vizualni šum. */
  body.nav-open .mobile-actions{display:none}
  /* Odmik pod nogo, da vrstica ne pokriva zadnje vrstice, je NIŽE v datoteki,
     v sekciji noge — tam je `padding` zapisan s skrajšano lastnostjo, ki bi
     posamezno pravilo od tu povozila. */
}

/* ---------- Hero ----------
   Sredinsko poravnan modri pas. Fotografija je NEOBVEZNA: brez nje ostane
   enotna modra podlaga — to ni nadomestek za sliko, ampak dokončano stanje.
   Zato pp_image() nikoli ne izriše vidnega nadomestka. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(56px,8vw,120px) 0 clamp(52px,6.5vw,96px);
  background:var(--carbon);
  text-align:center;
}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-img{width:100%;height:100%;object-fit:cover}
/* Nad 900 px dobi hero fiksno razmerje 16:9. Brez njega ga določa višina
   besedila (izmerjeno 2,12:1), fotografija pa je 3:2 — pri `cover` je zato
   odpadlo 29 % motiva, pri 16:9 odpade 16 %. Hero je posledično ~130 px višji.
   Na telefonu tega ni: tam je okvir 0,55:1 (pokončen), besedilo pa je višje od
   vsakega smiselnega razmerja, zato bi `aspect-ratio` ostal brez učinka —
   mobilni hero terja premik besedila POD sliko, kar je oblikovalska odločitev
   in ne le popravek razmerja.
   `display:flex` je tu zato, ker bi besedilo v višjem okvirju sicer obviselo
   na vrhu, pod njim pa bi zijal prazen pas. */
@media (min-width:901px){
  .hero{aspect-ratio:16/9;display:flex;align-items:center}
  .hero > .hero-inner{flex:1}
}
/* Brez preliva belo besedilo na svetli fotografiji izgine. Ker je besedilo
   zdaj sredinsko in teče čez celo širino, je preliv enakomeren — vodoravni
   preliv iz prejšnje različice je imel smisel samo pri levi poravnavi. */
.hero-media::after{
  content:"";position:absolute;inset:0;
  /* Prej .88/.80/.90 — delavnice se pod tem skoraj ni dalo prepoznati.
     Zdaj je preliv redkejši ob robovih, kjer je samo odmik, in gostejši v
     pasu, kjer stoji besedilo. Meja ni okusna, ampak izračunana: pri .72 je
     razmerje kontrasta belega besedila nad najsvetlejšim možnim pikslom
     fotografije 5,4:1, pri .66 ob robovih 4,6:1 — oboje nad zahtevo 4,5:1.
     Kdor preliv še redči, mora kontrast preveriti znova. */
  background:linear-gradient(180deg, rgba(18,48,94,.66) 0%, rgba(18,48,94,.72) 12%, rgba(18,48,94,.72) 88%, rgba(18,48,94,.66) 100%);
}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center}
/* BREZ max-width v `ch`. Prej je bilo 20ch, kar je pri 48px verzalkah okoli
   480px — 48-znakovni naslov se je lomil v štiri vrstice sredi besed. Širino
   omejuje že .container (1132px), lomljenje pa uravnovesi text-wrap:balance
   iz osnovnega pravila za h1. */
.hero h1{margin-top:16px;max-width:none}
.hero h1::after{
  content:"";display:block;width:44px;height:2px;background:#fff;margin:22px auto 0;
}
.hero-lede{
  font-size:clamp(1rem,.4vw + .92rem,1.14rem);
  color:var(--on-carbon-muted);max-width:60ch;margin-top:20px;
}
.hero-ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;justify-content:center}

/* Tri obljube pod gumbi. Niso povezave — so povzetek, ne navigacija. */
.hero-promises{
  display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0;padding:0;list-style:none;
  justify-content:center;
}
.hero-promises li{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 16px;border:1px solid rgba(255,255,255,.32);border-radius:var(--radius);
  font-family:var(--font-label);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-carbon);
}
.hero-promises svg{flex:none;color:#fff}

@media (max-width:900px){
  .hero{padding:clamp(36px,7vw,56px) 0 clamp(40px,7vw,56px)}
  .hero-promises{gap:8px;margin-top:26px}
  .hero-promises li{padding:9px 13px;font-size:.72rem}
}
/* Na ozkem zaslonu sta gumba različno široka in desni rob je razmetan.
   Čez celo širino sta tudi zanesljivejši tarči za palec. */
@media (max-width:480px){
  .hero-ctas{flex-direction:column;align-items:stretch;width:100%}
  .hero-ctas .btn{width:100%}
}

/* ---------- Trust strip ---------- */
.trust-strip{border-bottom:1px solid var(--line);background:var(--surface)}
.trust-row{display:flex;flex-wrap:wrap;gap:0;padding:0}
.trust-item{
  flex:1 1 auto;padding:18px 20px;border-right:1px solid var(--line);
  font-family:var(--font-label);font-size:.8rem;letter-spacing:.03em;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
}
.trust-item svg{flex:none;color:var(--accent)}
.trust-item:last-child{border-right:none}
@media (max-width:900px){
  .trust-row{flex-wrap:wrap}
  .trust-item{flex:1 1 50%;border-bottom:1px solid var(--line);white-space:normal}
}

/* ---------- Benefit / feature cards ----------
   Sredinske kartice s tanko obrobo in ikono nad naslovom — vzorec reference
   ("Zakaj izbrati ravno nas", štiri kartice v vrsti). */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.benefit-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 26px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.benefit-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.benefit-card .icon-wrap{
  width:56px;height:56px;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:20px;
}
.benefit-card h3{margin-bottom:.5em}
.benefit-card p{color:var(--muted);font-size:.95rem;margin-bottom:0}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}

/* ---------- Nosilni storitvi (veliki plošči) ----------
   Zavarovalniške škode in vleka 24/7 sta tisto, po čemer se ta delavnica loči.
   Osem enakih kartic bi bilo pošteno, a bi to zamolčalo.

   Plošča je modra v obeh stanjih: fotografija, kadar obstaja, gre POD preliv. */
.feature-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:20px}
.feature-panel{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--carbon);color:var(--on-carbon);
  border:1px solid var(--carbon-line);border-radius:var(--radius);
  min-height:330px;display:flex;align-items:center;text-align:center;
}
.fp-media{position:absolute;inset:0;z-index:-1}
.fp-img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
/* Enak razlog kot `.page-img--left`: plošča je skoraj kvadratna, razpotegnjena
   fotografija pa pri sredinskem izrezu izgubi oba robova. Vlečno vozilo ima
   napis na prednjem delu, zato izrez sidramo levo. */
.fp-img--left{object-position:left center}
.feature-panel:hover .fp-img{transform:scale(1.03)}
/* Enakomeren preliv, ker je besedilo zdaj navpično sredinsko in ne sedi ob
   dnu. Prejšnji preliv, sidran na dno, bi pustil naslov nad najsvetlejšim
   delom fotografije. */
.fp-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(18,48,94,.90) 0%, rgba(18,48,94,.82) 50%, rgba(18,48,94,.92) 100%);
}
.fp-body{padding:clamp(24px,3vw,44px);position:relative;width:100%}
.fp-body .eyebrow{color:var(--on-carbon-muted)}
.fp-body h3{
  font-size:clamp(1.25rem,1.3vw + .85rem,1.7rem);font-weight:700;
  color:var(--on-carbon);margin:.5em 0 .5em;letter-spacing:.02em;
}
.fp-body h3::after{
  content:"";display:block;width:36px;height:2px;background:#fff;margin:18px auto 0;
}
.fp-body p{color:var(--on-carbon-muted);margin:0 auto 24px;max-width:46ch}
.fp-body .hero-ctas{margin-top:0}
@media (max-width:760px){
  .feature-row{grid-template-columns:1fr}
  .feature-panel{min-height:280px}
}

/* ---------- Services grid ----------
   ŠTEVILO KARTIC JE ELEMENT POSTAVITVE, NE LE VSEBINE. Privzeta mreža je
   trostolpčna in jo uporablja parts/service-cross.php s tremi karticami.
   Domača stran ima štiri, zato .services-grid--4: v trostolpčni bi zadnja
   vrstica ostala z eno samo kartico. Pred spremembo števila kartic kjerkoli
   najprej premisli, kam pade zadnja vrstica.

   Referenca ima napis POD fotografijo in kartico brez odvečnega okrasja. */
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.services-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* PET kartic (domača stran od 2026-08-15). Mreža tu ne deluje: štiristolpčna
   pusti peto samo v drugi vrstici, trostolpčna pa pusti prazno četrto celico
   desno od zadnjih dveh. Flex z `justify-content:center` zadnjo vrstico
   centrira, `flex-basis` pa ohrani enako širino kartice kot trostolpčna mreža,
   da kartice na strani niso dveh velikosti.
   `min-width:0` je nujen: privzeti `min-width:auto` prepreči, da bi se kartica
   skrčila pod svojo vsebino, in dolg naslov jo potisne čez vrstico. */
.services-grid--5{display:flex;flex-wrap:wrap;justify-content:center}
.services-grid--5 > .service-card{flex:0 1 calc((100% - 40px) / 3);min-width:0}
/* Kartica se ob prehodu dvigne za 4px in dobi izrazitejšo senco.
   `position:relative` je tu zaradi raztegnjene povezave (glej .sc-link). */
.service-card{
  position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;text-align:center;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.service-card:hover{
  border-color:var(--accent);
  box-shadow:0 10px 24px -14px rgba(33,34,38,.45);
  transform:translateY(-4px);
}
/* Cela kartica je klikljiva prek raztegnjene povezave: psevdoelement povezave
   v naslovu prekrije kartico. Povezava ostane PRAVA povezava, zato tipkovnica
   in bralnik zaslona delujeta enako kot prej — nič ni podvojeno in nič ni
   `div` z `onclick`. Fokus se izriše na kartici, ne na drobnem napisu. */
.service-card h3 > a::after{
  content:"";position:absolute;inset:0;z-index:1;
}
/* Obris nariše RAZTEGNJEN psevdoelement, ne drobni napis — tipkovnični
   uporabnik tako vidi, da je v žarišču cela kartica. Ne uporabljamo
   `:focus-within` na kartici, ker se ta sproži tudi ob kliku z miško;
   `:focus-visible` na povezavi pa se pokaže samo pri tipkovnici. */
.service-card h3 > a:focus-visible{outline:none}
.service-card h3 > a:focus-visible::after{
  outline:2px solid var(--accent);outline-offset:-3px;
}
/* Ikona se ob prehodu premakne za 3px — dovolj, da kartica deluje odzivno,
   premalo, da bi vlekla pozornost nase. */
.service-card .icon-wrap{transition:transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease}
.service-card:hover .icon-wrap{transform:translateY(-3px);border-color:var(--accent)}
/* Razmerje je KVADRAT, ker so viri mešani: tri fotografije so 3:2 (1,50),
   dve pokončni 2:3 (0,67). Pri `object-fit:cover` odloča najslabši primer,
   ne povprečje — v okvirju 16:10 pokončni sliki odpade 58 %, pri kvadratu
   nobeni ne odpade več kot tretjina. Izmerjeno 2026-08-18.
   Ob zamenjavi fotografije za kartico razmerje ponovno premisli. */
.sc-media{aspect-ratio:1/1;overflow:hidden;background:var(--surface-2)}
.sc-img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.service-card:hover .sc-img{transform:scale(1.05)}
.sc-body{padding:26px 22px 28px;display:flex;flex-direction:column;align-items:center;gap:12px;flex:1}
.service-card .icon-wrap{
  width:52px;height:52px;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
}
/* S fotografijo je ikona podvojen signal — slika že pove, za kaj gre. */
.service-card.has-media .icon-wrap{display:none}
.service-card h3{margin-bottom:0;font-size:1rem;letter-spacing:.04em}
.service-card p{color:var(--muted);font-size:.93rem;margin-bottom:0;flex:1}
@media (max-width:900px){
  .services-grid,.services-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services-grid--5 > .service-card{flex-basis:calc((100% - 20px) / 2)}
}
@media (max-width:600px){
  .services-grid,.services-grid--4{grid-template-columns:1fr}
  .services-grid--5 > .service-card{flex-basis:100%}
}

/* ---------- Fotografija storitvene strani ----------
   Izriše se samo, kadar je slika naložena (glej parts/service-photo.php).
   Razmerje je fiksno, da postavitev ne poskoči glede na razmerje izvirnika. */
/* Razmerje je fiksno in slika je `object-fit:cover`, zato postavitev ob
   nalaganju ne poskoči — okvir zasede svoj prostor še preden slika pride.
   Približevanje ob prehodu je zelo nežno (2 %) in teče znotraj
   `overflow:hidden`, zato ne premakne ničesar okoli sebe. */
.page-media{
  margin:0;border:1px solid var(--line);border-radius:var(--radius-media);
  overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-lg);
}
.page-img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
/* Zamik izreza, kadar sredina ni pravo mesto (glej parts/service-photo.php).
   `object-position` je tu boljši od predhodnega izreza datoteke, ker okvir na
   telefonu preide s 16:9 na 4:3 in bi izrezana datoteka izgubila isti rob še
   enkrat. `--left` uporablja avtovleka: fotografija je razmerja 2,16:1, zato
   sredinski izrez odreže napis na kabini. */
.page-img--left{object-position:left center}
.page-img--top{object-position:center top}
.page-media:hover .page-img{transform:scale(1.02)}
@media (max-width:600px){.page-media{aspect-ratio:4/3}}

/* ---------- Zavarovalnice ----------
   Vsak vpis je enako velika celica; logotip se vanjo vpiše z object-fit
   contain, da se različna razmerja izvirnikov ne razlezejo v različne
   velikosti. Brez naložene slike se izriše ime kot besedilo. */
.ins-row{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;
  list-style:none;margin:0;padding:0;
}
.ins-item{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:96px;padding:18px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.ins-item{transition:border-color .25s ease, box-shadow .25s ease}
.ins-item:hover{border-color:var(--accent);box-shadow:var(--shadow)}
/* Logotipi so od 2026-08-15 VEDNO v polni barvi, na lastnikovo zahtevo.
   Prej so bili v mirovanju razbarvani in rahlo prosojni, polni pa šele ob
   prehodu z miško — z utemeljitvijo, da pet tujih znamk v polni barvi razbije
   paleto strani. Na dotik prehoda z miško ni, zato je bila polovica
   obiskovalcev logotipe tako ali tako videla vedno v barvi; ta razlika je zdaj
   odpravljena v drugo smer. Če se razbarvanje kdaj vrne, mora ostati v
   `@media (hover: hover)`, sicer na telefonu ni poti do polne barve. */
/* Vseh pet datotek je 900x300 s prosojnim robom: logotip je vanje vstavljen
   optično normaliziran po geometrijski sredini (√(š×v)), ne po višini. Sama
   višina bi bila napačna mera — Generali ima razmerje 7,3:1, Sava 2,7:1, zato
   bi pri enaki višini Generali segel čez celico in se skrčil na pol manjšo
   višino od ostalih. Ker imajo vse datoteke enako razmerje 3:1, jih CSS lahko
   obravnava enako in `max-height` velja za vseh pet hkrati.
   Ob zamenjavi katerega koli logotipa ga je treba znova vstaviti na isto
   platno, sicer se enakost podre. Izvirniki in postopek so v
   `assets/zavarovalnice/`. */
.ins-logo{
  max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain;
}
/* Ime kot besedilo se NE prigušuje — sivo besedilo na beli kartici bi padlo
   pod prag kontrasta, logotip pa je slika in za slike ta prag ne velja. */
.ins-name{
  font-family:var(--font-label);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:var(--ink);
}
@media (max-width:900px){.ins-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.ins-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Google ocene ----------
   Podatke pridobi pp-reviews.php strežniško; brez API ključa razdelka sploh
   ni. Profilnih fotografij avtorjev NE prikazujemo — gostuje jih
   googleusercontent.com, kar CSP `img-src 'self' data:` blokira. */
.rv-summary{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,40px);
}
.rv-score{
  font-family:var(--font-display);font-weight:700;font-size:2.4rem;line-height:1;
  color:var(--accent);letter-spacing:.01em;
}
.rv-count{
  font-family:var(--font-label);font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.rv-stars{display:inline-flex;align-items:center;gap:2px}
.rv-star{flex:none}
.rv-star-full{fill:var(--accent)}
/* Polovična zvezdica: ista pot, znižana prekrivnost. Preliv prek `url(#…)` bi
   zahteval <defs> v dokumentu in s tem SVG element, ki v HTML nima kaj iskati;
   razlika med 4,3 in 4,5 je tako ali tako izpisana s številko poleg. */
.rv-star-half{fill:var(--accent);opacity:.45}
.rv-star-empty{fill:var(--line)}
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rv-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;gap:14px;
}
.rv-text{
  margin:0;font-size:.95rem;line-height:1.65;color:var(--ink);
  /* Daljša mnenja odrežemo na osem vrstic, da se kartice ne razlezejo v
     različne višine; celotno besedilo je na Googlu, kamor vodi gumb spodaj. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden;
}
.rv-meta{margin:0;display:flex;flex-direction:column;gap:2px;margin-top:auto}
.rv-meta b{font-size:.92rem}
.rv-meta span{font-size:.82rem;color:var(--muted)}
.rv-all{text-align:center;margin:clamp(24px,3vw,36px) 0 0}
.preview-notice{
  width:max-content;max-width:100%;margin:0 auto 24px;padding:7px 12px;
  border:1px solid #d8a900;border-radius:999px;background:#fff7cc;color:#594600;
  font-size:.78rem;font-weight:700;text-align:center;
}
.rv-card{transition:border-color .25s ease, box-shadow .25s ease}
.rv-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}

/* Na telefonu ocene NAVPIČNO zložene zavzamejo pol zaslona, zato drsijo
   vodoravno. Drsenje je NARAVNO — brez samodejnega vrtenja in brez
   JavaScripta; scroll-snap samo poskrbi, da se kartica ustavi na robu.
   Negativni margin in padding poravnata prvo kartico z vsebnikom, hkrati pa
   pustita, da naslednja kartica gleda čez rob — to je vidni namig, da je
   vsebine več. */
@media (max-width:900px){
  .rv-grid{
    grid-template-columns:none;
    display:flex;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    margin-inline:-24px;padding:4px 24px 10px;
    -webkit-overflow-scrolling:touch;
  }
  .rv-card{flex:0 0 82%;scroll-snap-align:start}
  /* Besedila ne krajšamo, ker je kartica zdaj ožja in bi 8 vrstic odrezalo
     preveč; višino izenači flex. */
  .rv-text{-webkit-line-clamp:10}
}
@media (max-width:400px){
  .rv-grid{margin-inline:-16px;padding-inline:16px}
}

/* ---------- Kako poteka ----------
   Oštevilčen potek pri škodi preko zavarovalnice. Največ negotovosti pri
   stranki ni v ceni, ampak v tem, kaj jo sploh čaka — zato je to samostojna
   sekcija in ne alineja v "O nas".

   Referenca ta korak izriše kot štiri sredinske kartice z ikono; ohranjamo
   oštevilčenje, ker doda informacijo, ki je ikona ne nosi. */
.steps{
  position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  counter-reset:step;list-style:none;margin:0;padding:0;
}
/* Povezovalna črta med koraki. Teče za karticami (z-index:0 proti 1) od
   sredine prve do sredine zadnje, ne čez cel pas — sicer bi štrlela v prazno
   levo od prvega in desno od zadnjega koraka.
   `pointer-events:none`, ker je zgolj okras. */
.steps::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:0;left:12.5%;right:12.5%;height:2px;background:var(--line);
}
.step{
  position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);
  padding:34px 24px 28px;text-align:center;
}
/* Številka sedi NA zgornji obrobi kartice; podlaga za njo je barva kartice,
   da obrobo prereže. */
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  padding:0 12px;background:var(--surface);
  font-family:var(--font-label);font-size:.84rem;font-weight:700;
  color:var(--accent);letter-spacing:.08em;
}
/* Ikona koraka. Datoteka je 144 px za prikaz pri 72 px (zasloni z dvojno
   gostoto). `width`/`height` sta zapisana tudi v HTML, zato okvir prostor
   zasede še pred prenosom in postavitev ne poskoči. */
.step-icon{display:block;width:72px;height:72px;margin:0 auto 16px}
.step h3{font-size:1rem;margin-bottom:.5em}
.step p{color:var(--muted);font-size:.93rem;margin-bottom:0}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Pri dveh stolpcih bi vodoravna črta povezovala koraka 1–2 in 3–4, med
     vrsticama pa bi manjkala — to bi bralo kot napaka, ne kot povezava. */
  .steps::before{display:none}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- About preview / split ----------
   Uporablja samo template-about.php, ki je osnutek (ostanek večstranske
   različice). Ohranjeno, da predloga ne razpade, ne pa razvijano naprej. */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.split-media{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-reverse .split-media{order:2}
@media (max-width:900px){
  .split,.split-reverse{grid-template-columns:1fr}
  .split-reverse .split-media{order:0}
}

/* ---------- Diff list (kaj nas loči) ---------- */
.diff-list{display:flex;flex-direction:column;gap:14px;margin-top:26px;padding:0;list-style:none}
.diff-item{display:flex;gap:14px;align-items:flex-start;text-align:left}
.diff-item svg{flex:none;color:var(--ok);margin-top:3px}
.diff-item p{margin:0;color:var(--muted);font-size:.95rem}
.diff-item strong{color:var(--ink);display:block;font-size:1rem;margin-bottom:2px}

/* ---------- Hitre akcije nad kontaktnim obrazcem ----------
   Za marsikoga je obrazec prepočasen; klic, e-pošta in navigacija morajo biti
   dosegljivi brez branja. */
.quick-actions{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin-bottom:clamp(28px,3.5vw,44px);
}
.quick-action{
  display:flex;align-items:center;gap:16px;padding:20px 22px;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;color:var(--ink);text-align:left;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.quick-action:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.qa-icon{
  flex:none;width:48px;height:48px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--accent);
}
.qa-text{display:flex;flex-direction:column;gap:3px;min-width:0}
/* E-poštni naslov je daljši od stolpca na telefonu in bi sicer razširil mrežo. */
.qa-text b{font-size:.97rem;overflow-wrap:anywhere}
.qa-text span{font-size:.84rem;color:var(--muted)}
@media (max-width:900px){.quick-actions{grid-template-columns:1fr;gap:12px}}

/* ---------- Final CTA banner ---------- */
.cta-banner{
  position:relative;overflow:hidden;
  background:var(--carbon);color:var(--on-carbon);
  border:1px solid var(--carbon-line);border-radius:var(--radius);
  padding:clamp(34px,4.5vw,60px) clamp(24px,4vw,52px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;
}
.cta-banner h2{color:var(--on-carbon);margin-bottom:.3em}
.cta-banner p{color:var(--on-carbon-muted);margin:0 auto;max-width:56ch}
/* BREZ `flex:none`. Z njim se skupina gumbov ni mogla skrčiti, zato se gumba
   nista nikoli prelomila v drugo vrstico — skupaj sta bila širša od pasu in
   `overflow:hidden` na .cta-banner je "Pošljite povpraševanje" odrezal (do
   160px pri 320px). Ker je bilo odrezano in ne prelito, se v avditu strani ni
   pokazalo kot napaka. Privzeti `min-width:auto` gumba še vedno preprečuje,
   da bi se skupina skrčila pod širino besedila. */
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* Gumbi tega pasu so obravnavani skupaj z ostalimi modrimi podlagami, v
   sekciji "GUMBI NA MODRI PODLAGI" više v datoteki. */
/* Na telefonu gumba čez celo širino pasu — pri 320px je "Pošljite
   povpraševanje" sam po sebi skoraj tako širok kot razpoložljiv prostor. */
@media (max-width:600px){
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1 1 100%}
}

/* ---------- FAQ ----------
   Širina je omejena na isto bralno mero kot `.prose` (820px). Brez tega
   ločilne črte tečejo čez celotno širino vsebnika, odgovor pa se prelomi
   pri ~60ch — razmik med črto in besedilom je pri 1440px večji od 600px in
   razdelek zgleda nedokončan. Komponenta je bila do 2026-08-14 neuporabljena,
   zato se to prej ni pokazalo. */
.faq{border-top:1px solid var(--line);text-align:left;max-width:820px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:20px 4px;font-weight:700;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;list-style:none;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-label);font-size:1.3rem;color:var(--accent);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 4px 22px;color:var(--muted);max-width:68ch}

/* ---------- Filter bar / listings ----------
   Uporablja samo template-listings.php (osnutek). */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;justify-content:center}
.filter-btn{
  font-family:var(--font-label);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:var(--radius);cursor:pointer;
}
.filter-btn.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.listing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.listing-card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.listing-media{aspect-ratio:4/3;overflow:hidden;position:relative}
.listing-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.listing-card:hover .listing-media img{transform:scale(1.04)}
.listing-tag{
  position:absolute;top:12px;left:12px;background:var(--surface);color:var(--ink);
  font-family:var(--font-label);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--radius);border:1px solid var(--line);
}
.listing-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.listing-body h3{margin-bottom:0}
.listing-body p{color:var(--muted);font-size:.92rem;margin-bottom:0;flex:1}
.listing-card[hidden]{display:none}
@media (max-width:900px){.listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.listing-grid{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;text-align:left}
.contact-form{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--line);padding:32px;border-radius:var(--radius);box-shadow:var(--shadow)}
.form-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-row label{font-family:var(--font-label);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.form-row input,.form-row textarea,.form-row select{
  font:inherit;font-size:.98rem;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);width:100%;
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-color:var(--accent)}
.form-row label span{font-weight:400;letter-spacing:0;text-transform:none}
.form-note{font-size:.82rem;color:var(--muted);margin-bottom:0}
.form-note a{display:inline-block;padding-block:3px;font-weight:700}
.form-note-urgent{padding:12px 14px;border-left:3px solid var(--accent);background:var(--surface-2)}
.form-success{
  display:none;padding:16px 18px;border:1px solid var(--ok);border-radius:var(--radius);
  color:var(--ok);font-size:.92rem;
}
.form-success.is-visible{display:block}
.contact-info-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:28px}
.contact-info-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-info-row:last-of-type{border-bottom:none}
.contact-info-row svg{flex:none;color:var(--accent);margin-top:2px}
.contact-info-row b{display:block;font-size:.95rem}
.contact-info-row span{color:var(--muted);font-size:.9rem}
.map-box{
  margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/10;position:relative;background:var(--surface);
}
.map-box iframe{width:100%;height:100%;border:0;display:block}
/* Ograjeni prostor namesto zemljevida, dokler ni privolitve.
   Isti okvir in razmerje kot iframe, da postavitev ob zamenjavi ne poskoči. */
.map-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:24px;text-align:center;background:var(--surface-2);
}
.map-placeholder svg{color:var(--accent)}
.map-placeholder p{margin:0;max-width:34ch;color:var(--muted);font-size:.9rem;line-height:1.5}
.map-placeholder .btn{white-space:normal}
.map-fallback{
  font-family:var(--font-label);font-size:.76rem;letter-spacing:.04em;
  color:var(--muted);text-underline-offset:3px;
}
.map-fallback:hover{color:var(--accent)}
.social-row{display:flex;gap:10px;margin-top:20px}
.social-btn{
  width:38px;height:38px;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;
}
.social-btn:hover{color:var(--accent);border-color:var(--accent)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:600px){.form-pair{grid-template-columns:1fr}}

/* ---------- Footer ----------
   Modra noga s štirimi stolpci in ločeno spodnjo vrstico — vzorec reference. */
.site-footer{background:var(--carbon);color:var(--on-carbon-muted);padding:56px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.15fr .85fr 1.6fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid var(--carbon-line)}
.footer-brand .brand{color:#fff}
.footer-brand p{color:var(--on-carbon-muted);font-size:.92rem;margin-top:12px}
.footer-col h4{font-family:var(--font-label);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
/* Devet storitev v enem stolpcu bi nogo raztegnilo v stolp, zato je seznam
   dvostolpčni, tretji stolpec noge pa je zato širši (1.6fr). Pod 900px pade
   mreža noge na dva stolpca in seznam ostane dvostolpčni; pod 400px gre na
   enega, ker se „Popravila preko zavarovalnice" sicer lomi po dve besedi. */
.footer-col--services ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
@media (max-width:400px){.footer-col--services ul{grid-template-columns:1fr}}
.footer-col a{text-decoration:none;font-size:.92rem;color:var(--on-carbon-muted)}
.footer-col a:hover{color:#fff}
.footer-col address{font-style:normal;font-size:.92rem;color:var(--on-carbon-muted);line-height:1.7}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;flex-wrap:wrap;gap:12px}
.footer-bottom p{margin:0;font-size:.82rem;color:var(--on-carbon-muted)}
.footer-bottom a{color:var(--on-carbon-muted)}
.footer-bottom a:hover{color:#fff}
.footer-social{display:flex;gap:10px}
.site-footer .social-btn{border-color:var(--carbon-line);color:var(--on-carbon-muted)}
.site-footer .social-btn:hover{border-color:#fff;color:#fff}
@media (max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  /* Prostor za lepljivo akcijsko vrstico. Izmerjeno: gumb je visok 59px (ne
     56px kot pravi min-height — dvovrstična oznaka "Pokličite / vleka 24/7" ga
     razširi), plus 1px obroba = 60px. Pri prejšnjih 57px je vrstica pokrivala
     zadnje 3px noge.
     Odmik je na nogi in ne na body, da ozadje noge teče pod vrstico do roba
     zaslona. Mora stati ZA skrajšano lastnostjo `padding` zgoraj, sicer ga ta
     povozi — prvič je bil zapisan više v datoteki in ni imel učinka. */
  .site-footer{padding-bottom:calc(28px + 60px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Page hero (podstrani) ----------
   Sredinski modri pas, enak jezik kot hero domače strani. Prej je bil svetel
   z mrežo; po redizajnu je vrh vsake strani moder, kot pri referenci. */
.page-hero{
  background:var(--carbon);color:var(--on-carbon);
  padding:clamp(44px,5vw,72px) 0 clamp(40px,4.5vw,64px);
  text-align:center;
}
.page-hero h1,.page-hero h2,.page-hero h3{color:var(--on-carbon)}
.page-hero h1::after{
  content:"";display:block;width:44px;height:2px;background:#fff;margin:20px auto 0;
}
.page-hero .eyebrow{margin-bottom:12px;color:var(--on-carbon-muted)}
.page-hero p{color:var(--on-carbon-muted);font-size:1.02rem;max-width:62ch;margin-inline:auto}
.page-hero .hero-ctas{justify-content:center}
/* Gumbi: glej "GUMBI NA MODRI PODLAGI" više v datoteki. */

/* ---------- Preklopnik jezika ---------- */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;
  font-family:var(--font-label);font-size:.8rem;font-weight:600;letter-spacing:.06em;
}
.lang-switch a,.lang-switch .is-active{
  padding:7px 8px;border-radius:var(--radius);line-height:1;
}
.lang-switch a{
  color:rgba(255,255,255,.7);text-decoration:none;
  transition:color .15s ease,background .15s ease;
}
.lang-switch a:hover{color:#fff;background:rgba(255,255,255,.12)}
.lang-switch .is-active{color:#fff}
.lang-switch .lang-sep{color:rgba(255,255,255,.4)}
@media (max-width:900px){
  .lang-switch{margin-right:2px}
}

/* ---------- Besedilne strani (politika piškotkov ipd.) ---------- */
.prose{max-width:820px;margin-inline:auto;text-align:left}
.prose h2{font-size:1.3rem;margin-top:40px}
.prose p{color:var(--muted);max-width:70ch}
.prose a{color:var(--accent);font-weight:600}
.prose .ppc-reopen{color:var(--accent);font:inherit;font-weight:600}

/* Tabela mora imeti lastno vodoravno drsenje, da stran nikoli ne drsi vodoravno. */
.table-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:var(--radius)}
.cookie-table{
  width:100%;min-width:760px;border-collapse:collapse;font-size:.9rem;
  /* Fiksna postavitev: brez nje si najdaljše ime piškotka vzame pol tabele
     in stolpec "Namen" se stisne v nečitljiv stolpič. */
  table-layout:fixed;
}
.cookie-table th:nth-child(1),.cookie-table td:nth-child(1){width:19%}
.cookie-table th:nth-child(2),.cookie-table td:nth-child(2){width:15%}
.cookie-table th:nth-child(3),.cookie-table td:nth-child(3){width:35%}
.cookie-table th:nth-child(4),.cookie-table td:nth-child(4){width:13%}
.cookie-table th:nth-child(5),.cookie-table td:nth-child(5){width:18%}
.cookie-table th,.cookie-table td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;
}
.cookie-table thead th{
  background:var(--surface-2);color:var(--ink);
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.cookie-table tbody tr:last-child td{border-bottom:0}
.cookie-table td{color:var(--muted)}
.cookie-table code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;color:var(--ink);
  background:var(--surface-2);padding:2px 6px;border-radius:var(--radius);
  overflow-wrap:anywhere;
}

/* Pravna oblika ob imenu podjetja (v glavi in nogi), enak vzorec kot .brand-word,
   a manjše in prigušene barve — dopolnilo k imenu, ne del njega. */
.brand-suffix{font-family:var(--font-display);font-weight:400;font-size:.78rem;color:rgba(255,255,255,.72);margin-left:2px}

/* Risan znak podjetja v nogi (samo avto, brez besedila iz izvirnega logotipa —
   ime že piše zgoraj). Majhen, ob strani opisa, dekorativen: aria-hidden v HTML. */
/* .footer-logo je odpadel 2026-08-15: znak zdaj stoji ob imenu (glej .brand-img)
   in večji avto pod njim je bil isti motiv drugič v istem stolpcu. */

/* ---------- Pojavljanje ob drsenju (fade-in) ----------
   Skrivanje velja SAMO znotraj .pp-motion, ki ga na <html> doda js/reveal.js —
   in samo takrat, ko je IntersectionObserver na voljo in gib ni izklopljen.
   Brez JS ali s prefers-reduced-motion je vsebina takoj normalno vidna. */
.pp-motion .pp-reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.pp-motion .pp-reveal.is-revealed{opacity:1;transform:none;will-change:auto}

/* SPECIFIČNOST: `.pp-motion .pp-reveal.is-revealed` je (0,3,0) in postavi
   `transform:none`. `.service-card:hover` je (0,2,0), zato je izgubil in se
   kartica po razkritju NI več dvignila — dvig je deloval samo, dokler skripta
   ni označila elementa, torej praktično nikoli.
   Vsako novo pravilo, ki animira `transform` na elementu s seznama v
   reveal.js, mora to specifičnost premagati. */
.pp-motion .service-card.is-revealed:hover{transform:translateY(-4px)}

/* ---------- Vstop heroja ----------
   CSS-only, brez JavaScripta: brez skripte se animacija vseeno izvede in se
   konča pri vidnem stanju, zato vsebina nikoli ne ostane skrita.

   H1 dobi SAMO transform, brez opacity. Naslov je nosilec LCP — če ga
   animiramo iz opacity:0, se meritev zamakne za trajanje animacije. Tako je
   besedilo izrisano takoj in samo zdrsne na mesto; LCP se ne premakne.
   Ostali trije elementi niso LCP, zato smejo tudi bledeti.

   Skupno trajanje je ~450ms — obiskovalec ne čaka na vsebino. */
@keyframes pp-hero-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes pp-hero-slide{
  from{transform:translateY(12px)}
  to{transform:none}
}
.hero .eyebrow{animation:pp-hero-in .34s cubic-bezier(.22,.61,.36,1) both}
.hero h1{animation:pp-hero-slide .38s cubic-bezier(.22,.61,.36,1) .06s both}
.hero-lede{animation:pp-hero-in .38s cubic-bezier(.22,.61,.36,1) .16s both}
.hero-ctas{animation:pp-hero-in .38s cubic-bezier(.22,.61,.36,1) .26s both}
.hero-promises{animation:pp-hero-in .38s cubic-bezier(.22,.61,.36,1) .34s both}

/* Enkraten nežen poudarek gumba za vleko 24/7 — pove, da je številka
   dosegljiva tudi ponoči. `1` ponovitev namenoma: neskončno utripanje je
   moteče in ga je nemogoče prezreti med branjem. */
@keyframes pp-cta-note{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 0 0 6px rgba(255,255,255,.22)}
}
/* Samo utrip. Vstop nosi že .hero-ctas — dve gnezdeni opacity animaciji se
   množita in gumb bi bil vidno bledejši od sosednjega. */
.hero-ctas .btn-primary{animation:pp-cta-note 1.1s ease-out .9s 1}

@media (prefers-reduced-motion:reduce){
  .pp-reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- Responsive popravki (avdit 2026-08) ---------- */

/* Zelo ozki telefoni: pod 400px se glava (znamka + akcije) in vrstica
   statistik nista več iztekli v širino — vodoravni drsnik pri 320px. */
@media (max-width:400px){
  .container{padding-inline:16px}
  .header-row{gap:10px}
  .brand{gap:8px;min-width:0}
  /* .brand-tag je tu skrit že prek preloma 520px (glej sekcijo glave). */
  .brand-word{font-size:.92rem}
  .header-actions{gap:6px}
  /* Tri dejanja v vrstici pri 320px: vsako dobi ~106px. Ikona in napis se
     zložita drug pod drugega, sicer se "Povpraševanje" odreže. */
  .ma-btn{flex-direction:column;gap:3px;font-size:.62rem;letter-spacing:.02em;padding:8px 4px}
  .ma-label small{font-size:.55rem}
  /* Gostota heroja: na 320px je CTA sicer tik pod pregibom. */
  .hero{padding:28px 0 44px}
  .hero-lede{font-size:1rem}
  .hero-ctas{margin-top:20px}
  .btn{padding:14px 20px}
}

/* Ležeči telefon: pregib je pri ~390px, zato hero zgosti tudi tu.
   Velja tudi za .page-hero — storitvene strani imajo isto vlogo prvega zaslona
   in so bile iz teh pravil prvotno izpuščene: prvi CTA je pri 667×375 padel
   87px pod pregib. */
@media (orientation:landscape) and (max-height:500px){
  .hero{padding:24px 0 40px}
  .page-hero{padding:20px 0 28px}
  .hero-lede{font-size:1rem}
  .page-hero p{font-size:.98rem}
  .hero-ctas{margin-top:18px}
}

/* Zelo nizek ležeči telefon (SE, mini) — pregib je pri ~375-390px, kjer je
   dno prvega CTA gumba padlo do 79px pod rob. Eyebrow gre ven, H1 in lede
   se skrčita, lede omejimo na 2 vrstici, da CTA gotovo pride nad pregib. */
@media (orientation:landscape) and (max-height:430px){
  /* Prek žetona, ne prek .header-row: izvlečni meni bere isto vrednost za
     odmik od vrha in bi sicer ostal 16px prenizko. */
  :root{--header-h:56px}
  .hero{padding:8px 0 18px}
  .hero .eyebrow{display:none}
  .hero h1{margin-top:0;font-size:1.4rem;line-height:1.25}
  /* Črtica pod naslovom vzame 14px (12px odmika + 2px črte). Pri 667×375 je
     to natanko toliko, da prvi CTA pade pod pregib — izmerjeno 333px proti
     318px uporabne višine. Tu gre ven; sredinski naslov drži tudi brez nje. */
  .hero h1::after{display:none}
  .hero-lede{
    font-size:.9rem;margin-top:8px;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
  .hero-ctas{margin-top:10px}
  .hero-ctas .btn{padding:11px 20px}

  /* Isto zgoščevanje za vrh storitvenih strani. */
  .page-hero{padding:8px 0 16px}
  .page-hero .eyebrow{display:none}
  .page-hero h1{margin-bottom:.35em;font-size:1.35rem;line-height:1.25}
  .page-hero h1::after{display:none}
  .page-hero p{
    font-size:.9rem;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
}

/* Tarče za dotik: povezave v kontaktni kartici in nogi so bile visoke 16-18px.
   Padding z izničenim marginom poveča zadetno površino na ~27px (WCAG 2.2 AA
   zahteva 24px), ne da bi se postavitev vidno premaknila. */
.contact-info-row a,
.footer-col a,
.footer-col address a,
/* Spodnja vrstica noge (pravna obvestila + gumb za piškotke) je bila iz tega
   pravila prej izpuščena: povezave so ostale visoke 15px, gumb 21px. */
.footer-bottom a,
.footer-bottom .ppc-reopen,
/* Besedilne povezave na storitvenih straneh (avgust 2026): samostojna povezava
   v odstavku je bila visoka 22px, torej tik pod mejo. Velja samo za neposredne
   otroke odstavka v .prose — povezava sredi tekočega besedila se sme lomiti
   čez vrstice in inline-block bi ji to preprečil. */
.prose p > a,
/* Naslovi kartic storitev so povezave na storitvene strani in so bili prav
   tako visoki 22px. Napaka je nastala ob uvedbi storitvenih strani, avdit pa
   je ni videl: kartice so pod pregibom in js/reveal.js jih drži na opacity 0,
   dokler jih drsenje ne razkrije — avdit takrat ni drsel. */
.service-card h3 > a{
  display:inline-block;padding:5px 0;margin:-5px 0;
}
.map-fallback{display:inline-block;padding-top:10px;padding-bottom:10px}
.lang-switch a,.lang-switch .is-active{padding:10px 9px}

/* Vidno žarišče za tipkovnico — prej je obstajalo samo za skip link.
   :focus-visible se z miško ne prikaže, zato vizualno nič ne spremeni. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
/* Na modrih pasovih bi moder obris izginil. */
.band-dark a:focus-visible,
.band-dark button:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.page-hero a:focus-visible,
.section-slate a:focus-visible,
.section-slate button:focus-visible{
  outline-color:#fff;
}