/*
 * Site-wide accessibility layer.
 *
 * Enqueued last on every page (see qwocmap_a11y_styles() in functions.php) so
 * these rules win over the per-template stylesheets without needing `!important`
 * on anything except the focus ring — which has to beat the ~20 `outline: none`
 * declarations scattered through the template CSS.
 *
 * Everything here traces back to a numbered finding in the client's WCAG audit;
 * the issue number is quoted above each block so a re-test can be matched up.
 * Nothing in here changes layout: it only adds focus rings, underlines links,
 * and shifts a handful of foreground colours that failed a contrast ratio.
 */

/* ==========================================================================
   Issue 1 — WCAG 2.4.1 Bypass Blocks
   The skip link now lives inside <header> (header.php / header-festival.php).
   It is off-screen until it takes keyboard focus, then it drops into view as a
   real, clickable button pinned to the top-left. It is positioned rather than
   un-hidden into the flow so revealing it never pushes the page down.
   ========================================================================== */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus,
.skip-link:focus-visible {
	left: 12px;
	top: 12px;
	width: auto;
	height: auto;
	overflow: visible;
	padding: 12px 20px;
	border-radius: 8px;
	background: #101828;
	color: #fff;
	font-family: Lexend, "Lexend Fallback", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: underline;
	white-space: nowrap;
}

/* ==========================================================================
   Issues 5, 6, 16 — WCAG 2.4.7 Focus Visible / 1.4.11 Non-text Contrast
   A single focus indicator for everything that can take keyboard focus.

   The ring is two-tone on purpose: a white halo sits directly against the
   component and a near-black ring sits outside it. Whatever the surrounding
   colour is — the white hero, the dark blue panels, an orange button — one of
   the two bands clears 3:1 against it, so the indicator is never invisible.

   `!important` is deliberate. Template stylesheets set `outline: none` on
   inputs, tabs, sliders and cards (news-archive.css, login.css, faq.css,
   neon-forms.css, contact-feedback.css, …) and those rules would otherwise
   silently delete the indicator on exactly the controls that were reported.
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="link"]):focus-visible {
	outline: 3px solid #101828 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

/* Controls sitting on a dark panel: flip the ring so the light band is the one
   touching the component and the dark band reads against the light surround. */
.cj-expect :where(a, button, [tabindex]):focus-visible,
.ffa-learn__card :where(a, button, [tabindex]):focus-visible,
.cj-showcase :where(a, button, [tabindex]):focus-visible,
.qw-footer :where(a, button, [tabindex]):focus-visible,
.qw-hero-slider :where(a, button, [tabindex]):focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #101828 !important;
}

/* Keep the ring off the page wrappers, which are focused programmatically by
   the skip link and would otherwise flash a full-width outline. */
#main-content:focus,
#main-content:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   Issue 17 — WCAG 1.4.11 Non-text Contrast (carousel controls)
   Pagination dots were #d5d7da on #fff (1.4:1) and the prev/next pills were
   outlined in #dcdcde (1.4:1). Both are the boundary of an active control, so
   both need 3:1. #757575 / #717680 are greys already used elsewhere in the
   theme and clear 4.5:1 on white.
   ========================================================================== */
.qw-partners__pagination .swiper-pagination-bullet {
	background: #757575;
}

.qw-partners-slider-wrap .slider-nav__item,
.qwo-slidenav .slider-nav__item,
.qwo-m-slidenav .slider-nav__item {
	border-color: #717680;
}

/* ==========================================================================
   Issue 18 — WCAG 1.4.1 Use of Color
   Footer credit links were distinguished from the surrounding sentence by
   colour alone. Underline them so the link is identifiable without colour.
   ========================================================================== */
.qw-footer-credit a {
	/* `!important` beats .qw-footer-copy a { text-decoration: none !important }
	   in homepage.css, which the credit link sits inside. That declaration is
	   the defect itself: it strips the only non-colour cue from a link whose
	   colour already matches the sentence around it. */
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* ==========================================================================
   Issues 19, 21 — WCAG 1.4.3 Contrast (orange accent on the dark panels)

   The brand orange is tuned for white and measured 1.4:1–2.8:1 on the dark
   panels, against the 3:1 large text needs. Orange occupies a narrow band of
   the spectrum and is never light at full saturation, so against a dark ground
   either the orange lightens or the ground darkens — there is no third option.

   The chosen answer moves the ground: every panel that carries this accent is
   now the deep navy #0e3f80 (see ff-academy.css and respiratory-safety.css,
   which previously used #1869d3 and #1252a5), which lets the accent stay a
   vivid, recognisable orange rather than a pale tint of one.

       #ef7010 on #0e3f80 → 3.43:1     #ef7010 on #08284f → 4.90:1
       #ef7010 on #3d253b → 4.58:1     (the homepage plum, unchanged)

   Note for whoever touches .cj-expect next: that panel paints this accent over
   `linear-gradient(rgba(14,63,128,.86), rgba(14,63,128,.9)), var(--cj-expect-bg-image)`.
   No image is set, so the overlay composites to flat navy and the ratio above
   holds. Setting a background image there lightens the effective ground and
   would drop the accent below 3:1 — raise the overlay alpha to ~.96 if one is
   ever added.
   ========================================================================== */
:root {
	--orange-on-dark: #ef7010;
}

.cj-expect .who-orange,
.cj-expect__title .who-orange,
.cj-showcase .who-orange,
.cj-showcase__title .who-orange,
.ffa-learn__card .ffa-accent--orange,
.ffa-learn__title .ffa-accent--orange,
/* Homepage "Noteworthy Films" sits on the plum fill (--voilet-qwp, #3d253b). */
.networthy-slider .who-orange,
.networthy-slider .testimonial-orange,
/* Respiratory Safety "Ask of You" — its panel is navy now, see below. */
.resp-ask__accent {
	color: var(--orange-on-dark);
}


/* ==========================================================================
   Issue 22 — WCAG 1.4.3 Contrast (card body text on hover)
   .cj-expect__card-text is white at 73% opacity. That is fine on the panel
   itself but the card lightens to #1e66c1 on hover, dropping the text to
   3.8:1. 92% clears 4.5:1 on the hover fill and still reads as secondary
   text against the resting background.
   ========================================================================== */
.cj-expect__card-text {
	color: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   Issue 12 — WCAG 1.3.1 Info and Relationships
   The impact figures on the Filmmaker Development Program page are marked up
   as a <ul>. The grid display drops the implicit list role in some browsers,
   so the markup carries role="list"/"listitem"; these rules just strip the
   bullets and the UA list padding so nothing moves.
   ========================================================================== */
ul.ws-impact-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Issue 7 — WCAG 4.1.2 (News & Insights topic tabs)
   The topic filters are now a real ARIA tablist. Only the roving-tabindex
   panel needs styling; the buttons keep their existing .news-topic-tab look.
   ========================================================================== */
.news-topic-grid:focus {
	outline: none;
}

.news-topic-grid:focus-visible {
	outline: 3px solid #101828;
	outline-offset: 4px;
}

/* ==========================================================================
   Issue 6 — WCAG 2.4.7 Focus Visible (News & Insights search)
   .news-topic-search input carried `outline: none`; the global ring above
   restores it. The submit button next to it is clipped to 1px so it can still
   be reached by keyboard while staying visually silent — a focus ring on a
   1px box is not a visible indicator, so it un-clips itself when focused and
   sits at the right-hand end of the field.
   ========================================================================== */
.news-topic-search-submit:focus-visible {
	position: absolute;
	left: auto;
	right: 8px;
	top: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	border-radius: 12px;
	background: #101828;
	color: #fff;
}

.news-topic-search-submit:focus-visible .screen-reader-text {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	font-size: 12px;
	white-space: nowrap;
}

/* ==========================================================================
   Issue 3 — WCAG 4.1.2 (carousel prev/next controls)
   The slider arrows were <div role="button"> with no tabindex: announced as
   buttons but unreachable from the keyboard. They are real <button>s now.
   These declarations only strip the UA button chrome so the pills, borders and
   backgrounds set in the template stylesheets keep rendering exactly as before
   — every one of those rules is more specific than the selector below, so it
   still wins wherever a template deliberately paints the control.
   ========================================================================== */
button.slider-nav__item {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

button.slider-nav__item svg {
	pointer-events: none;
}

/* ==========================================================================
   WCAG 2.5.8 Target Size (Minimum) — login show/hide-password toggle
   The glyph is 28x18, under the 24x24 floor. The button is absolutely
   positioned inside the field's 52px right padding, so growing its hit area to
   44x44 and centring the glyph costs no layout and keeps the icon the same
   size on screen.
   ========================================================================== */
.toggle-password {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	right: 6px;
	padding: 0;
	line-height: 1;
}

/* ==========================================================================
   WCAG 1.4.3 — Transportation hero venue address
   #717680 clears 4.5:1 on white but only reaches 4.0:1 on the #e8f1fd card it
   actually sits on. One step darker on the same neutral ramp fixes it.
   ========================================================================== */
.transport-hero__venue-address {
	color: #616976;
}