:root{
  --blue: rgba(207,233,255,.55);
  --orange: rgba(255,227,196,.55);
  --ink: #26323a;
  --border: rgba(17,68,102,.18);
  --card-bg: rgba(255,255,255,.95);
  --shadow: 0 10px 30px rgba(17,68,102,.07);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#fff; color:var(--ink); line-height:1.65; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

.brand-wrap{ text-align:center; padding:24px 16px 8px; }
.brand{ margin:0; font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; letter-spacing:.3px; color:#0f3e5a; }

.workspace{
  width:min(900px,92%);
  margin:16px auto 32px;
  padding:clamp(14px,2vw,22px);
  border-radius:16px;
  background:linear-gradient(135deg,var(--blue),var(--orange));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:clamp(14px,2.2vw,22px);
  margin:14px 0;
  box-shadow:var(--shadow);
}
.card h2{ margin:0 0 .4rem; font-size:clamp(1.05rem,2.6vw,1.35rem); }
.card .muted{ color:#5d6b75; font-size:.95rem; }

.foot{ text-align:center; color:#4a6372; font-size:.95rem; padding:18px 12px 28px; }


/*faq*/
.faq .faq-title {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq .btn-outline {
  font: inherit; padding: .3rem .8rem;
  border:1px solid #ccc; border-radius:.4rem;
  background:transparent; cursor:pointer;
}
.faq-content.hidden { display:none; }
.faq details { border-top:1px solid #eee; padding:.6rem 0; }
.faq summary { cursor:pointer; list-style:none; font-weight:600; position:relative; padding-right:2rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content: "+"; position:absolute; right:0; top:0; font-weight:800;
}
.faq details[open] summary::after { content: "–"; }

/* ===== Fixed Nav (minimal, robust) ===== */
:root { --nav-h: 60px; }

/* sadržaj ne smije uletjeti ispod fixa */
body { padding-top: var(--nav-h); }
body.no-scroll { overflow: hidden; }

.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 2000;
  height: var(--nav-h);
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 12px;
}

/* logo lijevo, linkovi centrirani na desktopu */
.site-nav .logo {
  font-weight: 800; text-decoration: none; color: #42A5F5;
}

/* hamburger (desktop: skriven) */
.nav-toggle {
  margin-left: auto;
  width: 40px; height: 36px;
  display: none;
  border: 1px solid #ddd; border-radius: 8px;
  background: transparent; cursor: pointer;
}
.nav-toggle .bar { display:block; height:2px; margin:6px 7px; background:#222; }

/* linkovi */
.nav-menu {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex: 1;                     /* zauzmi prostor između loga i hamburgera */
  justify-content: center;     /* centriraj linkove */
}

.nav-menu a {
  display: block; padding: .45rem .7rem; border-radius: .5rem;
  color: #222; text-decoration: none; font-weight: 600;
}
.nav-menu a:hover { background: #f3f4f6; }
.nav-menu a.is-active, .nav-menu a[aria-current="page"] { background:#e8eefc; color:#0b57d0; }

/* ===== Mobile ===== */
@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }

  /* na mobu dropdown ispod bara, full-width, skriven dok nema .open */
  .nav-menu {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 10px 20px rgba(0,0,0,.06);
    max-height: calc(100vh - var(--nav-h)); overflow:auto;
    z-index: 2001;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: .9rem 1rem; }
}

/* (opcija) naslov ispod menija */
.brand { text-align:center; font-weight:800; margin: 1rem auto; padding: 0 1rem; }