/*
 * HashOne Accessibility Fixes - site-wide styles.
 * Loaded after the theme so these rules take priority.
 */

/* ---------- Visible keyboard focus (WCAG 2.4.7) ----------
 * The theme removes outlines with "a:focus { outline: 0 }".
 * Two-tone ring: white inner halo + navy outline, visible on red, yellow and white. */
html body a:focus-visible,
html body button:focus-visible,
html body [role="button"]:focus-visible,
html body [tabindex]:not([tabindex="-1"]):focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body video:focus-visible,
html body summary:focus-visible {
	outline: 3px solid #0B1F3A !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #FFFFFF !important;
	border-radius: 2px;
}

/* Semplice pill buttons: the link sits inside ".smp-button .is-content",
 * which has overflow: hidden and clips the link's own ring, so the ring is
 * drawn on that wrapper instead (retest F-01, 17 buttons). */
html body .smp-button .is-content:has(a:focus-visible) {
	outline: 3px solid #0B1F3A !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #FFFFFF !important;
}
@supports not selector(:has(*)) {
	html body .smp-button .is-content:focus-within {
		outline: 3px solid #0B1F3A !important;
		outline-offset: 3px !important;
		box-shadow: 0 0 0 3px #FFFFFF !important;
	}
}

/* The header logo link is inline with a 0px line box, so a ring on it would
 * surround nothing. As an inline-block it takes the size of the logo. */
#navbar-top a.image-link {
	display: inline-block;
}

/* Semplice positions the whole page (#content-holder) absolutely, which
 * leaves <body> 0px tall. Testing tools then report the body as visually
 * hidden content. A body at least one screen tall changes nothing on the
 * page, since the content is positioned independently of it. */
html body {
	min-height: 100vh;
}

/* The theme gives <body> "overflow-x: hidden", which makes the body a box
 * that clips its content, and its resize script fixes the body to the
 * window height. Scanners then report <body> itself as visually hidden
 * content (retest 23 Oct). The sideways clipping moves to <html>, which
 * the browser applies to the window exactly as before, and the body is
 * left as a plain box that never hides anything. */
html {
	overflow-x: hidden;
}
html body {
	overflow: visible !important;
	height: auto !important;
}

/* <body> and <html> have no background colour of their own, so the text
 * colour set on <body> (black) sits on "transparent". Some testing tools
 * read transparent as black and report <body> as hidden (black on black).
 * The browser already paints the page white behind them, so declaring that
 * white changes nothing on screen. */
html,
html body {
	background-color: #FFFFFF;
}

/* Programmatic focus targets (skip link destination) should not show a ring. */
#hoa11y-main:focus {
	outline: none !important;
}

/* ---------- Skip link (WCAG 2.4.1) ---------- */
.hoa11y-skip {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 2147483647;
	padding: 12px 18px;
	background: #0B1F3A;
	color: #FFFFFF !important;
	font: 700 16px/1.2 Arial, Helvetica, sans-serif;
	text-decoration: underline;
	border-radius: 4px;
	transform: translateY(-200%);
}
.hoa11y-skip:focus,
.hoa11y-skip:focus-visible {
	transform: none;
}

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

/* ---------- Menu button and back-to-top are now buttons ---------- */
[data-hoa11y-menu-toggle],
[data-hoa11y-button] {
	cursor: pointer;
}

/* ---------- Focus not hidden under the fixed header (WCAG 2.4.11) ---------- */
html {
	scroll-padding-top: calc(var(--hoa11y-header-h, 0px) + 16px);
}

/* ---------- Footer target size (WCAG 2.5.8) ----------
 * Some footer links end in a <br> inside the link, which only breaks the line
 * while the link stays inline (inline-block put "Business Inquiries" and
 * "Job Inquiries" side by side). A 28px line box spaces the links instead,
 * so a 24px target centred on each one does not overlap its neighbour. */
.hoa11y-footer .is-content a {
	display: inline;
	min-height: 0;
	padding: 0;
}
.hoa11y-footer .is-content p {
	line-height: 28px;
}

/* ---------- Nutrition values as a real list (WCAG 1.3.1) ----------
 * Each value line is a list item and keeps the size, color and font of the
 * paragraph it came from, so the page looks as it did. */
.is-content ul.hoa11y-value-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.is-content ul.hoa11y-value-list li {
	margin: 0;
	padding: 0;
}

/* ---------- Pause control for animated images (WCAG 2.2.2) ---------- */
.hoa11y-gif-host {
	position: relative;
}
.hoa11y-gif-toggle {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 32px;
	min-height: 32px;
	padding: 6px 10px;
	border: 2px solid #FFFFFF;
	border-radius: 16px;
	background: rgba(11, 31, 58, 0.92);
	color: #FFFFFF;
	font: 700 12px/1 Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.hoa11y-gif-toggle:hover {
	background: #0B1F3A;
}
.hoa11y-gif-toggle svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* ---------- Respect reduced motion for theme transitions ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}
}

/* ---------- Real heading elements (WCAG 1.3.1) ----------
 * The visual titles are written as true h1-h6 elements so that testing tools
 * and search engines see them, not only screen readers. Semplice already
 * styles h1-h6 and p identically inside .is-content; the three properties
 * below are the only ones a heading element would otherwise change, so
 * resetting them to "inherit" keeps the page looking exactly as it did.
 * The inline font-size Semplice writes on the element still wins over this. */
.is-content h1.hoa11y-h,
.is-content h2.hoa11y-h,
.is-content h3.hoa11y-h,
.is-content h4.hoa11y-h,
.is-content h5.hoa11y-h,
.is-content h6.hoa11y-h {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}

/* The theme zeroes the last paragraph's bottom margin; do the same for a
 * heading that is now the last child, so spacing is unchanged. */
#content-holder .is-content h1.hoa11y-h:last-child,
#content-holder .is-content h2.hoa11y-h:last-child,
#content-holder .is-content h3.hoa11y-h:last-child,
#content-holder .is-content h4.hoa11y-h:last-child,
#content-holder .is-content h5.hoa11y-h:last-child,
#content-holder .is-content h6.hoa11y-h:last-child {
	margin-bottom: 0;
}

/* ---------- Controls rebuilt as real <button> elements ----------
 * The burger and the back-to-top arrow are <button> elements now, so the
 * browser gives them keyboard activation, the right role and state reporting
 * with no script. A button carries its own appearance, which is stripped
 * here; the theme's own geometry is restored by the mirrored rules below. */
button[data-hoa11y-menu-toggle],
button[data-hoa11y-button] {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* The theme styles these controls with selectors that name the <a> element
 * (".hamburger a.open-menu span", ".back-to-top a"), which no longer match.
 * Every such rule in the theme stylesheet is repeated here for <button>, so
 * the burger icon and the arrow keep their exact appearance. None of the
 * originals sit inside a media query. */
.back-to-top button {
	display: block;
	padding: 10px;
	cursor: pointer;
}
smp-nav-section smp-nav-column [data-module="menu"][data-menu-type="hamburger"] .hamburger button {
	font-size: 0;
}
.hamburger button.close-menu,
.hamburger button.menu-icon,
.hamburger button.open-menu {
	width: 1.3333333333rem;
	display: block;
	height: 14px;
	position: relative;
	transition: none;
}
.hamburger button.close-menu span,
.hamburger button.menu-icon span,
.hamburger button.open-menu span {
	background: #000;
	display: block;
	height: 2px;
	width: 100%;
	position: absolute;
	transform: translateY(-50%);
	cursor: pointer;
	margin-top: 7px;
}
.hamburger button.close-menu span::after,
.hamburger button.close-menu span::before,
.hamburger button.menu-icon span::after,
.hamburger button.menu-icon span::before,
.hamburger button.open-menu span::after,
.hamburger button.open-menu span::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: inherit;
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: none;
}
.hamburger button.close-menu span::before,
.hamburger button.menu-icon span::before,
.hamburger button.open-menu span::before {
	transform: translateY(-6px);
}
.hamburger button.close-menu span::after,
.hamburger button.menu-icon span::after,
.hamburger button.open-menu span::after {
	transform: translateY(6px);
}
.hamburger button.close-menu span {
	visibility: hidden;
}
.hamburger button.close-menu span::before {
	transform: rotate(45deg);
	visibility: visible;
}
.hamburger button.close-menu span::after {
	transform: rotate(-45deg);
	visibility: visible;
}
/* Enlarges the burger's clickable area to roughly 54px (WCAG 2.5.8). */
.hamburger button:after {
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	padding: 20px;
	left: -20px;
	top: -20px;
	display: block;
	box-sizing: content-box;
}
.hamburger:hover button.open-menu span::before {
	transform: translateY(-8px);
}
.hamburger:hover button.open-menu span::after {
	transform: translateY(8px);
}
.hamburger:hover button.close-menu,
.hamburger:hover button.open-menu {
	opacity: 1 !important;
}