/* ==========================================================================
   M-TUNED — shared mobile / responsive layer
   ==========================================================================
   Loaded LAST on every page so it wins over the per-page inline <style> blocks
   without having to edit five hand-written stylesheets.

   WHY THIS FILE EXISTS
   Every page was built desktop-first with a `position: fixed` nav and a
   HARDCODED top offset on the content (body padding-top 80/100px, .hero
   padding-top 120px, dyno .container padding-top 120px). On a phone the nav
   wraps to 345px tall, so 225px of the page vanished underneath it, and
   `.nav-links` — a non-wrapping flex row — was pushed to x=436 on a 390px
   viewport, i.e. entirely off-screen. There was no navigation on mobile at all,
   and `body { overflow-x: hidden }` hid the evidence.

   THE FIX, in two halves:
     1. Collapse the nav to ONE compact row (logo + hamburger). The hours block
        moves into the drawer, where there's room for it.
     2. Stop trusting hardcoded offsets. mobile-nav.js measures the real nav
        height into `--mt-nav-h` and every top offset below is derived from it,
        so the content can never hide under the bar again.

   BREAKPOINT: 900px. The desktop link row needs ~700px before it collides with
   the logo; 900px switches over with margin to spare.

   Keep this file free of page-specific rules — anything that only affects one
   page belongs in that page's own <style> block.
   ========================================================================== */

:root {
    /* Real value written by mobile-nav.js. This is only the pre-JS fallback,
       deliberately a touch generous so a slow script can't clip the heading. */
    --mt-nav-h: 64px;
}

/* Hidden on desktop; the media query below reveals them. Declared OUTSIDE the
   query on purpose — mobile-nav.js builds these nodes at every viewport, so
   without a base `display:none` the hamburger and the drawer's hours copy would
   both appear in the desktop nav row. */
.mt-navtoggle,
.mt-drawer-hours { display: none; }

/* --------------------------------------------------------------------------
   TABLET AND PHONE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

    /* A single stray wide child used to drag the whole page sideways. Belt and
       braces: hide the overflow, and below we make the usual offenders (tables,
       SVG charts, <pre>) scroll inside their own box instead. */
    html, body { max-width: 100%; overflow-x: hidden; }

    /* ---- Nav bar: one compact row ---------------------------------------- */
    nav .nav-container {
        max-width: none;
        padding: 0.5rem 0.9rem !important;
        gap: 0.6rem;
        /* The logo must be allowed to shrink or it forces the row wider than
           the viewport and pushes the toggle off the edge. */
        min-width: 0;
    }
    nav .logo,
    nav .logo-container { min-width: 0; }
    nav .logo-container { gap: 0.75rem !important; }
    nav .logo img { height: 38px !important; width: auto; }
    nav .logo-text { font-size: 1.15rem !important; }

    /* The live-hours block is 200px+ of text — it was the element bleeding off
       the right edge. mobile-nav.js re-mounts a copy inside the drawer, so the
       information is still one tap away rather than lost. */
    nav .header-info { display: none !important; }

    /* ---- Hamburger ------------------------------------------------------- */
    .mt-navtoggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;                    /* 44px = Apple's minimum touch target */
        height: 44px;
        margin-left: auto;
        padding: 0;
        background: transparent;
        border: 1px solid rgba(251, 191, 36, 0.35);
        border-radius: 10px;
        color: var(--championship-gold, #fbbf24);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mt-navtoggle:active { background: rgba(251, 191, 36, 0.12); }
    .mt-navtoggle-bars {
        position: relative;
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: background 0.18s ease;
    }
    .mt-navtoggle-bars::before,
    .mt-navtoggle-bars::after {
        content: '';
        position: absolute;
        left: 0;
        width: 20px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 0.18s ease;
    }
    .mt-navtoggle-bars::before { top: -6px; }
    .mt-navtoggle-bars::after  { top: 6px; }

    /* Open state: the three bars fold into an X. */
    body.mt-nav-open .mt-navtoggle-bars { background: transparent; }
    body.mt-nav-open .mt-navtoggle-bars::before { transform: translateY(6px) rotate(45deg); }
    body.mt-nav-open .mt-navtoggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

    /* ---- Drawer ---------------------------------------------------------- */
    nav .nav-links {
        position: fixed;
        top: var(--mt-nav-h);
        left: 0;
        right: 0;
        display: flex !important;       /* beats the page's inline `display:flex` row */
        flex-direction: column;
        align-items: stretch;
        gap: 0 !important;
        margin: 0;
        padding: 0.25rem 1rem 1.1rem;
        background: #0d0d0d;
        border-bottom: 1px solid rgba(251, 191, 36, 0.25);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
        /* A long drawer on a short phone in landscape has to scroll itself. */
        max-height: calc(100vh - var(--mt-nav-h));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* visibility (not display) keeps the links focusable-when-open and
           reachable to screen readers, and lets the transition actually run. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }
    @supports (max-height: 100dvh) {
        /* dvh excludes the mobile browser chrome; vh does not, so on iOS Safari
           the last drawer item can sit under the toolbar. */
        nav .nav-links { max-height: calc(100dvh - var(--mt-nav-h)); }
    }
    body.mt-nav-open nav .nav-links {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    nav .nav-links .nav-link,
    nav .nav-links > a {
        display: block !important;      /* portal hid non-active links entirely */
        padding: 0.95rem 0.25rem;
        font-size: 1rem !important;
        letter-spacing: 1px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    nav .nav-links > a:last-child { border-bottom: none; }

    /* Hours summary parked at the foot of the drawer by mobile-nav.js. */
    .mt-drawer-hours {
        display: block;
        padding: 0.9rem 0.25rem 0.15rem;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        font-size: 0.9rem;
        color: var(--silver, #a3a3a3);
    }
    .mt-drawer-hours p { margin: 0.35rem 0; }
    /* The widget renders in `compact` mode because it was authored for the nav
       bar, which hides the static "M-F 10-6, lunch 2-3" line. In the drawer
       there's room for it, so put it back — this is the one place on a phone
       where a customer goes looking for the shop's hours. Done in CSS rather
       than by stripping .is-compact in JS: the widget re-renders itself every
       30 seconds and would overwrite the class. */
    .mt-drawer-hours .mt-hours.is-compact .mt-hours-schedule { display: block; }
    .mt-drawer-hours .mt-hours { width: 100%; min-width: 0; }

    /* The shop cart badge is not navigation — it must stay on the bar, visible,
       instead of being buried in a closed drawer. mobile-nav.js lifts it out of
       .nav-links; this styles it once it's a direct child of .nav-container. */
    nav .nav-container > .cart-toggle {
        flex: 0 0 auto;
        margin-left: auto;
        min-height: 44px;
        padding: 0.5rem 0.8rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
    }
    /* With the cart holding `margin-left:auto`, the toggle must not claim it too
       or the two get separated by all the free space. */
    nav .nav-container > .cart-toggle ~ .mt-navtoggle { margin-left: 0; }

    /* ---- Top offset -----------------------------------------------------
       This is the "top is all cut off" bug. Each page hardcoded a different
       number for a nav that is no longer that tall. One derived value replaces
       all of them; the page-level offsets are zeroed so they can't stack. */
    body { padding-top: var(--mt-nav-h) !important; }

    main.hero,
    body > .hero {
        /* index.html: `padding: 120px 2rem 2rem` + `min-height: 100vh`. The
           100vh has to go, otherwise body padding pushes the page 64px taller
           than the screen and every phone gets a pointless scrollbar. */
        min-height: auto !important;
        padding: 1.75rem 1.1rem 2.5rem !important;
    }
    .container {
        padding-top: 1.25rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    /* dyno + shop nest a .hero INSIDE .container, where the outer padding has
       already cleared the nav. */
    .container .hero { padding-top: 0.5rem !important; }

    /* ---- Typography: clamp the desktop display sizes ---------------------- */
    .hero-title    { font-size: clamp(1.6rem, 8vw, 2.4rem) !important; }
    .hero-subtitle,
    .hero-sub      { font-size: 1.05rem !important; }
    .page-title    { font-size: clamp(1.5rem, 7.5vw, 2.1rem) !important; }
    h1 { overflow-wrap: break-word; }

    /* ---- Buttons: stack full width, never a 3rem-padded pill off-screen --- */
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.85rem !important;
    }
    .cta-buttons .btn {
        /* index.html has no global border-box reset, so `width: 100%` is the
           CONTENT width and the padding is added on top — 355 + 40 = 395px on a
           390px screen, which is exactly the overflow this rule prevents.
           Scoped rather than a blanket `* { box-sizing }` because the other
           pages' grids were authored against content-box. */
        box-sizing: border-box;
        width: 100%;
        padding: 0.95rem 1.25rem !important;
        text-align: center;
    }
    button, .btn, a.btn, input[type="submit"] { min-height: 44px; }

    /* Same reasoning for anything else given an explicit full width here. */
    input, select, textarea, .mt-navtoggle { box-sizing: border-box; }

    /* ---- Wide content scrolls inside itself, not the page ---------------- */
    img, canvas, video, svg { max-width: 100%; height: auto; }
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    pre { max-width: 100%; overflow-x: auto; }

    /* ---- Forms ----------------------------------------------------------
       iOS Safari zooms the whole viewport when a focused field's text is under
       16px, and never zooms back out. Non-negotiable minimum. */
    input, select, textarea {
        font-size: 16px !important;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   NARROW PHONES (iPhone SE / mini, 360-375px)
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
    nav .logo img { height: 34px !important; }
    .container { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
    nav .nav-container > .cart-toggle {
        padding: 0.45rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
}

/* --------------------------------------------------------------------------
   Respect the OS "reduce motion" setting — the drawer still works, it just
   appears instead of sliding.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    nav .nav-links,
    .mt-navtoggle-bars,
    .mt-navtoggle-bars::before,
    .mt-navtoggle-bars::after { transition: none !important; }
}