/* ===================================================================
   BuzzBij.nl — header.css (definitieve uniforme versie)
   =================================================================== */

/* =========================
   MOBIEL HAMBURGER MENU
   ========================= */
@media (max-width: 960px){

  #bb-site-header .bb-header-wrap{
    grid-template-columns: auto 1fr auto;
    column-gap: 12px;
    padding: 10px 14px;
  }
  #bbBrand{ grid-column:1; justify-self:start; }
  #bb-menu-toggle{ grid-column:3; justify-self:end; }

  .bb-login{ display:none !important; }
  nav#bb-nav .bb-login-mobile{ display:block !important; }

  #bb-menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:12px;
    border:1px solid rgba(0,0,0,.18);
    background: rgba(0,0,0,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.18);
    cursor:pointer; -webkit-tap-highlight-color: transparent;
    color:#fff;
  }
  #bb-menu-toggle:focus-visible{ outline:2px solid rgba(255,255,255,.4); outline-offset:2px; }

  #bb-menu-toggle .bb-menu-icon,
  #bb-menu-toggle .bb-menu-icon::before,
  #bb-menu-toggle .bb-menu-icon::after{
    content:""; display:block; width:20px; height:2px; border-radius:2px; background:currentColor;
    position:relative;
  }
  #bb-menu-toggle .bb-menu-icon::before{ position:absolute; top:-6px; left:0; }
  #bb-menu-toggle .bb-menu-icon::after{ position:absolute; top:6px; left:0; }

  .bb-menu-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index: 998;
  }

  #bb-site-header nav#bb-nav{
    position: fixed;
    top: 0; right: 0;
    transform: translateX(100%);
    width: min(88vw, 360px);
    height: min(100dvh, 100svh, 100vh);
    z-index: 999;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 10px;
    padding: calc(env(safe-area-inset-top, 0) + 18px) 20px 24px 20px;
    background: rgba(16,18,20,.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: none; box-shadow: none; border-radius: 0;
    transition: transform .24s ease;
    overscroll-behavior: contain;
    will-change: transform;
  }

  #bb-site-header nav#bb-nav a{
    display:block; width:100%;
    padding: 16px 4px;
    font-size: 19px; line-height: 1.25;
    font-weight: 800; letter-spacing: .02em;
    text-decoration: none; color: #fff;
  }

  .bb-underbar--pill .bb-link::after,
  .bb-underbar--pill .bb-home-icon::after{
    display:none !important; content:none !important;
  }

  html[data-menu="open"] #bb-site-header nav#bb-nav{ transform: translateX(0); }
  html[data-menu="open"] .bb-menu-backdrop{ opacity:1; pointer-events:auto; }
  html[data-menu="open"] body{ overflow:hidden; }
}

@media (min-width: 961px){
  nav#bb-nav .bb-login-mobile{ display:none !important; }
}

/* ================================================================
   DUBBELE UNDERLINE KILLER (publiek + admin)
   ================================================================ */
#bb-site-header nav .menu-item,
#bb-site-header nav .menu-item > a{
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
#bb-site-header nav .menu-item::before,
#bb-site-header nav .menu-item::after,
#bb-site-header nav .menu-item > a::before,
#bb-site-header nav .menu-item > a::after,
#bb-site-header nav .current-menu-item::before,
#bb-site-header nav .current-menu-item::after,
#bb-site-header nav .current-menu-item > a::before,
#bb-site-header nav .current-menu-item > a::after,
#bb-site-header nav .current_page_item::before,
#bb-site-header nav .current_page_item::after,
#bb-site-header nav .current_page_item > a::before,
#bb-site-header nav .current_page_item > a::after,
#bb-site-header nav [aria-current="page"]::before,
#bb-site-header nav [aria-current="page"]::after{
  content: none !important;
  display: none !important;
}

/* ================================================================
   GOUDEN UNDERBAR-STIJL (publiek + admin)
   ================================================================ */

:root {
  --bb-active-height: 5px;
}

.bb-underbar--pill .bb-link {
  position: relative;
  display: inline-block;
  overflow: visible;
}

/* ———————————————————————————————
   Basisonderbar (enige actieve versie)
   ——————————————————————————————— */
.bb-underbar--pill .bb-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px; /* < pas dit aan voor hoogte: 0 = baseline, -3px iets lager */
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  height: var(--bb-active-height);
  width: calc(100% + 12px);
  background: linear-gradient(90deg, #c28c14, #deb83f);
  border-radius: 999px;
  box-shadow: 0 1px 5px rgba(160,120,18,.22);
  transition: transform .18s ease, background-color .12s ease, box-shadow .12s ease;
}

.bb-underbar--pill .bb-link:hover::after,
.bb-underbar--pill .bb-link.active::after,
.bb-underbar--pill .bb-link:focus::after {
  transform: translateX(-50%) scaleX(1);
  background: linear-gradient(90deg, #e2b73a, #ffe089);
  box-shadow: 0 1px 8px rgba(214,165,23,.28);
}

/* ===========================================
   Home-icon underline — verbeterde versie
   =========================================== */
.bb-underbar--pill .bb-home-icon {
  position: relative;
  --icon-w: 22px; /* zelfde breedte als het icoon */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bb-underbar--pill .bb-home-icon::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: calc(var(--icon-w) + 12px);
  height: 4px; /* maak de onderbar van de homeknop dikker */
  background: linear-gradient(90deg, #e2b73a, #ffe089);
  border-radius: 999px;
  box-shadow: 0 1px 8px rgba(214,165,23,.28);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.bb-underbar--pill .bb-home-icon:hover::after,
.bb-underbar--pill .bb-home-icon.is-active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.bb-home-icon img {
  width: var(--icon-w);
  height: var(--icon-w);
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
  transition: filter .12s ease, transform .12s ease;
}

.bb-home-icon:hover img,
.bb-home-icon.is-active img {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)) brightness(1.08) saturate(1.1);
  transform: translateY(-1px);
}

/* ================================================================
   ADMIN SCOPE
   ================================================================ */
body.bb-admin .bb-login,
body.bb-admin nav#bb-nav .bb-login-mobile{
  display:none !important;
}

/* ================================================================
   STRUCTUUR EN STYLING
   ================================================================ */

:root{
  --bb-header-top: 10px;
  --bb-brand-size: 160px;
  --bb-brand-to-nav-gap: 200px;
  --bb-glass-bg: rgba(16,18,20,.72);
  --bb-glass-bd: rgba(255,255,255,.20);
  --bb-glass-blur: 12px; 
  --bb-glass-sat: 1.2; 
  --bb-glass-bright: 1;
  --bb-glass-padY: 4px; 
  --bb-glass-padX: 28px; 
  --bb-glass-radius: 18px;
  --bb-home-underline-w: 22px;
  --bb-safe-top-header: 64px; 
  --bb-safe-top: 64px; 
  --bb-header-bottom-trim: 25px;
  --bb-nav-gap: clamp(14px, 2.4vw, 26px);
  --bb-text: #f6f8f6;
}

html{ overflow-y: scroll; scrollbar-gutter: stable both-edges; }
body{ overflow-x: clip; }

.bb-site-header{
  position: fixed; top: var(--bb-header-top); left: 0; right: 0;
  z-index: 1000; background: transparent; isolation: isolate;
}

.bb-header-wrap{
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: var(--bb-brand-to-nav-gap);
  padding: 10px clamp(14px, 3vw, 32px);
  color: var(--bb-text);
  font: 16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}

/* --- HEIGHT FIX: zorg dat login niet buiten de header meetelt --- */
#bb-site-header .bb-header-wrap {
  align-items: center;
}
.bb-login {
  align-self: center; /* voorkomt dat de login de headerhoogte optrekt */
}

.bb-brand{ justify-self: end; display:flex; align-items:center; }
.bb-brand .bb-brand-wrap{ display:inline-flex; align-items:center; }

.bb-brand img{ height: var(--bb-brand-size); width:auto; display:block; }
.bb-brand video.bb-logo{ height: var(--bb-brand-size); width:auto; object-fit: contain; display:none; }

nav.bb-nav{
  justify-self: center; display:flex; align-items:center; gap: var(--bb-nav-gap);
  position: relative; padding: var(--bb-glass-padY) var(--bb-glass-padX);
  border-radius: var(--bb-glass-radius);
  border: 1px solid var(--bb-glass-bd);
  background: var(--bb-glass-bg);
  -webkit-backdrop-filter: blur(var(--bb-glass-blur)) saturate(var(--bb-glass-sat)) brightness(var(--bb-glass-bright));
  backdrop-filter: blur(var(--bb-glass-blur)) saturate(var(--bb-glass-sat)) brightness(var(--bb-glass-bright));
  box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}

.bb-link, .bb-home-icon{
  position:relative; display:inline-flex; align-items:center;
  padding:6px 2px; min-height:34px;
  color:#ffffff; text-decoration:none;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  transition: transform .12s ease, color .12s ease, text-shadow .12s ease;
  text-transform: uppercase; letter-spacing:.03em; font-weight:700;
}
.bb-link:hover,
.bb-link:focus,
.bb-link.is-active {
  transform: translateY(-1px);
  outline: none;
  color: #ffe089;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}

.bb-home-icon img{
  width:22px; height:22px; display:block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
  transition: filter .12s ease, transform .12s ease;
}
.bb-home-icon:hover img, .bb-home-icon.is-active img{
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)) brightness(1.08) saturate(1.1);
  transform: translateY(-1px);
}

/* Login alleen op home (desktop) */
.bb-login{ justify-self:end; align-items:center; display:none; }
.bb-home .bb-login{ display:inline-flex; }
.bb-login .bb-login-btn{
  color: var(--bb-text);
  padding: 4px 2px;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .68;
  user-select:none;
  transition: opacity .12s ease;
  text-decoration: none;
}
.bb-login .bb-login-btn:hover,
.bb-login .bb-login-btn:focus{ text-decoration: none; }
.bb-login .bb-login-btn:hover{ opacity:.85; }
.bb-login .bb-login-btn:focus-visible{ outline:2px solid rgba(255,233,160,.35); border-radius: 6px; }

@media (max-width:1024px){ .bb-brand img, .bb-brand video.bb-logo{ height:120px; } }
@media (max-width:640px){  .bb-brand img, .bb-brand video.bb-logo{ height:80px; } }

@media (min-width: 961px){
  .bb-brand{ grid-column: 1; justify-self: end; }
  nav.bb-nav{ grid-column: 2; justify-self: center; }
  .bb-login{ grid-column: 3; justify-self: end; }
  #bb-menu-toggle{ display: none; }
}

/* VISUEEL KORTER: spiegelstrook 10px lager (globaal) */
body.bb-public:not(.bb-front-lock)::before,
body.bb-public:not(.bb-front-lock)::after{
  height: calc(
    var(--bb-header-offset, 0px)
    + var(--bb-safe-top-header, 64px)
    - var(--bb-header-bottom-trim, 0px)
  ) !important;
}

/* GLOBALE NUDGE: alle pagina's 5px omhoog */
:root{ --bb-page-nudge-y: -7px; }
.bb-public main{
  margin-top: calc(
    var(--bb-header-offset, 0px)
    + var(--bb-safe-top-header, 64px)
    + var(--bb-page-nudge-y, 0px)
  ) !important;
}

/* ================================================================
   UNIFORM UNDERBAR (gelijk aan admin)
   ================================================================ */
.bb-underbar--pill .bb-link::after {
  bottom: 0px !important;             /* zelfde positie als admin */
  height: 4px !important;             /* iets subtieler, gelijk aan admin */
}

.bb-underbar--pill .bb-link.is-active::after,
.bb-underbar--pill .bb-link.active::after,
.bb-underbar--pill .bb-link:hover::after,
.bb-underbar--pill .bb-link:focus::after {
  transform: translateX(-50%) scaleX(1);
  background: linear-gradient(90deg, #e2b73a, #ffe089);
  box-shadow: 0 1px 8px rgba(214,165,23,.28);
}


/* ================================================
   FIX: Nav-links centreren met home-icoon (zoals admin)
   ================================================ */
.bb-nav .bb-link {
  display: inline-flex;
  align-items: center;
  line-height: 1;              /* tekst exact gecentreerd */
  padding-top: 3px;            /* balans met icoon */
  padding-bottom: 3px;
}

/* Home-icoon uitlijnen met tekst */
.bb-home-icon {
  position: relative;
  top: 0;                      /* verwijder eerdere verschuiving */
  margin-right: 0.45rem;
  display: flex;
  align-items: center;
}

/* Zorg dat het icoon en tekst precies op dezelfde baseline staan */
.bb-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Alleen frontpage omhoog trekken */
body.bb-front {
  --bb-page-nudge-y: -150px;
}