/* =========================================================================
   nav.css - "the pen" header navigation.
   Shared by every page with header#site-header. Loaded after motion.css and
   the page's inline <style>; selectors are prefixed with #site-header (or
   the drawer id) so they out-ranks the per-page duplicates.

   Everything is plain text on the page's own header (no pills, no fills).
   A small fountain pen marks where you are: the shared .nav-indicator
   (positioned by page JS with width + translateX) is drawn as a thin
   hand-inked squiggle with a tilted pen at its right end. It rests under
   the CURRENT link, glides to whichever link is hovered (springy ease,
   the pen wiggles on arrival) and glides back on mouse leave.
   404.html has no .nav-indicator: the same pen + squiggle is drawn on the
   link itself.

   Text colour:
   - photo-hero pages (index, oor-my) start with a transparent header over
     a dark photo -> light text until .scrolled
   - every other page has a cream header/hero -> dark brown text always
   ========================================================================= */

#site-header, #mobileNav{
  --n-paper:var(--paper,#ffffff);
  --n-cream:var(--cream,#ffffff);
  --n-deep:var(--brown-deep,#000000);
  --n-brown:var(--brown,#111111);
  --n-black:#111111;
  --n-gold:var(--n-black);       /* accent is black: every clickable thing stays black */
  --n-ink:var(--ink,#111111);
  --n-soft:var(--ink-soft,#4a4a4a);
  --n-line:var(--line,#e2e2e2);
  --n-expo:var(--hl-ez-expo,cubic-bezier(.19,1,.22,1));
  --n-spring:cubic-bezier(.34,1.5,.5,1);

  /* dark-on-cream (default) */
  --n-fg:rgba(0,0,0,.68);      /* resting link */
  --n-fg-hover:var(--n-black);    /* hovered link */
  --n-fg-current:var(--n-black);  /* current page */
  --n-fg-strong:var(--n-black);   /* hamburger, account, CTA */
  --n-pen:var(--n-black);         /* pen body */
  --n-ink-line:var(--n-black);    /* the wavy line */
}
/* photo-hero pages (index, oor-my), desktop, before scrolling: the header is
   transparent over the dark photo, so nav items and logo are white there.
   Everywhere else (cream pages, and once scrolled) they stay black. */
@media (min-width:861px){
  body:has(.hero-image, .about-hero-bg) #site-header:not(.scrolled){
    --n-fg:rgba(255,255,255,.82);
    --n-fg-hover:#fff;
    --n-fg-current:#fff;
    --n-fg-strong:#fff;
    --n-pen:#fff;
    --n-ink-line:#fff;
  }
  body:has(.hero-image, .about-hero-bg) #site-header:not(.scrolled) .logo,
  body:has(.hero-image, .about-hero-bg) #site-header:not(.scrolled) .logo *{ color:#fff; }
  body:has(.hero-image, .about-hero-bg) #site-header:not(.scrolled) nav ul li a,
  body:has(.hero-image, .about-hero-bg) #site-header:not(.scrolled) .header-cta > a,
  body:has(.hero-image, .about-hero-bg) #site-header:not(.scrolled) .header-cta .account-btn{
    color:var(--n-fg-strong);
    text-shadow:0 1px 6px rgba(0,0,0,.3);
  }
  body:has(.hero-image, .about-hero-bg) #site-header:not(.scrolled) nav ul li a:not(:hover):not(.current){ color:var(--n-fg); }
}

/* ---------- Links: plain text ---------- */
#site-header nav ul{ gap:2.4rem; }
#site-header nav ul li a{
  color:var(--n-fg);
  font-weight:400;
  letter-spacing:.16em;
  background:none;
  border:0;
  transition:
    color .4s var(--n-expo),
    transform .6s var(--n-spring),
    opacity .4s ease;
}
#site-header nav ul li a.current{
  color:var(--n-fg-current);
  transform:none;
}
#site-header nav ul li a:active{ transform:translateY(0) scale(.97);transition-duration:.14s; }
#site-header nav ul li a:focus-visible{
  color:var(--n-fg-hover);
  outline:2px solid var(--n-gold);
  outline-offset:5px;
  border-radius:3px;
}
@media (hover:hover){
  #site-header nav ul li a:hover{
    color:var(--n-fg-hover);
    transform:translateY(-2px);
  }
  /* the pen is on its way to the hovered link: the current one recedes */
  #site-header nav ul:has(a:hover) a.current:not(:hover){ color:var(--n-fg); }
}
#site-header nav ul:has(a:focus-visible) a.current:not(:focus-visible){ color:var(--n-fg); }

/* ---------- The pen + ink (shared .nav-indicator) ---------- */
#site-header nav ul .nav-indicator{
  position:absolute;
  left:0;
  top:100%;
  bottom:auto;
  height:8px;
  margin-top:2px;
  width:0;
  border-radius:0;
  background:none;
  overflow:visible;
  opacity:0;
  pointer-events:none;
  color:var(--n-ink-line);
  transition:
    transform .75s var(--n-spring),
    width .6s var(--n-expo),
    opacity .3s ease,
    color .4s ease;
}
#site-header nav ul .nav-indicator.visible{ opacity:1; }

/* fine hand-drawn wave spanning the link width: 1px stroke, small amplitude, ends fading */
#site-header nav ul .nav-indicator::before,
#site-header nav ul li a::before{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:6px;
  background:currentColor;
  -webkit-mask:
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 3 C1.5 .9 4.5 .9 6 3 S10.5 5.1 12 3' fill='none' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 12px 6px repeat-x;
  -webkit-mask-composite:source-in;
          mask:
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 3 C1.5 .9 4.5 .9 6 3 S10.5 5.1 12 3' fill='none' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 12px 6px repeat-x;
          mask-composite:intersect;
}

/* the pen: nib touches the right end of the squiggle, body leans up-right */
#site-header nav ul .nav-indicator::after,
#site-header nav ul li a::after{
  content:'';
  position:absolute;
  width:17px;height:17px;
  left:calc(100% - 8.5px);
  top:-11.5px;                     /* nib tip rests on the hairline */
  background:var(--n-pen);
  transform-origin:50% 94%;
  transform:rotate(38deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22.5 8.3 14.2Q12 12.4 15.7 14.2Z'/%3E%3Cpath d='M12 21.2V16.4'/%3E%3Cpath d='M8.9 13.2 9.7 2.6H14.3L15.1 13.2'/%3E%3Cpath d='M9.3 6.6H14.7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22.5 8.3 14.2Q12 12.4 15.7 14.2Z'/%3E%3Cpath d='M12 21.2V16.4'/%3E%3Cpath d='M8.9 13.2 9.7 2.6H14.3L15.1 13.2'/%3E%3Cpath d='M9.3 6.6H14.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
#site-header nav ul .nav-indicator::after{ transition:background-color .4s ease; }

/* tiny wiggle when the pen lands on a newly hovered link (two alternating
   names so switching links restarts the animation) */
@keyframes navPenA{
  0%{ rotate:0deg; }
  40%{ rotate:-6deg; }
  100%{ rotate:0deg; }
}
@keyframes navPenB{
  0%{ rotate:0deg; }
  40%{ rotate:-6deg; }
  100%{ rotate:0deg; }
}
@media (hover:hover){
  #site-header nav ul:has(li:nth-child(1) a:hover) .nav-indicator::after,
  #site-header nav ul:has(li:nth-child(3) a:hover) .nav-indicator::after,
  #site-header nav ul:has(li:nth-child(5) a:hover) .nav-indicator::after{ animation:navPenA .7s .4s var(--n-expo) both; }
  #site-header nav ul:has(li:nth-child(2) a:hover) .nav-indicator::after,
  #site-header nav ul:has(li:nth-child(4) a:hover) .nav-indicator::after{ animation:navPenB .7s .4s var(--n-expo) both; }
}

/* pages that DO have the shared indicator: links draw nothing themselves
   (also cancels per-page decorations such as the old 404 highlighter) */
#site-header nav ul:has(.nav-indicator) li a::before,
#site-header nav ul:has(.nav-indicator) li a::after{ content:none !important;display:none !important; }

/* ----- fallback: pages with no .nav-indicator (404) - draw on the link ----- */
#site-header nav ul:not(:has(.nav-indicator)) li a{ margin-bottom:8px; }
#site-header nav ul:not(:has(.nav-indicator)) li a::before,
#site-header nav ul:not(:has(.nav-indicator)) li a::after{
  content:'' !important;
  display:block !important;
  top:auto;
  clip-path:none;
  height:6px;
  border:0;
  border-radius:0;
  opacity:0;
  color:var(--n-ink-line);
  transition:opacity .3s ease, clip-path .6s var(--n-expo), left .6s var(--n-expo);
}
#site-header nav ul:not(:has(.nav-indicator)) li a::before{
  bottom:-8px;left:.3rem;right:.3rem;
  background:currentColor;
  clip-path:inset(0 100% 0 0);
}
#site-header nav ul:not(:has(.nav-indicator)) li a::after{
  width:17px;height:17px;
  bottom:auto;
  top:calc(100% - 10.5px);
  left:.3rem;
  right:auto;
  transform:rotate(38deg);
  background:var(--n-pen);
}
#site-header nav ul:not(:has(.nav-indicator)) li a:focus-visible::before,
#site-header nav ul:not(:has(.nav-indicator)) li a.current::before{ opacity:1;clip-path:inset(0 0 0 0); }
#site-header nav ul:not(:has(.nav-indicator)) li a:focus-visible::after,
#site-header nav ul:not(:has(.nav-indicator)) li a.current::after{ opacity:1;left:calc(100% - .3rem - 8.5px); }
@media (hover:hover){
  #site-header nav ul:not(:has(.nav-indicator)) li a:hover::before{ opacity:1;clip-path:inset(0 0 0 0); }
  #site-header nav ul:not(:has(.nav-indicator)) li a:hover::after{ opacity:1;left:calc(100% - .3rem - 8.5px); }
}

/* ---------- "Meld aan" (signed out): plain text, arrow slides in ---------- */
#site-header .header-cta > a#signinLink{
  position:relative;
  gap:.55rem;
  padding:.4rem 4px .4rem 0;
  border:0 !important;
  border-radius:0;
  background:none !important;
  box-shadow:none;
  color:var(--n-fg-strong);
  transform:none;
  letter-spacing:.16em;
  transition:
    color .4s var(--n-expo),
    text-indent .5s var(--n-expo),
    padding .5s var(--n-expo),
    transform .5s var(--n-spring);
}
#site-header .header-cta > a#signinLink svg{
  transition:transform .5s var(--n-expo), opacity .3s ease;
}
#site-header .header-cta > a#signinLink::after{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:14px;height:14px;
  margin-top:-7px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity:0;
  transform:translateX(-14px);
  transition:transform .55s var(--n-expo), opacity .3s ease;
  pointer-events:none;
}
#site-header .header-cta > a#signinLink:focus-visible{
  color:var(--n-fg-hover);
  outline:2px solid var(--n-gold);
  outline-offset:5px;
  text-indent:4px;padding-right:0;
}
#site-header .header-cta > a#signinLink:focus-visible svg{ transform:translateX(12px);opacity:0; }
#site-header .header-cta > a#signinLink:focus-visible::after{ opacity:1;transform:none; }
@media (hover:hover){
  #site-header .header-cta > a#signinLink:hover{
    color:var(--n-fg-hover);
    background:none !important;
    border:0 !important;
    box-shadow:none;
    transform:none;
    text-indent:4px;          /* label slides right...            */
    padding-right:0;          /* ...total width stays the same    */
  }
  #site-header .header-cta > a#signinLink:hover svg{ transform:translateX(12px);opacity:0; }
  #site-header .header-cta > a#signinLink:hover::after{ opacity:1;transform:none; }
}
#site-header .header-cta > a#signinLink:active{ transform:scale(.96);transition-duration:.14s; }

/* ---------- Account button (signed in): plain, caret rotates ---------- */
#site-header .account-btn{
  background:none;
  border:0;
  box-shadow:none;
  padding:.2rem 0;
  color:var(--n-fg-strong);
  transition:color .4s var(--n-expo);
}
#site-header .account-name{ color:inherit; }
#site-header .account-caret{ transition:transform .5s var(--n-spring); }
#site-header .account-menu.open .account-caret{ transform:rotate(180deg); }
#site-header .account-btn:focus-visible{ outline:2px solid var(--n-gold);outline-offset:5px;border-radius:4px; }
#site-header .account-avatar{ transition:border-color .4s var(--n-expo), transform .5s var(--n-spring); }
@media (hover:hover){
  #site-header .account-btn:hover{ color:var(--n-fg-hover); }
  #site-header .account-btn:hover .account-avatar{ transform:scale(1.06); }
  #site-header .account-menu:not(.open) .account-btn:hover .account-caret{ transform:translateY(2px); }
}

/* dropdown: refined entrance, scales/fades from its top-right corner */
#site-header .account-dropdown{
  top:calc(100% + 14px);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(18px);
          backdrop-filter:blur(18px);
  border:1px solid var(--n-line);
  border-radius:12px;
  padding:.4rem;
  min-width:184px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.45);
  transform-origin:top right;
  transform:translateY(-8px) scale(.92);
  opacity:0;
  transition:opacity .28s ease, transform .5s var(--n-spring), visibility 0s linear .5s;
}
#site-header .account-menu.open .account-dropdown{
  transform:translateY(0) scale(1);
  opacity:1;
  transition:opacity .25s ease, transform .55s var(--n-spring), visibility 0s linear 0s;
}
#site-header .account-dropdown a,
#site-header .account-dropdown button{
  border-radius:8px;
  color:var(--n-soft);
  transition:color .25s ease, transform .4s var(--n-expo), background-color .25s ease;
}
#site-header .account-dropdown a:hover,
#site-header .account-dropdown button:hover{
  background:rgba(0,0,0,.06);
  color:var(--n-black);
  transform:translateX(3px);
}
#site-header .account-dropdown a:focus-visible,
#site-header .account-dropdown button:focus-visible{ outline:2px solid var(--n-gold);outline-offset:-2px; }

/* ---------- Mobile: hamburger + drawer ---------- */
@media (max-width:860px){
  #site-header .nav-toggle span{ background:var(--n-fg-strong); }
  #site-header .nav-toggle:focus-visible{ outline:2px solid var(--n-gold);outline-offset:2px;border-radius:4px; }
  /* drawer is cream: the X must be dark once it is open */
  #site-header .nav-toggle.active span{ background:var(--n-ink); }

  #mobileNavOverlay{ background:rgba(0,0,0,.34); }
  #mobileNav{
    counter-reset:mnav;
    background:linear-gradient(170deg,var(--n-paper) 0%,var(--n-cream) 100%);
    border-left:1px solid var(--n-line);
    box-shadow:-24px 0 60px -20px rgba(0,0,0,.35);
    justify-content:flex-start;
    padding:6rem 2.4rem 2.2rem;
    overflow-y:auto;
    transition:transform .65s var(--n-expo);
  }
  #mobileNav .mobile-nav-eyebrow{ left:2.4rem; }

  #mobileNav > a{
    counter-increment:mnav;
    position:relative;
    display:flex;
    align-items:baseline;
    gap:1rem;
    padding:.7rem 0;
    font-size:2rem;
    line-height:1.15;
    color:var(--n-ink);
    border-bottom:1px solid var(--n-line);
    opacity:0;
    transform:translateX(36px);
    transition:opacity .55s ease, transform .75s var(--n-expo), color .3s ease;
  }
  #mobileNav > a::before{
    content:'0' counter(mnav);
    font-family:'Jost',sans-serif;
    font-size:.68rem;
    letter-spacing:.18em;
    color:var(--n-gold);
    transform:translateY(-.35em);
  }
  #mobileNav.open > a{ opacity:1;transform:none; }
  #mobileNav.open > a:nth-child(2){ transition-delay:.10s; }
  #mobileNav.open > a:nth-child(3){ transition-delay:.16s; }
  #mobileNav.open > a:nth-child(4){ transition-delay:.22s; }
  #mobileNav.open > a:nth-child(5){ transition-delay:.28s; }
  #mobileNav.open > a:nth-child(6){ transition-delay:.34s; }
  #mobileNav > a:active{ color:var(--n-gold); }
  #mobileNav > a:focus-visible{ outline:2px solid var(--n-gold);outline-offset:2px; }

  /* small pen beside the current page (matched from the desktop nav's .current) */
  #mobileNav > a::after{
    content:'';
    width:26px;height:26px;
    margin-left:auto;
    align-self:center;
    background:var(--n-deep);
    transform:rotate(38deg) scale(.4);
    opacity:0;
    transition:opacity .4s ease, transform .7s var(--n-spring);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22.5 8.3 14.2Q12 12.4 15.7 14.2Z'/%3E%3Cpath d='M12 21.2V16.4'/%3E%3Cpath d='M8.9 13.2 9.7 2.6H14.3L15.1 13.2'/%3E%3Cpath d='M9.3 6.6H14.7'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22.5 8.3 14.2Q12 12.4 15.7 14.2Z'/%3E%3Cpath d='M12 21.2V16.4'/%3E%3Cpath d='M8.9 13.2 9.7 2.6H14.3L15.1 13.2'/%3E%3Cpath d='M9.3 6.6H14.7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body:has(#site-header nav a.current[href="/"]) #mobileNav.open > a[href="/"]::after,
  body:has(section.hero) #mobileNav.open > a[href="/"]::after,   /* home has no .current link */
  body:has(#site-header nav a.current[href="/skryfwerk"]) #mobileNav.open > a[href="/skryfwerk"]::after,
  body:has(#site-header nav a.current[href="/fotografie"]) #mobileNav.open > a[href="/fotografie"]::after,
  body:has(#site-header nav a.current[href="/oor-my"]) #mobileNav.open > a[href="/oor-my"]::after,
  body:has(#site-header nav a.current[href="/kontak"]) #mobileNav.open > a[href="/kontak"]::after,
  #mobileNav.open > a:active::after{
    opacity:1;
    transform:rotate(38deg) scale(1);
    transition-delay:.55s;
  }

  /* account block: plain text at the bottom of the drawer */
  #mobileNav .mobile-account{
    margin-top:auto;
    padding-top:2rem;
    gap:.4rem;
    border-top:0;
  }
  #mobileNav .mobile-account .m-login,
  #mobileNav .mobile-account a.m-login,
  #mobileNav .mobile-account button.m-login{
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    width:auto;
    padding:.6rem 0;
    border:0;
    background:none;
    color:var(--n-deep);
    font-family:'Jost',sans-serif;
    font-size:.82rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .55s ease, transform .75s var(--n-expo), color .3s ease;
  }
  #mobileNav .mobile-account .m-login::before,
  #mobileNav .mobile-account .m-login::after{ content:none; }
  #mobileNav.open .mobile-account .m-login{ opacity:1;transform:none;transition-delay:.42s; }
  #mobileNav.open .mobile-account .m-login + .m-login{ transition-delay:.48s; }
  #mobileNav .mobile-account a.m-login#mobileSigninLink::after{
    content:'\2192';
    color:var(--n-gold);
    font-size:1.05rem;
    letter-spacing:0;
  }
  #mobileNav .mobile-account .m-login:active{ color:var(--n-gold);transition-delay:0s;transition-duration:.14s; }
  #mobileNav .mobile-account .m-login:focus-visible{ outline:2px solid var(--n-gold);outline-offset:3px; }
}

/* ---------- Narrow desktops ---------- */
@media (min-width:861px) and (max-width:1100px){
  #site-header nav ul{ gap:1.6rem; }
  #site-header nav ul li a{ letter-spacing:.12em; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  #site-header nav ul li a,
  #site-header nav ul li a::before,
  #site-header nav ul li a::after,
  #site-header nav ul .nav-indicator,
  #site-header .header-cta > a#signinLink,
  #site-header .header-cta > a#signinLink svg,
  #site-header .header-cta > a#signinLink::after,
  #site-header .account-btn,
  #site-header .account-caret,
  #site-header .account-avatar,
  #site-header .account-dropdown,
  #mobileNav,
  #mobileNav > a,
  #mobileNav > a::after,
  #mobileNav .mobile-account .m-login{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  #site-header nav ul .nav-indicator::after{ animation:none !important; }
  #site-header nav ul li a:hover,
  #site-header nav ul li a:active,
  #site-header .header-cta > a#signinLink:active,
  #site-header .account-btn:hover .account-avatar,
  #site-header .account-dropdown a:hover,
  #site-header .account-dropdown button:hover{ transform:none !important; }
  #site-header .header-cta > a#signinLink::after{ transform:none !important; }
  #site-header .header-cta > a#signinLink:hover svg,
  #site-header .header-cta > a#signinLink:focus-visible svg{ transform:none !important; }
  #site-header .account-dropdown{ transform:none !important; }
  #mobileNav > a,
  #mobileNav .mobile-account .m-login{ transform:none !important; }
}