/*
 * accessibility.css — The Copperfield ADA / WCAG 2.1 AA remediation
 * v1.0.1  2026-11-10
 *
 * Scope: the three cited items only.
 *   1. WCAG 2.4.1 Bypass Blocks      — skip link
 *   2. WCAG 2.1.1 / 4.1.2 Nav        — sub-menu keyboard + ARIA state
 *   3. WCAG 2.1.1 / 4.1.2 Order CTAs — /order-online/ accordion disclosure
 *
 * Loaded by a hardcoded <link> in header.php so that cache/optimizer
 * "remove unused CSS" passes cannot strip it (same approach as copper.css).
 * Keep the ?ver= in header.php in lockstep with accessibility.js.
 *
 * DESIGN NOTE — why there is no visual change to the header.
 * The desktop sub-menu is shown/hidden by exactly one parent-theme rule:
 *   @media (min-width:482px) {
 *     .primary-navigation > .primary-menu-container ul > li
 *        .sub-menu-toggle[aria-expanded="false"] ~ ul { display:none }
 *   }
 * The toggle BUTTON is the CSS hook, and an attribute selector keeps working
 * even while that button is display:none. So we deliberately LEAVE the button
 * hidden (style.css:200-202 is untouched) and instead expose aria-expanded and
 * the keyboard behaviour on the parent <a>. Result: one tab stop per nav item,
 * no second focusable control, and pixel-identical header geometry.
 * Do NOT "fix" this by un-hiding the button — that re-introduces the two-tab-
 * stops-per-item complaint raised in QA on the Green Mill build.
 */

/* ------------------------------------------------------------------ *
 * 1. Skip to main content (WCAG 2.4.1)
 * ------------------------------------------------------------------ */

.a11y-skip-link {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 100000;          /* above the sticky header and the GTM noscript */
	display: block;
	padding: 12px 24px;
	background: #9B5A1A;      /* site button brown; 5.4:1 against #fff */
	color: #FFFFFF !important;
	font-family: futura-pt, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 1.4;
	text-decoration: none;
	border-radius: 0;

	/* Visually hidden until focused, but still the first thing in the tab
	   order. clip-path + 1px box rather than display:none, so that it stays
	   focusable and is announced normally. */
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.a11y-skip-link:focus {
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	outline: 3px solid #000000;
	outline-offset: 2px;
	color: #FFFFFF !important;
	text-decoration: none;
}

/* The <main> wrapper is a programmatic focus target only; never show a ring
   on it, the user is looking at the content itself. */
main#main-content:focus {
	outline: none;
}

/* ------------------------------------------------------------------ *
 * 2. Navigation sub-menus (WCAG 2.1.1 / 4.1.2)
 * ------------------------------------------------------------------ */

/* Keep a sub-menu open while keyboard focus is anywhere inside it. This backs
   up the JS: it beats the parent theme's mouseleave handler, which would
   otherwise collapse a menu the keyboard is still inside.
   Only the "true" direction is forced. Do NOT add a matching
   [aria-expanded="false"] { display:none !important } rule — on the sister
   Crooked Pint build that author-!important rule outranked the JS and left
   menus stuck shut. Closing is already handled by the parent theme's own
   non-important rule. */
@media only screen and (min-width: 482px) {
	nav#site-navigation .menu-item-has-children > .sub-menu-toggle[aria-expanded="true"] ~ ul.sub-menu {
		display: block;
	}
}

/* Visible focus for every nav link, including the ones inside a dropdown.
   The theme sets no focus style at all on these. */
nav#site-navigation a:focus-visible,
nav#mobile-site-navigation a:focus-visible,
nav#site-navigation button:focus-visible,
nav#mobile-site-navigation button:focus-visible {
	outline: 3px solid #000000;
	outline-offset: -2px;
}

/* ------------------------------------------------------------------ *
 * 3. Online-ordering accordion on /order-online/ (WCAG 2.1.1 / 4.1.2)
 * ------------------------------------------------------------------ */

/* The WPBakery vc_tta toggle ships with no focus style. It is now a disclosure
   button (role/aria set by accessibility.js), so it must show focus clearly. */
.vc_tta-panel-heading a[data-vc-accordion]:focus-visible {
	outline: 3px solid #000000;
	outline-offset: -3px;
}

/* Ordering links inside an open panel. */
.vc_tta-panel-body a:focus-visible {
	outline: 3px solid #000000;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 4. Shared — make sure a focus ring is never clipped away
 * ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
	outline-color: #000000;
}

/* Honour reduced-motion for the smooth-scroll the skip link triggers. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
}