/* ============================================================================
   SALON 52 — accessibility layer (skip link, focus states, widget, toggles)
   Loaded on every page alongside styles.css.
   ============================================================================ */

/* -------- skip link -------- */
.skip-link{
  position:absolute;
  right:16px; top:-60px;
  background:var(--ink,#2a2420);
  color:#fff;
  padding:12px 20px;
  border-radius:6px;
  font-family:var(--mono,monospace);
  font-size:14px;
  z-index:10000;
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }

/* -------- visible focus outlines everywhere -------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--accent,#c1592f);
  outline-offset:2px;
}

/* -------- font-size steps -------- */
html.a11y-font-1{ font-size:112.5%; }
html.a11y-font-2{ font-size:125%; }

/* -------- high contrast mode -------- */
html.a11y-contrast body{
  background:#000 !important;
  color:#fff !important;
}
html.a11y-contrast a{ color:#ffe27a !important; }
html.a11y-contrast .btn-primary{
  background:#ffe27a !important; color:#000 !important; border-color:#ffe27a !important;
}
html.a11y-contrast .btn-ghost{
  background:transparent !important; color:#fff !important; border-color:#fff !important;
}
html.a11y-contrast section, html.a11y-contrast footer,
html.a11y-contrast .booking-shell, html.a11y-contrast .menu-card,
html.a11y-contrast input, html.a11y-contrast textarea, html.a11y-contrast select{
  background:#111 !important; color:#fff !important; border-color:#fff !important;
}
html.a11y-contrast .hero-media, html.a11y-contrast body::after,
html.a11y-contrast .hero-media::after{ display:none !important; }
html.a11y-contrast .muted-line, html.a11y-contrast .note, html.a11y-contrast label{
  color:#e6e6e6 !important;
}

/* -------- underline all links -------- */
html.a11y-underline-links a{ text-decoration:underline !important; }

/* -------- pause animations / motion -------- */
html.a11y-pause-anim *{
  animation-play-state:paused !important;
  transition:none !important;
}
html.a11y-pause-anim video{ display:none !important; }

/* -------- widget -------- */
#a11y-widget{
  position:fixed;
  left:16px; bottom:16px;
  z-index:9999;
  font-family:var(--mono,monospace);
}
#a11y-toggle{
  width:52px; height:52px;
  border-radius:50%;
  background:var(--accent,#c1592f);
  color:#fff;
  border:none;
  font-size:24px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
  display:flex; align-items:center; justify-content:center;
}
#a11y-toggle:hover{ background:var(--accent-dark,#9a4523); }

#a11y-panel{
  position:absolute;
  bottom:64px; left:0;
  width:230px;
  background:var(--paper,#fff);
  color:var(--ink,#2a2420);
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,0.25);
  padding:10px;
  display:flex; flex-direction:column; gap:6px;
}
#a11y-panel[hidden]{ display:none; }
.a11y-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:13px; padding:4px 6px 8px;
  border-bottom:1px solid var(--line,rgba(0,0,0,0.1));
  margin-bottom:4px;
}
.a11y-panel-head #a11y-close{
  background:none; border:none; font-size:18px; cursor:pointer; color:inherit; line-height:1;
}
#a11y-panel button, #a11y-panel a{
  display:block; width:100%; text-align:right;
  background:var(--bg,#f8f2e4);
  border:1px solid var(--line,rgba(0,0,0,0.12));
  color:var(--ink,#2a2420);
  padding:9px 12px;
  border-radius:6px;
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
}
#a11y-panel button:hover, #a11y-panel a:hover{ background:var(--bg-alt,#f0e8d6); }
#a11y-panel button[aria-pressed="true"]{
  background:var(--accent,#c1592f); color:#fff; border-color:var(--accent,#c1592f);
}

@media (max-width:640px){
  #a11y-widget{ left:10px; bottom:80px; }
  #a11y-panel{ width:200px; }
}