/* =====================================================================
   Odvetnica Anja Rejec — oblikovni sistem
   Barve po logotipu: temno modra #0D1B2D · zlata #C8A26A · siva #6A717B
   ===================================================================== */

/* Pisave so v ločeni datoteki fonts.css (ustvari jo tools/fetch-fonts.mjs). */

/* ------------------------------------------------------------- žetoni */
:root {
  --navy:      #0D1B2D;
  --navy-soft: #16293F;
  --gold:      #C8A26A;
  --gold-dark: #A8834C;
  /* Zlata je na svetli podlagi prešibka za besedilo (gold 2,4:1, gold-dark
     3,5:1). Za besedilo na belem in kremnem uporabljamo temnejši odtenek
     (5,0:1 na beli, 4,6:1 na kremni). Za ikone, robove in poudarke, ki
     niso besedilo, zlata ostane. */
  --gold-ink:  #8A6A38;
  /* Še temnejša za drobno besedilo na fotografiji (nadnaslov široke
     naslovnice): svetla plast čez fotografijo ni povsem prekrivna, zato
     gold-ink tam pade pod 4,5:1. Ta ima 6,8:1 na kremni. */
  --gold-deep: #6B5129;
  --gold-pale: #E7D7BC;
  --grey:      #6A717B;
  --grey-light:#9AA2AC;
  --cream:     #F7F5F1;
  --cream-2:   #EFEBE3;
  --white:     #FFFFFF;
  --ink:       #16202D;
  --line:      rgba(13, 27, 45, .12);
  --line-dark: rgba(255, 255, 255, .14);

  /* »… Fallback« sta sistemski pisavi s prilagojenimi merami (fonts.css) —
     do naložitve spletne pisave zasedata enak prostor, zato nič ne poskoči. */
  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Inter Fallback", -apple-system, "Segoe UI", system-ui, sans-serif;

  --wrap: 1240px;
  --header-h: 84px;
  --r: 2px;
  --shadow: 0 14px 40px rgba(13, 27, 45, .09);
  --shadow-lg: 0 24px 70px rgba(13, 27, 45, .16);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------- osnove */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* scroll-padding-top: lepljiva glava ne sme prekriti cilja sidra ali
   elementa s fokusom (WCAG 2.4.11) — brskalnik ob premiku fokusa pusti
   toliko prostora nad njim. */
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* clip in ne hidden: hidden naredi iz telesa drsni vsebnik in odreže
     tudi tabele v člankih, ki imajo svoje vodoravno drsenje. Starejši
     brskalniki, ki clip ne poznajo, ostanejo pri hidden. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
/* Brez height:auto slika z atributom height obdrži to višino tudi, ko jo
   max-width zoži — in se popači (npr. fotografija v članku na telefonu).
   Razredi, ki višino določijo sami (logotip, uvodna fotografija), imajo
   večjo specifičnost in to pravilo preglasijo. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }

h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 500; line-height: 1.16; letter-spacing: .002em;
  overflow-wrap: break-word;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--navy); padding: 12px 20px; font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Obroba fokusa mora imeti vsaj 3:1 proti podlagi (WCAG 1.4.11).
   Zlata na beli da le 2,4:1, zato je na svetlih podlagah temnejša --gold-ink
   (5,0:1 na beli, 4,6:1 na kremni), na temno modrih pa svetla --gold (7,4:1). */
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.site-header :focus-visible, .site-footer :focus-visible, .page-hero :focus-visible,
.split-contact :focus-visible, .cta-band :focus-visible, .skip-link:focus-visible {
  outline-color: var(--gold);
}
.site-header .lang__menu :focus-visible { outline-color: var(--gold-ink); }

/* ------------------------------------------------------------- gumbi */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: var(--btn-ls); text-transform: uppercase;
  --btn-pad-x: 30px; --btn-ls: .16em;
  padding: 16px var(--btn-pad-x);
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; transition: all .28s var(--ease); white-space: nowrap;
}
.btn svg { width: 20px; height: 10px; flex: none; transition: transform .28s var(--ease); }
/* Premiki ob prehodu miške samo na napravah z miško — na dotik bi se učinek
   »zataknil« in ostal viden po dotiku. */
@media (hover: hover) {
  .btn:hover svg { transform: translateX(4px); }
}

.btn-navy  { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-soft); }
.btn-gold  { background: var(--gold); color: var(--navy); }
/* Ob prehodu miške ostane besedilo temno modro. Bela na --gold-dark da
   3,5:1 in ne doseže AA; temno modra da 4,96:1. Zlati gumb je glavni poziv k
   dejanju na strani, zato tu ni prostora za izjemo. */
.btn-gold:hover { background: var(--gold-dark); color: var(--navy); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-outline-gold { border-color: var(--gold); color: var(--gold-ink); background: transparent; }
.btn-outline-gold:hover { background: var(--gold); color: var(--navy); }
.btn-sm { --btn-pad-x: 22px; padding: 12px var(--btn-pad-x); font-size: 11.5px; }

/* letter-spacing doda razmik tudi ZA zadnjo črko. Škatla besedila je zato
   na sredini, zadnja črka pa je od desnega roba dlje kot prva od levega —
   pri .16em za dobra dva piksla. Pri gumbih brez puščice to izravnamo,
   pri tistih s puščico pa razmik pade v vrzel med besedilom in puščico.
   Izravnava bere --btn-pad-x in --btn-ls, zato drži tudi tam, kjer ju
   medijska pravila spremenijo. */
.btn:not(:has(svg)) { padding-right: calc(var(--btn-pad-x) - var(--btn-ls)); }

/* povezava z ročico */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); transition: gap .25s var(--ease);
}
.link-arrow svg { width: 20px; height: 10px; }
@media (hover: hover) {
  .link-arrow:hover { gap: 16px; }
}

/* ------------------------------------------------------------- glava */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  height: var(--header-h);
  display: flex; align-items: center;
  transition: height .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.compact { height: 68px; box-shadow: 0 8px 30px rgba(0,0,0,.28); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; transition: height .3s var(--ease); }
.site-header.compact .brand img { height: 38px; }

.main-nav { display: flex; gap: 34px; margin-left: auto; }
.main-nav a {
  position: relative;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.86); padding: 8px 0;
  transition: color .25s var(--ease); white-space: nowrap;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 2px;
  width: 0; height: 1px; background: var(--gold); transition: width .3s var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--gold); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { width: 100%; }

.header-right { display: flex; align-items: center; gap: 16px; flex: none; }

/* Gumb v glavi stoji na temno modri, ne na beli. --gold-ink je po zapisu med
   žetoni namenjen besedilu na belem in kremnem; na navy da le 3,5:1 in ne
   doseže AA. Tu je pravilna svetlejša --gold, ki da 7,4:1. Isti razred na
   naslovnici stoji na belem, zato tam --gold-ink ostane. */
.header-cta.btn-outline-gold { color: var(--gold); }
/* Ob prehodu miške podlaga postane zlata, zato mora besedilo nazaj na temno
   modro. Brez te vrstice zgornje pravilo premaga .btn-outline-gold:hover —
   enaka specifičnost, a stoji nižje — in besedilo izgine v podlago. */
.header-cta.btn-outline-gold:hover { color: var(--navy); }

/* Kontakt je v meniju samo na ozkih zaslonih.
   Nad 980px stoji tik ob njem gumb »Stopite v stik«, ki vodi na isto stran —
   dve postavki za isto je odveč. Pod 980px je ta gumb skrit
   (.header-right .btn { display: none }), zato mora postavka tam ostati,
   sicer s telefona do kontakta iz glave sploh ni poti. */
@media (min-width: 981px) {
  .main-nav .nav__contact { display: none; }
}

/* ---------------------------------------------- jezikovni spustni meni */
.lang { position: relative; flex: none; }

.lang__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  /* Obroba je prozorna in ne odstranjena: ohrani mere gumba in s tem
     izmerjeno poravnavo. Vidne obrobe v glavi namenoma nima — edina obroba
     naj bo poziv k dejanju, sicer se bereta kot enakovredna gumba. Da je
     jezik klikljiv, povesta zastavica in puščica. */
  border: 1px solid transparent;
  border-radius: 999px;
  /* Desni odmik je manjši od levega, ker je risba puščice v svojem viewBoxu
     zamaknjena navznoter za 4,9 enote od 24 — pri 12 px škatli 2,45 px na
     vsaki strani. Brez izravnave je vidni rob puščice 16 px od roba gumba,
     zastavica pa 11 px, in vsebina izgleda potisnjena levo. */
  padding: 7px 9px 7px 10px;
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 500; letter-spacing: .1em;
  color: rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.lang__btn:hover { color: var(--gold); background: rgba(255, 255, 255, .08); }
.lang__btn svg { width: 12px; height: 12px; opacity: .7; margin-left: -2px; transition: transform .25s var(--ease); }
/* letter-spacing doda razmik tudi za zadnjo črko; brez tega je vrzel
   pred puščico širša od vrzeli za zastavico. */
.lang__btn > span:not(.flag) { margin-right: -.1em; }
.lang.open .lang__btn { color: var(--gold); background: rgba(255, 255, 255, .08); }
.lang.open .lang__btn svg { transform: rotate(180deg); }

.lang__menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 210px; padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 120;
}
.lang.open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0);
  /* vidnost takoj, sicer puščica dol ne more premakniti fokusa v meni */
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s; }

.lang__menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: 3px;
  font-size: 14.5px; font-weight: 300; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang__menu a:hover { background: var(--cream); color: var(--navy); }
.lang__menu a.active { background: rgba(200, 162, 106, .12); color: var(--gold-ink); font-weight: 500; }

.lang__tag {
  margin-left: auto; flex: none;
  font-size: 11px; font-weight: 500; letter-spacing: .1em;
  color: var(--grey);
  border: 1px solid var(--line); border-radius: 3px;
  /* isti popravek kot pri gumbih — razmik za zadnjo črko */
  padding: 2px calc(6px - .1em) 2px 6px;
}
.lang__menu a.active .lang__tag { color: var(--gold-ink); border-color: rgba(200, 162, 106, .45); }

/* Zastavice so vrisane kot SVG — emoji zastavice se na Windows ne izrišejo. */
.flag {
  display: inline-block; width: 21px; height: 15px; border-radius: 2px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(13, 27, 45, .18);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.flag--sl { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%23fff'/><rect y='14' width='60' height='14' fill='%23005DA4'/><rect y='28' width='60' height='14' fill='%23ED1C24'/><path d='M9 7h12v9c0 5.5-3.2 8.4-6 9.6-2.8-1.2-6-4.1-6-9.6z' fill='%23005DA4' stroke='%23ED1C24' stroke-width='1.2'/><path d='M10.6 17.8l3.2-4.6 2.2 2.7 2.2-2.7 3.2 4.6z' fill='%23fff'/><g fill='%23FFC800'><circle cx='12.6' cy='9.8' r='1'/><circle cx='15' cy='8.5' r='1'/><circle cx='17.4' cy='9.8' r='1'/></g></svg>"); }
.flag--en { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%23012169'/><path d='M0 0L60 42M60 0L0 42' stroke='%23fff' stroke-width='9'/><path d='M0 0L60 42M60 0L0 42' stroke='%23C8102E' stroke-width='4'/><path d='M30 0V42M0 21H60' stroke='%23fff' stroke-width='14'/><path d='M30 0V42M0 21H60' stroke='%23C8102E' stroke-width='8'/></svg>"); }

/* 44 × 44 px — najmanjša udobna tarča za prst. Prej 44 × 37. */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; margin-right: -10px;
  flex-direction: column; align-items: center; justify-content: center;
}
/* V visokokontrastnem načinu (Windows) sistem odstrani barve ozadja — črte
   menija bi izginile in gumb bi bil prazen. */
/* Glava in noga ohranita svoje barve: bel logotip in bele črte menija bi
   na sistemski (svetli) podlagi izginili. */
@media (forced-colors: active) {
  .site-header, .site-footer { forced-color-adjust: none; }
}

/* Klic iz glave — samo na ozkih zaslonih (glej header.php). */
.header-call {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--gold);
  border-radius: 999px; transition: background .25s var(--ease);
}
.header-call svg { width: 21px; height: 21px; }
.header-call:hover { background: rgba(255, 255, 255, .08); }
@media (pointer: coarse) {
  .lang__btn { min-height: 44px; }
}
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--white); transition: all .3s var(--ease); }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ------------------------------------------------------------- hero */
.hero { display: grid; grid-template-columns: 1.02fr .98fr; background: var(--cream); }
/* min-width:0 prepreči, da bi široka vsebina (npr. gumb z dolgim napisom)
   razširila stolpec mreže čez širino zaslona. */
.hero-copy { min-width: 0; padding: 92px 0 64px; display: flex; flex-direction: column; justify-content: center; }
.hero-copy-inner { max-width: 620px; margin-left: auto; padding: 0 70px 0 30px; width: 100%; }
/* h1 naslovnice je vrstica nad sloganom (ime, poklic, kraj); slogan je
   oblikovno glavni naslov, pomensko pa odstavek (front-page.php). */
.hero .hero-kicker {
  font-family: var(--sans); font-weight: 500; line-height: 1.5;
  font-size: 12px; margin-bottom: 18px;
}
.hero .hero-title {
  font-family: var(--serif); font-weight: 400; line-height: 1.16; letter-spacing: .002em;
  font-size: clamp(38px, 4.3vw, 62px); color: var(--navy);
}
.hero .hero-title .accent { color: var(--gold-ink); }
.hero .rule { width: 62px; height: 1px; background: var(--gold); margin: 30px 0 26px; }
.hero-lead { font-size: 17px; color: var(--grey); max-width: 480px; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }

.hero-contact { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.hero-contact a, .hero-contact span {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--ink); transition: color .22s;
}
.hero-contact a:hover { color: var(--gold-ink); }
.hero-contact svg { width: 19px; height: 19px; color: var(--gold); flex: none; }

.hero-figure { position: relative; min-height: 520px; background: var(--navy); }
/* object-position: pod 1024 px sta sliki izreza neobdelane fotografije
   (981–1023 px pokončen izrez brez stola, do 980 px 4:3). Odvetnica sedi na
   sredini (obraz pri 47–49 % širine izreza), lasje so pri 6 % višine izreza
   4:3 — 20 % po višini ohrani glavo tudi pri nizkem okvirju. Od 1024 px
   velja .hero--full spodaj. */
.hero-figure img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 47% 20%;
}

/* Široka naslovnica (od 4.5.0, po predlogi naročnice 2. 10. 2026): od
   1024 px (od 4.5.1 tudi tablice ležeče) je fotografija čez vso širino,
   besedilo leži na njej.

   Slika (naslovnica-radiator-siroka-*.webp) je levo podaljšana in zamegljena
   — glej tools/naslovnica-slike.sh. Brez svetle plasti bi se podaljšek
   videl, zato ta postavitev velja SAMO tu; pod 1024 px ostaneta dva stolpca
   oziroma zložena postavitev z neobdelanimi izrezi. Ob prehodu čez 1024 px
   (zasuk tablice, ožanje okna) site.js sliko skrije, dokler se ne naloži
   nova — sicer bi brskalnik do takrat risal staro, široko sliko brez plasti.
   Pod 1024 px postavitev ne gre: odvetnica bi bila pod besedilom.

   Višina: naslovnica je visoka najmanj toliko kot zaslon pod glavo, a največ
   47vw. Brez te meje bi na višjih zaslonih (4:3, 16:10, 1280 × 1024, iPad
   Pro ležeče) object-fit sliko povečal po višini, jo pomaknil levo in
   besedilo bi padlo na odvetnico. Slika ima isto višino kot spodnja meja in
   je pripeta na dno: če besedilo naslovnico raztegne (povečava besedila),
   se nad fotografijo pojavi kremni pas, fotografija pa ostane enaka.
   object-position 45 % po višini: pri zelo širokih zaslonih (3440 × 1440)
   in nizkih oknih ostaneta lasje in zvezek v okvirju. Izmerjeno od 1024 do
   3840 px: med besedilom in telesom ostane 44–281 px (najmanj pri angleškem
   nadnaslovu pri 1024 px, ki je v višini oken, nad lasmi).

   1024–1200 px (tablice ležeče, ožja okna): telo se začne pri ~53 % širine,
   zato je stolpec besedila ožji (440), naslov 40 px, gumba drug pod drugim
   (v vrsti bi bila široka 517 px), fotografija nižja in plast izzveni
   hitreje (440/470/520). Fotografija je visoka najmanj 480 px — toliko kot
   besedilo (470 px), sicer bi nad njo pri nizkih oknih ostal kremni pas.

   Svetla plast je vezana na stolpec besedila, ne na odstotek širine:
   max(30px, 50% - 590px) je levi rob vsebine (wrap 1240, odmik 30). Do
   +470 px je skoraj prekrivna, do +680 px izzveni, preden doseže telo.
   Spodnja četrtina ima le četrtino plasti (maska), da se miza vidi čez vso
   širino kot v predlogi. Kontrast (izmerjeno pri 1024–3840 px, najtemnejši
   1 % ozadja): nadnaslov ≥ 5,4:1, uvodni stavek ≥ 9,1:1, zlata vrstica
   naslova ≥ 4,0:1 (velike črke, meja 3:1), drugi gumb ≥ 13:1.

   Kontaktna vrstica bi ležala na temni mizi, zato je tu skrita (tako je
   tudi v predlogi); telefon in e-pošta sta v nogi in na strani Kontakt.
   @media screen: tiskanje dobi običajno postavitev brez fotografije. */
@media screen and (min-width: 1024px) {
  .hero--full {
    /* višina fotografije in najmanjša višina naslovnice; plast (a, b, c) */
    --hero-h: max(540px, min(calc(100vh - var(--header-h) - 70px), 47vw));
    --veil-a: 470px; --veil-b: 560px; --veil-c: 680px;
    display: flex; align-items: center; position: relative; overflow: hidden;
    min-height: var(--hero-h);
  }
  @supports (height: 100svh) {
    .hero--full { --hero-h: max(540px, min(calc(100svh - var(--header-h) - 70px), 47vw)); }
  }
  .hero--full .hero-figure { position: absolute; inset: 0; min-height: 0; background: var(--cream); }
  .hero--full .hero-figure img { top: auto; height: var(--hero-h); object-position: 100% 45%; }
  .hero--full .hero-figure::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
      rgba(247, 245, 241, .86) 0,
      rgba(247, 245, 241, .82) calc(max(30px, 50% - 590px) + var(--veil-a)),
      rgba(247, 245, 241, .4)  calc(max(30px, 50% - 590px) + var(--veil-b)),
      rgba(247, 245, 241, 0)   calc(max(30px, 50% - 590px) + var(--veil-c)));
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 74%, rgba(0, 0, 0, .25) 81%);
            mask-image: linear-gradient(180deg, #000 0, #000 74%, rgba(0, 0, 0, .25) 81%);
  }
  /* Razmik je vezan na višino zaslona: pri nizkih oknih (1280 × 680) bi bilo
     besedilo s 64 px višje od fotografije in nad njo bi ostal kremni pas. */
  .hero--full .hero-copy { position: relative; z-index: 1; width: 100%; padding: clamp(24px, 6vh, 64px) 0; }
  .hero--full .hero-copy-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }
  /* Nadnaslov 540: angleški (»… Slovenska Bistrica, Slovenia«) je širok
     502 px in bi se pri 500 prelomil zaradi dveh pikslov. */
  .hero--full .hero-title, .hero--full .hero-lead { max-width: 500px; }
  .hero--full .hero-kicker { max-width: 540px; color: var(--gold-deep); }
  .hero--full .hero-lead { color: var(--ink); }
  /* 540: gumba (skupaj 517 px) sta v eni vrsti; pri povečavi besedila se
     prelomita, namesto da bi segla na odvetnico. */
  .hero--full .hero-actions { margin-bottom: 0; max-width: 540px; }
  /* Prosojni gumb leži nad spodnjim, neprekritim delom fotografije (temni
     radiator in miza): brez podlage je imel napis le 1,7–4,2:1. */
  .hero--full .btn-outline { background: rgba(247, 245, 241, .9); }
  .hero--full .btn-outline:hover { background: var(--navy); }
  /* Obroba fokusa: zlata (--gold-ink) bi na radiatorju padla pod 3:1. Temno
     modra obroba s kremnim obročem v razmiku ima kontrast na vsaki podlagi. */
  .hero--full .hero-actions .btn:focus-visible {
    outline-color: var(--navy); box-shadow: 0 0 0 3px var(--cream);
  }
  .hero--full .hero-contact { display: none; }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .hero--full {
    --hero-h: max(480px, min(calc(100vh - var(--header-h) - 40px), 47vw));
    --veil-a: 440px; --veil-b: 470px; --veil-c: 520px;
  }
  @supports (height: 100svh) {
    .hero--full { --hero-h: max(480px, min(calc(100svh - var(--header-h) - 40px), 47vw)); }
  }
  .hero--full .hero-copy { padding: 18px 0; }
  /* Razmik med črkami .2em namesto .26em: angleški nadnaslov (502 px) tako
     ostane v eni vrstici in pod skoraj prekrivno plastjo. */
  .hero--full .hero-kicker { margin-bottom: 12px; max-width: 470px; letter-spacing: .2em; }
  .hero--full .hero-title { font-size: 40px; max-width: 440px; }
  .hero--full .rule { margin: 18px 0 16px; }
  .hero--full .hero-lead { font-size: 16px; max-width: 440px; margin-bottom: 24px; text-wrap: pretty; }
  .hero--full .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; max-width: 440px; }
}
/* Visokokontrastni način (Windows) odstrani prelive, torej tudi svetlo
   plast — podaljšana slika bi ostala gola. Fotografijo tam skrijemo,
   besedilo ostane na sistemski podlagi. */
@media screen and (min-width: 1024px) and (forced-colors: active) {
  .hero--full .hero-figure { display: none; }
}

/* ------------------------------------------------------------- sekcije */
.section { padding: 100px 0; }
.section-cream { background: var(--cream); }
.section-white { background: var(--white); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 62px; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head h2 { font-size: clamp(30px, 3.4vw, 42px); color: var(--navy); }
.section-head .rule { width: 54px; height: 1px; background: var(--gold); margin: 22px auto 0; }
.section-head.left .rule { margin-left: 0; }
.section-head p { margin-top: 22px; color: var(--grey); font-size: 16.5px; }

.kicker {
  font-size: 12px; font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 16px;
}

/* --------------------------------------------------- področja (naslovnica) */
.areas-strip {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.areas-strip a {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  /* 10 px ob strani: pri sedmih stolpcih je celica pri 1181 px široka
     158 px, »NEPREMIČNINSKO« pa meri 132 px — s 16 px bi se prelomila pri
     vezaju. Pod 1180 px (trije stolpci) je spet 16 px. */
  padding: 42px 10px; text-align: center;
  border-right: 1px solid var(--line);
  transition: background .28s var(--ease);
}
.areas-strip a:first-child { border-left: 1px solid var(--line); }
.areas-strip a:hover { background: var(--cream); }
.areas-strip svg { width: 46px; height: 46px; color: var(--gold); transition: transform .3s var(--ease); }
@media (hover: hover) {
  .areas-strip a:hover svg { transform: translateY(-4px); }
}
.areas-strip .label {
  font-size: 12.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy); line-height: 1.5;
  /* Dolge besede delijo mehki vezaji iz front-page.php (»Nepremičnin-sko«);
     overflow-wrap je samo še varovalo, če bi bila kaka beseda daljša. */
  overflow-wrap: anywhere; hyphens: manual;
}
.areas-cta { text-align: center; margin-top: 46px; }

/* --------------------------------------------------- zakaj izbrati */
.why-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.why-grid li {
  padding: 0 26px; text-align: center;
  border-right: 1px solid var(--line);
}
.why-grid li:last-child { border-right: none; }
.why-grid svg { width: 40px; height: 40px; color: var(--gold); margin: 0 auto 20px; }
/* 500 in ne 600: debelina 600 se je nalagala samo za štiri drobne oznake —
   dve datoteki pisave (31 kB) na vsaki strani za komaj vidno razliko. */
.why-grid h3 { font-family: var(--sans); font-size: 14.5px; font-weight: 500; letter-spacing: .02em; color: var(--navy); margin-bottom: 12px; }
.why-grid p { font-size: 14.5px; color: var(--grey); line-height: 1.65; }

/* --------------------------------------------------- članki + kontakt (split) */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split-articles { background: var(--white); padding: 84px 0; }
.split-articles .inner { max-width: 660px; margin-left: auto; padding: 0 56px 0 30px; }
.split-contact { background: var(--navy); color: var(--white); padding: 84px 0; }
.split-contact .inner { max-width: 660px; margin-right: auto; padding: 0 30px 0 56px; }
.split-articles h2, .split-contact h2 { font-size: clamp(27px, 2.9vw, 36px); margin-bottom: 30px; }
.split-articles h2 { color: var(--navy); }
.split-contact h2 { color: var(--white); }
.split-contact .lead { color: var(--grey-light); margin-bottom: 30px; font-size: 15.5px; }

.article-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Povezava je samo naslov (.card-link), ::after jo raztegne čez vso kartico. */
.article-card { position: relative; display: flex; flex-direction: column; }
.article-card .thumb {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); margin-bottom: 16px;
}
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
@media (hover: hover) {
  .article-card:hover .thumb img { transform: scale(1.05); }
}
.article-card time {
  font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey); display: block; margin-bottom: 9px;
}
.article-card .card-title { font-size: 19px; color: var(--navy); margin-bottom: 14px; line-height: 1.3; }
.article-card:hover .card-title { color: var(--gold-ink); }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--gold-ink); outline-offset: 6px; }
/* Izvleček na kartici. Odrezan na tri vrstice, da so kartice v vrsti enako
   visoke — izvlečki naročnice merijo od 128 do 242 znakov in bi sicer vsako
   kartico raztegnili drugače. line-clamp je podprt povsod, kjer je tudi grid;
   kjer ga ne bi bilo, se izpiše cel izvleček in kartica je le višja. */
.article-card .card-excerpt {
  font-size: 14.5px; line-height: 1.6; color: var(--grey); margin-bottom: 18px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.article-card .link-arrow { margin-top: auto; }
.articles-more { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --------------------------------------------------- obrazec */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.form-field { display: block; }
.form-field.full { grid-column: 1 / -1; }
/* Vidna oznaka nad poljem (prej je bila le ograda, ki ob pisanju izgine). */
.form-label {
  display: block; margin-bottom: 7px;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.form-optional { font-weight: 300; letter-spacing: 0; text-transform: none; opacity: .85; }
.form-field input, .form-field textarea {
  width: 100%;
  background: transparent;
  /* vsaj 3:1 proti podlagi (WCAG 1.4.11 za robove vnosnih polj) */
  border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--r);
  padding: 13px 16px;
  /* 16 px in ne 15: iOS Safari ob dotiku polja z manjšo pisavo stran poveča
     in jo pusti povečano — obrazec zdrsne čez rob zaslona. */
  font-size: 16px; font-weight: 300; color: var(--white);
  transition: border-color .25s, background .25s;
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field input:focus, .form-field textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 2px;
  border-color: var(--gold); background: rgba(255,255,255,.04);
}
/* Soglasje: potrditveno polje (20 px, prej 13), besedilo, povezava na
   politiko zasebnosti in morebitna napaka — vse v drugem stolpcu. */
.form-consent {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  align-items: start; font-size: 13px; color: var(--grey-light); line-height: 1.55;
}
.form-consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gold); cursor: pointer; }
.form-consent label { cursor: pointer; }
.form-consent .consent-more, .form-consent .field-error { grid-column: 2; }
.form-consent .consent-more { justify-self: start; text-decoration: underline; text-underline-offset: 3px; color: var(--gold); }
.form-actions { grid-column: 1 / -1; margin-top: 6px; }
/* Skrito polje proti neželeni pošti. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* obrazec na svetli podlagi (stran Kontakt) */
.form-light .form-label { color: var(--grey); }
.form-light .form-field input, .form-light .form-field textarea {
  /* --line (0,12 alfa) da komaj 1,3:1 — obrobe polj so praktično nevidne.
     WCAG 1.4.11 zahteva vsaj 3:1 za robove vnosnih polj; 0,42 je dal 2,7:1,
     0,5 da 3,4:1. */
  border-color: rgba(13, 27, 45, .5); color: var(--ink); background: var(--white);
}
.form-light .form-consent { color: var(--grey); }
.form-light .form-optional { opacity: 1; }
.form-light .form-field input:focus, .form-light .form-field textarea:focus { outline-color: var(--gold-ink); border-color: var(--gold-ink); }
.form-light .form-consent .consent-more { color: var(--gold-ink); }

/* --------------------------------------------------- podstran: uvod */
.page-hero { background: var(--navy); color: var(--white); padding: 74px 0 68px; }
.page-hero .kicker { color: var(--gold); }
.page-hero h1 { font-size: clamp(32px, 4vw, 50px); color: var(--white); max-width: 900px; }
.page-hero p { margin-top: 20px; color: var(--grey-light); max-width: 660px; font-size: 17px; }

/* Bled monogram in navpični slogan v uvodnem pasu rubrike Članki.
   Okrasje, zato aria-hidden v predlogi. Pod 1100px se skrije: naslov in uvod
   sta takrat široka čez ves pas in bi se prekrivala. */
.page-hero--mark .wrap { position: relative; }
.hero-mark {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 26px; pointer-events: none;
}
.hero-mark img { width: 250px; height: auto; opacity: .08; }
/* Slogan je vodoraven in se prelomi v štiri vrstice, kot v predlogi.
   Navpično besedilo (writing-mode) je bilo daljše od temnega pasu in se je
   razlilo v belo območje pod njim — pas je visok ~230px, slogan pa ~470px. */
.hero-motto {
  max-width: 150px; text-align: right; line-height: 2.1;
  font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); opacity: .8;
  border-left: 1px solid rgba(200, 162, 106, .35); padding-left: 24px;
}
@media (max-width: 1100px) { .hero-mark { display: none; } }

/* Zaključni citat pod seznamom člankov. */
.articles-quote { background: var(--cream); padding: 78px 0; text-align: center; }
.articles-quote .quote-text {
  font-family: var(--serif); font-size: clamp(19px, 2.2vw, 24px); font-style: italic;
  color: var(--navy); max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 22px;
}
/* Tanki zlati črti levo in desno od citata. Na ozkem zaslonu odpadeta,
   sicer bi citat stisnili v dve besedi na vrstico. */
.articles-quote .quote-text::before,
.articles-quote .quote-text::after {
  content: ""; flex: 0 0 56px; height: 1px; background: var(--gold); opacity: .5;
}
@media (max-width: 620px) {
  .articles-quote .quote-text::before,
  .articles-quote .quote-text::after { display: none; }
}
.articles-quote .quote-logo { width: 150px; height: auto; margin: 26px auto 0; opacity: .6; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--grey-light); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { opacity: .5; }

/* --------------------------------------------------- področja: pregled */
.areas-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.area-item {
  display: block; background: var(--white);
  border: 1px solid var(--line); border-top: 2px solid transparent;
  padding: 36px 34px; transition: all .3s var(--ease);
}
.area-item:hover { border-top-color: var(--gold); box-shadow: var(--shadow); }
@media (hover: hover) {
  .area-item:hover { transform: translateY(-3px); }
}
.area-item svg { width: 42px; height: 42px; color: var(--gold); margin-bottom: 20px; }
.area-item h2, .area-item h3 { font-size: 24px; color: var(--navy); margin-bottom: 12px; }
.area-item { position: relative; }
.area-item:hover h2 { color: var(--gold-ink); }
.area-item p { font-size: 15px; color: var(--grey); margin-bottom: 18px; }

/* --------------------------------------------------- področje: podstran */
.area-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px; align-items: start; }
.prose { font-size: 17px; color: var(--ink); }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: 28px; color: var(--navy); margin-top: 42px; }
.prose h3 { font-size: 22px; color: var(--navy); margin-top: 34px; }
.prose p { color: var(--grey); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 4px; }
.prose li { position: relative; padding-left: 26px; color: var(--grey); margin-top: 10px; }
.prose ul > li::before {
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 8px; height: 1px; background: var(--gold);
}
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; }
.prose ol > li::before {
  content: counter(n) "."; position: absolute; left: 0; top: 0;
  color: var(--gold-ink); font-size: 14px; font-weight: 500;
}
.prose blockquote {
  border-left: 2px solid var(--gold); padding: 6px 0 6px 24px;
  font-family: var(--serif); font-size: 21px; font-style: italic; color: var(--navy);
}
.prose img { margin: 28px 0; }
.prose figure figcaption { font-size: 13.5px; color: var(--grey); margin-top: 8px; }
/* Slike, ki jih naročnica v članku poravna ali opremi z napisom. Slogi
   urejevalnika blokov so izklopljeni (functions.php), zato so tu. */
.prose figure { max-width: 100%; }
.prose figure img { margin: 0; }
.prose .aligncenter, .prose .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; }
.prose .alignleft { float: left; max-width: 50%; margin: 6px 26px 16px 0; }
.prose .alignright { float: right; max-width: 50%; margin: 6px 0 16px 26px; }
.prose::after { content: ""; display: block; clear: both; }
.prose .wp-element-caption, .prose .wp-caption-text { font-size: 13.5px; color: var(--grey); margin-top: 8px; }
/* Tabele v člankih: na ozkem zaslonu se vodoravno drsijo same, stran ne. */
.prose table {
  display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-collapse: collapse; font-size: 15px;
}
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--grey); }
.prose th { background: var(--cream); font-weight: 500; color: var(--navy); }

/* Pogosta vprašanja na podstraneh področij (samo, če so vpisana). */
.faq-list h3 { font-size: 21px; color: var(--navy); margin-top: 24px; }
.faq-list p { color: var(--grey); margin-top: 8px; font-size: 16px; }

.help-list { margin-top: 12px; }
.help-list li {
  position: relative; padding-left: 28px; margin-top: 12px;
  font-size: 16px; color: var(--grey);
}
.help-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 12px; height: 1px; background: var(--gold);
}

.side-card {
  background: var(--cream); border: 1px solid var(--line);
  border-top: 2px solid var(--gold); padding: 32px 30px;
}
.side-card h3, .side-card .h3-like { font-size: 21px; color: var(--navy); margin-bottom: 12px; }
.side-card p { font-size: 15px; color: var(--grey); margin-bottom: 22px; }
.side-card + .side-card { margin-top: 22px; }
.side-links li + li { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.side-links a { font-size: 15px; color: var(--navy); transition: color .2s; }
.side-links a:hover { color: var(--gold-ink); }

.area-nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.area-nav-grid a {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border: 1px solid var(--line); background: var(--white);
  font-size: 14.5px; color: var(--navy); transition: all .25s var(--ease);
}
.area-nav-grid a:hover { border-color: var(--gold); color: var(--gold-ink); }
.area-nav-grid svg { width: 24px; height: 24px; color: var(--gold); flex: none; }
/* O odvetnici našteje vseh deset področij: v treh stolpcih bi zadnje stalo
   samo v četrti vrsti. Dva stolpca dasta pet polnih vrst, kot v pregledu
   Področja dela. Podstran področja našteje devet drugih in ostane pri treh.
   Pod 700 px velja en stolpec — tisto pravilo je niže v datoteki in zmaga. */
.area-nav-grid--all { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------- članki */
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.articles-empty { text-align: center; color: var(--grey); padding: 60px 0; font-style: italic; }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--grey); margin-bottom: 12px;
}
.article-meta .cat { color: var(--gold-ink); }
.article-hero-img { margin: 0 0 44px; aspect-ratio: 16 / 8; overflow: hidden; background: var(--cream-2); }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
/* Podpis in pravno opozorilo pod člankom. */
.article-sign { margin-top: 40px; text-align: center; }
.article-sign .byline {
  font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--navy);
}
.article-sign .disclaimer {
  margin-top: 8px; font-size: 13.5px; font-style: italic; color: var(--grey);
  max-width: 560px; margin-left: auto; margin-right: auto;
}

.article-foot { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }

/* Deljenje članka — navadne povezave, brez skript družbenih omrežij. */
.article-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.article-share > span {
  font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey);
}
.article-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--grey); transition: border-color .25s var(--ease), color .25s var(--ease);
}
.article-share a:hover { border-color: var(--gold); color: var(--gold-ink); }
.article-share svg { width: 19px; height: 19px; }
.article-area { margin-top: 22px; }

/* O avtorici (pod člankom). */
.author-box {
  display: flex; gap: 22px; align-items: flex-start;
  margin-top: 44px; padding: 26px 28px;
  background: var(--cream); border-left: 2px solid var(--gold);
}
.author-box img { width: 84px; aspect-ratio: 3 / 4; object-fit: cover; flex: none; }
.author-box .author-title {
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px;
}
.author-box p { font-size: 15.5px; color: var(--grey); }
.author-box .author-links { margin-top: 12px; }
.article-cta { margin-top: 26px; }

/* --------------------------------------------------- o odvetnici */
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 66px; align-items: start; }
.about-photo { position: relative; }
.about-photo img { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.about-photo .frame {
  position: absolute; inset: 20px -20px -20px 20px;
  border: 1px solid var(--gold); z-index: 0;
}
.approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 24px; }
.approach-grid li { border-top: 1px solid var(--line); padding-top: 22px; }
/* --gold-dark in ne --gold: zlata na kremni da 2,2:1, --gold-dark 3,2:1, kar
   za veliko besedilo (32 px) zadošča (WCAG 1.4.3). */
.approach-grid .n {
  font-family: var(--serif); font-size: 32px; color: var(--gold-dark); display: block; margin-bottom: 8px;
}
.approach-grid h3 { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--navy); margin-bottom: 8px; }
.approach-grid p { font-size: 14.5px; color: var(--grey); }

.cred-list li {
  position: relative; padding-left: 28px; margin-top: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--grey);
}
.cred-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 13px; height: 1px; background: var(--gold); }
.note-box {
  margin-top: 22px; background: rgba(200,162,106,.11); border-left: 2px solid var(--gold);
  padding: 14px 18px; font-size: 14px; font-style: italic; color: var(--grey);
}

/* --------------------------------------------------- kontakt (stran) */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
/* Ikona je v <dt> (veljaven <dl>), postavljena v levi stolpec. */
.contact-details { display: grid; gap: 4px; }
.contact-details > div { position: relative; padding: 20px 0 20px 40px; border-bottom: 1px solid var(--line); }
.contact-details svg { position: absolute; left: 0; top: 24px; width: 22px; height: 22px; color: var(--gold); }
.contact-details dt {
  font-size: 12px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 4px;
}
.contact-details dd { font-size: 16.5px; color: var(--navy); }
.contact-details a:hover { color: var(--gold-ink); }

/* Zemljevid: dokler obiskovalec ne klikne, je na mestu okvirja nadomestek. */
.map-embed { margin-top: 34px; border: 1px solid var(--line); background: var(--cream); }
.map-embed iframe { display: block; width: 100%; height: 320px; border: 0; }
.map-placeholder {
  min-height: 320px; padding: 28px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center;
}
.map-placeholder svg { width: 34px; height: 34px; color: var(--gold); }
.map-address { font-size: 16px; color: var(--navy); }
.map-note { font-size: 13px; color: var(--grey); max-width: 360px; line-height: 1.55; }
.map-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.map-actions[hidden] { display: none; }

/* --------------------------------------------------- CTA pas */
.cta-band { background: var(--navy); color: var(--white); padding: 66px 0; text-align: center; }
.cta-band h2 { font-size: clamp(26px, 3vw, 36px); color: var(--white); margin-bottom: 14px; }
.cta-band p { color: var(--grey-light); max-width: 560px; margin: 0 auto 30px; }
/* Neposredni naslov odvetnice pod gumbom (samo O odvetnici). Zlata na temno
   modri da 7,4:1. */
.cta-band .cta-direct { margin: 24px auto 0; font-size: 14.5px; }
.cta-band .cta-direct a { color: var(--gold); border-bottom: 1px solid rgba(200,162,106,.45); }
.cta-band .cta-direct a:hover { border-bottom-color: var(--gold); }

/* ------------------------------------------------------------- noga */
.site-footer { background: var(--navy); color: var(--grey-light); font-size: 14.5px; }
/* Samo navpični odmiki: .footer-top in .footer-bottom sta hkrati .wrap, in
   okrajšava »padding: 74px 0 56px« je prej povozila stranska odmika vsebnika —
   besedilo noge se je na telefonu dotikalo roba zaslona. */
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 46px; padding-top: 74px; padding-bottom: 56px; }
.footer-brand img { height: 52px; width: auto; margin-bottom: 20px; }
.footer-brand p { max-width: 260px; font-size: 14.5px; }
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.footer-social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-dark); color: var(--grey-light); transition: all .25s;
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold); }
.footer-social svg { width: 19px; height: 19px; }

.footer-col h2 {
  font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.5;
  letter-spacing: .2em; text-transform: uppercase; color: var(--white); margin-bottom: 20px;
}
.footer-col li + li { margin-top: 11px; }
.footer-col a { transition: color .22s; }
.footer-col a:hover { color: var(--gold); }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center;
  padding-top: 22px; padding-bottom: 28px; border-top: 1px solid var(--line-dark); font-size: 13px;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer-bottom a:hover { color: var(--gold); }
/* Izdelovalec strani — v svoji vrstici pod avtorskim zapisom, namenoma tiho.
   Prosojnost .78 je najnižja, ki na navy podlagi še doseže WCAG AA za
   navadno besedilo (4,59:1). Nižje je bilo videti lepše, a se ni dalo brati. */
.footer-credit { width: 100%; font-size: 12px; opacity: .78; }
.footer-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.footer-credit a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ------------------------------------------------------------- piškotki */
/* z-index pod glavo (100): odprt mobilni meni mora biti nad obvestilom —
   prej ga je obvestilo prekrilo in »Kontakt« v meniju ni bil dosegljiv. */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 760px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px;
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between;
}
.cookie-bar p { font-size: 13.5px; color: var(--grey); flex: 1 1 380px; }
.cookie-bar a { color: var(--gold-ink); text-decoration: underline; }
.cookie-bar[hidden] { display: none; }
/* Nizek zaslon (ležeč telefon, povečava 400 %): pripeto obvestilo bi
   pokrilo večino okna — tam stoji na dnu strani kot navaden blok. Na konec
   strani ga premakne site.js; v markupu je na vrhu (glej header.php). */
@media (max-height: 500px) {
  .cookie-bar { position: static; max-width: none; margin: 0; box-shadow: none; }
}

/* Besedilo samo za bralnike zaslona (npr. »odpre se v novem zavihku«). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------- odgovor obrazca */
.form-result {
  grid-column: 1 / -1; margin-bottom: 18px;
  padding: 14px 18px; border-radius: var(--r); font-size: 14.5px;
  border-left: 2px solid var(--gold);
  background: rgba(200, 162, 106, .14); color: var(--gold-pale);
}
.form-result.is-err { border-left-color: #C0392B; background: rgba(192, 57, 43, .16); color: #F3C4BE; }

/* sporočilo o napaki pri posameznem polju */
.field-error {
  display: block; margin-top: 6px;
  font-size: 13px; font-weight: 500; letter-spacing: 0;
  color: #F3C4BE;
}
.form-light .field-error { color: #9B2C1F; }
.form-field.has-error input, .form-field.has-error textarea { border-color: #C0392B; }
.form-consent.has-error .field-error { margin-top: 4px; }
.form-light .form-result { background: rgba(200, 162, 106, .13); color: var(--gold-ink); }
.form-light .form-result.is-err { background: rgba(192, 57, 43, .09); color: #9B2C1F; }

/* --------------------------------------------------- oštevilčenje strani */
.pagination {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 54px;
}
.pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  font-size: 14.5px; color: var(--navy);
  transition: all .25s var(--ease);
}
.pagination a.page-numbers:hover { border-color: var(--gold); color: var(--gold-ink); }
.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pagination .dots { border-color: transparent; }

.form-result:focus { outline: 2px solid currentColor; outline-offset: 3px; }

/* ------------------------------------------------------------- animacije
   Vsebino skrije šele site.js — in to samo tisto, kar je ob nalaganju POD
   pregibom (razred .reveal-wait). Vsebina nad pregibom ni skrita nikoli, zato
   se največji element (LCP) izriše takoj in ne šele po izvedbi skripta (prej
   0,8–1,0 s pozneje). Če se skript ne naloži, ni skrito nič.
   Prehod velja le med razkrivanjem (.reveal-in), da ne povozi prehodov ob
   prehodu miške na karticah. */
.reveal.reveal-wait { opacity: 0; transform: translateY(22px); }
.reveal.reveal-in { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-in.d1 { transition-delay: .08s; } .reveal-in.d2 { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal.reveal-wait { opacity: 1; transform: none; }
  /* Prehodi 0 s, ne .01ms: med še tako kratkim prehodom getComputedStyle
     vrača staro vrednost (site.js je zato narobe izračunal odmik noge pod
     obvestilom o piškotkih), izbirnik jezika pa je bil ob odprtju še skrit in
     fokus se ni premaknil vanj. Na konec prehoda (transitionend) se nič ne
     zanaša. */
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: 0s !important; }
}

/* ------------------------------------------------------------- odzivnost */
@media (max-width: 1180px) {
  .main-nav { gap: 24px; }
  .main-nav a { font-size: 11.5px; letter-spacing: .1em; }
  /* Spodnji rob traku tu rišejo celice same (vsaka ima spodnjo črto) —
     z robom traku bi bila zadnja črta dvojna. */
  .areas-strip { grid-template-columns: repeat(3, 1fr); border-bottom: none; }
  .areas-strip a { border-bottom: 1px solid var(--line); padding-inline: 16px; }
  .areas-strip a:nth-child(3n+1) { border-left: 1px solid var(--line); }
  /* Sedem področij v treh stolpcih: zadnje bi stalo samo, ob njem dve
     prazni celici brez spodnje črte. Raztegnjeno čez vso vrsto zaključi
     trak. Pogoj je splošen — velja le, kadar je zadnje v vrsti res samo. */
  .areas-strip a:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 0; }
  .why-grid li:nth-child(3n) { border-right: none; }
  .footer-top { grid-template-columns: 1.4fr 1fr 1.2fr; }
}

/* »Zakaj izbrati« ima pet točk: v mreži 3 + 2 je ostala prazna celica.
   Z flex-wrap sta zadnji dve na sredini vrste. */
@media (min-width: 701px) and (max-width: 1180px) {
  .why-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .why-grid li { flex: 0 0 33.333%; }
}

/* Naslovnica, 981–1240 px: kartice »Zadnji članki« stojijo v polovici
   zaslona po tri v vrsti in so široke le 120–160 px (naslov v osmih
   vrsticah). Tu so zato v seznamu: slika levo, besedilo desno. */
@media (min-width: 981px) and (max-width: 1240px) {
  .split-articles .article-cards { grid-template-columns: 1fr; gap: 26px; }
  .split-articles .article-card { display: grid; grid-template-columns: 150px 1fr; column-gap: 20px; align-content: start; }
  .split-articles .article-card .thumb { grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; }
  .split-articles .article-card > :not(.thumb) { grid-column: 2; }
  .split-articles .article-card .card-excerpt { margin-bottom: 10px; }
}

@media (max-width: 980px) {
  :root { --header-h: 72px; }
  .main-nav {
    /* Pripeto na glavo, ne na okno. Prej je bilo 'fixed' z inset na
       --header-h, kar je predpostavljalo, da se glava začne pri vrhu okna.
       Ko WordPress prijavljenim doda admin vrstico (32 ali 46 px), se glava
       premakne navzdol, meni pa je ostal pri stari številki in ji zlezel čez
       dno — prekril je logotip. Enako ob drsenju, ko se glava skrči na 68 px.
       .site-header je sticky, torej pozicioniran prednik: top:100% je vedno
       natanko njegov spodnji rob, ne glede na admin vrstico in višino. */
    position: absolute; top: 100%; left: 0; right: 0; bottom: auto;
    flex-direction: column; gap: 0; background: var(--navy);
    padding: 8px 30px 26px; margin: 0;
    box-shadow: 0 22px 40px rgba(0,0,0,.35);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    /* visibility je nujna: brez nje zaprt meni ostane v tabulatorskem
       zaporedju in štiri nevidne povezave prejmejo fokus */
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    /* Na nizkem zaslonu (ležeč telefon, povečava 200 %) mora meni drseti
       sam — drsenje strani je med odprtim menijem zaklenjeno. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .main-nav.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .main-nav a { padding: 15px 0; border-bottom: 1px solid var(--line-dark); font-size: 13px; }
  .nav-toggle { display: flex; }
  .header-call { display: inline-flex; }
  .header-right .btn { display: none; }
  .header-right { gap: 8px; }

  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 44px 0 52px; order: 2; }
  .hero-copy-inner { margin: 0; padding: 0 30px; max-width: none; }
  /* Fotografija 4:3 (75 % širine), a največ 62 % višine zaslona. Prej je
     imela najmanj 380 px: na telefonu je zasedla ves prvi zaslon, naslov in
     gumb »Dogovorite se za posvet« pa sta bila pod pregibom.
     Višina in ne aspect-ratio: ob omejeni višini bi aspect-ratio zožil tudi
     širino (na ležečem telefonu je fotografija postala ozek pravokotnik). */
  .hero-figure {
    order: 1; min-height: 0;
    height: 75vw; height: min(75vw, 62vh); height: min(75vw, 62svh);
  }
  /* Ne "none": ko se uvodni del zloži v en stolpec, bi se odstavek razlil
     čez vso širino — pri 980 px na 920 px oziroma ~106 znakov na vrstico.
     640 px da okoli 75 znakov, kar je zgornja meja udobnega branja. Pod
     ~700 px je stolpec itak ožji in omejitev ne učinkuje. */
  .hero-lead { max-width: 640px; }

  .split { grid-template-columns: 1fr; }
  .split-articles .inner, .split-contact .inner { max-width: none; margin: 0; padding: 0 30px; }
  .split-articles, .split-contact { padding: 66px 0; }

  .area-body { grid-template-columns: 1fr; gap: 44px; }
  .about-grid { grid-template-columns: 1fr; gap: 46px; }
  /* Ko se dvostolpčna postavitev zloži v en stolpec, besedilo prevzame vso
     širino vsebnika — pri 900 px je to 825 px oziroma ~97 znakov na vrstico.
     Ista meja kot pri .hero-lead: 640 px je okoli 75 znakov. */
  .about-photo { max-width: 400px; }
  .area-body > div:first-child, .about-grid > div:last-child { max-width: 720px; }
  .contact-grid { grid-template-columns: 1fr; gap: 46px; }
  .approach-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .area-nav-grid { grid-template-columns: repeat(2, 1fr); }
  /* Podstran področja našteje devet drugih: v dveh stolpcih bi zadnje stalo
     samo. Raztegnjeno čez vso vrsto zaključi mrežo, kot zadnja celica traku
     na naslovnici; velja le, kadar je zadnje v vrsti res samo. */
  .area-nav-grid a:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}

/* Ležeč telefon (nizek zaslon): lepljiva glava in fotografija sta skupaj
   zasedli skoraj ves zaslon. Glava tu ni lepljiva, fotografija je nizek pas. */
@media (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .site-header { position: relative; }
  /* Nizek pas (60 % višine): ravno dovolj za glavo od las do brade —
     izmerjeno na izrezu 4:3 (lasje 6 %, brada 39 % višine izreza). Pri
     844 × 390 je vidnih 37 % višine izreza, 6 % ga začne tik nad lasmi. */
  .hero-figure { height: 60vh; height: 60svh; }
  .hero-figure img { object-position: 50% 6%; }
  .cookie-bar { padding: 10px 16px; }
}

/* Zelo ozki zasloni (do 380 px): dolgi napisi na gumbih se smejo preliti v
   dve vrstici, sicer razširijo postavitev. */
@media (max-width: 380px) {
  .btn {
    white-space: normal; text-align: center; justify-content: center;
    --btn-pad-x: 18px; --btn-ls: .1em;
    padding: 14px var(--btn-pad-x); font-size: 12px;
  }
  .hero-contact { gap: 12px 18px; }
  .hero-contact a, .hero-contact span { font-size: 13.5px; }
}

/* Na ozkih zaslonih zamenjamo celoten logotip z monogramom — sicer se glava
   (logotip + izbira jezika + klic + gumb za meni) ne izide po širini. */
@media (max-width: 560px) {
  /* <picture> v glavi tu zamenja logotip z monogramom (glej header.php),
     zato je treba prilagoditi samo višino. */
  .brand img { height: 34px; }
  .site-header.compact .brand img { height: 30px; }
  .header-right { gap: 4px; }
  .lang__btn { padding: 6px 6px 6px 8px; gap: 6px; }
  .lang__btn > span:not(.flag) { display: none; }   /* ostane samo zastavica + puščica */
  .lang__menu { min-width: 190px; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .section { padding: 68px 0; }
  .wrap { padding: 0 22px; }
  .hero-copy-inner, .split-articles .inner, .split-contact .inner { padding: 0 22px; }
  /* Temni uvodni pas podstrani: namizni odmiki (74/68 px) so na telefonu
     potisnili vsebino globoko pod pregib. */
  .page-hero { padding: 46px 0 42px; }

  .areas-strip { grid-template-columns: repeat(2, 1fr); }
  .areas-strip a:nth-child(3n+1) { border-left: none; }
  .areas-strip a:nth-child(2n+1) { border-left: 1px solid var(--line); }
  /* Isto za dva stolpca; pravilo za tri stolpce zgoraj tu ne sme veljati
     (npr. pri štirih področjih bi raztegnilo četrto, ki ima par). */
  .areas-strip a:last-child:nth-child(3n+1) { grid-column: auto; }
  .areas-strip a:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
  .areas-strip a { padding: 32px 8px; }
  .areas-strip .label { letter-spacing: .08em; }

  .why-grid { grid-template-columns: 1fr; gap: 34px 0; }
  .why-grid li { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 30px; }
  .why-grid li:last-child { border-bottom: none; padding-bottom: 0; }

  .article-cards, .articles-grid, .areas-list, .area-nav-grid { grid-template-columns: 1fr; }
  .article-cards { gap: 30px; }
  .approach-grid { grid-template-columns: 1fr; gap: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 34px; padding-top: 54px; padding-bottom: 40px; }
  /* Za .wrap zgoraj: sicer njegova okrajšava izniči navpična odmika. */
  .footer-bottom { padding-top: 22px; padding-bottom: 28px; }
  .prose .alignleft, .prose .alignright { float: none; max-width: 100%; margin: 20px 0; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .cookie-bar { padding: 16px 18px; left: 10px; right: 10px; bottom: 10px; }
  .cookie-bar .btn { width: 100%; justify-content: center; }

  /* Okrasni okvir fotografije sega 20 px čez desni rob fotografije — na
     telefonu do roba zaslona. Tu je ožji in fotografija se mu umakne. */
  .about-photo { margin-right: 14px; }
  .about-photo .frame { inset: 14px -14px -14px 14px; }

  /* Drobtinice članka: na telefonu bi tik nad naslovom še enkrat izpisale
     cel naslov članka. Ostaneta Domov / Članki. */
  .breadcrumb--article .crumb-current,
  .breadcrumb--article span[aria-hidden]:nth-last-child(2) { display: none; }

  .author-box { flex-direction: column; padding: 22px; }
  .contact-details > div { padding-left: 36px; }
}

/* Tarče dotika vsaj 44 px (WCAG 2.5.8 zahteva 24, Apple in Google
   priporočata 44). Samo na napravah na dotik, da se namizni ritem ne spremeni. */
@media (pointer: coarse) {
  /* Navadne (vrstične) povezave: navpični odmik poveča območje dotika, a
     ne spremeni postavitve — tudi pri naslovu v več vrsticah (<br>), ki bi ga
     inline-flex postavil v eno vrsto. */
  .footer-col a, .footer-bottom nav a, .breadcrumb a, .side-links a,
  .article-meta a, .contact-details dd a, .footer-credit a, .consent-more {
    padding-block: 12px;
  }
  /* Te so elementi vsebnika flex ali grid, kjer odmik šteje v postavitev —
     negativni zunanji odmik ga izravna, območje dotika pa ostane. */
  .breadcrumb a, .footer-bottom nav a, .article-meta a, .consent-more { margin-block: -12px; }
  /* Enovrstične povezave s puščico ali ikono so že inline-flex. */
  .hero-contact a, .article-area .link-arrow, .article-foot > .link-arrow,
  .author-links .link-arrow, .articles-more .link-arrow, .map-link .link-arrow {
    min-height: 44px; align-items: center;
  }
  .brand { min-height: 44px; }
}
/* Tablica v ležečem položaju ima namizni meni — glava je visoka 84 px, zato
   višji odmik povezav ne spremeni ničesar razen območja dotika. */
@media (pointer: coarse) and (min-width: 981px) {
  .main-nav a { padding-block: 12px; }
}

/* ------------------------------------------------------------- tisk
   Brez tega sta se naslov članka in logotip natisnila belo na belem, sekcije
   z animacijo pa se niso natisnile, če niso bile prej na zaslonu. */
@media print {
  .site-header, .site-footer, .cookie-bar, .skip-link, .hero-figure, .map-embed,
  .article-share, .article-cta, .cta-band, .hero-actions, .areas-cta, .articles-more,
  .hero-mark, .form-wrap, .split-contact, .area-nav-grid { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .page-hero, .section, .section-cream, .articles-quote { background: #fff !important; padding: 0 0 14pt !important; }
  .page-hero h1, .page-hero p, .page-hero .kicker, .breadcrumb, .article-meta { color: #000 !important; }
  .reveal, .reveal.reveal-wait { opacity: 1 !important; transform: none !important; }
  .split { display: block; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; }
  img { break-inside: avoid; max-width: 60% !important; }
}