/* ============================================================
   Advokatska kancelarija — DIZAJN 4 „Memorandum"

   Tretman preuzet sa dizajna radjenog za Popovic Petrovic (verzija 3), koji ona
   NIJE izabrala: papir kao podloga cele strane, sadrzaj na belim listovima, tanke
   vlasi umesto okvira, skoro pravi uglovi — dokument, ne aplikacija.
   Paleta je NOVA: njena (#465174 / #1b3c53 / #ede9e6) je iz identiteta koji je
   platila grafickom dizajneru i ne sme dalje. Njen zig (logotip kao vodeni znak)
   nije prenet.

   Fontovi su sistemski. Izvorni dizajn vuce Poppins i Commissioner sa Google-a;
   za 3.277 sajtova to je spoljna zavisnost koja usporava ucitavanje i moze da
   otkaze, a slog memoranduma i treba da bude serifni.
   ============================================================ */

:root{
  --papir:      #e8e8e4;   /* podloga cele strane */
  --papir-tam:  #dedcd6;
  --list:       #ffffff;   /* beli list na papiru */
  --mastilo:    #212429;
  --mastilo-bl: #4b515a;
  --tiho:       #767c85;
  --vlas:       #d6d6d0;   /* hairline, kao otisak */
  --vlas-bl:    #e6e5e0;
  --slejt:      #41506b;   /* jedini akcenat */
  --slejt-tam:  #334057;
  --slejt-bl:   #e7eaf0;

  /* Memorandum je serifni dokument: serif nosi i naslove i telo, a sans se
     koristi SAMO za sitne verzalne oznake (nadnaslovi, etikete polja). */
  --serif: "Iowan Old Style", Georgia, "Times New Roman", "Palatino Linotype", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1080px;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --r: 3px;                /* skoro pravi uglovi */
  --senka: 0 1px 2px rgba(33,36,41,.05), 0 12px 30px rgba(33,36,41,.06);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--serif); font-size:17px; line-height:1.72;
  color:var(--mastilo); background:var(--papir);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
[hidden]{ display:none !important; }   /* mobilni meni ostaje zatvoren — gotcha #37 */

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.2; letter-spacing:-.012em; text-wrap:balance; }
.eyebrow,.section-tag,.info-label,.hc-title,.hamburger-label,.btn,.nav,.card-num,.step-num{ font-family:var(--sans); }

/* ---------- ZAGLAVLJE: traka memoranduma ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(232,232,228,.94); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--vlas);
}
.header-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding:.8rem var(--pad);
  display:flex; align-items:center; gap:1.25rem;
}
/* meni se ne lomi po sredini stavke; ime sme da se prelomi, meni ne */
.header-inner{ flex-wrap:nowrap; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; min-width:0; }
.brand-text{ min-width:0; display:flex; flex-direction:column; line-height:1.28; }
.brand-name{ overflow-wrap:anywhere; font-weight:600; font-size:1.04rem; letter-spacing:-.01em; }
.nav{ flex:0 0 auto; }

.brand-mark{
  flex:none; width:40px; height:40px; border-radius:var(--r);
  background:var(--list); border:1px solid var(--vlas); color:var(--slejt);
  display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:1rem;
}
.brand-sub{ color:var(--tiho); font-family:var(--sans); font-size:.74rem; letter-spacing:.055em; text-transform:uppercase; }

.nav{ display:none; gap:1.3rem; }
.nav a{ color:var(--mastilo-bl); text-decoration:none; font-size:.82rem; padding-block:.35rem; transition:color .18s; }
.nav a:hover, .nav a.active{ color:var(--slejt); }
body .nav a.active{ text-decoration:none; }

.header-phone{
  display:none; align-items:center; gap:.45rem;
  color:var(--slejt); background:var(--list); border:1px solid var(--vlas);
  text-decoration:none; font-family:var(--sans); font-weight:600; font-size:.83rem;
  padding:.48rem .85rem; border-radius:var(--r); transition:border-color .18s, color .18s;
}
.header-phone:hover{ border-color:var(--slejt); }

.hamburger{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:var(--list); color:var(--mastilo); border:1px solid var(--vlas);
  border-radius:var(--r); padding:.45rem .7rem; font-family:var(--sans); font-size:.8rem; font-weight:600;
}
.mobile-nav{ background:var(--list); border-top:1px solid var(--vlas); padding:.4rem var(--pad) 1rem; }
.mobile-nav a{ display:block; padding:.7rem 0; text-decoration:none; color:var(--mastilo); font-size:.95rem; border-bottom:1px solid var(--vlas-bl); }
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-phone{ color:var(--slejt) !important; font-weight:600; }

@media (min-width:1040px){
  .nav{ display:flex; }
  .header-phone{ display:inline-flex; }
  .hamburger{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* ---------- LIST: zajednicki omotac svake sekcije ---------- */
.section, .hero{ padding-block:clamp(1.5rem,3.2vw,2.4rem); }
.section > .container, .hero > .container{
  background:var(--list); border:1px solid var(--vlas); border-radius:var(--r);
  box-shadow:var(--senka);
  padding:clamp(1.9rem,4.4vw,3.4rem) clamp(1.4rem,4vw,3.4rem);
  max-width:var(--maxw);
}

/* ---------- HERO: glava memoranduma ---------- */
.hero{ padding-top:clamp(2rem,4.5vw,3.4rem); }
.hero-inner{ display:grid; gap:clamp(1.8rem,4vw,3rem); }
.eyebrow{
  margin:0 0 1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--vlas);
  color:var(--tiho); font-size:.73rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
}
.hero h1{ font-size:clamp(2rem,5.4vw,3.35rem); font-weight:500; letter-spacing:-.02em; }
.hero h1 span{ display:block; color:var(--slejt); }
.hero-lead{ margin:1.3rem 0 0; max-width:36rem; color:var(--mastilo-bl); font-size:clamp(1.02rem,2.1vw,1.14rem); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-size:.85rem; font-weight:600; padding:.8rem 1.45rem;
  border-radius:var(--r); border:1px solid transparent; transition:background .18s, color .18s, border-color .18s;
}
.btn-primary{ background:var(--slejt); color:#fff; }
.btn-primary:hover{ background:var(--slejt-tam); }
.btn-ghost{ background:transparent; color:var(--mastilo); border-color:var(--vlas); }
.btn-ghost:hover{ border-color:var(--slejt); color:var(--slejt); }
.btn-block{ display:block; width:100%; text-align:center; }

/* podaci kancelarije — kao blok zaglavlja na memorandumu */
.hero-card{ border-top:1px solid var(--vlas); padding-top:1.5rem; }
.hc-title{ margin:0 0 1rem; color:var(--tiho); font-size:.71rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.hc-list{ margin:0; display:grid; gap:.9rem; }
.hc-list > div{ display:grid; gap:.1rem; }
.hc-list dt{ font-family:var(--sans); font-size:.71rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--tiho); }
.hc-list dd{ margin:0; font-size:.95rem; }
.hc-list dd a{ text-decoration:none; border-bottom:1px solid var(--slejt); }
.hc-list dd a:hover{ color:var(--slejt); }
.hc-note{ margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--vlas-bl); font-size:.82rem; font-style:italic; color:var(--tiho); }

@media (min-width:900px){
  .hero-inner{ grid-template-columns:1fr minmax(16rem,19rem); align-items:start; }
  .hero-card{ border-top:none; border-left:1px solid var(--vlas); padding-top:0; padding-left:2.2rem; }
}

/* ---------- ZAGLAVLJA SEKCIJA ---------- */
.section-head{ margin-bottom:clamp(1.7rem,3.4vw,2.5rem); }
.section-tag{ display:inline-block; margin-bottom:.55rem; color:var(--tiho); font-size:.71rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.section h2{ font-size:clamp(1.5rem,3.3vw,2.15rem); font-weight:500; }
.section-head h2::after, .about-head h2::after{ content:""; display:block; width:100%; height:1px; margin-top:1rem; background:var(--vlas); }

/* ---------- O KANCELARIJI ---------- */
.about-grid{ display:grid; gap:clamp(1.4rem,3.4vw,3rem); }
.about-head h2{ font-size:clamp(1.5rem,3.3vw,2.15rem); font-weight:500; }
.about-body p{ margin:0 0 1.05rem; color:var(--mastilo-bl); }
.about-body .lede{ font-size:clamp(1.05rem,2.1vw,1.2rem); color:var(--mastilo); }
.about-body .note{ margin-top:1.5rem; padding-left:1rem; border-left:2px solid var(--slejt); font-style:italic; color:var(--tiho); font-size:.9rem; }
@media (min-width:900px){ .about-grid{ grid-template-columns:minmax(0,14rem) minmax(0,1fr); } }

/* ---------- OBLASTI PRAVA: stavke sa brojem u margini ---------- */
.practice-grid{ display:grid; gap:0; }
.practice-card{
  display:grid; grid-template-columns:2.4rem 1fr; gap:.3rem .9rem; align-items:start;
  padding:1.35rem 0; border-bottom:1px solid var(--vlas-bl);
}
.practice-card:last-child{ border-bottom:none; }
.card-num{ grid-row:1 / span 2; color:var(--slejt); font-size:.78rem; font-weight:600; padding-top:.3rem; font-variant-numeric:tabular-nums; }
.practice-card h3{ font-size:1.06rem; font-weight:600; }
.area-list{ grid-column:2; margin:.45rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.25rem .95rem; color:var(--tiho); font-size:.91rem; }
.area-list li{ position:relative; padding-left:.8rem; }
.area-list li::before{ content:""; position:absolute; left:0; top:.7em; width:4px; height:4px; border-radius:50%; background:var(--vlas); }
@media (min-width:860px){ .practice-grid{ grid-template-columns:1fr 1fr; column-gap:3rem; } }

/* ---------- PRISTUP RADU ---------- */
.approach-grid{ display:grid; gap:1.6rem 2.4rem; }
.approach-item{ padding-top:1.1rem; border-top:2px solid var(--slejt-bl); }
.approach-icon{ display:grid; place-items:center; width:36px; height:36px; margin-bottom:.8rem; border-radius:var(--r); background:var(--slejt-bl); color:var(--slejt); }
.approach-item h3{ font-size:1rem; font-weight:600; margin-bottom:.4rem; }
.approach-item p{ margin:0; color:var(--mastilo-bl); font-size:.92rem; }
@media (min-width:620px){ .approach-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .approach-grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- SARADNJA: numerisani stavovi ---------- */
.steps-grid{ display:grid; gap:0; counter-reset:korak; }
.step-item{ display:grid; grid-template-columns:2.6rem 1fr; gap:1rem; align-items:start; padding:1.3rem 0; border-bottom:1px solid var(--vlas-bl); }
.step-item:last-child{ border-bottom:none; }
.step-num{
  width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--slejt); color:var(--slejt);
  font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums;
}
.step-item h3{ font-size:1.02rem; font-weight:600; margin:.2rem 0 .35rem; }
.step-item p{ margin:0; color:var(--mastilo-bl); font-size:.93rem; }
@media (min-width:1000px){ .steps-grid{ grid-template-columns:1fr 1fr; column-gap:3rem; } }

/* ---------- PITANJA ---------- */
.faq-list{ display:grid; gap:0; }
.faq-item{ border-bottom:1px solid var(--vlas-bl); }
.faq-item:last-child{ border-bottom:none; }
.faq-item summary{ list-style:none; cursor:pointer; padding:1.1rem 2.4rem 1.1rem 0; position:relative; font-size:1rem; font-weight:600; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:""; position:absolute; right:.35rem; top:1.45rem; width:8px; height:8px; border-right:1.5px solid var(--slejt); border-bottom:1.5px solid var(--slejt); transform:rotate(45deg); transition:transform .2s; }
.faq-item[open] summary::after{ transform:rotate(-135deg); top:1.7rem; }
.faq-item p{ margin:0 0 1.25rem; padding-right:2.4rem; color:var(--mastilo-bl); font-size:.94rem; }

/* ---------- KONTAKT ---------- */
.contact-grid{ display:grid; gap:clamp(1.8rem,3.6vw,2.8rem); }
.info-list{ margin:0 0 1.5rem; padding:0; list-style:none; display:grid; gap:1rem; }
.info-list li{ display:grid; gap:.15rem; padding-bottom:1rem; border-bottom:1px solid var(--vlas-bl); }
.info-list li:last-child{ border-bottom:none; padding-bottom:0; }
.info-label{ font-size:.71rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tiho); }
.info-value{ font-size:.99rem; }
.info-value a{ text-decoration:none; border-bottom:1px solid var(--slejt); }
.info-value a:hover{ color:var(--slejt); }

.map-wrap{ border:1px solid var(--vlas); border-radius:var(--r); overflow:hidden; background:var(--papir-tam); aspect-ratio:16/10; }
.map-wrap iframe{ display:block; width:100%; height:100%; border:0; }
.map-link{ display:inline-block; margin-top:.8rem; font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--slejt); text-decoration:none; border-bottom:1px solid currentColor; }

.contact-form-wrap{ background:var(--papir); border:1px solid var(--vlas); border-radius:var(--r); padding:1.7rem 1.5rem; }
.contact-form-wrap h3{ font-size:1.12rem; font-weight:600; margin-bottom:1.2rem; }
.field{ margin-bottom:1rem; }
.field label{ display:block; margin-bottom:.32rem; font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tiho); }
.field input, .field textarea{
  width:100%; padding:.72rem .8rem; font-family:var(--serif); font-size:.96rem; color:var(--mastilo);
  background:var(--list); border:1px solid var(--vlas); border-radius:var(--r);
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--slejt); box-shadow:0 0 0 3px rgba(65,80,107,.13); }
.field textarea{ resize:vertical; min-height:6.2rem; }
.form-status{ margin:.85rem 0 0; font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--slejt); opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s; }
.form-status.is-visible{ opacity:1; transform:none; }
.form-disclaimer{ margin:1rem 0 0; padding-top:.95rem; border-top:1px solid var(--vlas); font-size:.79rem; font-style:italic; color:var(--tiho); line-height:1.6; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr minmax(0,24rem); align-items:start; } }

/* ---------- PODNOŽJE ---------- */
.site-footer{ margin-top:clamp(1.5rem,3vw,2.4rem); padding-block:2.4rem 2rem; border-top:1px solid var(--vlas); color:var(--mastilo-bl); }
.footer-inner{ display:grid; gap:.6rem; }
.footer-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem; }
.footer-name{ font-weight:600; font-size:1rem; color:var(--mastilo); }
.footer-line{ margin:0; font-size:.87rem; }
.footer-note{ margin:0; font-size:.83rem; font-style:italic; color:var(--tiho); }
.footer-copy{ margin:.85rem 0 0; padding-top:.95rem; border-top:1px solid var(--vlas-bl); font-size:.79rem; color:var(--tiho); }
.ax-credit{ margin:.45rem 0 0; font-size:.79rem; color:var(--tiho); }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
/* `.in` je zastita od BELOG EKRANA — generator ubacuje kod koji tu klasu doda svim
   `.reveal` sekcijama na prvi klik na sidro. Bez ovog pravila covek vidi praznu stranu
   ako IntersectionObserver ne opali. */
.reveal.is-visible, .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--slejt); outline-offset:2px;
}
section[id]{ scroll-margin-top:78px; }

/* generator ubacuje „nazad na vrh" sa tvrdo upisanom teget bojom; njegov <style>
   dolazi POSLE ovog fajla, pa ga pretice veca specificnost */
body #toTop{ background:var(--slejt); color:#fff; }


/* ── Zaglavlje na telefonu: JEDAN red (3.9.2026) ───────────────────────────────
   Dug naziv firme je brend gurao u dva reda, pa je dugme menija padalo ispod
   (isti kvar nadjen i na knjigovodstvenim d2/d3). Ime se sada skracuje sa tri
   tacke umesto da lomi zaglavlje. */
@media (max-width:700px){
  .header-inner{ flex-wrap:nowrap; }
  .brand{ min-width:0; }
  .brand-text{ min-width:0; }
  .brand-text>*{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ── Sopstveni znak firme umesto slova u kvadraticu (generator, polje `logo`) ─────────
   Kvadratic ima svoju boju podloge po dizajnu; tudj logo u njemu se bije sa tom bojom,
   pa se podloga, ivica i zaobljenje gase i ostaje samo znak. Visina je ista kao kvadratic
   koji zamenjuje (40px), sirina se racuna iz odnosa stranica da zaglavlje ne poskoci. */
.brand-mark.znak{width:auto;height:40px;display:block;background:none;border:0;
  border-radius:0;padding:0;box-shadow:none;font-size:0;flex:0 0 auto}
.brand-mark.znak img{height:40px;width:auto;display:block}
@media (max-width:720px){.brand-mark.znak,.brand-mark.znak img{height:32px}}