/* Odvjetnički ured Duje Koceić — style.css
   Jedan stil za sve stranice (HR, EN, privatnost, 404). Bez vanjskih resursa. */

/* ---------- Font: Archivo variable (wght 400–700, wdth 100–122), podskup latin + hrvatski, self-hosted ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 122%;
  font-display: swap;
  src: url("../fonts/archivo.woff2") format("woff2");
}

/* ---------- Tokeni ---------- */
:root {
  --bg: #F6F6F4;
  --surface: #FFFFFF;
  --ink: #141414;
  --ink-2: #5D5D58;
  --line: rgba(20, 20, 20, .14);
  --line-strong: #7A7A75;          /* rubovi polja obrasca, 3,9:1 na --bg */
  --green: #25503F;
  --green-ink: #1E4334;            /* hover na zelenom gumbu */
  --on-green: #FFFFFF;             /* 9,1:1 na --green */
  --on-green-2: rgba(255, 255, 255, .85); /* ≈ 6,9:1 na --green */
  --on-green-line: rgba(255, 255, 255, .32);
  --error: #A3261B;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wide: 114%;                    /* font-stretch za ime i naslove */
  --mark: 122%;                    /* font-stretch za znak KOCEIĆ */

  --fs-name: clamp(44px, 21.3px + 6.86vw, 128px);
  --fs-h2: clamp(30px, 22px + 2.3vw, 58px);
  --fs-group: clamp(26px, 19px + 1.1vw, 36px);
  --fs-lead: clamp(21px, 18.6px + .62vw, 29px);
  --fs-sub: clamp(22px, 18px + .9vw, 32px);
  --fs-h3: clamp(19px, 17.4px + .4vw, 23px);
  --fs-body: clamp(18px, 17.25px + .19vw, 20px);
  --fs-band: clamp(17px, 16.4px + .12vw, 18px);
  --fs-small: 15px;

  --max: 1440px;
  --gutter: clamp(16px, 4vw, 64px);
  --col-gap: clamp(16px, 2.2vw, 40px);
  --section-y: clamp(72px, 4rem + 4.6vw, 152px);
  --portrait-w: clamp(300px, 29vw, 420px);
}

/* ---------- Osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
strong, b { font-weight: 600; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--line-strong); transition: color .15s, text-decoration-color .15s; }
a:hover { color: var(--green); text-decoration-color: currentColor; }
a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--green); color: var(--on-green); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.dot { color: var(--ink-2); }
.nobr { white-space: nowrap; }

.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 10; background: var(--ink); color: var(--bg); padding: 10px 14px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--bg); }

/* ---------- Zaglavlje ---------- */
.site-header { background: var(--bg); position: relative; z-index: 5; }
.site-header__inner { display: flex; align-items: baseline; gap: 24px; padding-block: 30px 22px; }
.brand { font-weight: 640; font-stretch: var(--mark); font-size: 21px; letter-spacing: .015em; line-height: 1; text-decoration: none; margin-right: auto; padding-block: 10px; }
.brand:hover { color: var(--ink); }
.site-header__phone { display: none; }
.nav-toggle { display: none; }
.nav__list { display: flex; align-items: baseline; gap: clamp(20px, 2.6vw, 40px); font-size: 17px; line-height: 1.3; }
.nav__list a { text-decoration: none; padding-block: 8px; }
.nav__list a:hover { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; }
.nav__lang { display: flex; align-items: baseline; gap: 6px; }
.nav__lang [aria-current],
.site-footer__bottom [aria-current] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; text-decoration-color: var(--green); }
.nav__sep { color: var(--ink-2); }

/* ---------- Ime i činjenice ---------- */
.hero__inner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--col-gap);
  align-items: last baseline;
  padding-top: clamp(28px, 5vw, 76px);
  padding-bottom: clamp(36px, 4.2vw, 64px);
}
.hero__name {
  font-weight: 600;
  font-stretch: var(--wide);
  font-size: var(--fs-name);
  line-height: .93;
  letter-spacing: -.028em;
  margin-left: -.04em;             /* optičko poravnanje D s rubom portreta */
}
.hero__role { display: block; }
.hero__facts { font-size: clamp(18px, 16.8px + .3vw, 21px); line-height: 1.45; max-width: 34rem; justify-self: end; text-wrap: pretty; }
.hero__facts p + p { margin-top: .55em; }
.hero__address { color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0 1.4em; }
.hero__address a { color: var(--ink-2); }
.hero__address a:hover { color: var(--green); }

/* ---------- Zeleno polje: portret + skupine klijenata ----------
   Portret uvijek dodiruje gornji i donji rub polja: stupac se rasteže, a slika se reže odozdo (object-position 50% 0). */
.band { background: var(--green); color: var(--on-green); }
.band__inner {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: var(--portrait-w) minmax(0, 1fr);
  column-gap: clamp(32px, 4.4vw, 80px);
}
.band__portrait { align-self: stretch; min-height: 0; }
.band__portrait picture { height: 100%; }
.band__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.band__body { display: flex; flex-direction: column; padding-top: clamp(32px, 3.4vw, 52px); padding-bottom: clamp(28px, 2.6vw, 40px); }
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; column-gap: clamp(32px, 3.8vw, 64px); row-gap: 36px; margin-bottom: 40px; }
.group__title {
  font-size: var(--fs-group);
  font-weight: 600;
  font-stretch: var(--wide);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--on-green);
  margin-bottom: .5em;
  text-wrap: balance;
}
/* Skupine u jednom redu (≥1200): naslovi, popisi i poveznica dijele retke (subgrid), pa popisi počinju na istoj visini. */
@media (min-width: 1200px) {
  .groups { grid-template-rows: auto auto auto; row-gap: 0; }
  .group { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  :root { --portrait-w: clamp(300px, 26vw, 360px); }
  .band__inner { column-gap: clamp(32px, 3.4vw, 48px); }
  .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
}
@media (min-width: 1440px) { .groups { grid-template-columns: repeat(3, auto); } .group__title { white-space: nowrap; } }
.group__list { font-size: var(--fs-band); line-height: 1.34; color: var(--on-green-2); }
.group__list li { text-wrap: balance; }
.group__list li + li { margin-top: .45em; }
.group__more { margin-top: 18px; font-size: var(--fs-small); font-weight: 600; }
.band a { color: inherit; text-decoration-color: var(--on-green-line); }
.group__list a { text-decoration-line: none; }   /* popis poveznica bez okolnog teksta: podcrta se tek na hover/fokus */
.band a:hover, .band a:focus-visible { color: var(--on-green); text-decoration-line: underline; text-decoration-color: var(--on-green); }
.band .dot { color: var(--on-green-2); }
.band .group__more a { color: var(--on-green); text-decoration-color: rgba(255, 255, 255, .6); }
.band :focus-visible { outline-color: var(--on-green); }
.arrow { display: inline-block; width: .95em; height: .95em; margin-left: .35em; vertical-align: -.12em; }
/* Napomena: dva dijela koja se lome kao cjeline (bez visećeg separatora) */
.band__note { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--on-green-line); font-size: var(--fs-band); line-height: 1.4; color: var(--on-green-2); display: flex; flex-wrap: wrap; gap: 4px 2em; }

/* ---------- Sekcije ---------- */
.section { padding-top: var(--section-y); }
.section__title {
  font-weight: 600;
  font-stretch: var(--wide);
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -.022em;
  text-wrap: balance;
}
p + p { margin-top: .9em; }
.lead { font-size: var(--fs-lead); line-height: 1.36; letter-spacing: -.005em; max-width: 30em; }

/* Kako radim: podnaslov kao u Prvom sastanku, tekst u veličini uvoda */
.intro { padding-top: clamp(64px, 3rem + 4vw, 128px); }
.intro__text { margin-top: clamp(16px, 1.6vw, 24px); font-size: var(--fs-lead); line-height: 1.36; letter-spacing: -.005em; max-width: 30em; text-wrap: pretty; }

/* Područja prakse: naslov iznad, tipografski indeks u stupcima */
.areas { columns: 2; column-gap: var(--col-gap); margin-top: clamp(20px, 2vw, 32px); padding-top: clamp(24px, 2.4vw, 36px); border-top: 1px solid var(--line); }
.area { display: block; break-inside: avoid; padding-bottom: 28px; scroll-margin-top: 16px; }
.area__title { font-size: var(--fs-h3); font-weight: 600; font-stretch: 106%; line-height: 1.2; letter-spacing: -.006em; margin-bottom: 8px; text-wrap: balance; }
.area p { max-width: 32em; text-wrap: pretty; }
.area:target .area__title { color: var(--green); }

/* Odvjetnik: jedino mjesto s naslovom u lijevom stupcu (uz životopis) */
.section__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.section__grid > .section__title,
.section__grid > .section__head { grid-column: 1 / span 4; }
.section__grid > .section__body { grid-column: 6 / -1; }
/* Odvjetnik: životopis je činjenična jezgra, pa dobiva širi stupac; uvodna rečenica stoji uz njega */
.section__grid--cv > .section__head { grid-column: 1 / span 6; }
.section__grid--cv > .section__body { grid-column: 8 / -1; padding-top: .35em; }
.cv { margin-top: 32px; font-size: var(--fs-body); line-height: 1.4; }
.cv > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 16px; padding-block: 11px 12px; border-top: 1px solid var(--line); }
.cv > div:last-child { border-bottom: 1px solid var(--line); }
.cv dt { font-weight: 600; }
.bio p { font-size: var(--fs-lead); line-height: 1.38; letter-spacing: -.005em; max-width: 24em; text-wrap: pretty; }
.bio p + p { margin-top: .7em; }

/* Prvi sastanak: označeni popis, kao životopis */
.section--tight { padding-top: clamp(64px, 3rem + 3.4vw, 120px); }
.subhead { font-size: var(--fs-sub); font-weight: 600; font-stretch: var(--wide); line-height: 1.05; letter-spacing: -.018em; }
.facts { margin-top: clamp(20px, 2vw, 32px); max-width: 64rem; }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); column-gap: var(--col-gap); padding-block: 16px 18px; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; text-wrap: balance; }
.facts dd { max-width: 36em; text-wrap: pretty; }

/* ---------- Kontakt ---------- */
.contact { padding-top: clamp(64px, 3rem + 3.4vw, 120px); }
.letterhead { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; margin-top: clamp(28px, 3vw, 44px); padding-top: 20px; border-top: 1px solid var(--line); }
.letterhead dt { font-size: var(--fs-small); font-weight: 600; margin-bottom: 6px; }
.letterhead dd { line-height: 1.45; }
.contact__grid { margin-top: clamp(40px, 4.4vw, 72px); row-gap: 48px; }
.contact .map { grid-column: 1 / span 6; }
.contact .form-wrap { grid-column: 8 / -1; }
.map picture { height: clamp(300px, 36vw, 560px); overflow: hidden; background: #E6E6E3; border: 1px solid var(--line); }
.map img { width: 100%; height: 100%; object-fit: none; object-position: 50% 50%; }
.map figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }

.form-title { font-size: var(--fs-h3); font-weight: 600; font-stretch: 106%; margin-bottom: 6px; }
.form__legend { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.field-row .field { margin-bottom: 0; }
.field__hint { font-size: var(--fs-small); color: var(--ink-2); margin: 6px 0 18px; }
.field__hint.is-error, .field__error { color: var(--error); font-weight: 600; }
.field__error { font-size: var(--fs-small); line-height: 1.4; }
label { font-size: var(--fs-small); font-weight: 600; }
.req { color: var(--ink-2); font-weight: 400; }
input, textarea {
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 12px 14px;
  width: 100%;
  min-height: 50px;
  appearance: none;
}
textarea { resize: vertical; min-height: 9.5em; line-height: 1.45; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
[aria-invalid="true"]:focus-visible { outline-color: var(--error); border-color: var(--error); }
::placeholder { color: #6E6E69; opacity: 1; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__privacy { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); margin-top: 4px; max-width: 40em; }
.form__status { font-size: var(--fs-small); font-weight: 600; min-height: 1.45em; margin: 14px 0 10px; }
.form__status.is-error { color: var(--error); }
.form__status:focus { outline: none; }
.btn {
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--on-green);
  background: var(--green);
  border: 0;
  border-radius: 2px;
  padding: 14px 26px;
  min-height: 50px;
  cursor: pointer;
  transition: background-color .15s;
}
.btn:hover { background: var(--green-ink); }
.btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
/* Potvrda i greška nakon slanja: JS ih prikazuje klasom, a bez JS-a ih otvara sidro iz preusmjeravanja (:target). */
.form-done, .form-alert { display: none; }
.form-done:target, .form-alert:target, .form-done.is-shown, .form-alert.is-shown { display: block; }
/* Bez JS-a: nakon uspješnog slanja (:target) prazan obrazac se ne prikazuje, da ne poziva na ponovno slanje. */
.form-done:target ~ .form, .form-done:target ~ .form-alert { display: none; }
.form-done { padding: 22px 0 24px; border-top: 2px solid var(--green); margin-bottom: 24px; }
.form-done:focus, .form-alert:focus { outline: none; }
.form-done__title { font-size: var(--fs-lead); font-weight: 600; font-stretch: 106%; margin-bottom: 8px; }
.form-alert { padding: 16px 0 18px; border-top: 2px solid var(--error); margin-bottom: 20px; color: var(--error); font-weight: 600; }
.form-alert a { color: inherit; }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--section-y); padding-bottom: 40px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.site-footer__title { font-size: var(--fs-small); font-weight: 600; color: var(--ink); padding-top: 18px; border-top: 1px solid var(--line); }
.site-footer__body { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 12px; max-width: 72rem; }
.site-footer__body p { margin: 0; max-width: 34em; }
.site-footer__body p + p { margin-top: 12px; }
.site-footer__body strong { color: var(--ink); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom p + p { margin-top: 0; }

/* ---------- Širok zaslon ---------- */
@media (min-width: 2000px) {
  :root { --max: 1680px; --fs-name: 164px; --fs-h2: 64px; --portrait-w: 460px; --fs-body: 21px; --fs-band: 20px; --fs-group: 40px; --fs-lead: 31px; --fs-sub: 34px; --fs-h3: 25px; --fs-small: 16px; }
  .nav__list { font-size: 19px; }
  .brand { font-size: 23px; }
  .hero__facts { font-size: 23px; max-width: 36rem; }
}


/* ---------- Tablet 768–1199: portret lijevo, dvije skupine uz njega, treća i napomena ispod preko pune širine ---------- */
@media (max-width: 1199px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .hero__facts { justify-self: start; }
  .letterhead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --portrait-w: clamp(240px, 29vw, 330px); }
  .band__inner { grid-template-columns: var(--portrait-w) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3.4vw, 44px); }
  .band__body, .groups { display: contents; }
  .band__portrait { grid-column: 1; grid-row: 1; }
  .group { padding-top: clamp(28px, 3.4vw, 40px); padding-bottom: 8px; }
  .group:nth-child(1) { grid-column: 2; grid-row: 1; }
  .group:nth-child(2) { grid-column: 3; grid-row: 1; }
  .group:nth-child(3) { grid-column: 1 / -1; grid-row: 2; padding-top: 36px; }
  .group:nth-child(3) .group__list { columns: 3; column-gap: var(--col-gap); }
  .group:nth-child(3) .group__list li { break-inside: avoid; margin: 0 0 .45em; }
  .band__note { grid-column: 1 / -1; grid-row: 3; margin: 28px 0 32px; }
}
@media (min-width: 768px) and (max-width: 899px) {
  .group:nth-child(3) .group__list { columns: 2; }
}

@media (max-width: 1023px) {
  .section__grid > .section__title,
  .section__grid > .section__head,
  .section__grid > .section__body { grid-column: 1 / -1; }
  .section__grid > .section__body { padding-top: 28px; }
  .contact .map, .contact .form-wrap { grid-column: 1 / -1; }
  .contact .form-wrap { max-width: 44rem; }
  .facts > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* ---------- Mobitel ---------- */
@media (max-width: 767px) {
  .site-header__inner { padding-block: 10px; gap: 18px; align-items: center; }
  .brand { font-size: 18px; }
  .site-header__phone { display: block; font-size: 16px; text-decoration: none; padding-block: 12px; color: var(--ink); }
  .nav-toggle {
    display: block;
    font: inherit; font-size: 16px; font-weight: 600; color: var(--ink);
    background: none; border: 0; padding: 12px 0 12px 4px; margin: 0; cursor: pointer;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--line-strong);
  }
  .nav-toggle[aria-expanded="true"] { text-decoration-color: var(--green); text-decoration-thickness: 2px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 2px solid var(--ink); padding: 4px var(--gutter) 28px; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; font-size: 22px; font-weight: 600; font-stretch: 106%; }
  .nav__list > li { border-top: 1px solid var(--line); }
  .nav__list a { display: block; padding-block: 13px; }
  .nav__lang { gap: 10px; padding-block: 13px; }
  .nav__lang a { display: inline; padding: 0; }

  .hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding-top: 20px; padding-bottom: 36px; }
  .hero__name { line-height: .96; }
  .hero__facts { font-size: 18px; }
  .hero__address a { display: none; }   /* telefon je već u zaglavlju */

  .band__inner { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .band__portrait picture { height: min(108vw, 520px); overflow: hidden; }
  .band__portrait img { object-position: 50% 12%; }
  .band__body { padding: 32px var(--gutter) 36px; }
  .groups { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }

  .site-footer__body { grid-template-columns: minmax(0, 1fr); }
  .areas { columns: 1; }
  .area { padding-bottom: 22px; }
  /* Skupine na mobitelu kao tekući redak s točkama: isto kazalo na pola visine, detalji su odmah ispod u Područjima prakse. */
  .group__list li { display: inline; }
  .group__list li:not(:last-child)::after { content: "\00a0\00b7"; color: var(--on-green-2); }
  .cv > div { grid-template-columns: 8.5em minmax(0, 1fr); }
  .facts > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding-block: 14px 16px; }
  .letterhead { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .map picture { height: 320px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .field-row .field { margin-bottom: 18px; }
  .field-row .field:last-child { margin-bottom: 0; }
  .btn { width: 100%; }
  .site-footer__body p + p { margin-top: 0; }
  .site-footer__bottom { margin-top: 32px; flex-direction: column; }
}
@media (min-width: 520px) and (max-width: 767px) {
  .band__portrait img { object-position: 50% 0; }
}
@media (max-width: 767px) and (scripting: none) {
  .site-header__inner { flex-wrap: wrap; }
  .nav-toggle { display: none; }
  .nav { display: block; position: static; padding: 0 0 8px; border: 0; width: 100%; }
  .nav__list { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; font-size: 16px; font-weight: 400; }
  .nav__list > li { border: 0; }
  .nav__list a, .nav__lang { padding-block: 4px; }
}
@media (max-width: 380px) {
  .site-header__inner { gap: 14px; }
  .brand { font-size: 17px; }
  .site-header__phone, .nav-toggle { font-size: 15px; }
}

/* ---------- Podstranice: obavijest o privatnosti i 404 ---------- */
.section--page { padding-top: clamp(32px, 1rem + 4vw, 96px); }
.section--page .section__grid > .section__body { grid-column: 5 / -1; }
.legal-head__date { margin-top: 16px; font-size: var(--fs-small); color: var(--ink-2); }
.toc { margin-top: 32px; font-size: var(--fs-small); line-height: 1.4; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { border-top: 1px solid var(--line); }
.toc li:last-child { border-bottom: 1px solid var(--line); }
.toc a { display: block; padding-block: 8px 9px; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.legal > * { max-width: 36em; }
.legal .lead { max-width: 30em; }
.legal section { margin-top: clamp(40px, 3.4vw, 56px); scroll-margin-top: 24px; }
.legal h2 { font-size: var(--fs-h3); font-weight: 600; font-stretch: 106%; line-height: 1.25; letter-spacing: -.006em; margin-bottom: .55em; }
.legal ul { padding-left: 1.25em; list-style: "–\00a0\00a0"; }
.legal li + li { margin-top: .5em; }
.legal ul + p, .legal p + ul { margin-top: .9em; }
.notfound__links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 600; }
.notfound__en { margin-top: clamp(40px, 3.4vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); }
.notfound__en h2 { font-size: var(--fs-h3); font-weight: 600; font-stretch: 106%; line-height: 1.25; margin-bottom: .45em; }
@media (min-width: 1024px) and (min-height: 760px) {
  .legal-head { position: sticky; top: 24px; align-self: start; }
}
@media (max-width: 1023px) {
  .section--page .section__grid > .section__body { grid-column: 1 / -1; }
}
@media (min-width: 2000px) {
  .toc, .legal-head__date { font-size: 16px; }
}

/* ---------- Ispis ---------- */
@media print {
  .toc, .site-header, .nav-toggle, .map, .form-wrap, .skip-link { display: none !important; }
  .band { background: none; color: var(--ink); }
  .group__title, .group__list, .band__note { color: var(--ink); }
  body { background: #fff; }
}