/* =============================================================
   Mobile nav — loaded AFTER {{ghost_head}}

   1) Home: #nav-backdrop shared z-index:300 with .nav but sits later in
      the DOM, so the overlay painted ON TOP of the drawer (blur only).
      Lower the backdrop below the nav bar.

   2) Ghost/portal CSS can load after theme files — force dark text on
      light drawers with #id + !important.

   3) Remove overlay backdrop-filter (iOS compositing / smear).
   ============================================================= */

@media (max-width: 900px) {
  /* Align drawer top with nav bar height (was 54px vs 80px bar — drawer hid under strip) */
  #css-nav-links,
  .css-nav-links {
    top: 80px !important;
    min-height: calc(100vh - 80px) !important;
    min-height: calc(100dvh - 80px) !important;
  }

  #nav-links.open {
    min-height: calc(100vh - 80px) !important;
    min-height: calc(100dvh - 80px) !important;
  }

  /* ── Stacking: backdrop must sit BELOW the fixed nav (home only) ── */
  #nav-backdrop,
  #nav-backdrop.open {
    z-index: 298 !important;
  }

  /* default.hbs nav already uses backdrop 298; keep consistent */
  .css-nav-backdrop,
  .css-nav-backdrop.open {
    z-index: 298 !important;
  }

  /* ── Home drawer text (#nav-links) ── */
  #nav-links.open .nl,
  #nav-links.open .nav-dd-trigger {
    color: #080c14 !important;
  }

  #nav-links.open .nl:hover,
  #nav-links.open .nav-dd-trigger:hover {
    color: #080c14 !important;
  }

  #nav-links.open .nav-dd-link {
    color: rgba(8, 12, 20, 0.85) !important;
  }

  #nav-links.open .nav-mobile-extra .nl {
    color: rgba(8, 12, 20, 0.62) !important;
  }

  .nav-drawer-head {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  /* ── css-nav drawer (#css-nav-links) ── */
  #css-nav-links.open .css-nl,
  #css-nav-links.css-nav-links.open .css-nl {
    color: #080c14 !important;
  }

  #css-nav-links.open .css-nl:hover,
  #css-nav-links.open .css-nl-active,
  #css-nav-links.css-nav-links.open .css-nl:hover,
  #css-nav-links.css-nav-links.open .css-nl-active {
    color: #080c14 !important;
  }

  #css-nav-links.open .css-nl-dim,
  #css-nav-links.css-nav-links.open .css-nl-dim {
    color: rgba(8, 12, 20, 0.55) !important;
  }

  #css-nav-links.open .css-nav-dd-trigger,
  #css-nav-links.css-nav-links.open .css-nav-dd-trigger {
    color: #080c14 !important;
  }

  #css-nav-links.open .css-nav-dd-link,
  #css-nav-links.css-nav-links.open .css-nav-dd-link {
    color: rgba(8, 12, 20, 0.85) !important;
  }

  .css-nav-drawer-head {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  #nav-links.open,
  #css-nav-links.open,
  #css-nav-links.css-nav-links.open {
    background: #ffffff !important;
    -webkit-font-smoothing: antialiased;
  }

  #nav-backdrop,
  #nav-backdrop.open,
  .css-nav-backdrop,
  .css-nav-backdrop.open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width: 600px) {
  /* post.css / magazine shrink .css-nav to 52px — match drawer offset */
  #css-nav-links,
  .css-nav-links {
    top: 52px !important;
    min-height: calc(100vh - 52px) !important;
    min-height: calc(100dvh - 52px) !important;
  }
}