/* Accessibility menu: the button, the panel, the skip link and every display mode (inc/a11y.php, assets/js/a11y.js).
   Each mode is a data-a11y-* attribute on <html>; nothing here changes the page's layout boxes, so a mode can be
   switched on and off without the page jumping. The menu itself (.ba11y) keeps its own look in every mode. */

/* ------------------------------------------------------------------ skip link */

.ba11y-skip {
	position: fixed;
	top: 8px;
	right: 8px;
	z-index: 10001;
	padding: 12px 20px;
	background: #1A1A1A;
	color: #fff;
	font: 600 16px/1.2 Arial, "Segoe UI", system-ui, sans-serif;
	letter-spacing: 0;
	text-decoration: underline;
	border-radius: 6px;
	transform: translateY(-200%);
	transition: transform .15s ease;
}
.ba11y[dir="ltr"] .ba11y-skip { right: auto; left: 8px; }
.ba11y-skip:focus,
.ba11y-skip:focus-visible {
	transform: none;
	outline: 3px solid #fff;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #1A1A1A;
}
#main-content:focus { outline: none; }

/* ------------------------------------------------------------------ button */

.ba11y-btn {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #1A1A1A;
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease;
}
.ba11y-btn:hover { background: #000; transform: scale(1.06); }
.ba11y-btn:focus { outline: none; }
.ba11y-btn:focus-visible {
	outline: 3px solid #1A1A1A;
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(0, 0, 0, .28);
}
.ba11y-btn__icon { display: block; pointer-events: none; }
/* A small gold mark while any setting is on, so the visitor sees the menu is doing something. */
.ba11y--active .ba11y-btn::after {
	content: "";
	position: absolute;
	top: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #C9A96E;
}

/* ------------------------------------------------------------------ panel */

.ba11y-panel {
	position: fixed;
	left: 16px;
	bottom: 76px;
	z-index: 9991;
	box-sizing: border-box;
	width: 360px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 100px);
	max-height: calc(100dvh - 100px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	border: 1px solid #1A1A1A;
	border-radius: 14px;
	background: #fff;
	color: #1A1A1A;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	font: 400 15px/1.35 Arial, "Segoe UI", system-ui, sans-serif;
	letter-spacing: 0;
	word-spacing: 0;
	text-align: start;
	cursor: auto;
}
.ba11y-panel[hidden] { display: none; }
.ba11y-panel *,
.ba11y-panel *::before,
.ba11y-panel *::after { box-sizing: border-box; }

.ba11y-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}
.ba11y-title {
	margin: 0;
	font: 700 18px/1.2 Arial, "Segoe UI", system-ui, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	color: #1A1A1A;
}
.ba11y-close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #1A1A1A;
	border-radius: 50%;
	background: #fff;
	color: #1A1A1A;
	cursor: pointer;
}

.ba11y-size {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 10px;
	padding: 8px 10px;
	border: 1px solid #c8c6c0;
	border-radius: 10px;
}
.ba11y-size__label { font-weight: 700; }
.ba11y-size__ctrl { display: flex; align-items: center; gap: 6px; }
.ba11y-size__btn {
	width: 44px;
	height: 40px;
	padding: 0;
	border: 1px solid #1A1A1A;
	border-radius: 8px;
	background: #fff;
	color: #1A1A1A;
	font: 700 16px/1 Arial, "Segoe UI", system-ui, sans-serif;
	cursor: pointer;
}
.ba11y-size__btn:disabled { border-color: #c8c6c0; color: #767676; cursor: default; }
.ba11y-size__value { min-width: 48px; text-align: center; font-weight: 700; }

.ba11y-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ba11y-grid li { margin: 0; padding: 0; list-style: none; }
.ba11y-grid li::before,
.ba11y-grid li::marker { content: none; }
.ba11y-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 78px;
	padding: 10px 6px;
	border: 1px solid #c8c6c0;
	border-radius: 10px;
	background: #f6f5f2;
	color: #1A1A1A;
	font: 400 14px/1.25 Arial, "Segoe UI", system-ui, sans-serif;
	text-align: center;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}
.ba11y-tile:hover { border-color: #1A1A1A; }
.ba11y-tile svg { display: block; }
.ba11y-tile[aria-pressed="true"] {
	border-color: #1A1A1A;
	background: #1A1A1A;
	color: #fff;
	font-weight: 700;
}
/* A check mark on a pressed tile: on/off is not told by colour alone. */
.ba11y-tile[aria-pressed="true"] .ba11y-tile__label::after { content: " \2713"; }

.ba11y-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 12px 0 0;
}
.ba11y-reset,
.ba11y-statement {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid #1A1A1A;
	border-radius: 8px;
	background: #fff;
	color: #1A1A1A;
	font: 700 14px/1.2 Arial, "Segoe UI", system-ui, sans-serif;
	text-decoration: none;
	cursor: pointer;
}
.ba11y-statement { text-decoration: underline; }
.ba11y-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Every control of the menu has the same strong focus ring, in every mode. */
.ba11y-panel :is(button, a):focus { outline: none; }
.ba11y-panel :is(button, a):focus-visible {
	outline: 3px solid #1A1A1A;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}
.ba11y-panel .ba11y-tile[aria-pressed="true"]:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #1A1A1A; }

/* Phones: the footer form reaches the bottom corner, so the page ends with room for the button (it covered the
   last lines of the form: the send button and the reCAPTCHA sentence). */
@media (max-width: 767px) {
	.barami-footer { padding-bottom: 84px !important; }
}

@media (max-width: 480px) {
	.ba11y-btn { left: 12px; bottom: 12px; }
	.ba11y-panel {
		left: 8px;
		right: 8px;
		bottom: 68px;
		width: auto;
		max-width: none;
		max-height: calc(100vh - 84px);
		max-height: calc(100dvh - 84px);
		padding: 12px;
	}
	.ba11y-tile { min-height: 70px; font-size: 13px; }
}

/* ------------------------------------------------------------------ modes */

/* The menu keeps its own look whatever is switched on. */
:root[data-a11y-contrast] .ba11y-panel,
:root[data-a11y-contrast] .ba11y-panel * { text-shadow: none; }

/* Line and letter spacing (WCAG 1.4.12 values). */
:root[data-a11y-spacing] body :is(p, li, dd, dt, td, th, blockquote, figcaption, label, h1, h2, h3, h4, h5, h6, a, span, strong, em, b, small, button, input, textarea, select):not(.ba11y, .ba11y *) {
	letter-spacing: .12em !important;
	word-spacing: .16em !important;
	line-height: 1.6 !important;
}
:root[data-a11y-spacing] body p:not(.ba11y *) { margin-bottom: 1em !important; }

/* Readable font: the system's plain sans serif. */
:root[data-a11y-font] body,
:root[data-a11y-font] body *:not(.ba11y *, svg, svg *) {
	font-family: Arial, "Segoe UI", "Helvetica Neue", system-ui, sans-serif !important;
	font-style: normal !important;
}

/* Greyscale. On the root, a filter does not move fixed elements (the header and this menu stay where they are). */
:root[data-a11y-gray] { filter: grayscale(1); }

/* High contrast, dark: white text on black, yellow links. Pictures stay as they are. */
:root[data-a11y-contrast="dark"] body { background: #000 !important; color: #fff !important; }
:root[data-a11y-contrast="dark"] body *:not(.ba11y, .ba11y *, img, video, picture, svg, svg *) {
	background-color: transparent !important;
	color: #fff !important;
	border-color: #fff !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
:root[data-a11y-contrast="dark"] body :is(p, h1, h2, h3, h4, h5, h6, li, a, span, strong, em, b, small, label, button, input, textarea, select, td, th, dt, dd, blockquote, figcaption):not(.ba11y, .ba11y *) {
	background-color: #000 !important;
}
:root[data-a11y-contrast="dark"] body :is(a, a *):not(.ba11y *, svg, svg *) {
	color: #ff0 !important;
	text-decoration: underline !important;
}
:root[data-a11y-contrast="dark"] :is(#site-header, #products-menu, .mega-menu, #mobile-menu, #search-panel, #advice-popup-box, .barami-lightbox) {
	background-color: #000 !important;
}
:root[data-a11y-contrast="dark"] ::placeholder { color: #ddd !important; opacity: 1 !important; }
:root[data-a11y-contrast="dark"] #site-header svg,
:root[data-a11y-contrast="dark"] .barami-footer-logo svg,
:root[data-a11y-contrast="dark"] #mobile-menu > div:first-child svg { filter: brightness(0) invert(1) !important; }
:root[data-a11y-contrast="dark"] #mobile-menu-toggle span { background-color: #fff !important; }

/* Light contrast: black text on white, dark blue links. */
:root[data-a11y-contrast="light"] body { background: #fff !important; color: #000 !important; }
:root[data-a11y-contrast="light"] body *:not(.ba11y, .ba11y *, img, video, picture, svg, svg *) {
	background-color: transparent !important;
	color: #000 !important;
	border-color: #000 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
:root[data-a11y-contrast="light"] body :is(p, h1, h2, h3, h4, h5, h6, li, a, span, strong, em, b, small, label, button, input, textarea, select, td, th, dt, dd, blockquote, figcaption):not(.ba11y, .ba11y *) {
	background-color: #fff !important;
}
:root[data-a11y-contrast="light"] body :is(a, a *):not(.ba11y *, svg, svg *) {
	color: #0000b3 !important;
	text-decoration: underline !important;
}
:root[data-a11y-contrast="light"] :is(#site-header, #products-menu, .mega-menu, #mobile-menu, #search-panel, #advice-popup-box, .barami-lightbox) {
	background-color: #fff !important;
}
:root[data-a11y-contrast="light"] ::placeholder { color: #333 !important; opacity: 1 !important; }
:root[data-a11y-contrast="light"] #site-header svg,
:root[data-a11y-contrast="light"] .barami-footer-logo svg { filter: brightness(0) !important; }
:root[data-a11y-contrast="light"] #search-toggle svg path { stroke: #000 !important; }
:root[data-a11y-contrast="light"] #mobile-menu-toggle span { background-color: #000 !important; }

/* Highlight links: yellow behind text links, a black and yellow frame round picture links. */
:root[data-a11y-links] body a:not(.ba11y *) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	outline: 2px solid #000 !important;
	outline-offset: 2px !important;
}
:root[data-a11y-links] body a:not(.ba11y *):not(:has(img, picture, video, svg)) {
	background-color: #ffeb3b !important;
	color: #000 !important;
}
:root[data-a11y-links] body a:not(.ba11y *):not(:has(img, picture, video, svg)) * { color: #000 !important; }
:root[data-a11y-links] body a:not(.ba11y *):has(img, picture, video) { box-shadow: 0 0 0 5px #ffeb3b !important; }

/* Highlight headings. */
:root[data-a11y-headings] body :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(.ba11y *) {
	outline: 2px dashed #0b4f9c !important;
	outline-offset: 4px !important;
	background-color: #e6efff !important;
	color: #000 !important;
}
:root[data-a11y-headings] body :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(.ba11y *) * { color: #000 !important; }

/* Big cursor: a 48px arrow, and a 48px hand over what can be clicked. */
:root[data-a11y-cursor],
:root[data-a11y-cursor] body,
:root[data-a11y-cursor] body * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M7 4l31 30H23.5l8.2 15.4-6.2 3.1-8.1-15.5L7 47z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 7 4, auto !important;
}
:root[data-a11y-cursor] body :is(a, a *, button, button *, [role="button"], label, select, summary, input[type="submit"], input[type="checkbox"], input[type="radio"]) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M17 3.5a3.8 3.8 0 0 1 3.8 3.8V21l1.6-.5a3.8 3.8 0 0 1 4.5 1.9 3.8 3.8 0 0 1 5.2 1.4 3.8 3.8 0 0 1 5.6 3.3V36c0 6.3-4.6 10.5-11 10.5h-3.4c-3.6 0-6.4-1.6-8.4-4.6L8 32.4a3.4 3.4 0 0 1 5.1-4.4l.1.1V7.3A3.8 3.8 0 0 1 17 3.5z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 17 4, pointer !important;
}
:root[data-a11y-cursor] body :is(input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input:not([type]), textarea) { cursor: text !important; }
:root[data-a11y-cursor] .circle,
:root[data-a11y-motion] .circle { display: none !important; }

/* Stop motion: no CSS animation or transition, the scroll reveals shown at once, the logo band still. */
:root[data-a11y-motion] *,
:root[data-a11y-motion] *::before,
:root[data-a11y-motion] *::after {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	animation-delay: 0s !important;
	transition-duration: .001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}
:root[data-a11y-motion] .marquee-track { animation: none !important; }
:root[data-a11y-motion] .fade-up { opacity: 1 !important; transform: none !important; }

/* Hide images: pictures and the film keep their place, so nothing moves. Logos and icons stay. */
:root[data-a11y-images] body :is(img, video, picture):not(.ba11y *) { visibility: hidden !important; }
:root[data-a11y-images] body [style*="background-image"]:not(.ba11y *) { background-image: none !important; }

/* Strong keyboard focus: a thick black ring with a yellow halo, on every page element. */
:root[data-a11y-focus] body *:not(.ba11y *):focus,
:root[data-a11y-focus] body *:not(.ba11y *):focus-visible {
	outline: 3px solid #000 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 7px #ffeb3b !important;
}
:root[data-a11y-focus] #main-content:focus { box-shadow: none !important; outline: none !important; }

/* The system's own reduced-motion request, also before the visitor opens the menu (a11y.js sets the same mode). */
@media (prefers-reduced-motion: reduce) {
	.ba11y-btn,
	.ba11y-skip,
	.ba11y-tile { transition: none; }
}