/* ============================================================
   A11Y LAYER — WCAG 2.1 AA corrections, 2026-08-05
   Loaded LAST from inc/topscripts.php so these overrides win.
   Program + evidence: _a11y/README.md (repo root), admin dashboard
   at /admin ?g=accessibility&p=overview. Every block cites the axe
   rule it clears. Same approach as the Klein / Sunset / Weber sites.

   Contrast inks (verified >= 4.5:1 against their worst ground):
     light ink on footer navy #070d30/#091140   #9aa1c2 (7.1:1)
     dimmed "coming soon" ink on navy           #a6acc9 (8.0:1)
     red text on white / light gray             #b81e24 (6.5 / 6.0:1)
     accessible brand-red button fill           #d21118 (5.5:1 w/ white)
     muted gray text on white / #f4f6f9         #5c636c (6.1 / 5.6:1)
   ============================================================ */

:root {
	--bf-red-text: #b81e24;
	--bf-red-fill: #d21118;
	--bf-muted: #5c636c;
	--bf-footer-ink: #9aa1c2;
}

/* ---- Skip link: reveal on keyboard focus (WCAG 2.4.1). The markup
   (inc/header.php) uses .skipto.sr-only, which stays clipped even when
   focused; this makes it visible the moment a keyboard user tabs in. ---- */
.skipto:focus {
	position: fixed !important;
	left: 0; top: 0;
	width: auto; height: auto;
	margin: 0; padding: 12px 22px;
	clip: auto; overflow: visible;
	z-index: 5000;
	background: #091140; color: #fff;
	font-weight: 700; font-size: 16px; text-decoration: none;
	border-radius: 0 0 6px 0;
	outline: 3px solid #fff; outline-offset: -6px;
}

/* ---- Visible keyboard focus, site-wide (WCAG 2.4.7). Double ring
   (white inner + red outer) so it reads on light, dark navy, and red
   grounds. :focus-visible only, so mouse clicks stay clean. ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #d21118 !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff !important;
	border-radius: 2px;
}

/* ---- Reduced motion (WCAG 2.3.3): pin animations/transitions solid
   for users who ask for it (and for the quarterly scanner, which
   emulates it). ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   FOOTER (axe color-contrast + target-size, was failing on every
   page). Grounds are the navy #091140 band and #070d30 bottom bar.
   ============================================================ */

/* Fine print + the store-name link row in the bottom bar. */
.site-footer small,
.footer-bottom small,
.footer-bottom small a,
.footer-copyright {
	color: var(--bf-footer-ink);
}

/* Privacy / Return / Accessibility links: contrast + a 24px touch
   target (they are 10px text on adjacent lines — WCAG 2.5.8). */
.footer-copyright a {
	color: var(--bf-footer-ink);
	display: inline-block;
	padding: 6px 2px;
}

/* "Uber Eats (Coming Soon)" was dimmed with inline opacity:0.55, which
   put it at 3.5:1. Full opacity + a quieter ink keeps the muted look. */
.site-footer li.footer-soon,
.site-footer li[style*="opacity"] {
	opacity: 1 !important;
}
.site-footer li.footer-soon a,
.site-footer li[style*="opacity"] a,
.site-footer li.footer-soon a small,
.site-footer li[style*="opacity"] a small {
	color: var(--bf-footer-ink);
}

/* Footer column headings are now <h2 class="footer-heading"> (heading
   order fix); custom.css already sizes them via the class, this just
   guards against UA h2 defaults sneaking in. */
h2.footer-heading {
	font-size: 11px;
	margin: 0 0 10px 0;
}

/* ---- Breadcrumbs (built by inc/bottomscripts.php): gray #7a7e8a on
   the hero's #f4f6f9 measured 3.7:1. ---- */
.page-hero-crumbs a,
.page-hero-crumbs .current,
.page-hero-crumbs .sep {
	color: var(--bf-muted);
}

/* ---- Bootstrap-palette buttons and labels used on public pages.
   Fills darken one step so their white text clears 4.5:1; the eye
   barely registers the shift. (axe color-contrast) ---- */
.btn-danger,
.btn-danger:focus {
	background-color: var(--bf-red-fill);
	border-color: #b30e14;
	color: #fff;
}
.btn-danger:hover,
.btn-danger:active {
	background-color: #b30e14;
	color: #fff;
}
.btn-success,
.btn-success:focus {
	background-color: #2e7d32;
	border-color: #27692a;
	color: #fff;
}
.btn-success:hover,
.btn-success:active {
	background-color: #27692a;
	color: #fff;
}
/* contact-us page overrides btn-success with its own green at higher
   specificity; match it. */
.cu-page .panel-footer .btn-success,
.cu-btn-green {
	background-color: #147a52;
}
/* "Featured" label: white on gold measured 1.9:1 — gold stays, ink
   flips dark. "Video" label rides the darkened red fill. */
.label-warning {
	color: #3f3000;
	background-color: #f0ad4e;
}
.label-danger {
	background-color: var(--bf-red-fill);
}

/* Bootstrap's .text-muted (#777) measured 4.1-4.5:1 on tinted grounds. */
.text-muted {
	color: var(--bf-muted);
}

/* ---- Dine-In Deals recipe finder (weekly-recipes.php) ---- */
.did-badge-new { background: var(--bf-red-fill); }
.did-chip.vid { color: var(--bf-red-text); }
.did-clear { color: var(--bf-red-text); }
.did-clear:hover { background: var(--bf-red-fill); color: #fff; }
.card-badge-pp { color: var(--bf-muted); }
.card-badge-sale { color: var(--bf-red-text); }
.did-side h5, .did-side h3 { color: var(--bf-muted); }
.did-opt .n { color: var(--bf-muted); }
.did-list .didx { color: var(--bf-muted); }
/* Featured video panel: gray captions under the price figures. */
.did-feature-badges .b span { color: var(--bf-muted); }
/* Print All button inside the recipe list band inherited the page link
   blue over .btn-danger's white text. */
.did-list a.btn-danger { color: #fff; }

/* ---- Home page eyebrow over the Top 10 band. ---- */
.top10-eyebrow { color: var(--bf-red-text); }

/* ---- Coupons page how-to strip: red bold on the yellow gradient
   measured 4.3:1. ---- */
.coupons-howto strong { color: #9f1318; }

/* ---- Links inside prose must not rely on color alone
   (axe link-in-text-block): corrected ink + standing underline.
   Scoped to paragraph/list prose inside main content only — nav,
   menus, cards, buttons and the footer stay clean. ---- */
main p a:not(.btn),
main li a:not(.btn):not([class]) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Standalone resource links on the accessibility/alternate pages also
   need 24px targets (they sit on their own lines, not in sentences). */
.a11y-links a {
	display: inline-block;
	padding: 5px 2px;
}

/* ---- Video consent placeholder (js/video-consent.js): the message
   inherited the page's black body color on some pages and rendered
   black-on-#1c1c1c. ---- */
.bf-video-consent, .bf-video-consent-msg { color: #fff; }

/* ---- CookieYes banner: keep its controls on-brand and passing
   (stock palette measured ~4.1:1 on the Weber rollout). Works WITH
   the consent tooling; prior-blocking untouched. ---- */
.cky-consent-container .cky-btn-accept,
.cky-consent-container .cky-btn-reject {
	background-color: var(--bf-red-fill) !important;
	border-color: var(--bf-red-fill) !important;
	color: #ffffff !important;
}
.cky-consent-container .cky-btn:focus-visible {
	outline: 3px solid #091140 !important;
	outline-offset: 2px;
}