/* ============================================================
   MarrowMyth — shared mobile layer
   Everything here is gated behind a max-width media query, so it
   has ZERO effect on the desktop site. Loaded LAST in <head>
   on each page so equal-specificity rules win over inline <style>.
   ============================================================ */

/* Hamburger is hidden on desktop; the media query below reveals it.
   (Outside the media query so it can never appear on the desktop nav.) */
.nav-toggle { display: none; }

/* ── Site-wide content protections (apply on ALL screen sizes) ──────────
   Kept OUTSIDE the media query on purpose so they hold on desktop too. */

/* Prevent mobile/OS "force dark" from re-inverting an already-dark design. */
html { color-scheme: dark; }

/* No text selection anywhere — except real text-entry fields. */
* { -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable], [contenteditable] * {
  -webkit-user-select: text; user-select: text;
}

/* Brand tagline echoed in every footer (all screen sizes). */
.footer-tagline {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #7a9296;
  margin: 0 0 .6rem;
}

/* ── NAV → hamburger ──────────────────────────────────────────
   Collapses to a burger at <=1024px (NOT just phone width): the nav
   carries ~8 items + two dropdowns and cramps/overflows on tablets and
   large/landscape phones well before 768px. Desktop (>1024px) is untouched. */
@media (max-width: 1024px) {
  .nav {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: 0 1rem;
  }
  .nav-logo { font-size: .95rem; letter-spacing: .2em; }

  /* hamburger button (present in each page's nav, hidden on desktop) */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 9px;
    background: none;
    border: 1px solid rgba(168, 180, 192, .25);
    cursor: pointer;
    flex: 0 0 auto;
  }
  .nav-toggle span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: #5c8b8f;
    transition: transform .25s, opacity .25s;
  }
  .nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Join button stays in the bar but compact */
  .nav .btn-join { font-size: .68rem; padding: .35rem .8rem; letter-spacing: .15em; margin-left: auto; }

  /* slide-down panel built from the existing nav links */
  .nav-links {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(4, 6, 10, .985);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(168, 180, 192, .18);
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: .25rem 0 .75rem;
    z-index: 199;
  }
  .nav.nav-open .nav-links { display: flex; }

  .nav-links li { width: 100%; }
  .nav-links li a,
  .nav-links li > button {
    display: block;
    width: 100%;
    text-align: left;
    font-size: .82rem;
    letter-spacing: .18em;
    padding: .95rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
  }
  /* kill the desktop underline-on-hover indicator inside the panel */
  .nav-links li a::after,
  .nav-links li > button::after { display: none; }

  /* flatten the hover dropdowns: show their items inline + indented */
  .nav-dropdown-menu,
  .nav-dropdown-menu.right {
    position: static;
    display: block;
    min-width: 0;
    background: rgba(255, 255, 255, .015);
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-dropdown-menu a,
  .nav-dropdown-menu button {
    padding-left: 2.6rem;
    font-size: .74rem;
  }
}

/* ── Phone-width layout (<=768px) ─────────────────────────────── */
@media (max-width: 768px) {

  /* ── Unlock the desktop "single screen" lock so pages scroll ── */
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body {
    -webkit-text-size-adjust: 100%;
  }
  /* Nothing should be able to push the page wider than the viewport */
  img, video, canvas, table, pre { max-width: 100%; height: auto; }

  /* ── FOOTER ───────────────────────────────────────────────── */
  /* Keep the two brand logos side-by-side on one line; the nav links
     wrap onto their own full-width line below. */
  .site-footer { padding: 1.6rem 1.2rem; }
  .footer-main-row { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2rem 2.5rem; }
  .footer-brand-img { height: 30px; order: 1; }
  .footer-nav-list { order: 2; flex-basis: 100%; gap: .6rem 1.2rem; }

  /* ── Generic content safety ───────────────────────────────── */
  /* Pages whose body is a centered full-height flex column should
     instead flow naturally from the top once scrolling is unlocked. */
  body { justify-content: flex-start; }
}
