/* ==========================================================================
   Storage Station — a11y.css
   Accessibility menu (components/A11y.astro + js/a11y.js): the floating
   button bottom-right (mirrors the WhatsApp button bottom-left), the panel,
   and the html.a11y-* modes the panel switches on.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Floating button
   -------------------------------------------------------------------------- */
.a11y-toggle {
  position: fixed;
  right: 13px;
  bottom: 32px;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;                         /* same box as .whatsapp-float on the other side */
  height: 74px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(6, 74, 136, 0.3);
  transition: transform var(--transition);
}
.a11y-toggle:hover { transform: scale(1.05); }
.a11y-toggle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.a11y-toggle:focus-visible {
  outline: 3px solid var(--color-blue-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-white);
}

/* --------------------------------------------------------------------------
   2. Panel
   -------------------------------------------------------------------------- */
.a11y-panel {
  position: fixed;
  right: 13px;
  bottom: 118px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 134px);
  max-height: calc(100dvh - 134px);
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-text);
  text-align: right;
  direction: rtl;
  background: var(--color-white);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(6, 74, 136, 0.25);
}
.a11y-panel[hidden] { display: none; }

.a11y-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.a11y-panel__title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-blue-dark);
}
.a11y-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -6px -6px 0;
  border-radius: var(--radius-md);
  color: var(--color-blue-dark);
}
.a11y-panel__close:hover { background: var(--color-bg-tint); }
.a11y-panel__close svg { width: 20px; height: 20px; }

.a11y-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.a11y-panel__level {
  grid-column: 1 / -1;
  margin-top: -2px;
  font-size: 15px;
  text-align: center;
  color: var(--color-gray);
}

.a11y-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: right;
  color: var(--color-blue-dark);
  background: var(--color-bg);
  border: 2px solid var(--color-bg-tint);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background-color var(--transition);
}
.a11y-opt:hover { border-color: var(--color-main); }
.a11y-opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.a11y-opt[aria-disabled="true"]:hover { border-color: var(--color-bg-tint); }

.a11y-opt__sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-white);
  background: var(--color-main);
  border-radius: 50%;
}

.a11y-opt--toggle::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-main);
  border-radius: 6px;
  background: var(--color-white) center / 14px no-repeat;
}
.a11y-opt--toggle[aria-pressed="true"] {
  background: var(--color-bg-tint);
  border-color: var(--color-blue-dark);
}
.a11y-opt--toggle[aria-pressed="true"]::before {
  border-color: var(--color-blue-dark);
  background-color: var(--color-blue-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 3.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.a11y-panel__reset {
  min-height: 48px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--color-white);
  background: var(--color-blue-dark);
  border: 2px solid var(--color-blue-dark);
  border-radius: var(--radius-md);
}
.a11y-panel__reset:hover { background: #053D70; }

.a11y-panel__link {
  align-self: center;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--color-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.a11y-panel__link:hover { color: var(--color-main); }

.a11y-panel :focus-visible {
  outline: 3px solid var(--color-main);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .a11y-toggle { width: 64px; height: 56px; right: 12px; bottom: 20px; }
  .a11y-panel {
    right: 16px;
    bottom: 88px;
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
    padding: 16px;
  }
  .a11y-opt { min-height: 52px; padding: 8px 10px; gap: 8px; font-size: 15px; }
}

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

/* --------------------------------------------------------------------------
   3. Modes (classes on <html>, set by js/a11y.js)
   Text size (a11y-text-115 / a11y-text-130) is applied by the script itself:
   the site's sizes are in px, so the script multiplies each element's font
   size and line height; the classes only mark the state.
   -------------------------------------------------------------------------- */

/* High contrast: black background, white text, yellow links */
html.a11y-contrast body,
html.a11y-contrast body * {
  background-color: #000 !important;
  background-image: none !important;
  color: #FFF !important;
  border-color: #FFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.a11y-contrast body img,
html.a11y-contrast body svg,
html.a11y-contrast body video,
html.a11y-contrast body picture,
html.a11y-contrast body canvas { background-color: transparent !important; }
html.a11y-contrast body a img[src*=".svg"],
html.a11y-contrast body button img[src*=".svg"] { filter: brightness(0) invert(1); }
html.a11y-contrast body img[src*="/logo"][src*=".svg"] {
  filter: none;
  background-color: #FFF !important;
  outline: 6px solid #FFF;
  border-radius: 4px;
}
html.a11y-contrast body .btn__icon { background-color: currentColor !important; }
html.a11y-contrast body a,
html.a11y-contrast body a * { color: #FF0 !important; }
html.a11y-contrast body .btn,
html.a11y-contrast body button { box-shadow: inset 0 0 0 2px currentColor !important; }
html.a11y-contrast body ::placeholder { color: #CCC !important; }
html.a11y-contrast .a11y button { box-shadow: none !important; }
html.a11y-contrast .a11y-toggle { background-color: transparent !important; }
html.a11y-contrast body .a11y-toggle img[src] { filter: none; }
html.a11y-contrast .a11y-panel { border: 2px solid #FFF; }
html.a11y-contrast .a11y-opt--toggle[aria-pressed="true"] {
  color: #000 !important;
  background-color: #FF0 !important;
  border-color: #FF0 !important;
}
html.a11y-contrast :focus-visible { outline-color: #FF0 !important; }

/* Grayscale (a filter on the root element keeps position: fixed working) */
html.a11y-grayscale { filter: grayscale(1); }

/* Underline links and frame them with a yellow band and a black ring (readable on light and dark) */
html.a11y-links body a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  box-shadow: 0 0 0 3px #FFD400 !important;
  outline: 2px solid #000 !important;
  outline-offset: 3px !important;
}
html.a11y-links body a:focus-visible { outline: 3px solid var(--color-main) !important; outline-offset: 5px !important; }
html.a11y-contrast.a11y-links body a { outline-color: #FFF !important; }

/* Readable font: system sans with open letter spacing */
html.a11y-font body,
html.a11y-font body * {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.08em !important;
}

/* Larger or wider text must not be cut off or covered. Found by scanning every
   page at 390 / 1440px with text at 115% / 130% and with the readable font:
   - long words (#MoveStorageStation) and nowrap buttons ran past their box;
   - home hero (desktop): height pinned by aspect-ratio + overflow: hidden, the
     buttons were clipped; the box now follows its content;
   - home hero (mobile): the sloth covers the headline; it fades instead of
     hiding, so its alt text stays available;
   - calculator (mobile): the nowrap title and room tabs ran into each other. */
html.a11y-text-115 body,
html.a11y-text-130 body { overflow-wrap: break-word; }
html.a11y-text-115 .btn,
html.a11y-text-130 .btn,
html.a11y-font .btn { white-space: normal; }
@media (min-width: 769px) {
  html.a11y-text-115 .hero__box,
  html.a11y-text-130 .hero__box,
  html.a11y-font .hero__box { aspect-ratio: auto; padding-bottom: clamp(24px, 3vw, 56px); }
}
@media (max-width: 768px) {
  html.a11y-text-115 .hero__sloth,
  html.a11y-text-130 .hero__sloth,
  html.a11y-font .hero__sloth { opacity: 0.2; }
  html.a11y-text-115 .calc-title__lg,
  html.a11y-text-130 .calc-title__lg { white-space: normal; }
  html.a11y-text-115 .room-tabs,
  html.a11y-text-130 .room-tabs { flex-wrap: wrap; }
  html.a11y-text-115 .room-tab,
  html.a11y-text-130 .room-tab { flex: 1 1 auto; padding-inline: 10px; white-space: normal; }
}

/* Stop animations and transitions (videos are paused by the script) */
html.a11y-still { scroll-behavior: auto !important; }
html.a11y-still *,
html.a11y-still *::before,
html.a11y-still *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Big cursor: black arrow everywhere, yellow arrow on links and controls */
html.a11y-cursor,
html.a11y-cursor * {
  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='M6 3v37l9.5-9 6.5 14.5 7-3.2-6.5-14.3H36z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-cursor a,
html.a11y-cursor a *,
html.a11y-cursor button,
html.a11y-cursor button *,
html.a11y-cursor label,
html.a11y-cursor summary,
html.a11y-cursor select {
  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='M6 3v37l9.5-9 6.5 14.5 7-3.2-6.5-14.3H36z' fill='%23FFD400' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, pointer !important;
}