/* =========================
   CodeIndex — Minimal mobile CSS
   ========================= */

/* 0) Sticky header on phones (no desktop change) */
@media (max-width: 640px) {
    #site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: #fff;
        border-bottom: 1px solid rgba(2, 6, 23, 0.08);
    }
}

/* 1) Mobile header layout: [ CodeIndex ] [ search ] [ account ] */
@media (max-width: 640px) {

    /* Use a simple, robust flex row */
    #site-header .bar {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .75rem;
    }

    /* Brand (left) */
    #site-header .brand {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    /* Add a caret to CodeIndex (works whether .brand is a <summary> or a plain element) */
    #site-header .brand summary::after,
    #site-header .brand::after {
        content: "▾";
        display: inline-block;
        margin-left: .25rem;
        font-size: 1rem;
        line-height: 1;
        transform: translateY(1px);
    }

    /* Rotate caret when brand is a <details> that’s open */
    #site-header .brand[open]>summary::after {
        transform: translateY(1px) rotate(180deg);
    }

    /* Search (middle) — shrinks nicely on small screens */
    #site-header #global-search {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    #site-header #global-search input[type="search"],
    #site-header #global-search input[type="text"] {
        width: 100%;
        min-width: 0;
        font-size: 16px;
        /* prevent iOS zoom */
        height: 2.25rem;
        padding: .375rem .625rem;
    }

    /* Account menu (right) */
    #site-header .account {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

    /* Normalize caret on account to match brand (if your account is not a <details>, this still shows a static caret) */
    #site-header .account summary::after,
    #site-header .account::after {
        content: "▾";
        display: inline-block;
        margin-left: .25rem;
        font-size: 1rem;
        line-height: 1;
        transform: translateY(1px);
    }

    #site-header .account[open]>summary::after {
        transform: translateY(1px) rotate(180deg);
    }
}

/* 2) Put Help/Contact inside the account dropdown on mobile; hide them in the top row */
@media (max-width: 640px) {

    /* Hide standalone header links */
    #site-header a[href="/help"],
    #site-header a[href="/contact"] {
        display: none;
    }

    /* Ensure they’re visible in the account dropdown menu */
    #site-header .menu a[href="/help"],
    #site-header .menu a[href="/contact"] {
        display: block !important;
    }

    /* Light polish for dropdown menus */
    #site-header details .menu {
        min-width: 12rem;
        padding: .25rem 0;
        border: 1px solid rgba(2, 6, 23, 0.08);
        border-radius: .5rem;
        background: #fff;
        box-shadow: 0 8px 24px rgba(2, 6, 23, .08);
    }

    #site-header details .menu a {
        display: block;
        padding: .5rem .75rem;
    }
}

/* 3) Hide low-priority blocks on phones (browse + article) */
@media (max-width: 768px) {

    /* Quick Links */
    #quick-links,
    .quick-links {
        display: none !important;
    }

    /* OBC Data Status */
    #obc-data-status,
    .obc-status {
        display: none !important;
    }

    /* Search Tips (robust fallback if no specific class was added) */
    main aside .bg-white.text-xs.text-slate-600 {
        display: none !important;
    }
}

/* 4) Keep desktop sticky sidebar offset correct (unchanged) */
@media (min-width: 768px) {
    main aside .sticky {
        /* base.css usually sets --site-header-h */
        top: calc(var(--site-header-h) + 1rem) !important;
    }
}



/* —— Force header flush to top on mobile —— */
@media (max-width: 640px) {

    html,
    body {
        margin: 0;
        padding: 0;
    }

    /* Pin the header with no offset */
    #site-header {
        position: sticky;
        top: 0 !important;
        margin-top: 0 !important;
        background: #fff;
        /* ensure no transparent gap shows */
        z-index: 50;
        border-bottom: 1px solid rgba(2, 6, 23, 0.08);
    }

    /* Nuke “mystery gap” from first child margins */
    body>*:first-child {
        margin-top: 0 !important;
    }

    /* If your layout adds padding to make room for a fixed header, cancel it on mobile */
    main,
    #main,
    .page {
        padding-top: 0 !important;
    }
}

/* iOS notch/safe-area: extend header into the inset so there’s no visible band */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 640px) {
        #site-header {
            padding-top: env(safe-area-inset-top);
        }
    }
}





/* Match sidebar headings to "Browse OBC" size on mobile */
@media (max-width: 640px) {

    /* "Browse by Part" summary */
    main aside summary,
    /* common patterns for "Part X — Articles" headings */
    main aside .font-semibold.text-sm,
    main aside .articles-title {
        font-size: 1.125rem;
        /* Tailwind: text-lg */
        line-height: 1.75rem;
        /* Tailwind: leading-7 */
    }
}

/* Stop double-scroll on phones (bare minimum) */
@media (max-width: 640px) {

    /* 1) Kill sticky inside main */
    main .sticky,
    main aside .sticky {
        position: static !important;
        top: auto !important;
    }

    /* 2) Ensure the page—not a wrapper—owns the scroll */
    main,
    .max-w-7xl {
        overflow: visible !important;
    }
}











@media (max-width: 640px) {

    /* If a details is closed, hide everything except the summary during initial paint */
    main aside details.mobile-autocollapse:not([open])>*:not(summary) {
        display: none !important;
    }

    /* Avoid height/opacity animations that cause a brief pop-in */
    main aside details.mobile-autocollapse,
    main aside details.mobile-autocollapse * {
        transition: none !important;
    }
}








/* === Mobile-only: outline the two top menus ("Browse by Part" / "Browse by Article") === */
@media (max-width: 640px) {

    /* If your dropdowns already use this class (most of yours do), no HTML changes needed */
    details.mobile-autocollapse {
        border: 1px solid rgba(2, 6, 23, 0.12);
        /* light grey outline */
        border-radius: 0.75rem;
        /* ~12px */
        background: #fff;
        box-shadow: 0 1px 0 rgba(2, 6, 23, 0.04);
        /* subtle lift */
        margin-bottom: 0.5rem;
        /* visual space between menus */
        overflow: hidden;
        /* keep rounded corners clean */
    }

    /* “Card header” for each menu */
    details.mobile-autocollapse>summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .625rem .75rem;
        /* 10px x 12px */
        font-weight: 600;
        border-bottom: 1px solid rgba(2, 6, 23, 0.08);
        cursor: pointer;
    }

    /* Slightly stronger divider when open */
    details.mobile-autocollapse[open]>summary {
        border-bottom-color: rgba(2, 6, 23, 0.16);
    }

    /* Content padding */
    details.mobile-autocollapse>*:not(summary) {
        padding: .5rem .75rem .75rem;
    }
}





@media (max-width: 640px) {

    /* Each menu has its own full border */
    .mobile-menu-stack>details.mobile-autocollapse {
        border: 1px solid rgba(2, 6, 23, 0.12);
        border-radius: 0;
        /* we’ll add radius only on the outer edges */
        background: #fff;
        margin: 0;
        /* no gaps */
        overflow: hidden;
        /* clean corners */
    }

    /* Collapse the touching borders into a single hairline */
    .mobile-menu-stack>details.mobile-autocollapse+details.mobile-autocollapse {
        margin-top: -1px;
        /* overlays borders -> single divider line */
    }

    /* Outer corners only */
    .mobile-menu-stack>details.mobile-autocollapse:first-child {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
    }

    .mobile-menu-stack>details.mobile-autocollapse:last-child {
        border-bottom-left-radius: 0.75rem;
        border-bottom-right-radius: 0.75rem;
    }

    /* Internal header/content divider: only when open to avoid a double line */
    details.mobile-autocollapse>summary {
        border-bottom: 0;
    }

    details.mobile-autocollapse[open]>summary {
        border-bottom: 1px solid rgba(2, 6, 23, 0.12);
    }
}





/* Mobile stack: caret inline after the label, same size as the text */
@media (max-width: 640px) {

    /* Hide native marker to avoid double arrows */
    .mobile-menu-stack details.mobile-autocollapse>summary::-webkit-details-marker {
        display: none;
    }

    /* Put label + caret together (not spaced to edges) */
    .mobile-menu-stack details.mobile-autocollapse>summary {
        justify-content: flex-start;
        /* was space-between */
        padding-right: .75rem;
        /* undo any extra space for right-edge caret */
    }

    /* Inline caret: tracks the text size (≈ as tall as the font) */
    .mobile-menu-stack details.mobile-autocollapse>summary::after {
        content: "▾";
        position: static;
        /* override any absolute right-edge caret */
        display: inline-block;
        margin-left: .375rem;
        /* small gap after text */
        font-size: 2em;
        /* matches text size */
        line-height: 1;
        /* tight like the text */
        transform: none;
        /* baseline alignment */
    }

    /* Rotate when open */
    .mobile-menu-stack details.mobile-autocollapse[open]>summary::after {
        transform: rotate(180deg);
    }

    /* Keep your “only show divider when open” behavior in the stack */
    .mobile-menu-stack details.mobile-autocollapse>summary {
        border-bottom: 0;
    }

    .mobile-menu-stack details.mobile-autocollapse[open]>summary {
        border-bottom: 1px solid rgba(2, 6, 23, 0.12);
    }
}