/* ============================================================
 * Mobile rails — filter bar pills stay on a single line via
 * aggressive shrinking; the related-tags row becomes a hidden-
 * scrollbar horizontal scroll. Desktop layout untouched.
 *
 * Why no horizontal scroll on the FILTER BAR row:
 *   The row contains Sort + Safe-Search dropdown menus that are
 *   `position: absolute` children of each pill. CSS spec forces
 *   any element with `overflow-x: auto` to also clip overflow on
 *   the Y axis ("visible" computes to "auto" when the other axis
 *   is non-visible). Putting overflow on the row therefore HIDES
 *   the dropdowns. So instead we make the pills compact enough to
 *   fit on every reasonable phone width and never scroll.
 *
 * Stacking — the category bar uses `z-index: 900`. The dropdown
 * menus (`.mypod-filter-menu`) ship with `z-index: 50` in
 * filter-bar.css, which means the catbar can render OVER them
 * when the catbar's fixed-position rectangle overlaps the
 * dropdown's coordinates (a frequent issue on shorter mobile
 * viewports). We bump the dropdown menu to z-index: 950 so it
 * sits above the catbar but below the filter drawer (999).
 *
 * Cascade — filter-bar.css is loaded AFTER this file (it lives
 * inside the WooCommerce-conditional block in setup.php). With
 * identical single-class specificity its later rules would win.
 * Every override below is prefixed with `.mypod-filter-bar` so
 * specificity wins (0,2,0 > 0,1,0).
 * ============================================================ */

/* --------------------------------------------------------------
 * 1. Dropdown menu stacking — applies on every viewport.
 * -------------------------------------------------------------- */
.mypod-filter-bar .mypod-filter-pill .mypod-filter-menu {
    z-index: 950;
}


/* ==============================================================
 * 2. Mobile (<= 640px) — single-line pill row, compact pills.
 * ============================================================== */
@media (max-width: 640px) {

    /* Row stays on one line. NO overflow-x — keeps dropdowns visible. */
    .mypod-filter-bar .mypod-filter-bar__row {
        flex-wrap: nowrap;
        gap: 6px;
        align-items: center;
        /* If a future combination of pills exceeds the width, allow the
           row to overflow visibly rather than hiding content — this is
           a graceful degradation we don't expect to hit. */
        overflow: visible;
    }

    /* Pills shrink to ~36px height. */
    .mypod-filter-bar .mypod-filter-pill,
    .mypod-filter-bar .mypod-filter-pill__btn,
    .mypod-filter-bar button.mypod-filter-pill {
        height: 36px;
        padding: 0 12px;
        font-size: 0.875rem;
    }

    /* Lock pills to their content width so flex doesn't stretch them. */
    .mypod-filter-bar .mypod-filter-bar__row > .mypod-filter-pill,
    .mypod-filter-bar .mypod-filter-bar__row > .mypod-filter-clear {
        flex: 0 0 auto;
    }

    /* Result count hidden on mobile — it's redundant when the user can
       see the grid right below. Frees up ~70px so the four core pills
       fit comfortably on a 360px-wide phone. */
    .mypod-filter-bar .mypod-filter-bar__row .mypod-filter-count {
        display: none;
    }

    /* Clear button: drop the "Clear" label, keep just the X icon. The
       button still appears only when filters are active. */
    .mypod-filter-bar .mypod-filter-bar__row .mypod-filter-clear {
        margin-left: 0;
        padding: 0 10px;
    }
    .mypod-filter-bar .mypod-filter-bar__row .mypod-filter-clear > span {
        display: none;
    }

    /* Safe-Search pill: icon only.
       The text span sits between the eye icon and the chevron. Visually
       hide it (canonical sr-only clip pattern keeps it readable). */
    .mypod-filter-bar .mypod-filter-pill[data-menu="safe"] .mypod-filter-pill__btn > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Tighter padding on the safe-search button — no text means less
       horizontal space needed. */
    .mypod-filter-bar .mypod-filter-pill[data-menu="safe"] .mypod-filter-pill__btn {
        padding: 0 10px;
        gap: 4px;
    }
}


/* ==============================================================
 * 3. Smaller phones (<= 380px) — extra compaction so 4 pills fit
 * on a 320px viewport (iPhone SE width).
 * ============================================================== */
@media (max-width: 380px) {

    .mypod-filter-bar .mypod-filter-pill,
    .mypod-filter-bar .mypod-filter-pill__btn,
    .mypod-filter-bar button.mypod-filter-pill {
        height: 34px;
        padding: 0 10px;
        font-size: 0.8125rem;
    }

    /* Filter pill: keep icon + badge, drop the "Filter" word so it
       becomes a clean icon-only button. */
    .mypod-filter-bar .mypod-filter-bar__row > button.mypod-filter-pill[data-action="open-drawer"] > span:not(.mypod-filter-pill__badge) {
        display: none;
    }
    .mypod-filter-bar .mypod-filter-bar__row > button.mypod-filter-pill[data-action="open-drawer"] {
        padding: 0 10px;
        gap: 4px;
    }

    /* Sort pill: drop the value (the <strong>), keep the "Sort:" label.
       Reduces width without losing the affordance. */
    .mypod-filter-bar .mypod-filter-pill[data-menu="sort"] .mypod-filter-pill__btn > span > strong {
        display: none;
    }
    /* Strip the trailing colon when the value is hidden — the &nbsp;
       lives between "Sort:" and the strong, so killing the strong leaves
       a dangling "Sort:" which is fine. */
    .mypod-filter-bar .mypod-filter-pill[data-menu="sort"] .mypod-filter-pill__btn {
        padding: 0 10px;
        gap: 4px;
    }
}


/* ==============================================================
 * 4. Related-tags row on the search-results page (<= 640px).
 *    This stays a single-line horizontal scroll because the row
 *    has NO absolutely-positioned descendants that would be
 *    clipped — just inline pill anchors.
 * ============================================================== */
@media (max-width: 640px) {

    .mypod-search-results__related {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        overflow: visible;
    }

    .mypod-search-results__related-label {
        flex: 0 0 auto;
    }

    .mypod-search-results__related-list {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        /* Trailing tag breathing room. */
        padding-right: 8px;
    }

    .mypod-search-results__related-list::-webkit-scrollbar {
        display: none;
        height: 0;
    }

    .mypod-related-tag {
        white-space: nowrap;
        flex: 0 0 auto;
    }
}


/* ==============================================================
 * 5. Sidebar drawer — stick to top on mobile (<= 1024px).
 *
 * Bug: when the body has `mypod-sidebar-hidden` AND
 * `mypod-catbar-enabled`, sidebar.css applies a high-specificity
 * rule that sets `top: header + catbar` on the sidebar regardless
 * of viewport width. This pushes the mobile drawer below the
 * search bar + catbar area instead of opening flush against the
 * top of the screen — so the sidebar's MYPODWEBSITE logo doesn't
 * align with the main header's MYPODWEBSITE logo.
 *
 * Fix: re-declare the same body-class chain inside a mobile media
 * query so we win the cascade and force `top: 0; height: 100vh`.
 *
 * WP admin-bar offsets:
 *   - Default: 32px tall
 *   - Below 783px viewport: 46px tall (touch-friendly)
 * Both variants are emitted below.
 * ============================================================== */
@media (max-width: 1024px) {

    /* Without admin bar — drawer touches the top edge. */
    body.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer).mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar,
    body.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer).mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar.is-open,
    body.mypod-catbar-hide-mobile.mypod-sidebar-hidden .mypod-sidebar,
    body.mypod-catbar-hide-mobile.mypod-sidebar-hidden .mypod-sidebar.is-open {
        top: 0;
        height: 100vh;
        height: 100dvh;
    }

    /* With admin bar — 32px tall above 783px (tablets ≥ 783..1024). */
    body.admin-bar.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer).mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar,
    body.admin-bar.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer).mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar.is-open,
    body.admin-bar.mypod-catbar-hide-mobile.mypod-sidebar-hidden .mypod-sidebar,
    body.admin-bar.mypod-catbar-hide-mobile.mypod-sidebar-hidden .mypod-sidebar.is-open {
        top: 32px;
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
    }
}

/* With admin bar at small mobile (<= 782px) — 46px tall. Inner media
   query has higher source order so it wins for the mobile range. */
@media (max-width: 782px) {
    body.admin-bar.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer).mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar,
    body.admin-bar.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer).mypod-sidebar-hidden:not(.push-sidebar-enabled) .mypod-sidebar.is-open,
    body.admin-bar.mypod-catbar-hide-mobile.mypod-sidebar-hidden .mypod-sidebar,
    body.admin-bar.mypod-catbar-hide-mobile.mypod-sidebar-hidden .mypod-sidebar.is-open {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }
}


/* ==============================================================
 * 6. Filter drawer — stick to top on mobile (<= 1024px).
 *
 * Same root cause as the sidebar drawer.
 *
 * Backdrop: covers everything BELOW the site header, leaving the
 * header itself visible and undimmed. The user's mental model is
 * "header stays alive, content area is dimmed". Drawer slides in
 * from the very top edge to align its close button with the
 * header's hamburger button.
 * ============================================================== */
@media (max-width: 1024px) {

    /* Drawer panel — every body-class combination Woo's
       filter-bar.css covers. Always stick to top.
     *
     * z-index bump rationale:
     *   On mobile the category bar is `position: relative; z-index: 1001`
     *   (header.css line ~1056) so it joins the document flow but still
     *   creates its own stacking context. The drawer ships with z-index
     *   999 from filter-bar.css, which means the catbar would paint OVER
     *   the drawer's top edge — its "Filters" title and close X disappear
     *   behind the T-shirts/Socks/Hoodies row. We push the drawer to 1003
     *   and the backdrop to 1002 so both sit above the catbar (1001) and
     *   the site header (1000), matching the "drawer covers the page,
     *   close X aligns with the hamburger" intent stated in the comment
     *   above. WP admin-bar (~99999) still wins, which is correct.
     */
    body.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer) .mypod-filter-drawer,
    body.mypod-catbar-hide-mobile .mypod-filter-drawer,
    .mypod-filter-drawer {
        top: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 1003;
    }

    body.admin-bar.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer) .mypod-filter-drawer,
    body.admin-bar.mypod-catbar-hide-mobile .mypod-filter-drawer,
    body.admin-bar .mypod-filter-drawer {
        top: 32px;
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
    }

    /* Backdrop — sits BELOW the site header so the header stays
       visually undimmed. The site header is z-index ~1000; the
       backdrop is z-index 998; the drawer is 999. By starting the
       backdrop at the header height, the header reads as "alive"
       while the rest of the page reads as dimmed.

       Use `--mypod-header-height` (defaults to 64px) for the offset. */
    body.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer) .mypod-filter-backdrop,
    body.mypod-catbar-hide-mobile .mypod-filter-backdrop,
    .mypod-filter-backdrop {
        top: var(--mypod-header-height, 64px) !important;
        inset: var(--mypod-header-height, 64px) 0 0 0 !important;
        z-index: 1002;
    }

    body.admin-bar.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer) .mypod-filter-backdrop,
    body.admin-bar.mypod-catbar-hide-mobile .mypod-filter-backdrop,
    body.admin-bar .mypod-filter-backdrop {
        top: calc(32px + var(--mypod-header-height, 64px)) !important;
        inset: calc(32px + var(--mypod-header-height, 64px)) 0 0 0 !important;
    }
}

/* Small-mobile admin-bar (<=782px) — admin-bar grows to 46px. */
@media (max-width: 782px) {
    body.admin-bar.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer) .mypod-filter-drawer,
    body.admin-bar.mypod-catbar-hide-mobile .mypod-filter-drawer,
    body.admin-bar .mypod-filter-drawer {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }

    body.admin-bar.mypod-catbar-enabled:not(.mypod-catbar-position-above-footer) .mypod-filter-backdrop,
    body.admin-bar.mypod-catbar-hide-mobile .mypod-filter-backdrop,
    body.admin-bar .mypod-filter-backdrop {
        top: calc(46px + var(--mypod-header-height, 64px)) !important;
        inset: calc(46px + var(--mypod-header-height, 64px)) 0 0 0 !important;
    }
}