/* ===== Twain Sticky Header CSS (stable hover + mobile offset) ===== */

:root{
  --txwMax: 1200px;
  --txwH: 86px;
  --txwR: 6px;
  --txwEase: cubic-bezier(.2,.8,.2,1);

  --txwBlue: #003C8C;

  --txwTextDark: rgba(12,12,12,.92);
  --txwTextLight: rgba(255,255,255,.96);

  --txwTopA: rgba(0,0,0,.62);
  --txwTopB: rgba(0,0,0,.26);

  --txwBg: rgba(255,255,255,.96);
  --txwBorder: rgba(0,0,0,.10);
  --txwShadow: 0 10px 30px rgba(0,0,0,.10);
}

html, body{ margin:0 !important; padding:0 !important; }
html{ scroll-padding-top: calc(var(--txwH) + 12px); }

/* ===== Fixed full-bleed header ===== */
#txwBar{
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 100vw !important;
  max-width: 100vw !important;

  height: var(--txwH);
  z-index: 2147483647 !important;

  margin: 0 !important;
  right: auto !important;

  border-radius: 0 !important;
  pointer-events: auto !important;
}

/* Background layer */
#txwBar::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;

  transition:
    background 220ms var(--txwEase),
    border-color 220ms var(--txwEase),
    box-shadow 220ms var(--txwEase);
}

#txwBar > *{ position: relative; z-index: 1; }

/* Scoped reset */
#txwBar, #txwBar *{
  box-sizing: border-box !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  filter: none !important;
}
#txwBar a, #txwBar a:visited{
  color: inherit !important;
  text-decoration: none !important;
}

/* ===== States ===== */
#txwBar[data-state="top"]::before{
  background: linear-gradient(
    180deg,
    var(--txwTopA),
    var(--txwTopB) 60%,
    rgba(0,0,0,0)
  ) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;

  /* seam hide */
  inset: 0 0 -2px 0 !important;
  border-bottom: 0 !important;
}

#txwBar[data-state="scrolled"]::before{
  background: var(--txwBg) !important;
  border-bottom-color: var(--txwBorder) !important;
  box-shadow: var(--txwShadow) !important;
}

#txwBar[data-state="top"] .txw__link,
#txwBar[data-state="top"] .txw__dropBtn{ color: var(--txwTextLight) !important; }

#txwBar[data-state="scrolled"] .txw__link,
#txwBar[data-state="scrolled"] .txw__dropBtn{ color: var(--txwTextDark) !important; }

#txwBar[data-state="top"] .txw__link:hover,
#txwBar[data-state="top"] .txw__dropBtn:hover{ background: rgba(255,255,255,.12) !important; }

#txwBar[data-state="scrolled"] .txw__link:hover,
#txwBar[data-state="scrolled"] .txw__dropBtn:hover{ background: rgba(0,0,0,.05) !important; }

/* ===== Layout ===== */
.txw__row{
  max-width: var(--txwMax);
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.txw__brand{ display:flex; align-items:center; }
.txw__logo{ display:block; height:52px; width:auto; max-width:260px; object-fit:contain; }

.txw__nav{
  display:flex;
  align-items:center;
  gap: 26px;
  justify-self: center;
}

.txw__link{
  font-weight: 700;
  font-size: 16px;
  padding: 10px 10px;
  border-radius: var(--txwR) !important;
  transition: background 200ms var(--txwEase), color 200ms var(--txwEase);
}

/* Dropdown */
.txw__drop{ position: relative; }
.txw__dropBtn{
  appearance:none;
  border:0 !important;
  background:transparent !important;
  cursor:pointer;

  font-weight:800;
  font-size:16px;

  padding:10px 10px;
  border-radius: var(--txwR) !important;

  display:flex;
  align-items:center;
  gap:10px;
}

/* Menu */
.txw__menu{
  position:absolute;
  left:0;
  top: calc(100% + 4px);
  min-width:260px;

  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: var(--txwR) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  padding:10px;

  display:none;
  z-index:2147483647 !important;
}
.txw__menu a, .txw__menu a:visited{
  display:block;
  color: rgba(12,12,12,.92) !important;
  font-weight:700;
  font-size:14px;
  padding:10px 12px;
  border-radius: var(--txwR) !important;
}
.txw__menu a:hover{ background: rgba(0,0,0,.05); }

/* ✅ Desktop hover only (no JS fighting it) */
@media (hover:hover) and (pointer:fine){
  .txw__drop:hover .txw__menu,
  .txw__drop:focus-within .txw__menu{ display:block; }
}

/* Actions */
.txw__acts{ justify-self:end; display:flex; align-items:center; gap:12px; }

.txw__cta{
  height:50px;
  padding:0 22px;
  border-radius: var(--txwR) !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-weight:900;
  font-size:18px;
  line-height:1;

  background: var(--txwBlue) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  white-space:nowrap !important;
}
.txw__cta:hover{ filter:brightness(1.05); }

/* Burger */
.txw__burger{
  display:none;
  width:50px;
  height:50px;
  border-radius: var(--txwR) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.95) !important;
  cursor:pointer;
}
.txw__burger span{
  display:block;
  width:20px;
  height:2px;
  margin:4px auto;
  background: rgba(0,0,0,.70) !important;
}
#txwBar[data-state="top"] .txw__burger{
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(0,0,0,.18) !important;
}
#txwBar[data-state="top"] .txw__burger span{ background: rgba(255,255,255,.9) !important; }

/* Drawer */
.txw__drawer{
  position:absolute !important;
  top:100% !important;
  left:50% !important;
  transform: translateX(-50%) !important;

  width:100vw !important;
  max-width:100vw !important;

  background: rgba(255,255,255,.98) !important;
  border-top:1px solid rgba(0,0,0,.10) !important;

  display:none;
  z-index:2147483647 !important;

  max-height: calc(100vh - var(--txwH));
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
#txwBar[data-drawer="1"] .txw__drawer{ display:block !important; }

.txw__drawerIn{
  max-width: var(--txwMax);
  margin:0 auto;
  padding:16px 20px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.txw__drawerL, .txw__drawerL:visited{
  color: rgba(12,12,12,.92) !important;
  font-weight:800;
  padding:12px 12px;
  border-radius: var(--txwR) !important;
}
.txw__drawerL:hover{ background: rgba(0,0,0,.05); }
.txw__hr{ border:0; border-top:1px solid rgba(0,0,0,.10); margin:6px 0; }
.txw__drawerCtas{ display:flex; gap:12px; padding-top:8px; }

/* Responsive */
@media (max-width: 980px){
  .txw__row{ grid-template-columns: 1fr auto; }
  .txw__nav{ display:none; }
  .txw__burger{ display:inline-block; }

  .txw__logo{ height:44px; max-width:200px; }
  .txw__cta{ height:46px; padding:0 16px; font-size:16px; }
  .txw__burger{ width:46px; height:46px; }

  /* ✅ Mobile: always white header + give page room under it */
  body{ padding-top: var(--txwH) !important; }
  #txwBar{ transform: translateX(-50%) !important; } /* no y hacks on mobile */

  #txwBar::before{
    background: var(--txwBg) !important;
    border-bottom-color: var(--txwBorder) !important;
    box-shadow: var(--txwShadow) !important;
    inset: 0 !important;
  }
  #txwBar .txw__link, #txwBar .txw__dropBtn{ color: var(--txwTextDark) !important; }
}

@media (max-width: 420px){
  .txw__acts{ gap:8px; }
  .txw__logo{ height:40px; max-width:170px; }
  .txw__cta{ height:44px; padding:0 10px; font-size:14px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}
.txw__menu{
  top: 100% !important;           /* was calc(100% + 4px) */
  margin-top: 8px !important;     /* visuele spacing zonder hover-gap */
}

/* 2) Hover-bridge: vang de ruimte tussen button en menu op */
.txw__drop::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top: 100%;
  height: 14px;                  /* “brug” zone */
  pointer-events:auto;
}
.txw__logo--dark{ display:block; }
.txw__logo--light{ display:none; }

#txwBar[data-state="top"] .txw__logo--dark{ display:none !important; }
#txwBar[data-state="top"] .txw__logo--light{ display:block !important; }

#txwBar[data-state="scrolled"] .txw__logo--dark{ display:block !important; }
#txwBar[data-state="scrolled"] .txw__logo--light{ display:none !important; }

/* Zorg dat bridge alleen op desktop actief is */
@media (hover:none), (pointer:coarse){
  .txw__drop::after{ display:none !important; }