/* ===========================================================
   We All Need Access — Accessibility-First Styles (site-wide)
   Location: assets/styles/accessibility.css

   Goals:
   - Low glare defaults (dim theme)
   - Strong focus and keyboard support
   - Reflow at high zoom
   - Reduced motion support
   - Forced colors (Windows High Contrast) support
   - Reading guide + mask (optional)
   =========================================================== */

:root{
  --reading-mask-darkness: .55;
  --reading-mask-band: 2.4rem;

  --bg: #0f1418;
  --panel: #141b21;
  --text: #e9eef2;
  --muted: #b7c3cc;
  --border: #2b3842;
  --accent: #7bdcff;
  --accent-2: #ffdf7b;

  --focus: #7bdcff;
  --shadow: 0 8px 22px rgba(0,0,0,.35);

  --radius: 16px;
  --max: 1000px;

  --base-font: 18px;
  --line: 1.6;
  --para-gap: 0.9rem;
  --space-mult: 1;

  --btn-bg: #1b2630;
  --btn-hover: #233241;
  --btn-text: var(--text);

  --link: #7bdcff;
  --visited: #c7a6ff;
  --link-underline: none;

  --focus-ring: 3px solid var(--focus);
  --focus-offset: 3px;

  --reading-guide: 0;
  --reading-mask: 0;

  --font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Themes */
html[data-theme="dim"]{
  --bg: #0f1418;
  --panel: #141b21;
  --text: #e9eef2;
  --muted: #b7c3cc;
  --border: #2b3842;
  --accent: #7bdcff;
  --accent-2: #ffdf7b;
  --btn-bg: #1b2630;
  --btn-hover: #233241;
  --link: #7bdcff;
  --visited: #c7a6ff;
  --focus: #7bdcff;
}
html[data-theme="dark"]{
  --bg: #070a0d;
  --panel: #0e141a;
  --text: #f0f6fb;
  --muted: #c4d0d9;
  --border: #24313a;
  --accent: #77f0ff;
  --accent-2: #ffe08a;
  --btn-bg: #18222b;
  --btn-hover: #223140;
  --link: #77f0ff;
  --visited: #d3b5ff;
  --focus: #77f0ff;
}
html[data-theme="light"]{
  --bg: #f6f7f8;
  --panel: #ffffff;
  --text: #14212b;
  --muted: #334a5a;
  --border: #d7e0e6;
  --accent: #005fcc;
  --accent-2: #7a4b00;
  --btn-bg: #eef3f7;
  --btn-hover: #e2ebf2;
  --link: #005fcc;
  --visited: #6a3dbb;
  --focus: #005fcc;
  --shadow: 0 8px 18px rgba(0,0,0,.10);
}
html[data-theme="hc"]{
  --bg: #000;
  --panel: #000;
  --text: #fff;
  --muted: #fff;
  --border: #fff;
  --accent: #00ffff;
  --accent-2: #ffff00;
  --btn-bg: #000;
  --btn-hover: #111;
  --link: #00ffff;
  --visited: #ff00ff;
  --focus: #ffff00;
  --shadow: none;
  --link-underline: underline;
}

/* Font variants (no external downloads) */
html[data-font="system"]{ --font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
html[data-font="dyslexic"]{ --font-family: ui-rounded, "Trebuchet MS", Verdana, Arial, sans-serif; }
html[data-font="mono"]{ --font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Spacing (cognitive/reading support) */
html[data-spacing="relaxed"]{
  --line: 1.85;
  --para-gap: 1.1rem;
  --space-mult: 1.15;
}

/* Link underline toggle */
html[data-links="underline"]{ --link-underline: underline; }

/* Focus strength toggle */
html[data-focus="strong"]{
  --focus-ring: 4px solid var(--focus);
  --focus-offset: 4px;
}

*{ box-sizing: border-box; }
body{
  margin:0;
  font-family: var(--font-family);
  font-size: var(--base-font);
  line-height: var(--line);
  background: var(--bg);
  color: var(--text);
  letter-spacing: calc(0.01em * var(--space-mult));
}

a{
  color: var(--link);
  text-decoration: var(--link-underline);
  text-underline-offset: 0.18em;
}
a:visited{ color: var(--visited); }
a:hover{ text-decoration: underline; }

/* Skip link */
.skip-link{
  position:absolute;
  top:0; left:0;
  transform: translateY(-120%);
  background: var(--panel);
  color: var(--text);
  padding: .7rem 1rem;
  border: 2px solid var(--border);
  border-radius: 0px;
  z-index: 9999;
}
.skip-link:focus{
  transform: translateY(.5rem);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Focus */
:focus-visible{
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 0px;
}

/* Layout */
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem 1rem;
}

header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap: .75rem;
  min-width: 260px;
}
.logo{
  width: 36px; height: 36px;
  border-radius: 0px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow);
  flex: 0 0 auto;
}
.brand h1{ font-size: 1.05rem; margin:0; }
.brand p{ margin:0; color: var(--muted); font-size: .95rem; }

nav[aria-label="Primary"]{
  display:flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.navlink{
  display:inline-flex;
  align-items:center;
  padding: .45rem .7rem;
  border-radius: 0px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-decoration: none;
}
.navlink:hover{ background: color-mix(in srgb, var(--panel) 70%, transparent); }

.hero{ padding: 1.25rem 0 1rem; }
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0px;
  box-shadow: var(--shadow);
}
.hero-card{ padding: 1.2rem; }
.hero h2{
  margin: 0 0 .35rem;
  font-size: 1.55rem;
  line-height: 1.25;
}
.hero p{ margin: 0 0 1rem; color: var(--muted); }

.pillrow{ display:flex; flex-wrap: wrap; gap: .5rem; }
.pill{
  display:inline-flex;
  gap: .4rem;
  align-items:center;
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: .35rem .6rem;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  font-size: .95rem;
}

section{ padding: 0 0 1rem; }
.section-card{ padding: 1rem; }
.section-card h3{ margin: 0 0 .5rem; font-size: 1.2rem; }
.muted{ color: var(--muted); margin-top: .4rem; }
.stack > * + *{ margin-top: var(--para-gap); }

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

details{
  border: 1px solid var(--border);
  border-radius: 0px;
  overflow: clip;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
}
summary{
  padding: .85rem .9rem;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
summary::-webkit-details-marker{ display:none; }
details[open] summary{ border-bottom: 1px solid var(--border); }
.details-body{ padding: .85rem .9rem 1rem; color: var(--muted); }

.kbd{
  display:inline-block;
  padding: .1rem .35rem;
  border-radius: 0px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em;
  color: var(--text);
}

/* Toolbar */
.toolbar{
  display:flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 0px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.toolbar-group{
  display:flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  padding-right: .2rem;
}
.toolbar label{
  font-size: .95rem;
  color: var(--muted);
  font-weight: 700;
}
select, input[type="range"]{ font: inherit; }
select{
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: .5rem .6rem;
}
.range{
  display:flex;
  align-items:center;
  gap:.5rem;
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: .35rem .55rem;
  background: color-mix(in srgb, var(--bg) 65%, transparent);
}
.range-label{ margin-right:.2rem; }
.range output{
  min-width: 3ch;
  text-align:right;
  color: var(--muted);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.btn{
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: .55rem .7rem;
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor:pointer;
  font: inherit;
}
.btn:hover{ background: var(--btn-hover); }
.btn[aria-pressed="true"]{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) inset;
}

/* Screen reader-only */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border:0;
}

footer{ color: var(--muted); padding: 1rem 0 2rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; animation: none !important; }
}

/* Forced colors / High Contrast Mode in Windows */
@media (forced-colors: active){
  :focus-visible{ outline: 2px solid Highlight; }
  .card, details, .navlink, .btn, select, .range, .toolbar{
    forced-color-adjust: auto;
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
  a{ color: LinkText; }
}

/* Accessibility options modal (site-wide) */
.navbtn{
  padding: .55rem .8rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 600;

  cursor: pointer;
}
.accessibility-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 10000;
}
.accessibility-modal{
  max-width: 1100px;
  margin: 0 auto;

  position: fixed;
  inset: 8% 8%;
  background: var(--panel);
  border: 1px solid var(--border);
  z-index: 10001;
  overflow: auto;
  padding: 1rem;
}
.accessibility-modal .modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .75rem;
  margin-bottom: .75rem;
}
.accessibility-modal .modal-close{
  padding: .55rem .8rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 600;
}

.navbtn:hover{ background: rgba(255,255,255,.06); }

/* ===== Reading guide + Reading mask (clean) ===== */
.reading-guide{
  position: fixed;
  left: 0;
  right: 0;
  height: 3px;
  top: 50%;
  z-index: 9999;
  background: var(--accent);
  opacity: var(--reading-guide);
  pointer-events: none;
}

.reading-mask{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--chrome-top);
  bottom: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: var(--reading-mask);
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,var(--reading-mask-darkness)) 0%,
      rgba(0,0,0,var(--reading-mask-darkness)) calc(var(--a11y-track-y) - var(--reading-mask-band)),
      rgba(0,0,0,0) calc(var(--a11y-track-y) - var(--reading-mask-band)),
      rgba(0,0,0,0) calc(var(--a11y-track-y) + var(--reading-mask-band)),
      rgba(0,0,0,var(--reading-mask-darkness)) calc(var(--a11y-track-y) + var(--reading-mask-band)),
      rgba(0,0,0,var(--reading-mask-darkness)) 100%);
}

/* ===== Reduced motion ===== */
html[data-motion="reduce"] *{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* ===== Focus mode (dims below current reading point) ===== */
.focus-mask{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--chrome-top);
  bottom: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: var(--focus-dim);
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) calc(var(--a11y-track-y) - var(--chrome-top)),
      rgba(0,0,0,0.75) calc(var(--a11y-track-y) - var(--chrome-top)),
      rgba(0,0,0,0.75) 100%);
}