/* ==========================================================================
   Gizidat Growth — Header redesign v2.1.0 (Opsi A)
   29 Okt 2026 · Hermes
   Fixes:
   - .header-cta mobile override bug (was forcing display:inline-flex globally)
   - header height 121px -> 84px on mobile
   - hamburger moved to right edge, 44x44 tap target
   - fullscreen overlay nav with scrim + ESC/scroll lock
   - safe-area inset for iPhone notch
   - top-note dismissible, persisted in localStorage
   ========================================================================== */

/* --- design tokens (header scope) --- */
:root{
  --gzd-header-h:64px;
  --gzd-note-h:30px;
  --gzd-safe-t:env(safe-area-inset-top,0px);
  --gzd-safe-b:env(safe-area-inset-bottom,0px);
  --gzd-z-note:60;
  --gzd-z-scrim:80;
  --gzd-z-header:90;
  --gzd-z-nav:95;
}

/* ============================= TOP NOTE ============================= */
.top-note{
  background:var(--deep);
  color:#fff;
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  padding-top:var(--gzd-safe-t);
}
.top-note[hidden]{display:none}
.top-note-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:var(--gzd-note-h);
  padding-top:4px;
  padding-bottom:4px;
  position:relative;
}
.top-note-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.top-note-close{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.75);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  border-radius:10px;
  -webkit-tap-highlight-color:transparent;
}
.top-note-close:hover,
.top-note-close:focus-visible{color:#fff;background:rgba(255,255,255,.12)}
.top-note-close:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}

/* ============================== HEADER ============================== */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--gzd-z-header);
  /* NOTE: no backdrop-filter here. backdrop-filter creates a containing block
     for position:fixed descendants, which would trap the fullscreen mobile nav
     inside the 56px header bar. Solid translucent bg is visually equivalent. */
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:var(--gzd-header-h);
}

/* brand */
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:var(--deep);
  font-size:1.18rem;
  font-weight:950;
  letter-spacing:-.02em;
  min-height:44px;
  flex:0 0 auto;
}
.brand-mark{
  width:38px;
  height:38px;
  border-radius:50% 50% 48% 52%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--lime),var(--green));
  font-size:1.2rem;
  flex:0 0 auto;
}
.brand-name{white-space:nowrap}
.custom-logo{max-height:40px;width:auto;display:block}

/* right cluster */
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

/* icon buttons (Event + Artikel) with inline label — mobile only */
.header-ic{
  display:none;
  width:44px;
  min-height:42px;
  border-radius:11px;
  place-items:center;
  align-content:center;
  gap:1px;
  grid-template-rows:auto auto;
  color:var(--deep);
  background:var(--cream);
  text-decoration:none;
  flex:0 0 auto;
  padding:4px 2px;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease, color .18s ease;
}
.header-ic:hover,
.header-ic:focus-visible{background:#f0e8d4;color:var(--green)}
.header-ic:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.header-ic svg{display:block}
.header-ic-label{
  display:block;
  font-size:8.5px;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  text-align:center;
  white-space:nowrap;
}

/* CTA — desktop only, explicit display per breakpoint (old bug fixed) */
.header-cta{display:inline-flex}

/* hamburger */
.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:12px;
  background:var(--cream);
  color:var(--deep);
  cursor:pointer;
  place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.menu-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.menu-bars{
  display:grid;
  gap:4px;
  width:20px;
}
.menu-bars i{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--deep);
  transition:transform .2s ease, opacity .2s ease;
}
body.gzd-nav-open .menu-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.gzd-nav-open .menu-bars i:nth-child(2){opacity:0}
body.gzd-nav-open .menu-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================== NAV ============================== */
.site-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
}
.site-nav ul{
  display:flex;
  align-items:center;
  gap:24px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav a{
  display:inline-block;
  padding:10px 2px;
  min-height:44px;
  line-height:24px;
  text-decoration:none;
  color:var(--ink);
  font-size:.92rem;
  font-weight:800;
}
.site-nav a:hover{color:var(--green)}
.site-nav-head,
.nav-close,
.nav-cta,
.nav-scrim{display:none}

/* ===================== DESKTOP: hide mobile bits ===================== */
@media (min-width:921px){
  .menu-toggle{display:none}
  .site-nav-head,.nav-close,.nav-cta{display:none !important}
}

/* ====================== MOBILE / TABLET (<921px) ====================== */
@media (max-width:920px){
  .menu-toggle{display:grid}

  /* Event + Artikel icon buttons visible on mobile/tablet */
  .header-ic{display:grid}

  /* CTA in header hidden on mobile — CTA lives inside the nav panel */
  .header-cta{display:none}

  .header-row{min-height:56px;gap:8px}

  /* --- fullscreen overlay nav --- */
  .site-nav{
    position:fixed;
    /* start below the sticky header so the header stays visible and the
       hamburger can morph into an X in place (no floating second X button) */
    top:calc(var(--gzd-note-h) + var(--gzd-header-h));
    left:0;
    right:0;
    bottom:0;
    z-index:var(--gzd-z-nav);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    margin:0;
    padding:14px 20px calc(var(--gzd-safe-b) + 24px);
    padding-top:14px;
    background:#fff;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .26s cubic-bezier(.32,.72,0,1), visibility .26s;
  }
  .site-nav.open,
  body.gzd-nav-open .site-nav{
    -webkit-transform:translateX(0);
    transform:translateX(0);
    visibility:visible;
  }

  .site-nav-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:14px;
    margin-bottom:8px;
    border-bottom:1px solid var(--line);
    font-size:1.18rem;
    font-weight:950;
    color:var(--deep);
  }
  /* the hamburger itself morphs into an X (see body.gzd-nav-open .menu-bars),
     so a second close button in the panel head is redundant and causes a
     double-X / overlapping-cross confusion at the same corner. */
  .nav-close{display:none !important}

  .site-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
  }
  .site-nav li{border-bottom:1px solid var(--line)}
  .site-nav li:last-child{border-bottom:0}
  .site-nav a{
    display:flex;
    align-items:center;
    width:100%;
    min-height:56px;
    padding:14px 4px;
    font-size:1.06rem;
    font-weight:850;
  }

  .nav-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:auto;
    min-height:52px;
    width:100%;
    font-size:1rem;
  }

  .nav-scrim{
    display:block;
    position:fixed;
    /* start below the header too — never dim the logo/hamburger */
    top:calc(var(--gzd-note-h) + var(--gzd-header-h));
    left:0;
    right:0;
    bottom:0;
    z-index:var(--gzd-z-scrim);
    background:rgba(11,60,44,.42);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    opacity:0;
    transition:opacity .26s ease;
  }
  .nav-scrim:not([hidden]){opacity:1}
  .nav-scrim[hidden]{display:none}

  body.gzd-nav-open{overflow:hidden}
}

@media (max-width:600px){
  :root{--gzd-header-h:56px;--gzd-note-h:28px}
  .top-note{font-size:.72rem}
  .brand{font-size:1.06rem}
  .brand-mark{width:34px;height:34px;font-size:1.05rem}
  .custom-logo{max-height:34px}
  .header-actions{gap:6px}
  .header-ic{width:42px;min-height:40px;padding:3px 2px}
  .header-ic svg{width:18px;height:18px}
  .header-ic-label{font-size:8px}
}

/* very small phones — keep logo + 2 icons + hamburger on one row */
@media (max-width:359px){
  .header-actions{gap:5px}
  .header-ic{width:38px;min-height:38px;padding:3px 1px}
  .header-ic svg{width:16px;height:16px}
  .header-ic-label{font-size:7.5px}
  .menu-toggle{width:38px;height:38px}
  .brand-mark{width:30px;height:30px;font-size:.95rem}
  .custom-logo{max-height:30px}
}

/* ===================== SAFE AREA (sticky header) ===================== */
@supports (padding-top: env(safe-area-inset-top)){
  body.gzd-has-note .site-header{top:0}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  .site-nav,.nav-scrim,.menu-bars i{transition:none !important}
}