/* ==========================================================================
   RAOU Travel — Responsive Overrides v8
   Loads AFTER bundled Tailwind CSS to fix layout across all devices.

   Structure:
     0. Global fixes (all viewports)
     1. Desktop full (>1250px)
     2. Tablet / resized desktop (769px–1250px)
     3. Mobile (≤768px) — IDENTICAL for Safari, Chrome, all browsers
     4. iOS Safe Area only (no sizing differences)
     5. Mobile menu overlay (≤1024px)
     6. Narrow mobile (<375px)
     7. Z-index management

   v8 CRITICAL CHANGES:
     - Eliminated :has() from all logo/sizing selectors for Safari compat
     - Separated :has() selectors into their OWN rule blocks so invalid
       selectors don't kill the entire rule
     - Removed ALL iOS-specific sizing — one set of rules for ALL browsers
     - iOS section now ONLY handles safe-area-inset (notch padding)
     - Added inline-style-level specificity for logo (multiple paths)
     - Made hero more compact: 1.75rem title, tighter margins
     - Removed padding-top from hero flex container (let centering work)
   ========================================================================== */

/* ==========================================================================
   0. GLOBAL — All viewports
   ========================================================================== */

/* 0.1 Remove grey line/shadow beneath navbar */
nav,
body nav {
    border-bottom: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
}

/* 0.1b Same for header containing nav — separate rule for :has() safety */
header:has(nav),
body header:has(nav) {
    border-bottom: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
}

/* 0.2 Navbar flex alignment */
nav {
    display: flex !important;
    align-items: center !important;
}

/* 0.2b header:has(nav) — separate for :has() safety */
header:has(nav) {
    display: flex !important;
    align-items: center !important;
}

/* 0.3 Logo container: never shrink/grow */
nav a[href="/"],
header a[href="/"],
.logo,
.brand {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    min-width: auto !important;
    display: flex !important;
    align-items: center !important;
}

/* 0.4 Remove grey borders from images globally */
img,
.image-zoom-container,
.image-wrapper,
a[href*="destinations"] div {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 0.5 Footer link consistency */
footer a,
footer ul li a,
footer nav a {
    display: block !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: normal !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: auto !important;
    box-shadow: none !important;
    color: inherit !important;
}

footer button {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
    height: auto !important;
    min-height: auto !important;
    width: auto !important;
}

/* 0.6 Journal entry headers — prevent navbar rules from applying */
article header,
.journal-entry header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin-bottom: 2rem !important;
    background: transparent !important;
    box-shadow: none !important;
    display: block !important;
    z-index: auto !important;
    border: none !important;
}

/* 0.7 Journal entry images */
article img,
.journal-entry img {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: 500px !important;
    object-fit: cover !important;
    margin-bottom: 1.5rem !important;
    display: block !important;
}

/* 0.8 Journal entry image containers */
article div[class*="h-[400"],
article div[class*="h-[600"],
.journal-entry div[class*="h-"] {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: 400px !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
}

/* 0.9 Non-nav headers must be block layout — :has() in separate rule */
header:not(:has(nav)) {
    display: block !important;
}

/* 0.10 Journal entry prose body spacing */
article .prose,
.journal-entry .prose {
    margin-top: 2rem !important;
}

/* ==========================================================================
   1. DESKTOP FULL (>1250px)
   ========================================================================== */
@media only screen and (min-width: 1251px) {

    /* Logo: 85px on desktop — WITHOUT :has() */
    nav img,
    .logo img {
        height: 85px !important;
        min-height: 85px !important;
        max-height: 85px !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        transition: none !important;
        object-fit: contain !important;
        display: block !important;
        padding: 5px 0 !important;
        box-sizing: content-box !important;
    }

    /* Same for header>nav context — :has() separate rule */
    header:has(nav) img {
        height: 85px !important;
        min-height: 85px !important;
        max-height: 85px !important;
        width: auto !important;
        max-width: none !important;
        object-fit: contain !important;
    }
}

/* 1.1 Desktop menu font size fix (>1024px) */
@media only screen and (min-width: 1025px) {

    header nav a[class*="text-xs"],
    header nav button[class*="text-xs"] {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   2. TABLET / RESIZED DESKTOP (769px – 1250px)
   ========================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1250px) {

    /* 2.1 Navbar: relative/in-flow — standard selectors */
    nav,
    body nav {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 0.25rem 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        background-color: #ffffff !important;
        border-bottom: none !important;
        box-shadow: none !important;
        z-index: 1000 !important;
    }

    /* 2.1b header:has(nav) — separate rule */
    header:has(nav),
    body header:has(nav) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 0.25rem 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        background-color: #ffffff !important;
        border-bottom: none !important;
        box-shadow: none !important;
        z-index: 1000 !important;
    }

    /* 2.2 Kill pt-20 spacer (designed for fixed nav, not needed for in-flow) */
    body,
    html,
    body #root>div:first-child,
    body main,
    #root,
    #root>div>div:not(.inset-0):not([class*="inset-0"]),
    .pt-20:not(.inset-0):not([class*="inset-0"]),
    [class*="pt-20"]:not(.inset-0):not([class*="inset-0"]) {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 2.3 Hero flush below navbar */
    header+section,
    header+div,
    .hero-section {
        margin-top: -1px !important;
        padding-top: 0 !important;
    }

    /* 2.4 Inner nav container */
    nav>div {
        min-height: 90px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* 2.4b :has() version */
    header:has(nav)>div {
        min-height: 90px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* 2.5 Logo: 70px on tablet — WITHOUT :has() */
    nav img,
    .logo img {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        width: auto !important;
        max-width: 200px !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
        display: block !important;
        padding: 4px 0 !important;
        box-sizing: content-box !important;
        margin-right: auto !important;
        position: relative !important;
        top: auto !important;
    }

    /* 2.5b :has() version */
    header:has(nav) img {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        width: auto !important;
        max-width: 200px !important;
        object-fit: contain !important;
    }

    /* 2.6 Nav buttons */
    nav>div>div>button,
    nav>div>button,
    nav a[href*="contact"] {
        white-space: nowrap !important;
        font-size: 0.9rem !important;
        padding: 0.5rem 0.75rem !important;
        max-width: none !important;
        margin-left: 1rem !important;
    }

    /* 2.6b :has() version */
    header:has(nav)>div>div>button,
    header:has(nav)>div>button,
    header:has(nav) a[href*="contact"] {
        white-space: nowrap !important;
        font-size: 0.9rem !important;
        padding: 0.5rem 0.75rem !important;
        max-width: none !important;
        margin-left: 1rem !important;
    }

    /* 2.7 Dropdown for Signature Destinations */
    [role="menu"],
    [data-state="open"] {
        width: auto !important;
        min-width: 200px !important;
        max-width: 300px !important;
        right: 0 !important;
        left: auto !important;
        white-space: normal !important;
    }
}

/* Kill pt-20 spacer below 1250px (exclude mobile menu overlay) */
@media only screen and (max-width: 1250px) {

    .pt-20:not(.inset-0):not([class*="inset-0"]),
    [class*="pt-20"]:not(.inset-0):not([class*="inset-0"]) {
        padding-top: 0 !important;
    }
}

/* ==========================================================================
   3. MOBILE (≤768px) — ONE set of rules for ALL browsers
   ========================================================================== */
@media only screen and (max-width: 768px) {

    /* ---- 3.1 Reset ---- */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    #root>div {
        margin-top: 0 !important;
    }

    /* ---- 3.2 Navbar: fixed at top ---- */
    /* Standard selectors (no :has()) */
    nav,
    .navigation-menu {
        position: fixed !important;
        min-height: 56px !important;
        max-height: 64px !important;
        padding: 0.25rem 0.75rem !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background-color: #ffffff !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /* :has() version in separate rule block */
    header:has(nav) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 56px !important;
        max-height: 64px !important;
        padding: 0.25rem 0.75rem !important;
        background-color: #ffffff !important;
        z-index: 9999 !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /* ---- 3.3 Logo: STRICT 40px on ALL mobile browsers ---- */

    /* Path 1: nav img (catches header > nav > ... > img) */
    nav img {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        display: block !important;
        padding: 0 !important;
    }

    /* Path 2: higher specificity — catches the exact DOM path */
    header nav img,
    header nav div a img,
    nav div a img {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        display: block !important;
        padding: 0 !important;
    }

    /* Path 3: target by Tailwind class (catches img.h-14) */
    img[class*="h-14"],
    img[class*="w-auto"][class*="object-contain"] {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
    }

    /* Path 4: target by alt text (only for nav context) */
    nav img[alt="raou"],
    header nav img[alt="raou"] {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
    }

    /* Path 5: .logo wrapper */
    .logo,
    .logo img,
    nav a[href="/"] img,
    header a[href="/"] img {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        display: block !important;
        padding: 0 !important;
    }

    /* Path 6: :has() version — separate rule */
    header:has(nav) img {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 120px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        display: block !important;
        padding: 0 !important;
    }

    /* ---- 3.4 Dropdown Menu ---- */
    .navigation-menu [role="menu"],
    [role="menubar"] {
        top: 56px !important;
        max-height: calc(100vh - 56px) !important;
        overflow-y: auto !important;
        padding: 1.5rem !important;
    }

    /* ---- 3.5 Typography ---- */

    /* Hero title — compact to ensure CTA buttons visible */
    h1,
    .text-5xl,
    .text-7xl,
    .text-8xl {
        font-size: 2.5rem !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;
    }

    /* Section headings */
    h2,
    .text-4xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    h3 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    /* Body text */
    p,
    li,
    .text-base,
    .text-lg {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Spans inherit */
    span {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* Small text floor */
    .text-sm,
    .text-xs,
    figcaption,
    label,
    .tracking-widest {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    /* Section body text */
    section div p,
    section div span,
    section li {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* List items */
    ul li,
    ol li,
    .text-muted-foreground {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Link text */
    a span,
    a p,
    a div {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    /* ---- 3.6 Nav links ---- */
    nav a,
    nav button {
        font-size: 1rem !important;
        font-weight: 500 !important;
    }

    /* ---- 3.7 Hero images ---- */
    .hero-section img {
        height: 70vh !important;
        min-height: 400px !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Generic images — section-scoped */
    section img,
    main img,
    article img,
    footer img {
        max-width: 100% !important;
    }

    /* ---- 3.8 Forms & Inputs ---- */
    input,
    textarea,
    select,
    form button,
    section button,
    main button {
        max-width: 100% !important;
        width: 100% !important;
        font-size: 1rem !important;
        padding: 0.75rem 1rem !important;
        min-height: 48px !important;
    }

    /* ---- 3.9 Container Padding ---- */
    .container,
    section {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* ---- 3.10 Section z-index ---- */
    section,
    main,
    .relative:not(header):not(nav) {
        z-index: auto !important;
    }

    section[class*="relative"],
    section h2,
    section h3 {
        z-index: 1 !important;
    }

    /* ---- 3.11 Destination image containers ---- */
    section a[class*="group"] img,
    section div[class*="group"] img,
    main a[class*="group"] img,
    main div[class*="group"] img {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* ---- 3.12 HERO SECTION — Critical mobile fix ---- */

    /* Content padding to clear fixed ~64px navbar (for non-hero pages) */
    main,
    #root>div>div:not(:first-child) {
        padding-top: 64px !important;
    }

    /* Home hero: h-screen section. Do NOT add padding-top to the section.
       The flex centering naturally keeps content in the middle of the viewport.
       The fixed navbar sits on top but won't overlap centered content. */
    section:first-of-type {
        padding-top: 0 !important;
    }

    /* Let flex justify-center do its job, but shift content ~10% higher
       by adding bottom padding. This makes the centering space asymmetric,
       pushing the visual center upward without clipping anything. */
    section:first-of-type>div:last-child,
    section.relative>div.relative {
        padding-top: 0 !important;
        padding-bottom: 10vh !important;
    }

    /* Hero h1: tight margins */
    section:first-of-type h1 {
        margin-top: 0 !important;
        margin-bottom: 0.25rem !important;
    }

    /* Hero subtitle: very compact */
    section:first-of-type h1+div p,
    section:first-of-type h1~p,
    section.relative p.font-sans {
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
        letter-spacing: 0.12em !important;
    }

    /* Hero CTA buttons: compact, fit side by side */
    section:first-of-type a[class*="border"],
    section.relative a[class*="border"][class*="px-8"] {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        min-height: auto !important;
    }

    /* Hero CTA button text */
    section:first-of-type a[class*="border"] span,
    section.relative a[class*="border"] span {
        font-size: 0.7rem !important;
        letter-spacing: 0.12em !important;
    }

    /* Kill Tailwind mb-10 (40px) on hero h1 */
    section:first-of-type h1[class*="mb-10"],
    section.relative h1[class*="mb-10"],
    section:first-of-type .mb-10,
    section.relative.h-screen .mb-10,
    section[class*="h-screen"] .mb-10 {
        margin-bottom: 0.25rem !important;
    }

    /* Kill Tailwind mb-16 (64px) on hero subtitle */
    section:first-of-type p[class*="mb-16"],
    section.relative p[class*="mb-16"],
    section:first-of-type div[class*="mb-16"],
    section:first-of-type .mb-16,
    section.relative.h-screen .mb-16,
    section[class*="h-screen"] .mb-16 {
        margin-bottom: 0.5rem !important;
    }

    /* ---- 3.13 About/Services hero — full-bleed image ---- */
    section[class*="60vh"],
    section[class*="min-h-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    section[class*="60vh"]>div[class*="absolute"],
    section[class*="60vh"]>div[class*="inset-0"] {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    section[class*="60vh"] img,
    section[class*="60vh"]>div>img {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        opacity: 1 !important;
        display: block !important;
    }

    /* ---- 3.14 Non-nav page headers ---- */
    /* Standard selector (no :has()) — target headers NOT in nav context */
    article header,
    section header,
    div header:not(:first-child) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        max-height: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: block !important;
    }

    /* :has() version — separate rule */
    header:not(:has(nav)) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        max-height: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: block !important;
    }

    /* Pages with pt-32 wrapper need padding-top for fixed navbar */
    div[class*="pt-32"],
    div[class*="pt-24"] {
        padding-top: 72px !important;
    }

    article[class*="pt-32"],
    article[class*="pt-24"] {
        padding-top: 72px !important;
    }

    section[class*="pt-32"] {
        padding-top: 72px !important;
    }

    /* Contact page */
    .contact-section,
    [id="contact"] {
        scroll-margin-top: 72px !important;
        padding-top: 40px !important;
    }

    /* ---- 3.15 Centering ---- */
    h1,
    h1+p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    h1,
    h1+p,
    h1+div,
    h1~p:first-of-type {
        display: block !important;
        width: 100% !important;
    }

    h1+p,
    h1+div,
    h1~p:first-of-type {
        margin-top: 0.75rem !important;
    }

    /* Fix background-attachment on mobile */
    section,
    .hero-section,
    .background-fixed {
        background-attachment: scroll !important;
        background-position: center !important;
        background-size: cover !important;
    }

    /* ---- 3.16 Journal entry stacking ---- */
    article header>* {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    article header h1 {
        margin-bottom: 1.5rem !important;
    }

    article header div[class*="h-[400"],
    article header div[class*="h-[600"] {
        height: 250px !important;
        min-height: 200px !important;
        max-height: 300px !important;
        width: 100% !important;
        overflow: hidden !important;
        margin-top: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    article header div[class*="h-[400"] img,
    article header div[class*="h-[600"] img {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
    }

    article .prose {
        margin-top: 2rem !important;
        padding-top: 0 !important;
    }
}

/* ==========================================================================
   4. iOS SAFE AREA ONLY
   NO sizing, NO typography, NO layout differences from Section 3.
   Only handles notch/safe-area padding so content isn't hidden behind
   the iPhone notch or Dynamic Island.
   ========================================================================== */
@supports (-webkit-touch-callout: none) {
    @media only screen and (max-width: 768px) {

        /* Add safe-area padding to navbar top */
        nav,
        header:has(nav) {
            padding-top: env(safe-area-inset-top, 0px) !important;
        }

        /* Adjust content padding to account for safe area */
        div[class*="pt-32"],
        div[class*="pt-24"],
        article[class*="pt-32"],
        section[class*="pt-32"] {
            padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
        }

        main,
        #root>div>div:not(:first-child) {
            padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
        }
    }
}

/* ==========================================================================
   5. MOBILE MENU OVERLAY (≤1024px)
   ========================================================================== */
@media only screen and (max-width: 1024px) {

    /* Menu overlay: padding to sit below the fixed header */
    div[class*="fixed"][class*="inset-0"],
    div[class*="fixed"][class*="inset-0"][class*="z-40"],
    [style*="position: fixed"][style*="inset"] {
        padding-top: 6rem !important;
        box-sizing: border-box !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        z-index: 9998 !important;
        background-color: #ffffff !important;
    }

    /* Inner elements of overlay */
    .fixed.inset-0>*,
    div[class*="fixed"][class*="inset-0"]>* {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Nav inside overlay: relative position */
    .fixed.inset-0 nav,
    div[class*="fixed"][class*="inset-0"] nav,
    .inset-0 nav {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: auto !important;
        background-color: transparent !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* ---- ALL mobile menu links: CENTERED ---- */
    .fixed.inset-0 nav a:not([class*="mt-4"]),
    .fixed.inset-0 nav button:not([class*="mt-4"]),
    div[class*="fixed"][class*="inset-0"][class*="z-40"] nav a:not([class*="mt-4"]),
    div[class*="fixed"][class*="inset-0"][class*="z-40"] nav button:not([class*="mt-4"]) {
        font-size: 1.375rem !important;
        font-weight: 500 !important;
        padding: 0.5rem 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        color: inherit !important;
        border: none !important;
        border-radius: 0 !important;
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: none !important;
        display: block !important;
        text-align: center !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Inline-flex buttons (like "Signature Destinations") */
    .fixed.inset-0 nav button[class*="inline-flex"]:not([class*="mt-4"]),
    div[class*="fixed"][class*="inset-0"][class*="z-40"] button[class*="inline-flex"]:not([class*="mt-4"]) {
        display: block !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        background: transparent !important;
        background-color: transparent !important;
        color: inherit !important;
        border: none !important;
        border-radius: 0 !important;
        height: auto !important;
        padding: 0.5rem 0 !important;
        margin: 0 !important;
    }

    /* Inner spans/divs of buttons */
    .fixed.inset-0 nav button>span,
    .fixed.inset-0 nav button>div,
    div[class*="fixed"][class*="inset-0"] nav button>span,
    div[class*="fixed"][class*="inset-0"] nav button>div {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Flex container of nav links */
    .fixed.inset-0 nav.flex.flex-col,
    div[class*="fixed"][class*="inset-0"] nav.flex.flex-col,
    .fixed.inset-0 .flex.flex-col,
    div[class*="fixed"][class*="inset-0"] .flex.flex-col {
        align-items: center !important;
    }

    /* "Start Your Request" CTA in mobile menu */
    .fixed.inset-0 nav a[class*="mt-4"],
    .fixed.inset-0 nav a[class*="bg-primary"],
    div[class*="fixed"][class*="inset-0"][class*="z-40"] a[class*="mt-4"],
    div[class*="fixed"][class*="inset-0"][class*="z-40"] a[class*="bg-primary"] {
        background-color: hsl(20, 14%, 15%) !important;
        background: hsl(20, 14%, 15%) !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.75rem 2rem !important;
        border-radius: 0.375rem !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        margin-top: 1.5rem !important;
        width: auto !important;
        min-width: 200px !important;
        text-align: center !important;
        transition: background-color 0.3s ease !important;
    }
}

/* ==========================================================================
   6. NARROW MOBILE (<375px) — iPhone SE, foldables
   ========================================================================== */
@media only screen and (max-width: 374px) {

    nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        min-height: 48px !important;
        max-height: 52px !important;
    }

    /* :has() separate rule */
    header:has(nav) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        min-height: 48px !important;
        max-height: 52px !important;
    }

    /* Logo even smaller on narrow phones */
    nav img,
    header nav img,
    .logo,
    .logo img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 80px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        flex-shrink: 0 !important;
    }

    button[aria-label="Toggle menu"],
    .menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    h1,
    .text-5xl,
    .text-7xl,
    .text-8xl {
        font-size: 1.35rem !important;
        line-height: 1.15 !important;
    }

    h2,
    .text-4xl {
        font-size: 1.2rem !important;
    }
}

/* ==========================================================================
   7. Z-INDEX MANAGEMENT
   ========================================================================== */

/* Mobile menu overlay: very high */
div[class*="fixed"][class*="inset-0"],
div[class*="fixed"][class*="inset-0"][class*="z-40"] {
    z-index: 10000 !important;
}

/* Main navigation: above overlay */
nav {
    z-index: 10002 !important;
}

/* :has() version — separate rule */
header:has(nav),
header:has(.logo),
header:has(button) {
    z-index: 10002 !important;
}

/* Page title headers: below overlay */
header:has(h1):not(:has(nav)) {
    z-index: 50 !important;
}

/* Logo and toggle: always clickable */
.logo,
.menu-toggle,
button[aria-label="Toggle menu"] {
    position: relative !important;
    z-index: 10003 !important;
}

/* Narrow mobile z-index safety */
@media only screen and (max-width: 374px) {

    nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    /* :has() separate rule */
    header:has(nav) {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
}