/**
 * grfi-base.css — Golfreisje.nl
 * Gedeelde basis: kleurvariabelen + nav-component, voorheen 17x
 * gedupliceerd (1x per template). Overige, pagina-specifieke CSS
 * blijft lokaal in elk template's eigen <style>-blok staan.
 *
 * Bevat de VOLLEDIGE vereniging van alle variabelen die ooit in een
 * template werden gedefinieerd, ook variabelen die maar op 1-2
 * pagina's gebruikt worden (--hotel, --g, --err, etc.) — een
 * ongebruikte CSS-variabele heeft geen effect, dus dit is veilig en
 * voorkomt dat ieder bestand zijn eigen sub-set hoeft te definiëren.
 */

:root{
  --f:#2a4d3a;--fm:#3a6b50;--fl:#eaf1ec;--ff:#f3f7f4;
  --ch:#c9a96e;--cl:#f0e6d3;--cd:#a07c40;
  --ink:#1c1b18;--mu:#7a776f;--mu2:#a09c94;
  --p:#f8f6f1;--p2:#f2efe8;--wh:#fff;--stone:#e8e3da;
  --bd:rgba(28,27,24,.09);--bd2:rgba(28,27,24,.14);
  --sh:0 2px 12px rgba(28,27,24,.07);
  --shm:0 8px 32px rgba(28,27,24,.10);
  --shl:0 20px 60px rgba(28,27,24,.14);
  --serif:'Fraunces',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --hotel:#1a5276;--hotel-l:#d6eaf8;
  --g:#1e6b3a;--gl:#d4edda;
  --err:#b3432b;--errl:#fbeae5;
}

/* NAV — canonieke "sticky" variant, gebruikt door 15 van de 17
   templates. front-page.php en page-kaart.php hebben een bewust
   afwijkende "fixed + transparent-on-scroll" hero-nav en behouden
   daarom hun eigen lokale .nav-override (zie die bestanden).
   De regels hieronder gebruiken bewust ".nav " als voorvoegsel
   (i.p.v. kale ".nav-links") zodat de specificiteit hoger is dan
   die lokale per-pagina overrides — zo hoeven front-page.php en
   page-kaart.php niet apart aangepast te worden en blijft de
   uitlijning overal identiek. */
.nav{position:sticky;top:0;z-index:500;height:64px;background:rgba(248,246,241,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--bd);box-shadow:var(--sh)}
.nav-in{max-width:1280px;margin:0 auto;padding:0 40px;height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--serif);font-size:1.35rem;color:var(--ink);flex-shrink:0}
.logo em{font-style:italic;color:var(--ch)}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{font-size:.82rem;font-weight:600;color:var(--ink);transition:color .2s}
.nav-links a:hover,.nav-links a.on,.nav-links .current-menu-item>a{color:var(--f)}
.nav-cta{background:var(--f);color:#fff;font-size:.76rem;font-weight:600;padding:9px 20px;border-radius:100px}

/* Verfijnde uitlijning: hogere specificiteit dan bovenstaand +
   dan front-page.php/page-kaart.php's lokale .nav-links-regels. */
.nav .nav-links{display:flex;align-items:center;gap:34px;list-style:none;margin-left:64px}
.nav .nav-links li{position:relative}
.nav .nav-links a{position:relative;display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding-bottom:8px;transition:color .2s;line-height:1}
.nav .nav-links a::after{content:'';position:absolute;left:50%;right:50%;bottom:0;height:2px;background:var(--ch);transition:left .25s ease,right .25s ease}
.nav .nav-links a:hover,.nav .nav-links .current-menu-item>a{color:var(--f)}
.nav .nav-links a:hover::after,.nav .nav-links .current-menu-item>a::after{left:0;right:0}
.nav .nav-links .current-menu-item>a::before{content:'';position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--ch)}
.nav::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ch)}
.nav .nav-cta{position:relative;margin-left:38px;white-space:nowrap}
.nav .nav-cta::before{content:'';position:absolute;left:-19px;top:50%;transform:translateY(-50%);width:1px;height:24px;background:var(--bd2)}

/* Hamburger-knop — zichtbaar vanaf 768px en smaller, zie media-query
   onderaan. Werkt op alle 17 templates omdat .nav-toggle centraal
   vanuit grfi_render_nav() in functions.php wordt geoutput. */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;padding:0;margin-left:12px;background:transparent;border:0;cursor:pointer;flex-shrink:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:768px){
  .nav-toggle{display:flex}
  .nav .nav-cta{display:none}
  .nav .nav-links{display:none;margin-left:0}
  .nav.nav-open .nav-links{
    display:flex;flex-direction:column;gap:0;list-style:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--wh);border-bottom:1px solid var(--bd);
    box-shadow:var(--shm);padding:8px 24px 20px;
  }
  .nav.nav-open .nav-links a{display:block;padding:14px 2px;font-size:.95rem;border-bottom:1px solid var(--bd)}
  .nav.nav-open .nav-links li:last-child a{border-bottom:0}
  .nav.nav-open .nav-links a::after,.nav.nav-open .nav-links a::before{display:none}
}
@media(min-width:769px){
  .nav-toggle{display:none}
}