/**
 * MemoryIntelligence marketing site - mobile-only helpers.
 */

/* ============================================================
   MOBILE MENU — NEW DESIGN
   ============================================================ */

/* Overlay container */
.mobile-menu {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: min(88vw, 360px) !important;
  background: #DEFF63 !important;
  z-index: 200 !important;
  display: none;
  flex-direction: column !important;
  overflow-y: auto !important;
}
.mobile-menu.open {
  display: flex !important;
  flex-direction: column !important;
}

/* Close button */
.mobile-menu-close {
  position: absolute !important;
  top: 18px !important; right: 20px !important;
  background: none !important;
  border: none !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #0A0A0A !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 4px !important;
  z-index: 10 !important;
}

/* Inner scroll container — flex column fills drawer so footer can sit at bottom */
.mobile-menu-inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 100% !important;
  padding: 52px 28px 40px !important;
  gap: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Nav links ── */
.mm-nav {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: #0A0A0A !important;
  text-decoration: none !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid rgba(180, 175, 120, 0.35) !important;
  line-height: 1.1 !important;
}
/* Active page: white type + black 3D on lime (not a white pill) */
.mm-nav.mm-active {
  font-weight: 900 !important;
  background: transparent !important;
  color: #ffffff !important;
  padding: 13px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(180, 175, 120, 0.35) !important;
  text-shadow:
    1px 1px 0 #0a0a0a,
    2px 2px 0 #0a0a0a,
    3px 3px 0 #0a0a0a !important;
}
.mm-nav:hover { opacity: 0.6; }
.mm-nav.mm-active:hover {
  opacity: 1 !important;
  color: #ffffff !important;
}

/* ── Dividers ── */
.mm-rule {
  display: block !important;
  height: 1px !important;
  background: rgba(180, 175, 120, 0.35) !important;
  margin: 0 !important;
  border: none !important;
}
.mm-rule--black {
  background: #0A0A0A !important;
  height: 2px !important;
  margin: 0 !important;
}
.mm-rule--section {
  background: rgba(180, 175, 120, 0.35) !important;
  margin: 20px 0 !important;
}
.mm-rule--faint {
  background: rgba(180, 175, 120, 0.25) !important;
  margin: 0 !important;
}

/* ── CTA button stack ── */
.mm-cta-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.mm-btn {
  display: block !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 13px 20px !important;
  text-decoration: none !important;
  border: 2px solid #0A0A0A !important;
  box-shadow: 3px 3px 0 #0A0A0A !important;
  color: #0A0A0A !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
.mm-btn--white { background: #fff !important; }
.mm-btn--lime  { background: #DEFF63 !important; }
.mm-btn:hover  { opacity: 0.8; }

/* ── Footer (legal + logo) — pinned to bottom of drawer, centered Somewhere mark ── */
.mm-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: auto !important;
  padding-top: 28px !important;
  padding-bottom: 8px !important;
  width: 100% !important;
  border-top: none !important;
  box-shadow: none !important;
}
.mm-footer-legal-row {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.mm-footer-link {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(10, 10, 10, 0.35) !important;
  text-decoration: none !important;
  padding: 0 !important;
  text-align: center !important;
  border: none !important;
  border-bottom: none !important;
}
.mm-footer-link:hover {
  color: #0a0a0a !important;
}
.mm-logo-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
}
.mm-logo-wrap a {
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 0 !important;
  display: inline-flex !important;
}
.mm-somewhere-logo {
  display: block !important;
  height: 22px !important;
  width: auto !important;
  opacity: 1 !important;
  margin: 0 auto !important;
  vertical-align: top !important;
}

/* Hide old menu classes that may linger */
.mobile-menu-top-actions,
.mobile-menu-footer-legal,
.mobile-menu-footer { display: none !important; }

@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  /* Menu control: compact icon, adequate tap target */
  .hamburger {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hamburger span {
    width: 20px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    transition: transform 0.3s, opacity 0.3s;
  }
  .hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }
  .hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
  }

  /* Modals: never wider than viewport */
  .modal-overlay {
    padding: 16px !important;
    align-items: center !important;
  }
  .modal-overlay .modal {
    max-width: calc(100vw - 32px) !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* Horizontal scroll regions: smoother on iOS */
  .compare-table-scroll,
  [class*="table-scroll"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  /* Mobile menu: close, top CTAs, footer-style links */
  .mobile-menu {
    padding-top: 0;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  /* First nav link clears fixed close (×); CTAs sit under MI™ BETA, not under × */
  .mobile-menu-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-top: max(52px, calc(env(safe-area-inset-top, 0px) + 40px)) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-menu-close {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 160;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #0a0a0a;
    padding: 0;
    font-family: 'Martian Mono', monospace;
  }
  .mobile-menu-top-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
    padding-right: 0;
    width: 100%;
  }
  .mobile-menu-top-actions .mobile-menu-btn-connect,
  .mobile-menu-top-actions .mobile-menu-btn-beta {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
  }
  /*
   * Neobrutalist CTAs (match masthead / reference): CONNECT = transparent on lime (no second fill color);
   * JOIN = solid white. One hard offset shadow, sharp corners, !important vs page <style>.
   */
  .mobile-menu .mobile-menu-inner .mobile-menu-top-actions a.mobile-menu-btn-connect,
  .mobile-menu .mobile-menu-inner .mobile-menu-top-actions a.mobile-menu-btn-beta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
    padding: 12px 14px !important;
    min-height: 48px !important;
    color: #0a0a0a !important;
    border: 2px solid #0a0a0a !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
    box-shadow: 5px 5px 0 #0a0a0a !important;
  }
  .mobile-menu .mobile-menu-inner .mobile-menu-top-actions a.mobile-menu-btn-connect {
    background: transparent !important;
    background-color: transparent !important;
  }
  .mobile-menu .mobile-menu-inner .mobile-menu-top-actions a.mobile-menu-btn-beta {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  .mobile-menu .mobile-menu-inner .mobile-menu-top-actions a.mobile-menu-btn-connect:active,
  .mobile-menu .mobile-menu-inner .mobile-menu-top-actions a.mobile-menu-btn-beta:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 2px 2px 0 #0a0a0a !important;
  }
  /* Pages use .mobile-menu-inner a:hover { opacity: 0.6 } — do not dim CTAs */
  .mobile-menu .mobile-menu-inner .mobile-menu-top-actions a.mobile-menu-btn-connect:hover,
  .mobile-menu .mobile-menu-inner .mobile-menu-top-actions a.mobile-menu-btn-beta:hover {
    opacity: 1 !important;
  }
  /* Override page-level .mobile-menu-inner a (28px) for top CTAs */
  .mobile-menu-inner .mobile-menu-btn-connect,
  .mobile-menu-inner .mobile-menu-btn-beta {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.3 !important;
    padding: 12px 20px !important;
    border-bottom: none !important;
  }
  /* Primary nav list - smaller than legacy 28px, fills width without overwhelming */
  .mobile-menu-inner > a:not(.mobile-menu-btn-connect):not(.mobile-menu-btn-beta) {
    font-size: clamp(17px, 4.4vw, 21px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    padding: 12px 0 !important;
    line-height: 1.2 !important;
  }
  .mobile-menu-inner > a.menu-small {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    padding: 8px 0 !important;
    color: rgba(10, 10, 10, 0.45) !important;
    border-bottom-color: rgba(10, 10, 10, 0.06) !important;
  }
  /* One divider after primary nav (avoid double line: last nav link has no bottom border). */
  .mobile-menu-inner > a:last-of-type {
    border-bottom: none !important;
  }
  .mobile-menu-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 16px;
    width: 100%;
    margin-top: auto !important;
    padding-top: 18px !important;
    border-top: 2px solid rgba(10, 10, 10, 0.18);
  }
  .mobile-menu-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 4px;
    margin-left: auto;
  }
  .mobile-menu-footer-legal a {
    display: inline-block;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    padding: 4px 0 4px 8px !important;
    color: rgba(10, 10, 10, 0.42) !important;
    border-bottom: none !important;
    text-decoration: none !important;
    text-transform: none !important;
  }
  .mobile-menu-footer-legal a:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    margin-left: 10px;
    background: rgba(10, 10, 10, 0.14);
    vertical-align: middle;
  }
  .mobile-menu-footer .footer-somewhere {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start;
    gap: 6px 8px;
    text-align: left;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.35);
  }
  .mobile-menu-footer .footer-somewhere a {
    border-bottom: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .mobile-menu-footer .footer-somewhere a img {
    display: block;
    margin: 0;
    border: none;
    box-shadow: none;
  }
  .mobile-menu-footer-legal a.menu-active {
    color: #0a0a0a !important;
    font-weight: 600 !important;
  }
  .home-mi-products-fine-label {
    display: none !important;
  }
  .home-mi-products-fine-links a:not([href*="secure-private-by-design"]) {
    display: none !important;
  }
  .home-mi-products-fine-links .sep {
    display: none !important;
  }
  /* Active page: white text + hard black shadow (not full-width white bar) */
  .mobile-menu-inner > a.menu-active {
    background: transparent !important;
    color: #ffffff !important;
    text-shadow: 1.5px 1.5px 0 #0a0a0a;
    box-shadow: none !important;
    padding: 12px 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-bottom: 1px solid rgba(10, 10, 10, 0.1) !important;
  }
  /* Last nav link (FAQ): no hairline above footer divider */
  .mobile-menu-inner > a.menu-active:last-of-type {
    border-bottom: none !important;
  }

  /* Home: hide center masthead eyebrow on mobile (SETTING THE STANDARD FOR MEMORY) */
  #heroSection.hero.hero-eyebrow-masthead > .hero-dept {
    display: none !important;
  }

  /* Hero eyebrow: vertically centered in masthead band; Knewave white + black stroke (match hero tagline). */
  section.hero.hero-eyebrow-masthead > .hero-dept,
  section.value-hero.hero-eyebrow-masthead > .dept.whymi-hero-dept {
    position: fixed !important;
    /* Vertical center of masthead band (~80px) below safe area */
    top: calc(env(safe-area-inset-top, 0px) + 44px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(62vw, 300px) !important;
    max-width: calc(100vw - 168px) !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 6px !important;
    z-index: 110 !important;
    pointer-events: none !important;
    font-family: 'Knewave', cursive !important;
    font-size: clamp(10px, 2.9vw, 14px) !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    color: #ffffff !important;
    -webkit-text-stroke: 2px #0a0a0a !important;
    paint-order: stroke fill !important;
    text-shadow: none !important;
  }

  /* Problem section: stack 2-col grid to single column on mobile */
  #problem-section > div > div {
    display: block !important;
  }
  #problem-section aside {
    border-left: none !important;
    border-top: 1px solid rgba(10,10,10,0.16) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
    margin-top: 32px !important;
    text-align: left !important;
  }

  /* Before/After proof cards: stack on mobile */
  .before-after-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: clamp(64px, 10vw, 96px) !important;
  }
  /* Dotted line between red (WITHOUT MI) and white (WITH MI) cards on mobile */
  .before-after-grid > div:first-child {
    border-bottom: none !important;
    box-shadow: 5px 0 0 #0A0A0A !important;
  }
  .before-after-grid > div:last-child {
    border-top: 2px dashed rgba(10,10,10,0.25) !important;
  }

  /* Case study cards on product page: stack on mobile */
  .cs-proof-cards {
    grid-template-columns: 1fr !important;
  }

  /* Core Shift 2-col: stack on mobile */
  #core-shift-grid {
    display: block !important;
  }
  #core-shift-grid aside {
    border-left: none !important;
    border-top: 1px solid rgba(10,10,10,0.16) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
    margin-top: 32px !important;
    text-align: left !important;
  }

  /* Cost grid: stack on mobile */
  .cost-grid {
    grid-template-columns: 1fr !important;
  }

  /* Core shift article + stat rail: stack on mobile */
  .core-shift-grid {
    grid-template-columns: 1fr !important;
  }
  .core-shift-grid aside {
    border-left: none !important;
    border-top: 1px solid rgba(10,10,10,0.16) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
    margin-top: 16px !important;
    text-align: left !important;
  }

  /* Case studies narrative grid: stack on mobile */
  .cs-narrative-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Case studies Without/With MI comparison: stack on mobile */
  .cs-compare-pair {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Product page: did-you-know stats under tiers: stack on mobile */
  .did-you-know-grid {
    grid-template-columns: 1fr !important;
  }

  /* Product page: infra spectrum tier cards: stack on mobile */
  .infra-spectrum-grid {
    grid-template-columns: 1fr !important;
  }

  /* Nav right actions: hide on mobile (hamburger menu takes over) */
  .nav-right-actions {
    display: none !important;
  }

  /* Case studies: standards grid stack on mobile */
  .cs-standards-grid {
    grid-template-columns: 1fr !important;
  }
  .cs-standards-grid aside {
    border-left: none !important;
    border-top: 1px solid rgba(10,10,10,0.16) !important;
    padding-left: 0 !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    text-align: left !important;
  }

  /* Reduce iOS/Android scroll “tug of war” between the page and nested regions */
  body {
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
  }

  /* Home splash: subline repeats hero; hide on small screens */
  .splash-tagline--sub {
    display: none !important;
  }

  /* Home setup: bridge line removed on mobile (headline + chart only) */
  #home-setup-steps .hs-bridge {
    display: none !important;
  }
}

/* ============================================================
   MOBILE SPACING & PADDING AUDIT — industry-standard values
   ============================================================ */
@media (max-width: 768px) {
  /* Standard mobile horizontal padding: 16-20px */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Consistent section vertical spacing: 48-64px */
  section:not([style*="display:none"]):not([style*="display: none"]) {
    padding-top: clamp(48px, 8vw, 72px);
    padding-bottom: clamp(48px, 8vw, 72px);
  }

  /* Headings: prevent overflow */
  h1, h2, h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Prevent horizontal overflow on all elements */
  body {
    overflow-x: hidden;
  }

  /* Standard tap target sizes */
  a, button {
    min-height: 44px;
  }
}

/* Desktop: tuck CONNECT / beta toward the edge; slightly tighten nav link gap so center rail breathes */
@media (min-width: 769px) {
  .masthead-inner .nav-right-actions {
    right: 4px !important;
  }
  .masthead-inner .masthead-nav {
    gap: 26px !important;
  }
}

/* Desktop masthead: active page = white pill + black 3D (matches mobile mm-active affordance) */
@media (min-width: 901px) {
  .masthead-nav a.active {
    background: #fff !important;
    color: #0a0a0a !important;
    font-weight: 800 !important;
    padding: 6px 10px !important;
    box-shadow: 3px 3px 0 #0a0a0a !important;
    text-shadow: none !important;
  }
}