/**
 * Accessibility fixes (WCAG 2.2 AA) from the South Tyneside Council audit.
 * Plain CSS on purpose: loaded after dist/ by inc/template/_accessibility.php,
 * so it works without a Parcel build.
 */

/* Keyboard focus: GOV.UK-style yellow ring with a dark edge, visible on white,
   navy and teal backgrounds. Only shows for keyboard use (:focus-visible), and
   beats plugin rules such as slick's "outline: none". */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid #ffdd00 !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 6px #0b0c0c !important;
}

/* Gravity Forms: its theme framework (very long selectors) and contact-form.php
   ("outline: none !important") remove the focus outline. ":not(#sts-a11y)" adds
   ID-level specificity so the keyboard focus ring wins. */
.gform_wrapper :is(input, button, select, textarea):focus-visible:not(#sts-a11y) {
	outline: 3px solid #ffdd00 !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 6px #0b0c0c !important;
}

/* Titles that used to be extra h1s are now h2s marked data-heading="h1" (see
   sts_heading_tag()). These are the values the theme's h1 actually renders
   with (checked against the server), so they look exactly as before.
   :where() keeps the same specificity as the "h1" tag selector they replace. */
h2:where([data-heading="h1"]) {
	margin-top: 0;
	margin-bottom: 0.5rem;
	line-height: 1.4;
	letter-spacing: -0.1125rem;
	font-size: 2.375rem !important;
}

/* Rich text areas give h2s extra spacing; a former h1 keeps the h1 spacing. */
.full-width-text__content h2[data-heading="h1"],
.two-columns-text__content h2[data-heading="h1"],
.two-column-text-image__content h2[data-heading="h1"] {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

/* Mobile menu (Foundation off-canvas): when closed it is aria-hidden, so its
   links must not be reachable with Tab. The page-specific CSS bundles had this
   rule, the flexible pages did not. */
.off-canvas.is-closed {
	visibility: hidden;
}

/* Close (X) button of the mobile menu: the icon was missing, so the button had
   no size and no name. */
.menu-icon__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	font-size: 1.5rem;
	color: #224c88;
	background: transparent;
	cursor: pointer;
}

/* Links inside running text must not rely on colour alone. */
#main p a:not([class*="button"]) {
	text-decoration: underline;
}

/* Numbered/bulleted lists on default pages (Privacy, Terms): the yellow
   markers failed contrast on white. */
article ol li::before,
article ul li::before {
	color: #224c88;
}

/* Footer right column: the background waves passed behind the logo and links
   on some screen sizes. A panel in the exact footer navy is invisible on the
   plain area and keeps the text on navy where the waves are. */
.footer-column--links {
	background-color: #224c88;
	border-radius: 10px;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* WooCommerce login/register: the "show password" eye was smaller than 24px. */
.woocommerce form .password-input .show-password-input,
.show-password-input {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Hero slider: pause/play button added by accessibility.js (autoplay must be
   stoppable, WCAG 2.2.2). */
.hero-slider-wrapper {
	position: relative;
}

.sts-slider-toggle {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 2px solid #fff;
	border-radius: 7px;
	background-color: #224c88;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.sts-slider-toggle:hover {
	background-color: #0b0c0c;
}

/* Resource library A-Z letters are now buttons: show which letters work. */
.facetwp-alpha.available[role="button"] {
	cursor: pointer;
}