/* ==========================================================================
   a16z Frontier mirror - mobile adaptation layer
   --------------------------------------------------------------------------
   This file is NOT part of the original site. serve.mjs injects it into every
   HTML response and switches the viewport meta to `viewport-fit=cover`, so
   phones render edge to edge with correct safe-area handling. The mirrored
   files on disk stay byte-identical to a16zfrontier.com.

   Disable with:  node serve.mjs --no-mobile
   ========================================================================== */

/* 1. iOS inflates text in landscape unless told otherwise */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 2. anchor jumps must clear the fixed header (56px mobile / 73px desktop).
      Without this every in-page link lands under the nav bar. */
html {
  scroll-padding-top: 72px;
  scroll-behavior: smooth;
}
@media (max-width: 959px) {
  html { scroll-padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 3. belt-and-braces horizontal guard: the hero SVG is ~4000px wide and is
      clipped by its section, but older WebKit can still leak it into the
      document scroll box. */
body {
  overflow-x: clip;
}

/* 4. touch: kill the blue tap flash, the 300ms double-tap delay and
      accidental pinch-zoom on controls. */
a,
button,
[role="button"],
label,
summary,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 5. safe areas (notch, dynamic island, home indicator, landscape ears).
      env() resolves to 0px everywhere it is not needed, so this block is a
      no-op on desktop and on notch-less phones. */
:root {
  --sai-top: env(safe-area-inset-top, 0px);
  --sai-right: env(safe-area-inset-right, 0px);
  --sai-bottom: env(safe-area-inset-bottom, 0px);
  --sai-left: env(safe-area-inset-left, 0px);
}

@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 959px) {
    /* the header is fixed and grows by the status-bar inset, so the document
       must shift by the same amount or the hero heading lands underneath it */
    body {
      padding-top: var(--sai-top);
    }

    /* anchor targets now have to clear header + inset */
    html {
      scroll-padding-top: calc(64px + var(--sai-top));
    }

    /* header is fixed at top-0 with h-56px */
    #header {
      height: calc(56px + var(--sai-top)) !important;
      padding-top: var(--sai-top);
      padding-left: var(--sai-left);
      padding-right: var(--sai-right);
    }

    /* nav drawer starts under the header and must not hide behind it */
    #nav {
      top: calc(56px + var(--sai-top)) !important;
      height: calc(var(--vh, 100vh) - 56px - var(--sai-top)) !important;
      padding-left: var(--sai-left);
      padding-right: var(--sai-right);
      padding-bottom: calc(1rem + var(--sai-bottom));
    }

    /* full-screen search overlay */
    body.search-active .z-\[9999\] {
      padding-top: var(--sai-top);
      padding-bottom: var(--sai-bottom);
    }

    /* footer sits against the home indicator.
       margin (not padding) so the site's own footer spacing is never
       overridden; it resolves to 0 on every device without insets. */
    footer {
      margin-bottom: var(--sai-bottom);
      padding-left: var(--sai-left);
      padding-right: var(--sai-right);
    }
  }
}

/* 6. the address bar grows/shrinks; the site already tracks --vh in JS, but
      iOS reports the *large* viewport, so cap the hero to the visual one. */
@supports (height: 100dvh) {
  @media (max-width: 959px) {
    #nav {
      height: calc(100dvh - 56px - var(--sai-top)) !important;
    }
  }
}