/* ========== Design tokens ========== */
:root{
  --color-primary:#1f3a8a; --color-primary-700:#1e3a8a;
  --color-accent:#f59e0b;  --color-accent-700:#d97706;

  --color-b2:#0ea5e9; --color-b3:#f59e0b; --color-b4:#ef4444;

  --color-bg:#fff; --color-text:#111827; --color-muted:#6b7280;
  --color-border:#e5e7eb; --color-surface:#f8fafc;

  --radius:12px; --shadow-sm:0 2px 8px rgba(0,0,0,.06); --shadow-md:0 6px 20px rgba(0,0,0,.08);
  --container:1180px; --header-h:108px;
}

/* Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--color-text); background:var(--color-bg)}
img{max-width:100%; display:block}
a{color:var(--color-primary); text-decoration:none}
a:hover{color:var(--color-primary-700)}
h1,h2,h3{line-height:1.2; margin:0 0 .5rem}
p{margin:.5rem 0 1rem}
.container{max-width:var(--container); margin-inline:auto; padding:0 16px}
.section{padding:64px 0}
.section-head{margin-bottom:24px}
.section-head p{color:var(--color-muted)}
.grid-4{display:grid; gap:20px; grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-4{grid-template-columns:1fr}}
.cards-equal>.card{height:100%}
.card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.card-link{display:inline-block;margin-top:12px;font-weight:600}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid transparent;font-weight:600;text-align:center;transition:.2s}
.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-700)}
.btn-secondary{background:var(--color-accent);color:#111827}.btn-secondary:hover{background:var(--color-accent-700)}
.btn-outline{border-color:var(--color-primary);color:var(--color-primary);background:transparent}.btn-outline:hover{background:var(--color-primary);color:#fff}
.btn-small{padding:8px 12px;font-size:.9rem}
.muted{color:var(--color-muted)}
.full{grid-column:1 / -1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;background:#fff;padding:8px 12px;border-radius:8px;z-index:1000;box-shadow:var(--shadow-sm)}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--color-border)}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:var(--header-h)}
.brand .logo{height:92px;width:auto}

/* Glavna navigacija – DESKTOP */
.main-nav{display:flex;justify-content:center;position:relative}
.main-nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.main-nav a{padding:8px 10px;border-radius:8px}
.main-nav a:hover{background:var(--color-surface)}

/* Lang */
.lang-switch{display:flex;align-items:center;gap:8px}
.lang{font-weight:600;color:var(--color-text);opacity:.8}
.lang:hover{opacity:1;color:var(--color-primary)}
.lang.active{color:var(--color-primary)}
.lang-sep{color:#9ca3af}

/* ============================= */
/* MOBILNI IZBORNIK (full-screen)*/
/* ============================= */

/* Hamburger (skriven na desktopu) */
.menu-toggle{display:none;position:relative;cursor:pointer;background:transparent;border:0;z-index:1002}
.menu-toggle .bar{width:22px;height:2px;background:#111827;display:block;margin:4px 0;border-radius:2px;transition:.25s}

/* Fullscreen panel (skriven na desktopu) */
.mobile-nav{display:none}

/* === MOBILNA PRAVILA (konsolidirano, bez horizontalnog skrola) === */
@media (max-width:980px){
  /* Sakrij desktop nav; prikaži gumb */
  .main-nav{display:none}
  .menu-toggle{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    width:44px;height:44px;border:1px solid var(--color-border);border-radius:10px;background:#fff;
  }

  /* Bez horizontalnog skrola na overlayu */
  html, body { overflow-x: hidden; }
  body.menu-active{ overflow: hidden; width:100%; position:relative; }

  /* Fullscreen panel — točno nalijepi na rubove (bez 100vw) */
  #mobileNav{
    display:flex !important;
    position:fixed !important;
    top:0; right:0; bottom:0; left:0;
    width:auto; height:auto;
    box-sizing:border-box;
    padding:24px 20px;
    background:#fff;
    align-items:center; justify-content:center;
    overflow-y:auto; overflow-x:hidden;
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
    z-index:1001;
  }
  #mobileNav.is-open,
  #mobileNav.open{ opacity:1; visibility:visible; }

  /* Lista linkova — centrirano i kontrolirana širina */
  #mobileNav .nav-list{
    list-style:none;margin:0;padding:0;text-align:center;
    width:100%; max-width:720px; margin-inline:auto;
  }
  #mobileNav .nav-list li{margin:14px 0}
  #mobileNav .nav-list a{
    color:#111827;text-decoration:none;font-weight:700;font-size:2rem;
    display:inline-block; max-width:92vw; overflow-wrap:anywhere; word-break:break-word;
  }

  /* Gumb — šira klik-zona, iznad overlaya, cijeli klikabilan */
  #menuToggle{
    position:relative; z-index:2002;
    display:inline-flex !important; align-items:center; justify-content:center;
    width:48px; height:48px; padding:0; cursor:pointer; touch-action:manipulation;
  }
  #menuToggle *{ pointer-events:none; } /* cijeli gumb prima klik */

  /* Crte + X animacija (radi na više klasa i aria-expanded) */
  #menuToggle .bar{
    width:22px; height:2px; background:#111827;
    display:block; margin:4px 0; border-radius:2px;
    transition:transform .25s ease, opacity .25s ease;
    transform-origin:center;
  }
  #menuToggle.is-active .bar-top,
  #menuToggle.is-open  .bar-top,
  #menuToggle.open     .bar-top,
  #menuToggle[aria-expanded="true"] .bar-top{
    transform:translateY(6px) rotate(45deg);
  }
  #menuToggle.is-active .bar-middle,
  #menuToggle.is-open  .bar-middle,
  #menuToggle.open     .bar-middle,
  #menuToggle[aria-expanded="true"] .bar-middle{
    opacity:0; transform:translateX(-32px);
  }
  #menuToggle.is-active .bar-bottom,
  #menuToggle.is-open  .bar-bottom,
  #menuToggle.open     .bar-bottom,
  #menuToggle[aria-expanded="true"] .bar-bottom{
    transform:translateY(-6px) rotate(-45deg);
  }
}

/* Hero */
.hero{
  background:radial-gradient(1200px 400px at 50% -10%, rgba(31,58,138,.16), transparent 60%),
             linear-gradient(180deg,#ffffff 0%,#f9fafb 100%);
  border-bottom:1px solid var(--color-border);
}

.hero-inner{
  padding:70px 0;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
  justify-content:center;        /* ✅ centrira cijeli grid */
  margin:0 auto;                 /* ✅ dodatno centrira unutar containera */
  max-width:var(--container);    /* ✅ širina kao ostale sekcije (1180px) */
  padding-inline:16px;           /* ✅ unutarnji razmak lijevo/desno */
}

@media (max-width:980px){
  .hero-inner{
    grid-template-columns:1fr;
    padding:36px 16px;           /* ✅ zadrži rubove i na mobilnim */
  }
}

.tagline{color:#1f3a8a;font-size:1.1rem;margin:.25rem 0 1rem}
.lead{color:#374151;font-size:1.05rem}
.hero-cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}

/* Foto slotovi */
.photo-slot{border:2px dashed #cbd5e1;background:#fff;color:#475569;border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0;box-shadow:var(--shadow-sm)}
.photo-slot img{border-radius:12px;width:100%;height:100%;object-fit:cover}
.photo-hero{aspect-ratio:16/9}

/* Usluge – grid */
.services .grid-4{display:grid; gap:20px; grid-template-columns:repeat(4,1fr)}
@media (max-width:1200px){.services .grid-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.services .grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.services .grid-4{grid-template-columns:1fr}}

/* Kartica usluge */
.card-service{
  padding:14px; display:flex; flex-direction:column; justify-content:flex-start;
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.services .card-service .photo-slot{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  aspect-ratio:16/9; border-radius:12px; overflow:hidden; padding:0; margin-bottom:12px;
}
.services .card-service .photo-slot picture,
.services .card-service .photo-slot img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:12px;
}

.card-service h3,
.card-service p,
.card-service .card-link{padding:0 12px}
.card-service h3{margin-top:12px;font-size:1.1rem}
.card-service p{margin:8px 0 12px;font-size:.95rem}
.card-service .card-link{margin-top:auto;padding-bottom:16px;font-weight:600;color:var(--color-primary)}

/* Benefits */
.benefit{background:#fff;border:1px solid var(--color-border);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.benefit::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--color-primary)}
.benefit.b1::before{background:var(--color-primary)}
.benefit.b2::before{background:var(--color-b2)}
.benefit.b3::before{background:var(--color-b3)}
.benefit.b4::before{background:var(--color-b4)}
.benefit h3{margin-bottom:.25rem}

/* Contact form — PUNA ŠIRINA KONTEJNERA */
.contact-form{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);
  max-width:none; width:100%;
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.form-grid label{display:flex;flex-direction:column;gap:8px}
.form-grid input,.form-grid textarea{width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:10px;font:inherit;transition:border-color .15s, box-shadow .15s}
.form-grid input:focus,.form-grid textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(31,58,138,.15)}
.consent{display:flex;align-items:center;gap:10px}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}

/* FAQ */
.faq{margin-top:40px}
.faq details{border:1px solid var(--color-border);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-weight:bold;color:var(--color-primary)}
/* ispravka: indikator za otvoreni <details> */
.faq details[open] summary::after{content:"–"}

/* Footer */
.site-footer{padding:32px 0;background:#0b1220;color:#e5e7eb}
.site-footer h4{margin:.4rem 0 .2rem}
.logo-footer{height:42px;filter:brightness(0) invert(1);margin-bottom:10px}
.footer-grid{display:grid;gap:20px;grid-template-columns:2fr 1fr 1fr;align-items:start}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer-links a{color:#cfd3dc}.footer-links a:hover{color:#fff}
.footer-contacts,.site-footer .muted{color:#cfd3dc}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}

/* Map & embed frames */
.photo-slot{position:relative;overflow:hidden}
.photo-16x9{aspect-ratio:16/9}
.photo-21x9{aspect-ratio:21/9}
.map-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.photo-21x9{aspect-ratio:16/9}}

/* Lokacije: identičan okvir kao naslovnica */
.section.locations .photo-slot{display:block;width:100%;border-radius:12px;box-shadow:var(--shadow-sm)}
.section.locations .photo-slot.photo-21x9{aspect-ratio:21/9}
@media (max-width:640px){.section.locations .photo-slot.photo-21x9{aspect-ratio:16/9}}
.section.locations .photo-slot .map-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* ========================================== */
/* PATCH: vidljiv X + bez horizontalnog skrola */
/* ========================================== */
@media (max-width:980px){

  /* 🔹 1. Nema horizontalnog pomaka */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }
  body.nav-open, body.menu-active {
    position: relative;
    overflow: hidden !important;
    width: 100%;
  }

  /* 🔹 2. Hamburger – iznad overlaya, crte uvijek vidljive */
  #menuToggle {
    position: fixed !important;
    top: 24px;
    right: 20px;
    z-index: 3001;                 /* iznad mobileNav */
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
  }

  /* 🔹 3. Crte su tamne i ne nestaju ispod overlaya */
  #menuToggle .bar {
    background: #111827;
  }

  /* 🔹 4. Ispravi animaciju – X se formira vidljivo */
  #menuToggle .bar-top,
  #menuToggle .bar-middle,
  #menuToggle .bar-bottom {
    transition: transform .25s ease, opacity .25s ease;
  }
  #menuToggle[aria-expanded="true"] .bar-top {
    transform: translateY(6px) rotate(45deg);
  }
  #menuToggle[aria-expanded="true"] .bar-middle {
    opacity: 0;
    transform: translateX(-32px);
  }
  #menuToggle[aria-expanded="true"] .bar-bottom {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* 🔹 5. Mobile nav – 100% širina bez 100vw */
  #mobileNav {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}