/**
 * Page header spacing + Recently Viewed scrollbar overrides.
 *
 * Scope:
 *   - Comfortable breathing room between page titles and the filter bar
 *     (search results page + WooCommerce category archives).
 *   - Style the WooCommerce category title to match the search-results
 *     visual rhythm.
 *   - Hide the Recently Viewed rail's scrollbar across browsers while
 *     preserving wheel/touch scrolling.
 *
 * This file is intentionally separate from phase3.css/search.css so it can
 * be edited without conflicting with other agents working those files.
 */

/* ---------- Search results header spacing ---------- */
/* Increase bottom margin on the header block so the title has breathing
   room above the related-tags row / filter bar below it. */
.mypod-search-results .mypod-search-results__header {
    margin-bottom: clamp(24px, 4vw, 40px);
}

/* Title — larger bottom gap so it doesn't look glued to the tags/filter. */
.mypod-search-results__title {
    margin-bottom: clamp(12px, 2vw, 20px) !important;
}

/* If the related-tags row is present, give it a touch of separation from
   the title above it. */
.mypod-search-results__related {
    margin-top: 4px;
    margin-bottom: clamp(16px, 3vw, 24px);
}

/* ---------- Category archive header ---------- */
/* WooCommerce default markup: <header class="woocommerce-products-header">
   containing <h1 class="woocommerce-products-header__title page-title">. */
.mypod-woo-content .woocommerce-products-header {
    margin: 0 0 clamp(24px, 4vw, 40px);
    padding: 0;
}

/* Title — comfortable gap below before the related tags / filter bar. */
.mypod-woo-content .woocommerce-products-header__title,
.mypod-woo-content .woocommerce-products-header .page-title {
    margin: 0 0 clamp(12px, 2vw, 20px);
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--mypod-color-text);
    letter-spacing: -0.01em;
}

/* Optional category description — comfortable rhythm and a subtler color
   so it doesn't compete with the title. */
.mypod-woo-content .woocommerce-products-header .term-description,
.mypod-woo-content .woocommerce-products-header .archive-description {
    margin: 0;
    color: var(--mypod-color-textSecondary);
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: 70ch;
}

/* Some Woo themes/plugins put the description in a separate sibling block
   after the header. Keep the same breathing room and visual treatment. */
.mypod-woo-content .woocommerce-products-header + .term-description,
.mypod-woo-content .woocommerce-products-header + .archive-description {
    margin-top: -8px;
    margin-bottom: clamp(20px, 4vw, 32px);
    color: var(--mypod-color-textSecondary);
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: 70ch;
}

/* ---------- Recently Viewed — hide scrollbar ---------- */
/* Override phase3.css rules:
     - scrollbar-width: thin   → none (Firefox)
     - ::-webkit-scrollbar { height: 6px } → display: none (Chromium/Safari)
   Overflow-x: auto stays in place via phase3.css, so wheel and touch
   scrolling continue to work.

   IMPORTANT — phase3.css is loaded AFTER this file (it lives inside the
   WooCommerce-conditional block in setup.php). With identical specificity
   (single class) phase3.css would win on cascade, leaving the Firefox
   scrollbar visible. We bump specificity to 2 classes by prefixing the
   selector with `.mypod-recently-viewed` so this file always wins. */
.mypod-recently-viewed .mypod-recently-viewed__rail {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Legacy IE/Edge */
}

.mypod-recently-viewed .mypod-recently-viewed__rail::-webkit-scrollbar {
    display: none;                  /* Chromium / Safari */
    height: 0;
    width: 0;
}

/* Defensive — phase3.css colors the thumb; flatten it so a flash of the
   thumb doesn't appear during hover transitions in some browsers. */
.mypod-recently-viewed .mypod-recently-viewed__rail::-webkit-scrollbar-thumb {
    background: transparent;
}