/* ═══════════════════════════════════════════════════════════
   M4D Header — clean rewrite
   Desktop inline nav ≥ 1440px; overlay nav for everything else
   ═══════════════════════════════════════════════════════════ */

:root {
  --m4d-h:      56px;
  --m4d-safe:   env(safe-area-inset-top, 0px);
  --m4d-border: rgba(255,255,255,.08);
  --m4d-accent: #60a5fa;
}

body {
  scroll-padding-top: calc(var(--m4d-h) + var(--m4d-safe));
}

/* ── Header bar ─────────────────────────────────────────────── */
.m4d-header {
  position: relative;
  z-index: 1000;
  background: rgba(8,13,26,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--m4d-border);
  /* Push content below iPhone notch / Dynamic Island / status bar */
  padding-top: var(--m4d-safe);
}

.m4d-top {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px;
  min-height: 56px;
}

/* Logo / home link */
.m4d-home {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.m4d-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Current-page label (centre, hidden at desktop where drawer shows it) */
.m4d-current {
  justify-self: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.38);
  letter-spacing: .2px;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
@media (min-width:1440px) { .m4d-current { visibility: hidden; pointer-events: none; } }

/* ── Right slot (identity badge + burger) ───────────────────── */
.m4d-right {
  grid-column: 3;   /* always the 3rd column — safe even if center is hidden */
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Burger button ──────────────────────────────────────────── */
.m4d-menu {
  all: unset;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  color: #e5e7eb;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--m4d-border);
  transition: background .14s, border-color .14s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.m4d-menu:hover  { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.m4d-menu:active { background: rgba(255,255,255,.13); }
.m4d-menu[aria-expanded="true"] {
  background: rgba(96,165,250,.15);
  border-color: rgba(96,165,250,.4);
  color: #93c5fd;
}

/* Animated hamburger lines */
.m4d-burger,
.m4d-burger::before,
.m4d-burger::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s cubic-bezier(.16,1,.3,1), opacity .18s;
}
.m4d-burger::before { transform: translateY(-5px); }
.m4d-burger::after  { transform: translateY(3px); }

.m4d-menu[aria-expanded="true"] .m4d-burger         { transform: rotate(45deg); }
.m4d-menu[aria-expanded="true"] .m4d-burger::before { transform: rotate(90deg); }
.m4d-menu[aria-expanded="true"] .m4d-burger::after  { opacity: 0; }

/* ── Desktop inline drawer (≥ 1440px only, not on index.html) ── */
.m4d-drawer { display: none; }

@media (min-width:1440px) {
  .m4d-header:not(.m4d-burger-only) .m4d-menu   { display: none !important; }
  .m4d-header:not(.m4d-burger-only) .m4d-drawer {
    display: flex;
    gap: 8px;
    padding: 0 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .m4d-header:not(.m4d-burger-only) .m4d-drawer::-webkit-scrollbar { display: none; }

  /* Faded edges hint at scrollability */
  .m4d-header:not(.m4d-burger-only) .m4d-drawer::before,
  .m4d-header:not(.m4d-burger-only) .m4d-drawer::after {
    content: "";
    flex: 0 0 1px;
  }

  .m4d-header:not(.m4d-burger-only) .m4d-drawer a {
    display: inline-flex;
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(229,231,235,.65);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15px;
    white-space: nowrap;
    transition: background .13s, color .13s;
    border: 1px solid transparent;
  }
  .m4d-header:not(.m4d-burger-only) .m4d-drawer a:hover {
    background: rgba(255,255,255,.07);
    color: #e5e7eb;
  }
  .m4d-header:not(.m4d-burger-only) .m4d-drawer a[aria-current="page"] {
    background: rgba(96,165,250,.14);
    border-color: rgba(96,165,250,.28);
    color: #93c5fd;
  }
}

/* ── Overlay backdrop + panel ───────────────────────────────── */
.m4d-overlay[hidden] { display: none !important; }

.m4d-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  justify-items: center;
  align-items: start;
}

/* Entry/exit keyframes */
@keyframes m4d-bd-in    { from { opacity: 0; }                             to { opacity: 1; } }
@keyframes m4d-bd-out   { from { opacity: 1; }                             to { opacity: 0; } }
@keyframes m4d-panel-in { from { opacity: 0; transform: translateY(-12px) scale(.97); }
                           to   { opacity: 1; transform: none; } }
@keyframes m4d-panel-out{ from { opacity: 1; transform: none; }
                           to   { opacity: 0; transform: translateY(-10px) scale(.97); } }

.m4d-overlay-bd {
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: m4d-bd-in 200ms ease forwards;
}
.m4d-overlay.m4d-out .m4d-overlay-bd { animation: m4d-bd-out 200ms ease forwards; }

.m4d-overlay-panel {
  position: relative;
  margin-top: calc(var(--m4d-safe) + var(--m4d-h) + 10px);
  width: min(740px, 96vw);
  max-height: calc(100dvh - var(--m4d-safe) - var(--m4d-h) - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(9,14,33,.97);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,.65), 0 0 0 1px rgba(96,165,250,.05);
  animation: m4d-panel-in 230ms cubic-bezier(.16,1,.3,1) forwards;
}
.m4d-overlay.m4d-out .m4d-overlay-panel {
  animation: m4d-panel-out 200ms cubic-bezier(.4,0,1,1) forwards;
}

/* Panel header row */
.m4d-overlay-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--m4d-border);
}
.m4d-overlay-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.3);
}

/* Close ✕ button inside panel */
.m4d-close {
  all: unset;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.05);
  transition: background .13s, color .13s;
}
.m4d-close:hover { background: rgba(255,255,255,.1); color: #e5e7eb; }

/* ── Nav item grid ──────────────────────────────────────────── */
.m4d-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px;
}
@media (min-width:500px)  { .m4d-nav-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width:680px)  { .m4d-nav-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; } }

.m4d-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 15px 10px 13px;
  border-radius: 13px;
  text-decoration: none;
  color: rgba(229,231,235,.75);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  transition: background .13s, border-color .13s, color .13s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  outline-offset: 2px;
}
.m4d-nav-item:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  color: #e5e7eb;
  transform: translateY(-1px);
}
.m4d-nav-item:active { transform: scale(.96); transition-duration: .05s; }
.m4d-nav-item:focus-visible {
  outline: 2px solid rgba(96,165,250,.6);
  background: rgba(96,165,250,.06);
}
.m4d-nav-item.is-current {
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.32);
  color: #93c5fd;
}
.m4d-nav-item.is-current .m4d-nav-icon { filter: drop-shadow(0 0 6px rgba(96,165,250,.5)); }

.m4d-nav-icon  { font-size: 22px; line-height: 1; }
.m4d-nav-label { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.3; letter-spacing: .1px; }

/* ── Spacer ─────────────────────────────────────────────────── */
.m4d-spacer { height: clamp(14px, 2vw, 28px); pointer-events: none; }

.m4d-spacer + :is(main,.container,section,div) > :is(.panel,.hero,.card):first-child { margin-top: 0 !important; }

/* ── Accessibility ──────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Page-specific mobile container top-gap fixes ───────────── */
@media (max-width:859px) {
  body[data-page="drafts"] .container,
  body[data-page="schedule"] .container { margin-top: 8px !important; }
}

/* ── Commissioner admin button ──────────────────────────────── */
.m4d-admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: #7a9ab8;
  font-size: 16px;
  text-decoration: none;
  flex-shrink: 0;
  transition: color .18s ease, background .18s ease;
}
.m4d-admin-btn:hover {
  color: #c9a84c;
  background: rgba(201,168,76,.08);
}