/* Curated Masters — Accessibility Toggles (HC + TextSize) */

/* HIGH CONTRAST BUTTON */
/*
 * The three a11y toggles (theme, contrast, text-size) sit pinned to
 * the top-right of the viewport, just below the fixed nav bar. They
 * used to anchor bottom-right but on mobile that occluded the sticky
 * cm-action-bar pricing and the verify-gate Continue button (the
 * verify page used to pull them to bottom-centre). Top-right keeps
 * them clear of the action bar, the demo banner, and any sticky
 * footer content.
 */
#cm-contrast {
  position: fixed; right: 76px; top: calc(72px + var(--sat));
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #141414; color: #FFFFFF; border: 1px solid #2A2A2A;
  cursor: pointer; z-index: 2147483647;
  transition: transform .15s ease, border-color .15s ease, background-color .3s ease, color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
body.light-mode #cm-contrast { background:#FFFFFF; color:#0A0A0A; border-color:#E8DFCF; }
#cm-contrast:hover { border-color: var(--gold); transform: translateY(-1px); }
#cm-contrast:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#cm-contrast svg { width: 22px; height: 22px; display: block; }
#cm-contrast-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html.high-contrast #cm-contrast,
body.high-contrast #cm-contrast {
  background:#FFD700 !important; color:#000000 !important;
  border-color:#000000 !important; border-width:2px !important;
}

/* TEXT SIZE BUTTON */
#cm-textsize {
  position: fixed; right: 128px; top: calc(72px + var(--sat));
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background:#141414; color:#FFFFFF; border:1px solid #2A2A2A;
  cursor: pointer; z-index: 2147483647;
  transition: transform .15s ease, border-color .15s ease, background-color .3s ease, color .3s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Palatino Linotype', Georgia, serif;
  font-weight: 700; font-size: 16px; letter-spacing: .05em;
}
body.light-mode #cm-textsize { background:#FFFFFF; color:#0A0A0A; border-color:#E8DFCF; }
#cm-textsize:hover { border-color: var(--gold); transform: translateY(-1px); }
#cm-textsize:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#cm-textsize-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#cm-textsize .cm-ts-badge {
  position:absolute; bottom:-3px; right:-3px;
  background:var(--gold); color:#000;
  font-size:9px; font-weight:700;
  padding:1px 5px; border-radius:8px;
  letter-spacing:0; line-height:1.2;
}
html.text-large #cm-textsize, html.text-xl #cm-textsize,
body.text-large #cm-textsize, body.text-xl #cm-textsize {
  border-color: var(--gold) !important; border-width: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  #cm-contrast, #cm-contrast:hover, #cm-textsize, #cm-textsize:hover { transition: none !important; transform: none !important; }
}

/* HIGH CONTRAST — DARK BASE */
html.high-contrast {
  --bg:#000000; --surface:#000000; --card:#0A0A0A;
  --border:#FFFFFF; --muted:#FFFFFF; --text-dim:#E0E0E0;
  --text:#FFFFFF; --text-bright:#FFFFFF;
  --gold:#FFD700; --gold-light:#FFEC80;
  --green:#00E676; --red:#FF6B6B;
}
/* HIGH CONTRAST — LIGHT BASE */
html.high-contrast.light-mode {
  --bg:#FFFFFF; --surface:#FFFFFF; --card:#FFFFFF;
  --border:#000000; --muted:#000000; --text-dim:#1A1A1A;
  --text:#000000; --text-bright:#000000;
  --gold:#5A4400; --gold-light:#3D2E00;
  --green:#00591F; --red:#8B0000;
}

body.high-contrast { background: var(--bg) !important; color: var(--text-bright) !important; }
body.high-contrast input, body.high-contrast textarea, body.high-contrast select,
body.high-contrast .btn,
body.high-contrast button:not(#cm-theme):not(#cm-contrast):not(#cm-textsize) {
  border-width: 2px !important; border-style: solid !important; border-color: var(--border) !important;
}
body.high-contrast :focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 3px !important; }

body.high-contrast .charity-banner, body.high-contrast .alert,
body.high-contrast .alert-error, body.high-contrast .alert-success, body.high-contrast .alert-info,
body.high-contrast .badge-available, body.high-contrast .badge-unavailable,
body.high-contrast .cal-day.in-range, body.high-contrast .filter-tab,
body.high-contrast .pwa-install-btn { background-color: var(--surface) !important; }

body.high-contrast .alert-error { color: var(--red) !important; border-color: var(--red) !important; }
body.high-contrast .alert-success { color: var(--green) !important; border-color: var(--green) !important; }
body.high-contrast .alert-info { color: var(--gold) !important; border-color: var(--gold) !important; }

body.high-contrast, body.high-contrast p, body.high-contrast li, body.high-contrast td,
body.high-contrast .nav-links a, body.high-contrast .tag, body.high-contrast .meta,
body.high-contrast input, body.high-contrast textarea, body.high-contrast select { color: var(--text-bright) !important; }
body.high-contrast h1, body.high-contrast h2, body.high-contrast h3, body.high-contrast h4 {
  color: var(--text-bright) !important; font-weight: 700 !important;
}
body.high-contrast a { color: var(--gold) !important; text-decoration: underline !important; }

body.high-contrast .art-overlay { background: var(--surface) !important; border: 2px solid var(--border) !important; }
body.high-contrast .art-overlay h3, body.high-contrast .art-overlay .price, body.high-contrast .art-overlay .meta {
  color: var(--text-bright) !important;
}

body.high-contrast .btn, body.high-contrast .btn-filled {
  background: var(--gold) !important; color: var(--bg) !important; border: 2px solid var(--border) !important;
}
body.high-contrast .btn:hover, body.high-contrast .btn-filled:hover { background: var(--gold-light) !important; }

body.high-contrast #nav { background: var(--bg) !important; border-bottom: 2px solid var(--border) !important; }
body.high-contrast .nav-logo { color: var(--text-bright) !important; }
body.high-contrast .nav-logo span { color: var(--gold) !important; }

body.high-contrast .cal-day.start, body.high-contrast .cal-day.end { background: var(--gold) !important; color: var(--bg) !important; }
body.high-contrast .cal-day.in-range { background: var(--gold-light) !important; color: var(--bg) !important; }
body.high-contrast .cal-day.available:hover { background: var(--gold) !important; color: var(--bg) !important; }

/* TEXT SIZE — 100% / 115% / 130% */
html.text-large { font-size: 18.4px; }
html.text-xl    { font-size: 20.8px; }
body.text-large { font-size: 17px; }
body.text-xl    { font-size: 19px; }
body.text-large h1, body.text-xl h1, body.text-large h2, body.text-xl h2,
body.text-large h3, body.text-xl h3 { line-height: 1.25 !important; }
body.text-large p, body.text-large li, body.text-large td { font-size: 1.06em; line-height: 1.7 !important; }
body.text-xl p,    body.text-xl li,    body.text-xl td    { font-size: 1.18em; line-height: 1.75 !important; }
body.text-large .btn, body.text-xl .btn,
body.text-large input, body.text-xl input,
body.text-large textarea, body.text-xl textarea {
  font-size: 15px !important; padding-top: 14px !important; padding-bottom: 14px !important;
}
body.text-xl .btn, body.text-xl input, body.text-xl textarea { font-size: 16px !important; }
body.text-large button, body.text-xl button, body.text-large a, body.text-xl a { min-height: 44px; }