/* ==========================================================================
   Consulendo - dizajn sistem (base.css)
   Tokeni + tipografija + layout + komponente. Jedan fajl, učitava se svuda -
   tema nema teških per-page paketa (nema GSAP/hero animacija).
   ========================================================================== */

:root{
  --cream-50:#FAF6F1;
  --cream-100:#F2E9DE;
  --sand-200:#E6D8C8;
  --warm-400:#9C8C7A;
  --warm-700:#4E453B;
  --ink-900:#241F1A;

  --clay-300:#EBC0A6;
  --clay-500:#C97748;
  --clay-600:#A85D33;
  --clay-700:#874827;

  --sage-100:#E3E9DC;
  --sage-500:#667A5C;
  --sage-700:#4A5A42;

  --focus-ring:#2F6F6B;
  --error:#B3402E;

  --shadow-card:0 4px 16px rgba(36,31,26,.07);
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:999px;

  --content-w:800px;
  --wide-w:1200px;

  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px;
  --sp-32:32px; --sp-48:48px; --sp-64:64px; --sp-96:96px;
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream-50);
  color:var(--warm-700);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--clay-600);text-decoration:underline;text-decoration-color:var(--clay-300);text-underline-offset:2px;}
a:hover{color:var(--clay-700);}
h1,h2,h3,h4{
  font-family:'Lora',serif;
  color:var(--ink-900);
  font-weight:600;
  line-height:1.2;
  margin:0 0 .5em 0;
}
h1{font-size:clamp(32px,5vw,40px);}
h2{font-size:clamp(24px,4vw,32px);}
h3{font-size:22px;}
h4{font-family:'Inter',sans-serif;font-size:18px;font-weight:600;}
/* Vizuelni stil kartice-naslova, odvojen od semantičkog nivoa (h2/h3) - da
   hijerarhija naslova ne preskače nivoe (h2 -> h4) samo zato sto kartica
   treba manji, sans-serif naslov. */
.card-title{font-family:'Inter',sans-serif;font-size:18px;font-weight:600;color:var(--ink-900);line-height:1.2;margin:0 0 6px 0;}
p{margin:0 0 1em 0;}

/* Vidljiv focus prsten svuda - pristupačnost, ne oslanjati se samo na boju. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:4px;
}

/* ---- layout ---- */
.wrap{max-width:var(--wide-w);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:var(--content-w);margin:0 auto;padding:0 24px;}
.wrap-narrow h2{margin-top:1.6em;}
.wrap-narrow ul{margin:0 0 1.2em 0;padding-left:1.3em;}
.wrap-narrow li{margin-bottom:.4em;}
.section{padding:var(--sp-64) 0;}
.section--alt{background:var(--cream-100);border-top:1px solid var(--sand-200);border-bottom:1px solid var(--sand-200);}
.section--sage{background:var(--sage-100);border-top:1px solid var(--sand-200);}
@media (max-width:640px){
  .section{padding:var(--sp-48) 0;}
}

/* ---- badge / eyebrow pill ---- */
/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:15px;
  border-radius:var(--radius-md);padding:13px 26px;
  border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;line-height:1;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--clay-600);color:#fff;}
.btn-primary:hover{background:var(--clay-700);color:#fff;}
.btn-secondary{background:transparent;color:var(--clay-600);border-color:var(--clay-600);}
.btn-secondary:hover{background:var(--clay-300);color:var(--ink-900);}
.btn-tertiary{background:none;border:none;color:var(--clay-600);text-decoration:underline;padding:13px 4px;}
.btn:disabled{background:var(--sand-200);color:var(--warm-400);border-color:transparent;cursor:not-allowed;}

/* ---- cards ---- */
.card{
  background:#fff;border:1px solid var(--sand-200);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:var(--sp-24);
}
.card-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24);
}
.card-grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){ .card-grid{grid-template-columns:1fr;} .card-grid--4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .card-grid--4{grid-template-columns:1fr;} }
.card-thumb{display:block;border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--sp-16);background:var(--sage-100);aspect-ratio:4/3;}
.card-thumb img{width:100%;height:100%;object-fit:cover;}
.card h4{margin-bottom:6px;}
.card p{font-size:14.5px;margin-bottom:var(--sp-12);}
.card .btn{font-size:13.5px;padding:10px 18px;}
.service-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:40px;}

/* ---- forms ---- */
.field{margin-bottom:var(--sp-16);}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-900);margin-bottom:6px;}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field textarea{
  width:100%;border:1.5px solid var(--sand-200);border-radius:var(--radius-md);
  padding:12px 14px;font-family:'Inter',sans-serif;font-size:15px;color:var(--warm-700);
  background:#fff;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--clay-600);
  box-shadow:0 0 0 3px rgba(47,111,107,.2);
}
.field textarea{min-height:140px;resize:vertical;}
.field-hp{position:absolute;left:-9999px;top:-9999px;} /* honeypot */
.form-msg{font-size:14px;border-radius:var(--radius-md);padding:10px 14px;margin-bottom:var(--sp-16);display:none;}
.form-msg--ok{display:block;background:var(--sage-100);color:var(--sage-700);}
.form-msg--err{display:block;background:#F4E2DE;color:var(--error);}

/* ==========================================================================
   Navigacija
   ========================================================================== */
.site-header{
  background:var(--cream-50);
  border-bottom:1px solid var(--sand-200);
  position:sticky;top:0;z-index:40;
}
.site-header__inner{
  max-width:var(--wide-w);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.site-logo{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.site-logo__mark{ height:36px; width:auto; display:block; }
.site-logo__wordmark{
  display:flex; flex-direction:column; line-height:1.15;
  font-family:'Lora',serif; font-weight:600; font-size:19px; color:var(--ink-900);
}
.site-logo__wordmark small{
  font-family:'Inter',sans-serif; font-weight:700; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sage-700);
}
.site-logo--light .site-logo__wordmark{ color:var(--cream-100); }
.site-logo--light .site-logo__wordmark small{ color:var(--sand-200); }
.site-nav{display:flex;align-items:center;gap:28px;margin-left:auto;}
.site-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;}
.site-nav a{
  color:var(--warm-700);text-decoration:none;font-size:15px;font-weight:500;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--clay-600);}
.site-header .btn{font-size:14px;padding:10px 20px;}
.site-nav a.btn-primary{color:#fff;}
.site-nav a.btn-primary:hover{color:#fff;}

.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  width:44px;height:44px;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  position:relative;z-index:1;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--ink-900);border-radius:2px;
  transition:transform .2s ease,opacity .15s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-social{display:none;}
.header-actions{display:none;align-items:center;gap:4px;}
.header-call{display:none;}

@media (max-width:860px){
  .header-actions{display:flex;}
  .header-call{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;color:var(--warm-700);
    position:relative;z-index:1;
  }
  .header-call:hover{color:var(--clay-600);}
  .site-nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,85vw);height:100vh;
    background:var(--cream-50);flex-direction:column;align-items:flex-start;
    padding:88px 28px 28px;gap:24px;
    transform:translateX(100%);transition:transform .25s ease;
    box-shadow:-8px 0 24px rgba(36,31,26,.12);
  }
  .site-nav.is-open{transform:translateX(0);}
  .site-nav ul{flex-direction:column;gap:18px;}
  .nav-toggle{display:flex;}
  .nav-social{
    display:flex;gap:8px;
  }
  .nav-social a{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;color:var(--warm-700);
  }
  .nav-social a:hover{color:var(--clay-600);}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink-900);color:var(--cream-100);padding:var(--sp-64) 0 var(--sp-24);margin-top:var(--sp-64);}
.section + .site-footer{margin-top:0;}
.site-footer a{color:var(--cream-100);text-decoration:none;}
.site-footer a:hover{color:var(--clay-300);}
.footer-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:var(--sp-32);
  max-width:var(--wide-w);margin:0 auto;padding:0 24px;
}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-24) var(--sp-32);} .footer-brand{grid-column:1 / -1;} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;} }
.footer-tagline{font-size:14px;color:var(--sand-200);margin-top:8px;max-width:32ch;}
.footer-h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--clay-300);margin-bottom:12px;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:8px;font-size:14.5px;}
.footer-social{display:flex;gap:14px;margin-top:16px;}
.footer-social a{opacity:.85;}
.footer-social a:hover{opacity:1;}
.footer-bottom{
  max-width:var(--wide-w);margin:var(--sp-32) auto 0;padding:var(--sp-16) 24px 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;color:var(--sand-200);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
}
.footer-bottom p{margin:0;}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;}
.footer-legal a{font-size:12.5px;color:var(--sand-200);}
.footer-legal a:hover{color:var(--clay-300);}
.footer-legal__cookie-btn{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:12.5px;color:var(--sand-200);text-decoration:underline;
}
.footer-legal__cookie-btn:hover{color:var(--clay-300);}
.footer-credit{
  max-width:var(--wide-w);margin:var(--sp-16) auto 0;padding:var(--sp-16) 24px 0;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
}
.footer-credit p{margin:0;font-size:12px;color:var(--sand-200);}
.footer-credit a{color:var(--sand-200);text-decoration:underline;text-underline-offset:2px;}
.footer-credit a:hover{color:var(--clay-300);}

/* ==========================================================================
   Hero (naslovna)
   ========================================================================== */
.hero{padding:var(--sp-64) 0;}
.hero__inner{
  max-width:var(--wide-w);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-48);align-items:center;
}
@media (max-width:860px){ .hero__inner{grid-template-columns:1fr;} }
.hero h1{margin-bottom:var(--sp-16);}
.hero p.lead{font-size:18px;max-width:52ch;margin-bottom:var(--sp-24);}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;}
.hero__portrait{
  width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  background:var(--clay-300);
  max-width:380px;margin:0 auto;
}
.hero__portrait img{width:100%;height:100%;object-fit:cover;}

/* trust strip */
.trust-strip{border-top:1px solid var(--sand-200);border-bottom:1px solid var(--sand-200);background:var(--cream-100);}
.trust-strip__inner{
  max-width:var(--wide-w);margin:0 auto;padding:var(--sp-24);
  display:flex;justify-content:space-around;flex-wrap:wrap;gap:var(--sp-16);
  font-family:'Lora',serif;font-size:15px;color:var(--ink-900);text-align:center;
}

/* ==========================================================================
   Blog / single / archive
   ========================================================================== */
.blog-head{max-width:var(--content-w);margin:0 auto;padding:var(--sp-48) 24px var(--sp-24);text-align:center;}
.blog-grid{max-width:var(--wide-w);margin:0 auto;padding:0 24px var(--sp-64);}
.post-meta{font-size:13px;color:var(--warm-400);margin-bottom:6px;}
.post-meta a{color:var(--warm-400);text-decoration:none;}

.entry{max-width:var(--content-w);margin:0 auto;padding:var(--sp-48) 24px;}
.entry-thumb{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--sp-24);}
.entry-body{font-size:17px;line-height:1.75;}
.entry-body p{margin-bottom:1.2em;}
.entry-body h2{margin-top:1.4em;}
.entry-body h3{margin-top:1.2em;font-size:19px;}
.entry-body ul,.entry-body ol{margin:0 0 1.2em 0;padding-left:1.3em;}
.entry-body li{margin-bottom:.4em;}
.entry-back{display:inline-block;margin-bottom:var(--sp-16);font-size:14px;text-decoration:none;color:var(--warm-400);}
.entry-body iframe{max-width:100%;width:100%;aspect-ratio:16/9;height:auto;border-radius:var(--radius-md);}

.cookie-table{width:100%;border-collapse:collapse;margin:0 0 1.4em 0;font-size:14.5px;display:block;overflow-x:auto;}
.cookie-table th,.cookie-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--sand-200);vertical-align:top;}
.cookie-table th{font-family:'Inter',sans-serif;font-weight:600;color:var(--ink-900);background:var(--cream-100);}

.pagination{display:flex;justify-content:center;gap:12px;margin-top:var(--sp-32);}
.pagination a,.pagination span{
  padding:8px 14px;border-radius:var(--radius-md);border:1px solid var(--sand-200);
  color:var(--warm-700);text-decoration:none;font-size:14px;
}
.pagination .current{background:var(--clay-600);color:#fff;border-color:var(--clay-600);}

/* ==========================================================================
   404
   ========================================================================== */
.e404{max-width:var(--content-w);margin:0 auto;padding:var(--sp-96) 24px;text-align:center;}
.e404-code{font-family:'Lora',serif;font-weight:700;font-size:96px;color:var(--clay-300);line-height:1;margin-bottom:var(--sp-16);}

/* ==========================================================================
   O meni / Usluge - sadržajne strane
   ========================================================================== */
.page-head{max-width:var(--content-w);margin:0 auto;padding:var(--sp-48) 24px 0;}
.about-layout{
  max-width:var(--wide-w);margin:0 auto;padding:var(--sp-24) 24px var(--sp-64);
  display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--sp-48);align-items:start;
}
@media (max-width:860px){ .about-layout{grid-template-columns:1fr;} }
.about-portrait{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.about-quote{
  position:relative;
  margin-top:var(--sp-16);padding:var(--sp-24) var(--sp-16) var(--sp-16);
  font-family:'Lora',serif;font-style:italic;color:var(--warm-700);
  background:var(--sage-100);border-radius:var(--radius-md);
}
.about-quote::before{
  content:"\201C";
  position:absolute;top:2px;left:14px;
  font-family:'Lora',serif;font-style:normal;font-weight:700;
  font-size:40px;line-height:1;color:var(--sage-500);
}
.about-body{font-size:16.5px;}
.about-body p{margin-bottom:1.2em;}

.service-block{max-width:var(--wide-w);margin:0 auto;padding:0 24px var(--sp-24);}
.service-block .card{cursor:default;}
.service-block a.card{cursor:pointer;}

/* ---- details/summary (zamena za stari jQuery popup/slideDown) ---- */
details{margin-top:10px;}
details summary{
  cursor:pointer;color:var(--clay-600);font-weight:600;font-size:14px;
  list-style:none;
}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:" →";}
details[open] summary::after{content:" ↑";}
details p,details ul{margin-top:12px;font-size:14.5px;}
details ul{padding-left:20px;}
details li{margin-bottom:6px;}

/* ---- cookie baner ---- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#fff;border-top:1px solid var(--sand-200);
  box-shadow:0 -4px 16px rgba(36,31,26,.08);
}
.cookie-banner[hidden]{display:none;}
.cookie-banner__inner{
  max-width:var(--wide-w);margin:0 auto;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cookie-banner__inner p{margin:0;font-size:14px;color:var(--warm-700);max-width:60ch;}
.cookie-banner__actions{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;}
.cookie-banner .btn{font-size:14px;padding:11px 20px;}
@media (max-width:640px){
  .cookie-banner__inner{padding:16px 20px;}
  .cookie-banner__actions{width:100%;}
  .cookie-banner__actions .btn{flex:1;}
}