/* =================================================================
   Accelerate child — accessibility overrides.
   Loaded after the parent stylesheet via wp_enqueue_scripts in
   functions.php. Each rule below is tied to a specific WCAG SC.
   Brand colours are NOT changed here — any contrast failure that
   involves a brand-coloured surface is reported in the Phase 2
   changelog for human approval.
   ================================================================= */

/* ----- Skip link visibility on focus (SC 2.4.1) ------------------ */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
    position: absolute !important;
    top: 8px;
    left: 8px;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    padding: 12px 18px;
    background: #ffffff;
    color: #111111;
    border: 2px solid #111111;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    z-index: 100000;
}

/* ----- Focus visibility (SC 2.4.7 / 2.4.11 / 2.4.13) ------------- */
/* Parent stylesheet uses `outline: none` in several places. Restore
   a strong focus ring everywhere a tab stop can land, using
   :focus-visible so mouse clicks don't show a ring. */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
summary:focus,
[tabindex]:focus {
    outline: 3px solid #b54708; /* WCAG-AAA on white (8.36:1); also ≥3:1 against typical brand backgrounds */
    outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    /* For mouse users only — keep the ring off but never go invisible. */
    outline-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #b54708;
    outline-offset: 2px;
    /* SC 2.4.11: focus ring is not obscured by overlapping content. */
    position: relative;
    z-index: 2;
}

/* Make focused <main> readable when the skip link moves focus into it. */
main:focus,
main:focus-visible {
    outline: none; /* container itself doesn't need a ring */
}

/* ----- Contrast (SC 1.4.3) --------------------------------------- */
/* Parent uses #666 / #999 for body, meta, captions and footer text.
   #999 on #fff = 2.85:1 — fails. #666 on #fff = 5.74:1 — passes for
   normal text but borderline for small text under 14pt. Bump both to
   safer values without altering brand hues. */
body,
.entry-content,
.entry-summary,
.comment-content {
    color: #2b2b2b; /* 13.3:1 on white */
}

.entry-meta,
.entry-meta a,
.entry-meta i,
.post-meta,
.byline,
.posted-on,
small,
.taxonomy-description,
.author-description,
#site-description,
.copyright,
.copyright a {
    color: #595959 !important; /* 7.0:1 on white — passes AAA for normal text */
}

/* Sidebar widget body text was rendering at #888 in places. */
#secondary,
#secondary li,
#secondary a:not(:hover),
.footer-widgets-area,
.footer-widgets-area li,
.footer-widgets-area a:not(:hover) {
    color: #2b2b2b;
}

/* The Accelerate "read more" pill inherits brand colour as background.
   Force button text to white explicitly to keep contrast deterministic
   regardless of the configured brand hue (still flag as needing review
   if brand background is too light — see Phase 2 changelog item C-3). */
.more-link span,
.read-more,
input[type="button"],
input[type="reset"],
input[type="submit"],
button {
    color: #ffffff;
}

/* ----- Target size minimum 24×24 (SC 2.5.8, new in 2.2) ---------- */
/* The RSS feed icon link in the BBC weather widget is rendered with a
   14x14 image. Wrap the link's hit area in 24x24 minimum. */
.widget_rss .rsswidget,
.widget_rss .rsswidget.rss-widget-feed,
.widget_rss .rsswidget.rss-widget-title {
    display: inline-block;
    min-width: 24px;
    min-height: 24px;
    line-height: 24px;
    padding: 2px 0;
}
.widget_rss .rss-widget-icon {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
    /* Hit area expanded via the parent <a> above. */
}

/* Social icons in the synved-social widget are 32×32 on the image but
   the <a> sometimes squashes; enforce min size for the click target. */
.synved-social-button {
    display: inline-block;
    min-width: 32px;
    min-height: 32px;
    line-height: 32px;
    /* Adjacent target spacing (SC 2.5.8 also satisfied via 6px gap). */
    margin-right: 6px !important;
}

/* Pagination links and "back to top" need a comfortable hit area. */
a#scroll-up {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ----- Menu toggle button (was an <h3>) -------------------------- */
/* Style the new <button class="menu-toggle"> so it visually matches the
   original heading-styled control. The parent stylesheet rule
   `.site-header .menu-toggle:before` still applies because we kept the
   class. */
button.menu-toggle {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    min-height: 44px;
}
button.menu-toggle:focus-visible {
    outline: 3px solid #b54708;
    outline-offset: 2px;
}

/* ----- Reflow at 320px / 400% zoom (SC 1.4.10) ------------------- */
@media (max-width: 480px) {
    body,
    #page,
    #main,
    .inner-wrap,
    main#main-content,
    #primary,
    #content,
    #secondary {
        max-width: 100% !important;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }
    /* The Google Maps iframe in widgets has a fixed 250px width — fine
       at 320px viewport but enforce no horizontal overflow. */
    iframe {
        max-width: 100%;
    }
    /* Long un-broken filenames in the meetings/agendas listings
       (e.g. PDFs whose names exceed the column) break reflow. */
    .entry-content table,
    .entry-content pre {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* ----- Motion (SC 2.3.3 / 2.2.2) --------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* ----- Form fields (SC 1.3.1, 3.3.1, 3.3.2) ---------------------- */
/* Make required-field indicator visible even when CSS is overridden
   by Formidable's inline styles. */
.frm_required,
.frm_primary_label .frm_required {
    color: #b54708;
    font-weight: 700;
}

/* Error messages (SC 3.3.1, 3.3.3): ensure the inline error text has
   sufficient contrast with the form background. */
.frm_error,
.frm_error_style {
    color: #a40000; /* 6.66:1 on white */
}

/* Visible label spacing — Formidable defaults are tight. */
.frm_form_field label.frm_primary_label {
    display: inline-block;
    margin-bottom: 4px;
}

/* ----- Headings (SC 1.3.1, 2.4.6) -------------------------------- */
/* Hide the empty heading the wp-team-manager plugin can produce when
   a row is missing its name field. The mu-plugin filters this at
   render-time too, but the CSS catches widget previews / rebuilds. */
.team_manager h3:empty,
.team-member h3:empty,
.tm-name:empty {
    display: none;
}

/* ----- Forced-colors (high-contrast) mode ------------------------ */
@media (forced-colors: active) {
    a,
    button,
    input,
    .read-more,
    .menu-toggle {
        forced-color-adjust: none;
    }
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid CanvasText;
    }
}