/* =========================================================================
   DF HEADER + DRAWER — CLEAN FINAL
   - Left "remote" menu button (clickable, inside header)
   - Centered logo, slight overlap into hero
   - Solid black at top → glass on scroll
   - Left drawer with AC neon accent + power close
   - Safe z-index / pointer-events so hero FX never block clicks
   ========================================================================= */

/* ---------- Variables ---------- */
:root{
  --df-maxw: 1160px;

  /* Header heights */
  --df-h: 64px;
  --df-h-sm: 56px;

  /* Logo heights */
  --df-logo-h: 72px;
  --df-logo-h-sm: 56px;

  /* Theme */
  --df-text: #e8fff5;
  --df-line: #00ff8c; /* AC neon green */
}

/* ---------- Base spacing (account for fixed header) ---------- */
html, body { margin: 0; }
body { padding-top: calc(var(--df-h) + env(safe-area-inset-top, 0px)); }
@media (max-width: 600px){
  body { padding-top: calc(var(--df-h-sm) + env(safe-area-inset-top, 0px)); }
}

/* Never let hero overlays steal header clicks */
.fx, .crt-scanlines, .crt-noise, .crt-roll, .logo-overlay { pointer-events: none; }

/* ---------- Header ---------- */
.df-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: calc(var(--df-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 2147483200 !important;
  background: rgba(0,0,0,.92);
  border-bottom: 1px solid rgba(255,255,255,.10);
  transition: background .28s ease, border-color .28s ease;
  overflow: visible !important;
  pointer-events: auto !important;
}
@media (max-width: 600px){
  .df-header{ height: calc(var(--df-h-sm) + env(safe-area-inset-top, 0px)); }
}

/* Scroll state → glass */
.df-header.scrolled{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: rgba(255,255,255,.12);
}

/* ---------- Inner layout: [menu] [logo] [spacer] ---------- */
.df-header .df-inner{
  width: 100%;
  max-width: var(--df-maxw);
  margin: 0 auto;
  padding: 0 16px;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important; /* menu | logo | spacer */
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* ---------- Logo (centered, overlaps hero) ---------- */
.df-logo{
  grid-column: 2 !important;
  justify-self: center;
  display: inline-flex !important;
  align-items: center;
  text-decoration: none;
  width: auto !important;
}
.df-logo img,
.df-logo .df-logo__img{
  display: block !important;
  height: var(--df-logo-h);
  width: auto !important;
  object-fit: contain;
  position: relative;
  top: 10px;                    /* nudge down */
  transform: translateY(18%);   /* overlap into hero */
  filter: drop-shadow(0 0 8px rgba(0,0,0,.85));
  pointer-events: auto !important;
  z-index: 2;
}
@media (max-width: 600px){
  .df-logo img,
  .df-logo .df-logo__img{
    height: var(--df-logo-h-sm);
    top: 6px;
    transform: translateY(14%);
  }
}

/* ---------- “TV remote” menu button (LEFT) ---------- */
.df-menu{
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;

  --remote-w: 46px;
  --remote-h: 46px;
  --remote-r: 12px;

  width: var(--remote-w) !important;
  height: var(--remote-h) !important;
  border-radius: var(--remote-r) !important;
  padding: 0 !important;

  background:
    linear-gradient(180deg, #0b0b0b, #0a0a0a) padding-box,
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px);
  border: 1px solid rgba(0,255,140,.25) !important;
  box-shadow: 0 0 10px rgba(0,255,140,.65), 0 0 18px rgba(0,255,140,.35);
  color: var(--df-text);
  cursor: pointer;
  position: relative !important;
  z-index: 2147483600 !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
  font-size: 0 !important; /* hide "☰" text */
  line-height: 0 !important;
  transition: transform .12s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}

/* LED dot */
.df-menu::before{
  content: "";
  position: absolute; top: 6px; left: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #39ff14, #0a5 70%);
  box-shadow: 0 0 8px rgba(0,255,140,.9), 0 0 16px rgba(0,255,140,.6);
}

/* Bars */
.df-menu::after{
  content: "";
  position: absolute; inset: 0; margin: 12px; border-radius: 8px;
  background: rgba(232,255,245,.95);
  -webkit-mask:
    linear-gradient(#000 0 0) center/100% 2px no-repeat,
    linear-gradient(#000 0 0) center/100% 2px no-repeat,
    linear-gradient(#000 0 0) center/100% 2px no-repeat;
  -webkit-mask-position: 50% calc(50% - 6px), 50% 50%, 50% calc(50% + 6px);
          mask:
    linear-gradient(#000 0 0) center/100% 2px no-repeat,
    linear-gradient(#000 0 0) center/100% 2px no-repeat,
    linear-gradient(#000 0 0) center/100% 2px no-repeat;
          mask-position: 50% calc(50% - 6px), 50% 50%, 50% calc(50% + 6px);
}

.df-menu:hover{
  transform: translateY(-1px);
  border-color: rgba(0,255,140,.6) !important;
  box-shadow: 0 0 12px rgba(0,255,140,.75), 0 0 22px rgba(0,255,140,.45);
}
.df-menu:active{ transform: translateY(0) scale(.98); filter: brightness(1.05); }
.df-menu:focus-visible{ outline: 2px solid rgba(0,255,140,.85); outline-offset: 3px; }

@media (max-width: 600px){
  .df-menu{ --remote-w: 44px; --remote-h: 44px; --remote-r: 11px; }
}

/* ---------- Drawer (LEFT) ---------- */
.df-drawer{
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(88vw, 420px);
  background: #000; color: #fff;
  padding: calc(16px + env(safe-area-inset-top,0)) 24px 28px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform .28s ease, box-shadow .28s ease;
  box-shadow: none;
  z-index: 2147483150 !important;
  pointer-events: none;            /* only clickable when open */
}
.df-drawer.open{
  transform: translateX(0);
  box-shadow: 24px 0 60px rgba(0,0,0,.6);
  pointer-events: auto;
}

/* Accent line */
.df-drawer__accent{
  position: absolute;
  top: calc(62px + env(safe-area-inset-top,0)); left: 24px; right: 24px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(0,255,140,0) 0%,
    rgba(0,255,140,.9) 15%,
    rgba(0,255,140,1) 50%,
    rgba(0,255,140,.9) 85%,
    rgba(0,255,140,0) 100%);
  box-shadow: 0 0 8px rgba(0,255,140,.8), 0 0 18px rgba(0,255,140,.5);
}
@media (prefers-reduced-motion: no-preference){
  .df-drawer__accent{ animation: acGlow 2.8s ease-in-out infinite; }
}
@keyframes acGlow{
  0%,100%{ box-shadow: 0 0 8px rgba(0,255,140,.8), 0 0 18px rgba(0,255,140,.5); }
  50%   { box-shadow: 0 0 12px rgba(0,255,140,1), 0 0 26px rgba(0,255,140,.7); }
}

/* Power button (close) — keep id="dfDrawerClose" for JS */
.df-drawer__power{
  position: absolute; top: calc(18px + env(safe-area-inset-top,0)); right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--df-line);
  background: radial-gradient(circle at 30% 30%, #39ff14, #0a5 75%);
  color: #000; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 0 10px rgba(0,255,140,.7), inset 0 0 8px rgba(0,255,140,.4);
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.df-drawer__power:hover{ transform: scale(1.05); filter: brightness(1.1); }
.df-drawer__power:active{ transform: scale(.94); box-shadow: 0 0 6px #39ff14, inset 0 0 12px rgba(0,255,140,.6); }
.df-drawer__power svg{ stroke: #000; stroke-width: 2px; }

/* Drawer nav */
.df-drawer__nav{
  list-style: none;
  margin: 72px 0 0; padding: 0;
  display: grid; gap: 16px;
}
.df-drawer__nav a{
  display: block; padding: 12px 14px; border-radius: 12px;
  color: var(--df-text); font-size: 1.2rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; text-decoration: none;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(0,255,140,.25);
  transition: border-color .2s, box-shadow .2s, transform .12s, background-color .2s;
}
.df-drawer__nav a:hover{
  border-color: rgba(0,255,140,.6);
  box-shadow: 0 0 10px rgba(0,255,140,.35), inset 0 0 12px rgba(0,255,140,.08);
  background: rgba(0,255,140,.06);
  transform: translateY(-1px);
}
.df-drawer__nav a:focus-visible{ outline: 2px solid rgba(0,255,140,.85); outline-offset: 2px; }

/* ---------- Backdrop ---------- */
#dfBackdrop{
  position: fixed; inset: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,255,140,.06), rgba(0,0,0,.7));
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
  z-index: 2147483100 !important;
  backdrop-filter: blur(2px);
}
#dfBackdrop.open{ opacity: 1; pointer-events: auto; }

/* ---------- Safety: neutralize legacy conflicting rules ---------- */
.df-header{ opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; mix-blend-mode: normal !important; }
/* === AC Header + Drawer Overrides (final cleanup) === */

/* Remote-style hamburger size + proportions */
.df-menu {
  --remote-w: 40px !important;   /* slightly smaller than before */
  --remote-h: 40px !important;
  --remote-r: 10px !important;

  width: var(--remote-w) !important;
  height: var(--remote-h) !important;
  border-radius: var(--remote-r) !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2147483640 !important; /* always above logo + accent */
}

/* Scale LED dot inside */
.df-menu::before {
  width: 6px !important;  /* was 7px */
  height: 6px !important;
  top: 5px !important;
  left: 5px !important;
}

/* Scale hamburger bars */
.df-menu::after {
  margin: 10px !important;  /* tighter padding inside */
  border-radius: 6px !important;
}

/* Mobile tweak */
@media (max-width: 600px){
  .df-menu {
    --remote-w: 36px !important;
    --remote-h: 36px !important;
    --remote-r: 9px !important;
  }
  .df-menu::before {
    width: 5px !important;
    height: 5px !important;
    top: 4px !important;
    left: 4px !important;
  }
  .df-menu::after {
    margin: 9px !important;
  }
}

/* Power button fix: force above accent line */
.df-drawer__power {
  position: absolute !important;
  top: calc(18px + env(safe-area-inset-top,0)) !important;
  right: 18px !important;
  z-index: 2147483641 !important; /* above accent + menu */
}
/* === Drawer sits UNDER the fixed header (and shows the power btn) === */

/* Desktop/tablet */
.df-drawer{
  top: calc(var(--df-h,64px) + env(safe-area-inset-top,0px)) !important;
  height: calc(100vh - (var(--df-h,64px) + env(safe-area-inset-top,0px))) !important;
  z-index: 2147483150 !important; /* below header, above page */
}

/* Mobile header height */
@media (max-width:600px){
  .df-drawer{
    top: calc(var(--df-h-sm,56px) + env(safe-area-inset-top,0px)) !important;
    height: calc(100vh - (var(--df-h-sm,56px) + env(safe-area-inset-top,0px))) !important;
  }
}

/* Keep the glowing accent a bit below the top edge of the drawer */
.df-drawer__accent{
  top: 58px !important;              /* sits below header line */
  left: 24px !important; right: 24px !important;
  z-index: 2 !important;
}

/* Power button lives inside the drawer, above the accent line */
.df-drawer__power{
  position: absolute !important;     /* relative to the drawer (not page) */
  top: 14px !important;              /* now clearly below the header */
  right: 18px !important;
  z-index: 3 !important;             /* above accent line */
}

/* Slightly smaller “remote” hamburger */
.df-menu{
  --remote-w: 40px !important;
  --remote-h: 40px !important;
  --remote-r: 10px !important;
  width: var(--remote-w) !important;
  height: var(--remote-h) !important;
}
.df-menu::before{ width:6px !important; height:6px !important; top:5px !important; left:5px !important; }
.df-menu::after { margin:10px !important; border-radius:6px !important; }

@media (max-width:600px){
  .df-menu{ --remote-w:36px !important; --remote-h:36px !important; --remote-r:9px !important; }
  .df-menu::before{ width:5px !important; height:5px !important; top:4px !important; left:4px !important; }
  .df-menu::after { margin:9px !important; }
}
/* === Drawer power button — left, indented with nav links === */
.df-drawer__power {
  position: absolute !important;
  top: 14px !important;          
  left: 36px !important;        /* indent to align with nav text */
  right: auto !important;       
  z-index: 3 !important;
}
/* ===== Force header logo to true center ===== */
.df-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
}

.df-logo {
  justify-self: center !important; /* true center of grid */
}

.df-menu {
  justify-self: start !important; /* left column */
}

.df-drawer__power {
  justify-self: end !important; /* right column */
}
/* --- Micro-center the header logo (accounts for PNG whitespace) --- */
:root { --logo-nudge-x: -1px; }            /* tweak: 1–5px usually enough */

.df-header .df-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;  /* left btn | logo | spacer */
  align-items: center !important;
  padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
}

.df-logo { justify-self: center !important; }
.df-menu { grid-column: 1 !important; justify-self: start !important; }

.df-logo img,
.df-logo .df-logo__img {
  transform: translateX(var(--logo-nudge-x)) !important; /* visual centering */
}

/* If it looks slightly off on very small screens, nudge 1px more */
@media (max-width: 420px){
  :root { --logo-nudge-x: 4px; }
}