/* ============================================================
   Phở Ao Sen — Accessibility Tools Widget
   WCAG 2.1 / 2.2 AA helper styles
   ============================================================ */

.skip-link{
  position:absolute;left:16px;top:-80px;z-index:10000;
  background:var(--green,#7C9137);color:#fff;
  padding:10px 16px;border-radius:6px;
  font-family:var(--body,"Montserrat",sans-serif);
  font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.skip-link:focus{top:16px;outline:3px solid var(--tan,#E1C099);outline-offset:3px}

.a11y-widget-root{
  position:fixed;
  bottom:20px;
  left:16px;
  z-index:9999;
  font-family:Arial,Verdana,sans-serif;
  pointer-events:none;
  font-size:16px !important;
  width:min(320px, calc(100% - 32px));
  max-width:calc(100% - 32px);
}

.a11y-widget-trigger{
  pointer-events:auto;
  width:52px;
  height:52px;
  border-radius:8px;
  background:#1a1a1a;
  color:#fff;
  border:2px solid #fff;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s,transform .2s;
  position:relative;
  z-index:3;
}

.a11y-widget-trigger:hover,
.a11y-widget-trigger:focus-visible{
  background:#7C9137;
  outline:3px solid #E1C099;
  outline-offset:2px;
}

.a11y-widget-trigger .fa-wheelchair{
  font-size:24px;
  line-height:1;
}

.a11y-widget-panel{
  pointer-events:auto;
  display:none;
  position:absolute;
  bottom:calc(100% + 12px);
  left:0;
  width:100%;
  max-width:100%;
  max-height:min(70vh,520px);
  overflow-y:auto;
  background:#fff;
  border:1px solid #e4d9c8;
  border-radius:10px;
  box-shadow:0 12px 40px rgba(74,51,36,.18);
  padding:0;
  z-index:3;
}

.a11y-widget-panel.is-open{display:block}

.a11y-widget-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 16px 12px;
  border-bottom:1px solid #efe6d6;
  position:sticky;
  top:0;
  background:#fff;
  z-index:1;
}

.a11y-widget-title{
  font-size:17px;
  font-weight:700;
  color:#4A3324;
  margin:0;
}

.a11y-widget-close{
  background:none;
  border:none;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  color:#8A7563;
  width:32px;
  height:32px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.a11y-widget-close:hover,
.a11y-widget-close:focus-visible{
  background:#F6E9D5;
  outline:2px solid #E1C099;
}

.a11y-widget-list{
  list-style:none;
  margin:0;
  padding:8px 0;
}

.a11y-widget-item{margin:0}

.a11y-widget-action{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 16px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color:#4A3324;
  text-align:left;
  transition:background .15s;
}

.a11y-widget-action:hover,
.a11y-widget-action:focus-visible{
  background:#F6E9D5;
  outline:none;
  box-shadow:inset 3px 0 0 #7C9137;
}

.a11y-widget-action[aria-pressed="true"]{
  background:#EFF2E3;
  font-weight:600;
}

.a11y-widget-action svg{
  width:22px;
  height:22px;
  flex-shrink:0;
  fill:#4A3324;
}

.a11y-widget-action--reset{
  color:#5D6E26;
  border-top:1px solid #efe6d6;
  margin-top:4px;
}

.a11y-widget-status{
  padding:8px 16px 12px;
  font-size:12px;
  color:#8A7563;
  border-top:1px solid #efe6d6;
}

.a11y-widget-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:1;
  background:transparent;
  pointer-events:none;
}

.a11y-widget-overlay.is-visible{display:block}

.a11y-reading-guide{
  display:none;
  position:fixed;
  left:0;
  width:100%;
  height:4px;
  background:#7C9137;
  box-shadow:0 0 0 1px #4A3324,0 2px 8px rgba(124,145,55,.5);
  z-index:9997;
  pointer-events:none;
  transform:translateY(-50%);
}

.a11y-reading-guide.is-active{display:block}

html.a11y-readable-font,
html.a11y-readable-font body,
html.a11y-readable-font .display,
html.a11y-readable-font .hero h1,
html.a11y-readable-font .dish .en{
  font-family:Arial,Verdana,"Atkinson Hyperlegible",sans-serif !important;
}

html.a11y-underline-links a{
  text-decoration:underline !important;
  text-underline-offset:3px;
}

html.a11y-highlight-links a{
  background-color:#F6E9D5 !important;
  color:#4A3324 !important;
  padding:0 2px;
  border-radius:2px;
  box-decoration-break:clone;
}

html.a11y-highlight-headings h1,
html.a11y-highlight-headings h2,
html.a11y-highlight-headings h3,
html.a11y-highlight-headings h4,
html.a11y-highlight-headings h5,
html.a11y-highlight-headings h6{
  background-color:#fffbe8 !important;
  color:#4A3324 !important;
  padding:.15em .35em;
  border-left:4px solid #7C9137;
  border-radius:2px;
}

html.a11y-stop-animations *,
html.a11y-stop-animations *::before,
html.a11y-stop-animations *::after{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
  scroll-behavior:auto !important;
}

html.a11y-high-contrast body,
html.a11y-high-contrast .topbar,
html.a11y-high-contrast header#nav,
html.a11y-high-contrast .hero,
html.a11y-high-contrast .marquee,
html.a11y-high-contrast .sect,
html.a11y-high-contrast .bowl,
html.a11y-high-contrast .services,
html.a11y-high-contrast .visit,
html.a11y-high-contrast .page-hero,
html.a11y-high-contrast .catnav,
html.a11y-high-contrast .mcat,
html.a11y-high-contrast .menu-cta,
html.a11y-high-contrast .dish,
html.a11y-high-contrast .card,
html.a11y-high-contrast .svc,
html.a11y-high-contrast .note-box,
html.a11y-high-contrast footer,
html.a11y-high-contrast #drawer,
html.a11y-high-contrast #mobar{
  background:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
}

html.a11y-high-contrast h1,
html.a11y-high-contrast h2,
html.a11y-high-contrast h3,
html.a11y-high-contrast .display,
html.a11y-high-contrast .vnname{
  color:#fff !important;
}

html.a11y-high-contrast p,
html.a11y-high-contrast .lede,
html.a11y-high-contrast .dish p{
  color:#e0e0e0 !important;
}

html.a11y-high-contrast a{
  color:#ffff00 !important;
  text-decoration:underline !important;
}

html.a11y-high-contrast .btn{
  background:#ffff00 !important;
  color:#000 !important;
  border:2px solid #fff !important;
}

html.a11y-high-contrast .btn.ghost{
  background:#000 !important;
  color:#ffff00 !important;
  border-color:#ffff00 !important;
}

html.a11y-dark-mode body{
  background:#241910 !important;
  color:#FBF8F1 !important;
}

html.a11y-dark-mode .topbar{background:#3a281c !important}
html.a11y-dark-mode header#nav,
html.a11y-dark-mode .catnav{
  background:rgba(36,25,16,.96) !important;
}

html.a11y-dark-mode .hero,
html.a11y-dark-mode .sect,
html.a11y-dark-mode .page-hero,
html.a11y-dark-mode .menu-cta{
  background:#241910 !important;
}

html.a11y-dark-mode .bowl,
html.a11y-dark-mode .services,
html.a11y-dark-mode .visit{
  background:#1a120c !important;
}

html.a11y-dark-mode .dish,
html.a11y-dark-mode .note-box,
html.a11y-dark-mode .status,
html.a11y-dark-mode .hours li{
  background:#2d2215 !important;
  border-color:#5a4a38 !important;
  color:#FBF8F1 !important;
}

html.a11y-dark-mode h1,
html.a11y-dark-mode h2,
html.a11y-dark-mode h3,
html.a11y-dark-mode .display{
  color:#fff !important;
}

html.a11y-dark-mode p,
html.a11y-dark-mode .lede,
html.a11y-dark-mode .dish p{
  color:#c8bfb5 !important;
}

html.a11y-dark-mode .room{background:#2A2118 !important}
html.a11y-dark-mode .room-label,
html.a11y-dark-mode .room-title span{color:#6f8430 !important}

html.a11y-enhanced-focus :focus-visible{
  outline:3px solid #E1C099 !important;
  outline-offset:3px !important;
}

@media (max-width:760px){
  .a11y-widget-root{
    bottom:82px;
    left:16px;
  }
}

@media (max-width:480px){
  .a11y-widget-root{
    bottom:82px;
    left:16px;
  }

  .a11y-widget-trigger{
    width:48px;
    height:48px;
  }

  .a11y-widget-panel{
    width:100%;
    max-height:65vh;
  }
}

@media (prefers-reduced-motion:reduce){
  .a11y-widget-trigger,
  .a11y-widget-action{
    transition:none;
  }
}