/* ==========================================================================
   Thrif-T-Lodge Motel — accessibility tray
   --------------------------------------------------------------------------
   Self-hosted accessibility toolbar in the style of the ADA Tray widget
   (https://www.adatray.com/). No third-party script, no subscription and no
   data leaves the browser — preferences live in localStorage only.

   The visitor's choices are applied as `a11y-*` classes on <html>; everything
   below is scoped to those classes so the site renders untouched by default.
   ========================================================================== */

:root {
  --a11y-blue:      #1B6AA5;
  --a11y-blue-dark: #12507E;
  --a11y-ink:       #16212B;
  --a11y-paper:     #FFFFFF;
  --a11y-line:      rgba(22, 33, 43, .14);
  --a11y-bottom:    20px;
}

/* Base tray typography. The rules that keep the guest's own adjustments off
   the tray live at the foot of this file, where they can out-specify them. */
.a11y-ui, .a11y-ui * { box-sizing: border-box; }

/* ------------------------------------------------------ 1. Launch button */
.a11y-launch {
  position: fixed;
  right: 20px;
  bottom: var(--a11y-bottom);
  z-index: 2147483000;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 4px 14px rgba(10, 26, 40, .35));
  transition: transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.a11y-launch:hover  { transform: scale(1.06); }
.a11y-launch:active { transform: scale(.96); }
.a11y-launch svg { width: 100%; height: 100%; display: block; }
.a11y-launch:focus-visible {
  outline: 3px solid var(--a11y-blue-dark);
  outline-offset: 3px;
  border-radius: 50%;
}

/* Tooltip under the button, as on the reference widget. */
.a11y-launch-hint {
  position: fixed;
  right: 12px;
  bottom: calc(var(--a11y-bottom) - 12px);
  z-index: 2147483000;
  transform: translateY(6px);
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--a11y-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25 !important;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.a11y-launch:hover + .a11y-launch-hint,
.a11y-launch:focus-visible + .a11y-launch-hint {
  opacity: 1;
  visibility: visible;
  transform: translateY(12px);
}

/* Hide the launcher while the tray is open — the panel has its own close. */
.a11y-open .a11y-launch,
.a11y-open .a11y-launch-hint { display: none; }

/* ---------------------------------------------------------- 2. The tray */
.a11y-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  background: rgba(12, 22, 32, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease;
}
.a11y-open .a11y-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }

.a11y-panel {
  position: fixed;
  right: 20px;
  bottom: var(--a11y-bottom);
  z-index: 2147483001;
  width: min(360px, calc(100vw - 32px));
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--a11y-paper);
  color: var(--a11y-ink);
  box-shadow: 0 24px 60px rgba(8, 20, 32, .32);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}
.a11y-open .a11y-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.a11y-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 18px;
  background: var(--a11y-blue);
  color: #fff;
}
.a11y-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em !important;
  flex: 1;
}
.a11y-head svg { width: 22px; height: 22px; flex: none; }

.a11y-close {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.a11y-close:hover { background: rgba(255, 255, 255, .3); }
.a11y-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.a11y-body {
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.a11y-group {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em !important;
  color: #5A6B78;
}
.a11y-group + .a11y-grid { margin-bottom: 16px; }
.a11y-grid + .a11y-group { margin-top: 18px; }

.a11y-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.a11y-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 12px 8px;
  border: 1px solid var(--a11y-line);
  border-radius: 10px;
  background: #F6F8FA;
  color: var(--a11y-ink);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.a11y-btn svg { width: 22px; height: 22px; flex: none; }
.a11y-btn:hover { background: #E9EFF5; border-color: #B9CCDC; }
.a11y-btn:focus-visible { outline: 3px solid var(--a11y-blue); outline-offset: 2px; }
.a11y-btn[aria-pressed="true"] {
  background: var(--a11y-blue);
  border-color: var(--a11y-blue);
  color: #fff;
}
.a11y-btn .a11y-step {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  opacity: .72;
}

.a11y-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--a11y-line);
  background: #F6F8FA;
  font-size: 12px;
}
.a11y-foot a { color: var(--a11y-blue-dark); font-weight: 700; }
.a11y-reset {
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--a11y-line);
  border-radius: 8px;
  background: #fff;
  color: var(--a11y-ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.a11y-reset:hover { background: #E9EFF5; }
.a11y-reset:focus-visible { outline: 3px solid var(--a11y-blue); outline-offset: 2px; }

/* Keep the tray clear of the mobile "Call to Book" bar. */
@media (max-width: 720px) {
  :root { --a11y-bottom: 82px; }
  .a11y-panel { right: 16px; left: 16px; width: auto; max-height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-launch, .a11y-panel, .a11y-backdrop, .a11y-launch-hint { transition: none; }
}

/* ==========================================================================
   3. The visitor's adjustments
   ========================================================================== */

/* -- Text size: scales the root font, which the whole site is built on. --- */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 150%; }
html[class*="a11y-text-"] body { font-size: 1rem; }

/* -- Readable font ------------------------------------------------------- */
html.a11y-readable body * {
  font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important;
  font-variant-ligatures: none;
}

/* -- Spacing ------------------------------------------------------------- */
html.a11y-spacing body * {
  line-height: 1.9 !important;
  letter-spacing: .09em !important;
  word-spacing: .16em !important;
}

/* -- Highlight links ----------------------------------------------------- */
html.a11y-links body a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 2px solid #C8102E;
  outline-offset: 2px;
  background: #FFF4B8 !important;
  color: #16212B !important;
}
html.a11y-links body a svg { color: #16212B !important; }

/* -- High contrast: re-point the site's own design tokens ---------------- */
html.a11y-contrast body {
  --cream: #000000;
  --cream-2: #000000;
  --beige: #0B0B0B;
  --white: #000000;
  --charcoal: #FFFFFF;
  --charcoal-2: #F2F2F2;
  --burgundy: #000000;
  --burgundy-2: #000000;
  --burgundy-d: #000000;
  --gold: #FFD24A;
  --gold-2: #FFD24A;
  --gold-light: #FFE38C;
  --line: rgba(255, 255, 255, .4);
  --line-strong: rgba(255, 255, 255, .6);
  background: #000 !important;
  color: #fff !important;
}
html.a11y-contrast body * {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, .45) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.a11y-contrast body a {
  color: #FFD24A !important;
  text-decoration: underline !important;
}
html.a11y-contrast body .btn {
  background: #FFD24A !important;
  color: #000000 !important;
  border: 2px solid #FFD24A !important;
}
html.a11y-contrast body .btn * { color: #000000 !important; }
/* Hero and sign-band photographs sit behind their own text. Left alone they
   make high-contrast mode useless, so drop them right back and let the solid
   black through. */
html.a11y-contrast body .hero,
html.a11y-contrast body .hero--compact { background: #000 !important; }
html.a11y-contrast body .hero-media { opacity: .1 !important; }
html.a11y-contrast body .hero::before,
html.a11y-contrast body .hero::after { background: none !important; }
html.a11y-contrast body .card-media,
html.a11y-contrast body .split-media,
html.a11y-contrast body .gitem { opacity: .75 !important; }

html.a11y-contrast body .topbar,
html.a11y-contrast body .site-header,
html.a11y-contrast body .site-footer,
html.a11y-contrast body .callbar,
html.a11y-contrast body section { background: #000 !important; }

/* -- Colour filters ------------------------------------------------------ */
/* Applied per top-level block rather than to <html>, so that position:fixed
   elements (header, call bar, lightbox, this tray) keep their anchoring. */
body > *:not(.a11y-ui) { filter: var(--a11y-filter, none); }
html.a11y-grayscale body               { --a11y-filter: grayscale(1); }
html.a11y-invert body                  { --a11y-filter: invert(1) hue-rotate(180deg); }
html.a11y-grayscale.a11y-invert body   { --a11y-filter: grayscale(1) invert(1); }

/* Photographs stay legible when colours are inverted. */
html.a11y-invert body img,
html.a11y-invert body video,
html.a11y-invert body picture { filter: invert(1) hue-rotate(180deg); }

/* -- Hide images --------------------------------------------------------- */
html.a11y-noimg body img,
html.a11y-noimg body picture,
html.a11y-noimg body .hero-media,
html.a11y-noimg body .signband { visibility: hidden !important; }
html.a11y-noimg body .hero-media,
html.a11y-noimg body .signband { background: var(--charcoal) !important; }

/* -- Pause motion -------------------------------------------------------- */
html.a11y-nomotion, html.a11y-nomotion body { scroll-behavior: auto !important; }
html.a11y-nomotion body * {
  animation: none !important;
  transition: none !important;
}
html.a11y-nomotion body .reveal { opacity: 1 !important; transform: none !important; }

/* -- Large cursor -------------------------------------------------------- */
html.a11y-cursor body,
html.a11y-cursor body * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 10-6.2 1.2L16 20l-2.6 1.2-3.1-6.7L5 19z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* -- Reading guide ------------------------------------------------------- */
.a11y-guide {
  position: fixed;
  left: 0;
  right: 0;
  height: 14px;
  z-index: 2147482998;
  background: rgba(27, 106, 165, .32);
  border-top: 2px solid #1B6AA5;
  border-bottom: 2px solid #1B6AA5;
  pointer-events: none;
  display: none;
}
html.a11y-guide-on .a11y-guide { display: block; }

/* -- Stronger focus ring for everyone using the keyboard ----------------- */
html.a11y-focus body :focus-visible {
  outline: 3px solid #C8102E !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   4. Keep the tray itself out of the guest's adjustments
   --------------------------------------------------------------------------
   The rules above deliberately reach every element in <body>, which includes
   this tray. Doubling the class (0,2,2) out-specifies all of them, so the
   controls stay legible no matter which tools are switched on.
   ========================================================================== */
html body .a11y-ui.a11y-ui,
html body .a11y-ui.a11y-ui * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  cursor: auto !important;
  outline-offset: 2px;
}
/* High contrast forces `color:#FFF` onto every element in <body>, which
   included the tray's own labels — white on a white panel. Inheriting instead
   lets each tray surface below set a real colour that its children pick up. */
html body .a11y-ui.a11y-ui * {
  color: inherit !important;
  background-image: none !important;
}

/* ...and "Highlight links" must not yellow-block the tray's own link. */
html body .a11y-ui.a11y-ui a {
  background: none !important;
  outline: 0 !important;
}

html body .a11y-ui.a11y-ui button,
html body .a11y-ui.a11y-ui a { cursor: pointer !important; }
html body .a11y-ui.a11y-ui.a11y-launch { cursor: pointer !important; }

html body .a11y-ui.a11y-ui.a11y-panel  { background: var(--a11y-paper) !important; color: var(--a11y-ink) !important; }
html body .a11y-ui.a11y-ui .a11y-head  { background: var(--a11y-blue) !important; color: #fff !important; }
html body .a11y-ui.a11y-ui .a11y-head * { color: #fff !important; }
html body .a11y-ui.a11y-ui .a11y-body  { background: var(--a11y-paper) !important; }
html body .a11y-ui.a11y-ui .a11y-btn   { background: #F6F8FA !important; color: var(--a11y-ink) !important; border-color: var(--a11y-line) !important; }
html body .a11y-ui.a11y-ui .a11y-btn[aria-pressed="true"] { background: var(--a11y-blue) !important; color: #fff !important; border-color: var(--a11y-blue) !important; }
html body .a11y-ui.a11y-ui .a11y-btn[aria-pressed="true"] * { color: #fff !important; }
html body .a11y-ui.a11y-ui .a11y-group { color: #5A6B78 !important; }
html body .a11y-ui.a11y-ui .a11y-foot  { background: #F6F8FA !important; }
html body .a11y-ui.a11y-ui .a11y-foot a { color: var(--a11y-blue-dark) !important; text-decoration: underline !important; }
html body .a11y-ui.a11y-ui .a11y-reset { background: #fff !important; color: var(--a11y-ink) !important; }
html body .a11y-ui.a11y-ui .a11y-close { background: rgba(255, 255, 255, .16) !important; }
html body .a11y-ui.a11y-ui .a11y-launch-hint { background: var(--a11y-ink) !important; color: #fff !important; }
html body .a11y-ui.a11y-ui.a11y-guide { background: rgba(27, 106, 165, .32) !important; }
html body .a11y-ui.a11y-ui.a11y-backdrop { background: rgba(12, 22, 32, .45) !important; }

/* The tray is built at a fixed size; the text-size steps must not move it. */
html[class*="a11y-text-"] body .a11y-ui.a11y-ui { font-size: 14px; }

@media print { .a11y-ui { display: none !important; } }