/* 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 .navigation ul li a". */

#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: #9a9484;
	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: #827d70;
}

#a11y-toggle svg {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	fill: none;
	stroke: #fff;
	/* A thicker stroke on a 24-unit viewBox merges this icon's short
	   arm/leg line segments into a solid blob instead of reading as a
	   figure inside a ring - verified by screenshotting the rendered
	   icon at its real 32px size, not just checking the SVG source. */
	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 the specificity tie
   resolves by source order in our favor. */
#a11y-toggle[aria-pressed="true"] {
	background-color: #6b675c;
}

/* ---------- 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: #9a9484;
	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, a flex-item SVG with no width/height attributes (only
	   a viewBox) has no browser-agreed intrinsic size, so Chromium
	   computes its automatic flex-basis minimum as 0 and shrinks it to 0
	   width despite the explicit CSS width above - the icon silently
	   never paints. Caught on the sister site's build of this same
	   widget by inspecting the rendered header buttons, not from the
	   CSS source; added here from the start rather than re-discovering
	   it the hard way twice. */
	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: #6b675c;
}

.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 - tested
   directly (hover + pressed together), not just each state alone. */
.a11y-btn[aria-pressed="true"] {
	background-color: #9a9484;
	border-color: #9a9484;
	color: #fff;
}

.a11y-btn[aria-pressed="true"]:hover {
	background-color: #6b675c;
	border-color: #6b675c;
	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 elsewhere in skin-restaurant.css, 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. A ~1ms duration is
   visually indistinguishable from stopped but still fires
   transitionend/animationend, so plugin logic gated on it keeps
   working. Confirmed live on this site's own lightbox (see the
   accessibility-widget dated doc), not assumed from the sister site. */
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(154, 148, 132, 0.7);
	border-bottom: 2px solid rgba(154, 148, 132, 0.7);
	pointer-events: none;
	z-index: 999997;
	display: none;
}

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