/* Accessibility widget — additive, non-vendor stylesheet.
   Loaded after skin-restaurant.css so its rules win on specificity ties;
   still uses !important on the site-wide override rules (highlight,
   readable font, color modes, stop-motion) because those are meant to
   beat page-specific selectors like ".header .header-inner .navigation
   > ul > li > a:not(.button)". */

#a11y-widget,
#a11y-widget *,
#a11y-widget *::before,
#a11y-widget *::after {
	box-sizing: border-box;
}

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

#a11y-toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #5d5a54;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
	z-index: 999998;
	padding: 0;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

#a11y-toggle:hover {
	background-color: #4a4740;
}

#a11y-toggle svg {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	fill: none;
	stroke: #fff;
	/* 5 was too thick for a 24-unit viewBox at this icon's small path
	   segments (e.g. the arm/leg lines are only ~5 units long): the round
	   line caps overlapped and merged into a solid blob instead of reading
	   as a ring with a figure inside it - confirmed by screenshot, not
	   visible from the SVG source alone. */
	stroke-width: 1.8;
}

/* aria-pressed=true (panel open) must win over :hover — declared after
   the hover rule and matched on the same element so specificity ties
   resolve by source order in our favor. */
#a11y-toggle[aria-pressed="true"] {
	background-color: #3f3d38;
}

/* ---------- Panel ---------- */

#a11y-panel {
	position: fixed;
	right: 20px;
	bottom: 88px;
	width: 320px;
	max-width: calc(100vw - 40px);
	max-height: min(600px, calc(100vh - 120px));
	overflow-y: auto;
	background-color: #fff;
	color: #232323;
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
	z-index: 999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

#a11y-panel[hidden] {
	display: none;
}

#a11y-panel-header {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #5d5a54;
	color: #fff;
	padding: 14px 12px 14px 16px;
	border-radius: 10px 10px 0 0;
}

#a11y-panel-header h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	letter-spacing: normal;
}

.a11y-header-actions {
	display: flex;
	gap: 4px;
}

.a11y-icon-btn {
	background: transparent;
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.a11y-icon-btn:hover {
	background-color: rgba(255, 255, 255, 0.18);
}

.a11y-icon-btn svg {
	width: 18px;
	height: 18px;
	/* Without this, Chromium computes a 0 automatic min-width for this
	   flex-item SVG (no width/height attributes, only a viewBox, so it has
	   no browser-agreed intrinsic size) and shrinks it to 0 despite the
	   explicit width above - the icon silently never painted. Present since
	   the very first version of this widget; only caught by actually
	   inspecting the rendered header's icon buttons, not by reading the CSS. */
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
}

.a11y-group {
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
}

.a11y-group:last-child {
	border-bottom: none;
}

.a11y-group h3 {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #5d5a54;
}

.a11y-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.a11y-btn {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background-color: #f4f4f4;
	color: #232323;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 9px 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12.5px;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
}

.a11y-btn:hover {
	background-color: #eee;
}

/* Pressed state declared after :hover, and matched with an attribute
   selector of equal specificity to the hover rule above, so the
   pressed look wins even while the pointer is still over the button
   (this exact ordering bug — hover beating pressed — shipped once and
   left white-on-near-white text). */
.a11y-btn[aria-pressed="true"] {
	background-color: #5d5a54;
	border-color: #5d5a54;
	color: #fff;
}

.a11y-btn[aria-pressed="true"]:hover {
	background-color: #4a4740;
	border-color: #4a4740;
	color: #fff;
}

.a11y-btn svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	flex-shrink: 0;
}

.a11y-zoom-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.a11y-zoom-row .a11y-btn {
	flex: 0 0 52px;
	font-size: 16px;
	font-weight: 700;
}

#a11y-zoom-level {
	flex: 1 1 auto;
	text-align: center;
	font-size: 13px;
	color: #666;
}

/* ---------- Visible focus ring inside the widget ---------- */
/* Matches the site-wide :focus-visible restoration already added for
   WCAG 2.4.7 (see docs/accessibility-audit-2026-08-08.md, F10) so the
   widget doesn't invent a second focus style. */
#a11y-widget button:focus-visible {
	outline: 3px solid #d0592f;
	outline-offset: 2px;
}

@media (max-width: 420px) {
	#a11y-panel {
		right: 10px;
		bottom: 78px;
		width: calc(100vw - 20px);
	}
	#a11y-toggle {
		right: 12px;
		bottom: 12px;
	}
}

/* =========================================================
   Content-adjustment effects (applied to <html>, not the widget)
   ========================================================= */

html.a11y-highlight-links a:not(#a11y-widget a) {
	background-color: #fff59d !important;
	color: #000 !important;
	text-decoration: underline !important;
	text-decoration-color: #000 !important;
	border-radius: 2px;
}

html.a11y-highlight-headings h1:not(#a11y-widget *),
html.a11y-highlight-headings h2:not(#a11y-widget *),
html.a11y-highlight-headings h3:not(#a11y-widget *),
html.a11y-highlight-headings h4:not(#a11y-widget *),
html.a11y-highlight-headings h5:not(#a11y-widget *),
html.a11y-highlight-headings h6:not(#a11y-widget *) {
	background-color: #fff59d !important;
	color: #000 !important;
	outline: 2px solid #232323 !important;
	outline-offset: 2px;
}

html.a11y-readable-font body:not(#a11y-widget),
html.a11y-readable-font body :not(#a11y-widget):not(#a11y-widget *) {
	font-family: Arial, Helvetica, sans-serif !important;
	letter-spacing: 0.03em !important;
	word-spacing: 0.12em !important;
}

html.a11y-letter-spacing body :not(#a11y-widget):not(#a11y-widget *) {
	letter-spacing: 0.12em !important;
}

html.a11y-line-height body :not(#a11y-widget):not(#a11y-widget *) {
	line-height: 1.9 !important;
}

/* ---------- Color modes: one attribute value, mutually exclusive ---------- */

html[data-a11y-color="grayscale"] {
	filter: grayscale(1);
}

html[data-a11y-color="low-saturation"] {
	filter: saturate(0.3);
}

html[data-a11y-color="high-saturation"] {
	filter: saturate(2.4);
}

html[data-a11y-color="high-contrast"] body :not(#a11y-widget):not(#a11y-widget *) {
	background-color: #fff !important;
	background-image: none !important;
	color: #000 !important;
	border-color: #000 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html[data-a11y-color="high-contrast"] body a:not(#a11y-widget a) {
	color: #000 !important;
	text-decoration: underline !important;
	text-decoration-color: #000 !important;
}

/* ---------- Tools ---------- */

/* Near-zero duration, not transition:none/animation:none. The vendor
   lightbox (jquery.tm.summit.js, bundled in timber.master.min.js) sets a
   data('transitioning') guard before its close animation and only clears
   it inside a transitionend callback; a hard "none" stops that event from
   ever firing, so the plugin's guard never releases and the lightbox
   becomes permanently un-closeable (confirmed live: Escape and its own
   visible close button both stop working). A ~1ms duration is visually
   indistinguishable from stopped but still fires transitionend/animationend
   so plugin logic gated on it keeps working. */
html.a11y-stop-motion *:not(#a11y-widget *),
html.a11y-stop-motion *:not(#a11y-widget *)::before,
html.a11y-stop-motion *:not(#a11y-widget *)::after {
	animation-duration: 1ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 1ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}

html.a11y-big-cursor,
html.a11y-big-cursor * {
	cursor:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 32 32"><path d="M4 2 L4 28 L11 21 L15.5 30 L19.5 28 L15 19 L24 19 Z" fill="black" stroke="white" stroke-width="2" stroke-linejoin="round"/></svg>')
		4 2,
		auto !important;
}

#a11y-reading-guide {
	position: fixed;
	left: 0;
	right: 0;
	height: 44px;
	background-color: rgba(255, 213, 79, 0.38);
	border-top: 2px solid rgba(93, 90, 84, 0.7);
	border-bottom: 2px solid rgba(93, 90, 84, 0.7);
	pointer-events: none;
	z-index: 999997;
	display: none;
}

html.a11y-reading-guide-on #a11y-reading-guide {
	display: block;
}