/*
 * Accessibility & platform-alignment CSS.
 *
 * Aligned with:
 *   - macOS Human Interface Guidelines (Focus, Reduce Motion, Increase Contrast, Dark Mode)
 *   - WCAG 2.2 SC 2.4.7 Focus Visible (AA)
 *   - WCAG 2.2 SC 1.4.13 Content on Hover (AAA, dark-mode surface)
 *
 * Loaded site-wide after kadence-child-style so cascade wins against
 * the AO bundle's default :focus styles.
 *
 * Scope: only rules that DO NOT exist in the parent Kadence theme.
 * Never restate parent theme tokens. If a parent rule conflicts,
 * increase specificity here, do not !important unless cascade demands it.
 *
 * Tested selectors on 2026-08-13 against /about-us/ HTML:
 *   - links: <a class="ph-a-btn">, <a class="ph-a-branch-card__link">
 *   - buttons: <button>, <input type="submit">, [role="button"]
 *   - form controls: <input>, <select>, <textarea>
 *   - skip link: <a class="skip-link" href="#inner-wrap">
 *   - cookie modal: <div role="dialog" aria-modal="true">
 */

/* =====================================================================
   1. FOCUS INDICATORS (HIG: "Make controls clearly visible when focused")
   ===================================================================== */

/* Keyboard-only focus ring. macOS Safari and Firefox 86+ ship
   :focus-visible support; falls back to :focus for legacy browsers. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus,
[role="link"]:focus,
[tabindex]:focus {
    outline: 3px solid #0a84ff;          /* macOS system blue (dark mode safe) */
    outline-offset: 2px;
    border-radius: 4px;
    box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.18);  /* soft halo for AA contrast on busy backgrounds */
}

/* Modern :focus-visible keeps the ring for keyboard, drops it for mouse. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[role="link"]:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Brand-coloured CTAs (red/orange buttons) need a high-contrast ring
   against the saturated background. Generic selectors above use
   system blue; this re-skins to brand red for ph-a-btn primary actions. */
.ph-a-btn:focus-visible,
.phshirt-header-cta:focus-visible {
    outline: 3px solid #ffffff;          /* white ring on brand red is highest-contrast */
    box-shadow:
        0 0 0 5px rgba(0, 0, 0, 0.25),   /* dark halo separates ring from white outline */
        0 0 0 8px #d62828;               /* brand-red second ring for double-cue */
    outline-offset: 2px;
}

/* Skip-to-content link: must be visible only when focused (not always-on). */
.skip-link,
a[href^="#"][class*="skip"] {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #000;
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    text-decoration: underline;
    z-index: 100000;
}
.skip-link:focus,
.skip-link:focus-visible,
a[href^="#"][class*="skip"]:focus,
a[href^="#"][class*="skip"]:focus-visible {
    left: 1rem;
    top: 1rem;
    outline: 3px solid #ffd60a;          /* macOS system yellow for visibility on any bg */
    outline-offset: 2px;
}

/* =====================================================================
   2. PREFERS-CONTRAST: MORE (HIG: Increase Contrast)
   ===================================================================== */

@media (prefers-contrast: more) {
    /* Force darker borders so UI chrome survives the contrast filter. */
    a,
    button,
    .ph-a-btn,
    .ph-a-branch-card,
    .ph-a-service-item,
    input,
    select,
    textarea {
        border-color: currentColor !important;
    }

    /* Brand buttons: black text on white instead of white on red — easier
       to read under forced contrast. Functional outcome is unchanged. */
    .ph-a-btn--primary {
        background: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }

    /* Body text: drop to pure black. */
    body,
    .entry-content,
    p,
    li {
        color: #000000 !important;
    }

    /* Focus ring must be even thicker to win the contrast pass. */
    :focus-visible {
        outline-width: 4px !important;
    }
}

/* =====================================================================
   3. PREFERS-COLOR-SCHEME: DARK (HIG: Dark Mode)
   ===================================================================== */

@media (prefers-color-scheme: dark) {
    /* Page surface: macOS dark mode base color */
    body,
    .site-content,
    .entry-content,
    .ph-a-section {
        background-color: #1d1d1f;
        color: #f5f5f7;
    }

    /* Hero & CTA blocks — invert brand red to a darker variant
       (Apple's macOS Dark mode does not auto-darken arbitrary brand
       colors; we tone down the red for legibility). */
    .ph-a-hero,
    .ph-ps-hero {
        background-color: #1d1d1f !important;
        color: #f5f5f7 !important;
    }

    .ph-a-btn--primary {
        background-color: #ff453a !important;     /* macOS dark-mode red */
        color: #ffffff !important;
    }

    /* Branch cards: lighter border on dark surfaces */
    .ph-a-branch-card,
    .ph-a-service-item,
    .ph-a-delivery-item {
        background-color: #2c2c2e !important;
        border-color: #3a3a3c !important;
        color: #f5f5f7 !important;
    }

    /* Stat labels (e.g. "10+ Years Experience") */
    .ph-a-stat__label,
    .ph-a-stat__value {
        color: #f5f5f7 !important;
    }

    /* Footer */
    .site-footer,
    footer[role="contentinfo"] {
        background-color: #000000 !important;
        color: #d1d1d6 !important;
    }

    /* Cookie banner: macOS dark surface */
    .phshirt-cookie-banner {
        background: #2c2c2e !important;
        color: #f5f5f7 !important;
        border-top-color: #3a3a3c !important;
    }

    /* Focus ring: lighter blue for dark surfaces */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [role="button"]:focus,
    [role="link"]:focus,
    [tabindex]:focus {
        outline-color: #64d2ff;                /* macOS dark-mode system blue */
        box-shadow: 0 0 0 5px rgba(100, 210, 255, 0.22);
    }
}

/* =====================================================================
   4. PREFERS-REDUCED-MOTION (HIG: Reduce Motion)
   - Reaffirms the existing rule in AO bundle; covers any rules that
     ship later via per-page CSS.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   5. MODAL FOCUS TRAP ESCAPE HATCH (HIG: Modal dialogs)
   - Cookie modal: ensure it is dismissible via Escape key.
   - The keyboard handler lives in JS; CSS just guarantees the
     modal surface is opaque enough to pass contrast.
   ===================================================================== */

[role="dialog"][aria-modal="true"] {
    background-color: #ffffff;
    color: #1d1d1f;
}

@media (prefers-color-scheme: dark) {
    [role="dialog"][aria-modal="true"] {
        background-color: #2c2c2e;
        color: #f5f5f7;
    }
}