/*
 * Retro Recordings XR — Mobile & iOS Fixes
 *
 * Loaded after brand.css to safely override mobile layout issues.
 * DO NOT use html/body overflow-x:hidden here — it changes which
 * element acts as scroll container and breaks media query viewport
 * calculations on mobile Safari (causes display:none rules to not fire).
 *
 * @package    RetroRecordingsXR
 * @since      1.1.9
 */

/* ═══════════════════════════════════════════════════════════════
   Body padding-top — iOS safe area support
   ---------------------------------------------------------------
   header.php has inline style="padding-top:52px" for the fixed nav.
   On iOS (notch / Dynamic Island) the nav grows by safe-area-inset-top
   so body must grow the same amount.
   env() fallback is 0px on all other browsers → no change there.
   ═══════════════════════════════════════════════════════════════ */

body {
    padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile Navigation — fix position:relative bug in brand.css
   ---------------------------------------------------------------
   brand.css sets .site-nav { position:relative } at ≤768px.
   This takes the nav out of fixed flow, causing:
     · nav scrolls away with the page
     · body padding-top:52px creates a dead-space gap above the nav
     · dropdown position:absolute calculates wrong parent
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Keep nav fixed — iOS notch adds to its height */
    .site-nav {
        position: fixed;
        padding: env(safe-area-inset-top, 0px) 16px 0;
        height: calc(52px + env(safe-area-inset-top, 0px));
    }

    /* Brand name was 9px / opacity 0.75 — barely visible on mobile */
    .site-nav-logo span {
        font-size: 12px;
        opacity: 1;
    }

    /* Hamburger */
    .site-nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        margin-left: auto;
    }

    /* Dropdown: fixed below the fixed nav bar */
    .site-nav-links {
        display: none;
        position: fixed;
        top: calc(52px + env(safe-area-inset-top, 0px));
        left: 0;
        right: 0;
        background: rgba(26, 26, 26, 0.97);
        flex-direction: column;
        padding: 20px 24px;
        gap: 18px;
        border-bottom: 1px solid rgba(212, 165, 116, 0.2);
        z-index: 99;
    }

    .site-nav.nav-open .site-nav-links {
        display: flex;
    }

    .site-nav-links a {
        font-size: 11px;
        letter-spacing: 0.15em;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Gallery captions — closer to card bottom edge
   ---------------------------------------------------------------
   brand.css sets bottom:8px !important on .photo-card-caption.
   Override here (same specificity, later in cascade = wins).
   ═══════════════════════════════════════════════════════════════ */

.photo-card-caption {
    bottom: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   Hero — small-screen content fixes
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* Tagline: whitespace-nowrap overflows viewport on small screens */
    #hero .whitespace-nowrap {
        white-space: normal;
        text-align: center;
    }

    /* XR accent: tracking-[0.15em] at text-6xl renders as 'X  R' */
    #hero .tracking-\[0\.15em\] {
        letter-spacing: 0.06em;
    }

    /* CTA button: breathing room above iOS home indicator */
    #hero a.inline-block {
        margin-bottom: 16px;
    }
}