/*
 * Zaglavlje, podnožje i osnova, zajedničko svim stranicama.
 *
 * Izdvojeno iz index.html kad su kartice dobile svoje stranice: bez ovoga bi se
 * isti header održavao na tri mjesta i razišao bi se prvi put kad se promijeni.
 */

  :root{
    --teal:#1f6b78; --teal-dark:#16414a; --teal-light:#2f8f9d;
    --cream:#fdf3e7; --cream-2:#f9ecdb; --surface:#fff; --border:#ece0d0;
    --ink:#153840; --ink-soft:#7d8f94; --ink-mid:#4d6167;
    --coral:#e2573c; --coral-dark:#b8422c; --brick:#b0432f; --yellow:#f0c04c; --green:#4a9e6f;
    --r-card:22px; --r-tile:18px; --r-btn:16px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--cream);color:var(--ink);
    font:17px/1.6 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:var(--teal);text-decoration:none}
  a:hover{color:var(--teal-dark)}
  h1,h2,h3{margin:0;letter-spacing:-0.02em;text-wrap:balance}
  p{margin:0;text-wrap:pretty}
  .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
  .section{padding-block:88px}
  .eyebrow{font-size:13px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--coral)}

  /* ---------- nav ---------- */
  .nav{position:sticky;top:0;z-index:20;background:rgba(253,243,231,0.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
  .nav-in{display:flex;align-items:center;gap:24px;height:72px}
  .brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:800;color:var(--ink)}
  .mark{width:40px;height:40px;border-radius:12px;background:var(--teal);position:relative;flex:none}
  .mark i{position:absolute;width:18%;height:18%;border-radius:50%}
  .mark i:nth-child(1){background:var(--coral);left:22%;top:22%}
  .mark i:nth-child(2){background:var(--yellow);left:41%;top:41%}
  .mark i:nth-child(3){background:#5a86c9;left:60%;top:60%}
  .nav-links{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:16px;font-weight:700;color:var(--ink-mid)}
  .nav-links a{color:var(--ink-mid)}
  .nav-links a:hover{color:var(--ink)}
  .nav-links .btn,.nav-links .btn:hover{color:#fff}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:56px;padding:0 26px;border-radius:var(--r-btn);font-weight:800;font-size:17px;
    background:var(--coral);color:#fff;box-shadow:0 5px 0 var(--coral-dark);transition:transform .12s,box-shadow .12s}
  .btn:hover{color:#fff;transform:translateY(2px);box-shadow:0 3px 0 var(--coral-dark)}
  .btn-ghost{background:var(--surface);color:var(--ink);box-shadow:0 5px 0 var(--border)}
  .btn-ghost:hover{color:var(--ink);box-shadow:0 3px 0 var(--border)}
  .btn-sm{min-height:48px;padding:0 20px;font-size:16px}
  .nav .btn{flex:none}

  footer{padding-block:56px 64px;color:var(--ink-soft);font-size:15px}
  .foot-top{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding-bottom:24px;border-top:1px solid var(--border);padding-top:32px}
  .foot-links{display:flex;flex-wrap:wrap;gap:20px;margin-left:auto;font-weight:700}

  /* ---------- meni na telefonu ---------- */
  /*
   * Prekidač je pravo polje za potvrdu, ne skripta: meni mora raditi i kad
   * JavaScript ne stigne ili padne. Skrivena je samo slika polja, ne i samo
   * polje - tako ostaje dohvatljivo tastaturom i čitačem ekrana.
   */
  .nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .nav-burger{display:none;margin-left:auto;flex:none;width:48px;height:48px;
    border-radius:14px;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    cursor:pointer;background:var(--surface);box-shadow:0 3px 0 var(--border)}
  .nav-burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);
    transition:transform .18s,opacity .18s}
  .nav-toggle:focus-visible ~ .nav-burger{outline:3px solid var(--teal);outline-offset:3px}
  /* Otvoren meni: tri crte postaju znak za zatvaranje. */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  @media (max-width:900px){
    .nav-burger{display:flex}

    .nav-links{display:none;position:absolute;left:0;right:0;top:72px;
      /* U koloni bi `center` iz trake stisnuo stavke i crte na širinu teksta. */
      flex-direction:column;align-items:stretch;gap:0;margin-left:0;padding:4px 24px 20px;
      background:var(--cream);border-bottom:1px solid var(--border);
      box-shadow:0 18px 30px -18px rgba(21,56,64,0.35)}
    .nav-toggle:checked ~ .nav-links{display:flex}
    .nav-links a{display:flex;align-items:center;min-height:52px;font-size:18px;
      border-bottom:1px solid var(--border)}
    .nav-links .btn{margin-top:18px;width:100%;border-bottom:0}
  }

/* Stranica na kojoj se nalazimo; bez oznake posjetilac ne zna gdje je. */
  .nav-links a[aria-current="page"]{color:var(--ink);position:relative}
  .nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
    height:3px;border-radius:2px;background:var(--coral)}

  @media (max-width:900px){
    .nav-links a[aria-current="page"]{color:var(--coral)}
    .nav-links a[aria-current="page"]::after{display:none}
  }