/*
 * responsive-fixes.css
 *
 * Small, self-contained responsive/touch fixes layered on top of the legacy
 * WordPress-derived stylesheets (public/front/css/wp/*, custom.min.css).
 * Those files stay untouched; add new responsive fixes HERE, grouped by
 * component, so they can be reviewed or removed in one place.
 *
 * Conventions
 *  - Tokens below are the only place sizes are defined; reuse them.
 *  - Scope every rule to a component selector. No page-specific selectors.
 *  - Mobile-first fixes live in the "max-width" blocks at the bottom of each
 *    component section.
 */

:root {
    --rf-tap-target: 44px;      /* minimum comfortable touch size (WCAG 2.5.5 / Apple HIG) */
    --rf-bp-tablet: 1024px;     /* documentation only: custom properties can't be used in @media */
    --rf-bp-mobile: 768px;      /* documentation only */
}

/* ---------------------------------------------------------------------------
 * Header menu toggle
 * The flyout card is z-index:999 and covers the toggle (z-index:100) when it
 * opens, so the open menu could not be closed. Keep the toggle above it.
 * ------------------------------------------------------------------------- */
#header_menu_box[data-active="true"] .PrimaryNavigation_icon {
    z-index: 1000;
}

/* ---------------------------------------------------------------------------
 * Touch targets (phones and small tablets)
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Footer link lists */
    .site-footer ul li a,
    .footer-custom-other-menu a,
    .footer-email-heading a {
        display: inline-flex;
        align-items: center;
        min-height: var(--rf-tap-target);
        min-width: var(--rf-tap-target);
    }

    /* Slick prev/next arrows: enlarge the hit area without changing the icon */
    .slick-slider .slick-prev,
    .slick-slider .slick-next {
        width: var(--rf-tap-target);
        height: var(--rf-tap-target);
    }

    /* Menu flyout links */
    .PrimaryNavigation_flyout li > a {
        display: flex;
        align-items: center;
        min-height: var(--rf-tap-target);
    }
}