/*
 * Accessibility layer (WCAG 2.2 AA). See inc/accessibility.php.
 *
 * Separate file, loaded last, so a rebuild of main.css cannot drop it. Nothing
 * here changes the layout; it adds focus rings and the skip link, and
 * corrects text colours that failed contrast.
 */

:root {
	/* The brand gold (#b0863c) reads 3.3:1 on white and 2.8:1 on parchment:
	   fine for large display type and icons, not for small text or a focus
	   ring. This is the same hue, darkened until it passes everywhere the site
	   uses a light ground: 6.1:1 on white, 5.1:1 on parchment. */
	--gold-text: #7d5c22;
	--focus-ring: var(--gold-text);
	--focus-ring-on-dark: var(--gold-light); /* 6.7:1 on --ink */
}

/* ------------------------------------------------------------ Skip link ---- */
.ja-skip-link {
	position: fixed; /* on screen even if the page is already scrolled */
	top: 0;
	left: 0;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--parchment);
	font-weight: 700;
	font-size: 15px;
	border-radius: 0 0 10px 0;
	transform: translateY(-120%);
}

.ja-skip-link:focus,
.ja-skip-link:focus-visible {
	transform: none;
	outline: 3px solid var(--focus-ring-on-dark);
	outline-offset: -3px;
}

/* The skip target is focusable only so the jump moves focus; it is not a
   control, so it does not get a ring. */
#main-content:focus { outline: none; }

/* Screen-reader-only text. */
.ja-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------- Focus rings ---- */
/* One ring for every control, visible on the ground it sits on (2.4.7, 1.4.11).
   Before this, most controls had only the browser default, and form fields
   had their outline removed in favour of a 15%-opacity glow. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}

/* Dark grounds: the light gold ring. */
:where(.site-header--executive, .site-footer, .hero, .why, .page-hero, .legal-hero,
	.ctaband--ink, .contact__card, .ja-cookie, .lp-hero, .lp-header)
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--focus-ring-on-dark);
}

/* White cards that sit on those dark grounds go back to the dark ring. */
:where(.lp-form-card, .fp-card)
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--focus-ring);
}

/* Form fields keep their gold border, and gain a real ring. */
.ja-cform :is(input, select, textarea):focus-visible,
.ja-cform :is(input, select, textarea):focus {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px !important;
}

/* Keep the focused element clear of the sticky header (2.4.11). */
html { scroll-padding-top: calc(var(--header-h) + 16px); }

/* ------------------------------------------------------- Mobile menu ------ */
/* Closed, the panel is only moved off screen, so its links were still in the
   tab order: keyboard users tabbed through a menu they could not see. Hidden
   once the slide-out finishes; shown immediately when it opens. */
@media (max-width: 1000px) {
	.nav-links:not(.open),
	.nav-links:not(.open) .nav-sub { /* the submenu sets its own visibility */
		visibility: hidden;
		transition: transform .28s ease, visibility 0s linear .28s;
	}

	.nav-links.open {
		visibility: visible;
		transition: transform .28s ease, visibility 0s;
	}
}

/* ------------------------------------------- Desktop submenu: Escape ------ */
@media (min-width: 1001px) {
	.nav-links .nav-has-sub.ja-sub-dismissed > .nav-sub {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* ---------------------------------------------------- Quote type buttons -- */
.qtab[aria-pressed="true"] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--parchment);
}

/* ------------------------------------------------------------ Contrast ---- */
/* Small gold text on white/parchment (was 2.8–3.3:1, needs 4.5:1). */
.ja-cform .ja-consent a,
.lp-legal a,
.richtext__body a,
.legal__nav a,
.fp-call a,
.ja-form-page .ja-cform .codedropz-upload-inner span,
.ja-form-page .ja-cform .codedropz-upload-inner .cd-upload-btn {
	color: var(--gold-text);
}

.legal__nav a:hover { color: var(--ink); }

/* Grey disclaimers under the quote buttons (were 2.6:1). */
.quote__disclaimer,
.lp-disclaimer { color: var(--text-muted); }

/* White on brand gold is 3.3:1. The site's other gold buttons already carry
   navy text (4.7:1); these three were left white. Hover keeps the existing
   darker gold, where white does pass (5.1:1). The "why" badge goes navy as a
   whole so its number and its label stay one colour. */
.ja-cform .wpcf7-submit,
.lp-call,
.why__badge { color: var(--ink); }

.ja-cform .wpcf7-submit:hover,
.lp-call:hover { color: #fff; }

/* Landing footer line on the dark ground (was 50% parchment, 4.2:1). */
.lp-footer__copy { color: rgba(241, 234, 219, .65); }

/* ------------------------------------------------------------ Headings ---- */
/* Landing steps were <h4> straight under an <h2>; now <h3>, same look. */
.lp-step .lp-step__title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 8px 0 6px; }