/**
 * CBP Lalo — Accessibility patches
 * Added: 2026-05-04 (Sprint 1 of WCAG 2.2 AA remediation)
 *
 * Each rule is annotated with the audit finding ID.
 * See: accessibility-audit-2026-05.md
 */

/* THEME-001 — Skip link must be visible on focus.
   Elementor common.min.css sets .screen-reader-text { top: -10000em }
   which beats Hello Elementor's :focus rule. Override with !important. */
body .skip-link.screen-reader-text:focus,
body .skip-link.screen-reader-text:focus-visible,
body a.skip-link:focus,
body a.skip-link:focus-visible {
    top: 5px !important;
    left: 5px !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 24px !important;
    clip: auto !important;
    clip-path: none !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    z-index: 100001 !important;
    border: 2px solid #003572 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* JOS-QUOTE-001 — Visible focus indicator on the upload-area label when the
   paired hidden <input type="file"> receives keyboard focus. The input is
   .screen-reader-text (off-screen) so the focus ring must move to the label. */
.jos-upload-area {
    display: block;
}
.jos-upload-input:focus + .jos-upload-area,
.jos-upload-input:focus-visible + .jos-upload-area {
    outline: 3px solid #003572;
    outline-offset: 2px;
    border-color: #003572 !important;
    background: rgba(0, 53, 114, 0.05) !important;
}

/* JOS-PRODUCT-001 + 002 — Sortable header buttons should look identical to
   the surrounding <th> text. Strip default button styling. */
th.jos-sortable .jos-sort-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    width: 100%;
    text-transform: inherit;
    letter-spacing: inherit;
}
th.jos-sortable .jos-sort-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

/* SC 2.5.8 Target Size (Minimum) — bump touch/click targets to >=24x24 CSS px.
   Visual appearance is preserved; we expand the hit-box via padding or
   min-width/min-height. */

/* Slider pagination bullets (8x8 visual; 24x24 hit-box via padding) */
.swiper-pagination-bullet {
    min-width: 24px;
    min-height: 24px;
    box-sizing: content-box;
    padding: 6px;
    margin: 0 2px !important;
    background-clip: content-box;
    -webkit-background-clip: content-box;
}

/* Slider prev/next div-buttons */
[role=button][aria-label=Previous slide],
[role=button][aria-label=Next slide],
.swiper-button-prev,
.swiper-button-next {
    min-width: 28px;
    min-height: 28px;
}

/* Header social icons — Elementor social icons render at ~20px; bump padding. */
a.elementor-icon.elementor-social-icon,
.elementor-social-icons-wrapper a {
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Header my-account / cart icons */
header a.elementor-icon[href*=/my-account],
header a.elementor-icon[href*=/cart] {
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* JOS wizard page H1 — visually match the wizard's bold display headings
   so the new H1 doesn't read as a foreign style. */
h1.jos-wizard-page-title,
h1.jos-account-page-title {
    font-family: 'Teko', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    /* Responsive: 28px floor (mobile) → 4vw mid (tablet) → 40px cap (desktop) */
    font-size: clamp(28px, 4vw, 40px);
    margin: 0 0 var(--jos-space-md, 24px);
    color: var(--jos-heading, #101828);
}

/* Slight extra breathing room on small viewports so the title doesn't crowd
   the first widget below it. */
@media (max-width: 600px) {
    h1.jos-wizard-page-title,
    h1.jos-account-page-title {
        margin-bottom: 16px;
    }
    /* Center the Team Order title on mobile so it reads as a page banner. */
    h1.jos-wizard-page-title {
        text-align: center;
    }
}

/* SC 1.4.3 — WC default text colors fall just under 4.5:1 on our background.
   Cart text: #7a7a7a on white = 4.29:1 (fails normal-text 4.5:1).
   Breadcrumb: #767676 on #eeeeee = 3.91:1 (fails 4.5:1 normal). Bump both. */

/* WC Block Cart line-item meta + headers */
.wc-block-cart-items th,
.wc-block-cart-items__header,
.wc-block-cart-items__header span,
.wc-block-cart-item__product,
.wc-block-cart-item__product *,
.wc-block-cart-item__total,
.wc-block-cart-item__total *,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata *,
.wc-block-components-product-details,
.wc-block-components-product-details *,
.wc-block-components-formatted-money-amount,
.wc-block-components-product-price,
.wc-block-cart-items__row * {
    color: #595959 !important;
}

/* WC classic breadcrumb on product pages */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb {
    color: #595959 !important;
}
.woocommerce-breadcrumb a {
    text-decoration: underline;
}

/* JOS account pages H1 (My Teams + Pending Designs) — match JOS heading style */

/* Cart totals sidebar — same #7a7a7a default needs the same bump */
.wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-components-totals-item,
.wc-block-components-totals-item *,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item *,
.wc-block-components-panel__button,
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary *,
.wp-block-woocommerce-empty-cart-block *,
.wc-block-components-shipping-rates-control * {
    color: #595959 !important;
}

/* ============================================================
   Mobile-header single-line layout (2026-05-19)
   The visible mobile header is the v4 atomic container
   .elementor-element-3475e34 (NOT the legacy .elementor-element-37f7948
   which is hidden on mobile via elementor-hidden-tablet_extra).

   Items: ACCOUNT (53px) + CART (33px) + hamburger (36px) = 122px content.
   Gap scales with available room:
   - 320-359px: 6px gap (tight, just-fits)
   - 360-479px: 14px gap (default Elementor breathing room)
   - 480px+: 20px gap (comfortable on tablets)

   !important is needed because Elementor v4 atomic containers set gap
   via the widget's local styles map, which has equal specificity to ours.
   ============================================================ */
.elementor-location-header .elementor-element-3475e34 {
    flex-wrap: nowrap !important;
    gap: 6px !important;
}
.elementor-location-header .elementor-element-3475e34 > .elementor-element {
    flex-shrink: 0;
}

@media (min-width: 360px) {
    .elementor-location-header .elementor-element-3475e34 {
        gap: 14px !important;
    }
}

@media (min-width: 480px) {
    .elementor-location-header .elementor-element-3475e34 {
        gap: 20px !important;
    }
}