/* ============================================================
   Writing Café Journal — Reading & Accessibility Widget
   /css/a11y.css

   Every setting is a class on <html>, added by the early script in
   header.php and by /js/a11y.js:

     a11y-reading-page        article.php or poem.php (set from the URL)
     a11y-text-1 / -2 / -3    text size steps
     a11y-font-serif          Georgia for reading text
     a11y-font-sans           DM Sans for reading text
     a11y-font-readable       Verdana, site-wide
     a11y-font-dyslexic       OpenDyslexic, site-wide
     a11y-spacing             wider letter, word and line spacing
     a11y-theme-sepia         warm paper theme
     a11y-theme-night         dark theme
     a11y-contrast            high contrast
     a11y-muted               lowered color saturation
     a11y-links               highlight links
     a11y-headings            highlight headings
     a11y-hide-images         hide content images
     a11y-stop-anim           stop animations and transitions
     a11y-guide-on            reading guide bar follows the pointer
     a11y-focus               Focus Mode        (reading pages only)
     a11y-width-narrow/medium line width        (articles only)
     a11y-line-numbers        poem line numbers (poems only)

   The widget itself (#a11y-root) uses its own --a11y-* colors and px
   sizes, so themes and text size never break the panel.
   ============================================================ */


/* ── OpenDyslexic (self-hosted, SIL Open Font License) ───────── */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/opendyslexic/OpenDyslexic-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/opendyslexic/OpenDyslexic-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/opendyslexic/OpenDyslexic-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/opendyslexic/OpenDyslexic-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}


/* ============================================================
   PART 1 — THE WIDGET
   ============================================================ */

#a11y-root {
  --a11y-espresso:   #2e1f0e;
  --a11y-gold:       #c49a3c;
  --a11y-gold-light: #e8c97a;
  --a11y-cream:      #faf7f2;
  --a11y-tile:       #f1e9dc;
  --a11y-tile-hover: #e8dcc8;
  --a11y-ink:        #2a2420;
  --a11y-muted:      #6e6257;
  --a11y-line:       #e0d8cc;
  font-family: 'DM Sans', sans-serif;
}
#a11y-root [hidden] { display: none !important; }
#a11y-root button { font-family: inherit; }

/* ── Launcher button (bottom-left; the seasonal bubble owns bottom-right) ── */
.a11y-launch {
  position: fixed; left: 24px; bottom: 24px; z-index: 8999;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--a11y-espresso); color: var(--a11y-gold-light);
  border: 2px solid var(--a11y-gold);
  box-shadow: 0 6px 22px rgba(26,22,18,.28);
  cursor: pointer; padding: 0;
  transition: transform .15s ease, background .2s ease;
}
.a11y-launch:hover { background: #3d2a14; transform: scale(1.05); }
.a11y-launch:focus-visible { outline: 3px solid var(--a11y-gold-light); outline-offset: 3px; }
.a11y-launch svg { width: 30px; height: 30px; display: block; }

/* ── Panel ── */
.a11y-panel {
  position: fixed; left: 24px; bottom: 92px; z-index: 8999;
  width: 380px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  background: var(--a11y-cream); color: var(--a11y-ink);
  border: 1px solid var(--a11y-line); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(26,22,18,.28), 0 4px 14px rgba(26,22,18,.12);
  overflow: hidden;
  font-size: 14px; line-height: 1.4;
}
.a11y-panel-header {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px 14px;
  background: var(--a11y-espresso);
  border-bottom: 3px solid var(--a11y-gold);
}
.a11y-panel-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px; font-weight: 700; font-style: italic;
  color: var(--a11y-cream); margin: 0; line-height: 1.2;
}
.a11y-close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: var(--a11y-cream);
  border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 0;
}
.a11y-close:hover { background: rgba(255,255,255,.24); }
.a11y-close:focus-visible { outline: 2px solid var(--a11y-gold-light); outline-offset: 2px; }

.a11y-panel-body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 18px 18px;
}

/* ── Sections ── */
.a11y-section { padding-top: 16px; }
.a11y-section + .a11y-section { margin-top: 6px; border-top: 1px solid var(--a11y-line); }
.a11y-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--a11y-muted); margin: 0 0 10px;
}

/* ── Profiles (full-width rows) ── */
.a11y-profiles { display: flex; flex-direction: column; gap: 8px; }
.a11y-profile {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; border-radius: 8px;
  background: var(--a11y-tile); color: var(--a11y-ink);
  border: 1px solid transparent; cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
}
.a11y-profile svg { width: 20px; height: 20px; flex-shrink: 0; }
.a11y-profile:hover { background: var(--a11y-tile-hover); }

/* ── Tiles (two-column grid) ── */
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 78px; padding: 10px 8px; border-radius: 8px;
  background: var(--a11y-tile); color: var(--a11y-ink);
  border: 1px solid transparent; cursor: pointer; text-align: center;
  font-size: 14px; font-weight: 500; line-height: 1.25;
  transition: background .15s ease, border-color .15s ease;
}
.a11y-tile svg { width: 20px; height: 20px; flex-shrink: 0; }
.a11y-tile:hover { background: var(--a11y-tile-hover); }
.a11y-tile-sub { font-size: 11px; font-weight: 400; opacity: .75; }

/* ── Pressed state, shared by profiles and tiles ── */
.a11y-profile[aria-pressed="true"],
.a11y-tile[aria-pressed="true"] {
  background: var(--a11y-espresso); color: var(--a11y-gold-light);
  border-color: var(--a11y-gold);
}
.a11y-profile:focus-visible,
.a11y-tile:focus-visible,
.a11y-seg-btn:focus-visible,
.a11y-reset:focus-visible {
  outline: 2px solid var(--a11y-gold); outline-offset: 2px;
}

/* ── Segmented controls (text size, font, theme, line width) ── */
.a11y-field { margin-bottom: 12px; }
.a11y-field:last-child { margin-bottom: 0; }
.a11y-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--a11y-ink); margin-bottom: 6px; }
.a11y-seg {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px; border-radius: 8px; background: var(--a11y-tile);
}
.a11y-seg-btn {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 10px; border-radius: 6px;
  background: transparent; color: var(--a11y-ink);
  border: none; cursor: pointer;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.a11y-seg-btn:hover { background: var(--a11y-tile-hover); }
.a11y-seg-btn[aria-pressed="true"] { background: var(--a11y-espresso); color: var(--a11y-gold-light); }

/* ── Reset ── */
.a11y-panel-footer {
  flex-shrink: 0;
  padding: 12px 18px; border-top: 1px solid var(--a11y-line);
  background: #fff;
}
.a11y-reset {
  width: 100%; padding: 11px; border-radius: 6px;
  background: transparent; color: var(--a11y-espresso);
  border: 1px solid var(--a11y-espresso); cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.a11y-reset:hover { background: var(--a11y-espresso); color: var(--a11y-gold-light); }

/* ── Read Aloud player (bottom-center) ── */
.a11y-player {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 8999;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 40px;
  background: var(--a11y-espresso); color: var(--a11y-cream);
  border: 2px solid var(--a11y-gold);
  box-shadow: 0 8px 28px rgba(26,22,18,.3);
  font-size: 13px;
}
.a11y-player-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: var(--a11y-gold-light);
  border: none; cursor: pointer; padding: 0;
}
.a11y-player-btn:hover { background: rgba(255,255,255,.22); }
.a11y-player-btn:focus-visible,
.a11y-player-rate:focus-visible { outline: 2px solid var(--a11y-gold-light); outline-offset: 2px; }
.a11y-player-btn svg { width: 18px; height: 18px; display: block; }
.a11y-player-label { padding: 0 6px; font-weight: 600; white-space: nowrap; }
.a11y-player-rate {
  height: 32px; padding: 0 8px; border-radius: 16px;
  background: rgba(255,255,255,.1); color: var(--a11y-cream);
  border: 1px solid rgba(255,255,255,.2);
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.a11y-player-rate option { color: #2a2420; background: #fff; }

/* ── Exit Focus Mode pill (top-right, only while Focus Mode is on) ── */
.a11y-focus-exit {
  display: none;
  position: fixed; top: 16px; right: 16px; z-index: 8999;
  align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 20px;
  background: var(--a11y-espresso); color: var(--a11y-gold-light);
  border: 1px solid var(--a11y-gold); cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 4px 16px rgba(26,22,18,.22);
}
.a11y-focus-exit:focus-visible { outline: 2px solid var(--a11y-gold-light); outline-offset: 2px; }
html.a11y-focus.a11y-reading-page .a11y-focus-exit { display: inline-flex; }

/* ── Reading guide bar ── */
.a11y-guide {
  position: fixed; left: 0; right: 0; top: 0; height: 14px; z-index: 8998;
  background: rgba(232,201,122,.38);
  border-top: 2px solid rgba(196,154,60,.85);
  border-bottom: 2px solid rgba(196,154,60,.85);
  pointer-events: none;
  transform: translateY(-50%);
  display: none;
}
html.a11y-guide-on .a11y-guide { display: block; }

/* ── Widget on phones ── */
@media (max-width: 480px) {
  .a11y-launch { left: 16px; bottom: 16px; width: 52px; height: 52px; }
  .a11y-panel  { left: 12px; right: 12px; bottom: 80px; width: auto; max-height: calc(100vh - 100px); }
  .a11y-player { left: 80px; right: 16px; bottom: 18px; transform: none; justify-content: center; }
  .a11y-player-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-launch, .a11y-profile, .a11y-tile, .a11y-seg-btn { transition: none; }
}


/* ============================================================
   PART 2 — WHAT THE SETTINGS DO TO THE SITE
   ============================================================ */

/* ── Text size (the site is sized in rem, so this scales it evenly) ── */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 137.5%; }


/* ── Fonts ──
   Serif and Sans change the reading text only.
   Readable and Dyslexic change all text on the page. */
html.a11y-font-serif :is(.article-body, .article-body *, .poem-text, .comment-text, .comment-body, .author-bio p, .poem-bio-text, .content p, .content li) {
  font-family: Georgia, 'Times New Roman', serif !important;
}
html.a11y-font-sans :is(.article-body, .article-body *, .poem-text, .comment-text, .comment-body, .author-bio p, .poem-bio-text, .content p, .content li) {
  font-family: 'DM Sans', Arial, sans-serif !important;
}
html.a11y-font-readable body,
html.a11y-font-readable body * {
  font-family: Verdana, Tahoma, 'Segoe UI', Arial, sans-serif !important;
}
html.a11y-font-dyslexic body,
html.a11y-font-dyslexic body * {
  font-family: 'OpenDyslexic', Verdana, Arial, sans-serif !important;
}


/* ── Spacing ── */
html.a11y-spacing #main-content :is(p, li, blockquote, dd, .comment-text, .comment-body, .poem-bio-text) {
  letter-spacing: .06em !important;
  word-spacing: .14em !important;
  line-height: 2 !important;
}
html.a11y-spacing .article-body { line-height: 2.2 !important; }
html.a11y-spacing .poem-text {
  letter-spacing: .05em !important;
  word-spacing: .12em !important;
  line-height: 2.4 !important;
  --a11y-poem-lh: 2.4;
}


/* ── Sepia theme ── */
html.a11y-theme-sepia {
  --cream:      #f4ecd8;
  --warm-white: #f8f1e3;
  --accent-bg:  #ebe0c8;
  --border:     #d8c9a8;
  --ink:        #3b2a1a;
  --muted:      #6b5a45;
}
html.a11y-theme-sepia :is(.article-body, .comment-body, .content p, .content li) { color: #3b2a1a; }


/* ── Night theme ──
   --espresso is left alone on purpose: it is also the background of the
   utility bar, CTAs and buttons, which stay dark. Titles and other
   espresso-colored text are recolored directly below instead. */
html.a11y-theme-night {
  color-scheme: dark;
  --cream:      #17130f;
  --warm-white: #211b15;
  --accent-bg:  #2c241c;
  --border:     #3d3328;
  --ink:        #e8e0d4;
  --muted:      #a99c8b;
}

/* Header, search dropdown and mobile drawer keep the day palette, so the
   dark logo and wordmark stay visible. Footer is already dark. */
html.a11y-theme-night :is(.site-header, #author-search-bar, #mobile-nav) {
  --cream:      #faf7f2;
  --warm-white: #f9f8f6;
  --accent-bg:  #eeeeee;
  --border:     #e0d8cc;
  --ink:        #000000;
  --muted:      #7a6e63;
  color-scheme: light;
}

/* Hard-coded body text colors */
html.a11y-theme-night :is(.article-body, .comment-body, .content p, .content li) { color: #e8e0d4; }

/* Espresso-colored text inside the page */
html.a11y-theme-night #main-content :is(h1, h2, h3, h4, h5, h6, strong),
html.a11y-theme-night :is(
  .article-title, .poem-title, .byline-name, .poem-byline strong,
  .comment-author, .poem-bio-author, .author-bio h4,
  .related-article-card__title, .related-item h4,
  .byline-avatar, .comment-avatar, .poem-avatar, .author-bio-avatar,
  .share-copy, .poem-back:hover, .content strong
) {
  color: #f1e6d2;
}

/* Headings inside the boxes that stay dark keep their cream text */
html.a11y-theme-night :is(.poem-cta h3, .submit-widget h3) { color: #faf7f2; }

/* Category colors brightened so they read on the dark background */
html.a11y-theme-night :is(.article-cat, .related-cat, .related-article-card__cat, .article-body a) {
  color: color-mix(in srgb, var(--cat-color, #c49a3c) 55%, #ffffff);
}

/* Slightly lift the dark boxes off the dark page */
html.a11y-theme-night :is(.poem-cta, .submit-widget) { box-shadow: 0 0 0 1px #4a3c2c; }


/* ── High contrast ── */
html.a11y-contrast {
  --cream:      #ffffff;
  --warm-white: #ffffff;
  --accent-bg:  #f0f0f0;
  --border:     #555555;
  --ink:        #000000;
  --muted:      #1f1f1f;
}
html.a11y-contrast :is(.article-body, .comment-body, .content p, .content li) { color: #000000; }
html.a11y-contrast #main-content a { text-decoration: underline !important; text-underline-offset: 2px; }

/* High contrast + Night = white on black */
html.a11y-contrast.a11y-theme-night {
  --cream:      #000000;
  --warm-white: #0b0b0b;
  --accent-bg:  #1a1a1a;
  --border:     #8a8a8a;
  --ink:        #ffffff;
  --muted:      #e6e6e6;
}
html.a11y-contrast.a11y-theme-night :is(.article-body, .comment-body, .content p, .content li),
html.a11y-contrast.a11y-theme-night #main-content :is(h1, h2, h3, h4, h5, h6, strong),
html.a11y-contrast.a11y-theme-night :is(.article-title, .poem-title, .byline-name, .comment-author, .poem-bio-author, .author-bio h4) {
  color: #ffffff;
}


/* ── Muted colors (lowered saturation) ──
   Applied per region, not on <body>: a filter on <body> would break every
   position:fixed element, including this widget and the seasonal bubble. */
html.a11y-muted :is(.util-bar, .site-header, #main-content, .site-footer) {
  filter: saturate(.45);
}


/* ── Highlight links ── */
html.a11y-links :is(#main-content, .site-header, .util-bar, #mobile-nav, .site-footer) a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 2px solid #c49a3c;
  outline-offset: 2px;
  background-color: rgba(232,201,122,.28);
  border-radius: 2px;
}


/* ── Highlight headings ── */
html.a11y-headings #main-content :is(h1, h2, h3, h4, h5, h6) {
  outline: 2px dashed #c49a3c;
  outline-offset: 6px;
  border-radius: 2px;
}


/* ── Hide images ── */
html.a11y-hide-images #main-content img { display: none !important; }
html.a11y-hide-images :is(.article-hero--image, .hero-credit) { display: none !important; }


/* ── Stop animations ── */
html.a11y-stop-anim { scroll-behavior: auto !important; }
html.a11y-stop-anim *,
html.a11y-stop-anim *::before,
html.a11y-stop-anim *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}


/* ── Focus Mode (reading pages only) ── */
html.a11y-focus.a11y-reading-page :is(
  .util-bar, .site-header, #author-search-bar, #mobile-nav,
  .seasonal-bubble, .site-footer,
  .article-breadcrumb, .share-bar, .article-tags, .author-bio,
  .related-articles, .comments-section, .article-wrap > aside,
  .reaction-wrap, .poem-bio-wrap, .poem-comments-wrap,
  .poem-comment-form-wrap, .poem-cta
) {
  display: none !important;
}
html.a11y-focus.a11y-reading-page .article-wrap {
  grid-template-columns: 1fr;
  max-width: 800px;
  padding-top: 72px;
}
html.a11y-focus.a11y-reading-page .poem-page { padding-top: 72px; }


/* ── Line width (articles only; poems keep their own column) ── */
html.a11y-reading-page.a11y-width-narrow .article-wrap > article { max-width: 600px; width: 100%; margin: 0 auto; }
html.a11y-reading-page.a11y-width-medium .article-wrap > article { max-width: 720px; width: 100%; margin: 0 auto; }


/* ── Poem line numbers ──
   a11y.js wraps each poem line in span.a11y-line (blank stanza breaks get
   .a11y-line-blank and no number). Numbers are CSS-generated, so they are
   not included when a reader copies the poem. */
.poem-text { --a11y-poem-lh: 2.1; }
.poem-text.a11y-lines { white-space: normal; }
.a11y-line { display: block; position: relative; white-space: pre-wrap; }

html.a11y-line-numbers .poem-text.a11y-lines {
  counter-reset: a11y-line;
  padding-left: 76px;
}
html.a11y-line-numbers .a11y-line:not(.a11y-line-blank) { counter-increment: a11y-line; }
html.a11y-line-numbers .a11y-line:not(.a11y-line-blank)::before {
  content: counter(a11y-line);
  position: absolute; right: calc(100% + 18px); top: 0;
  width: 36px; text-align: right;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .72em; font-weight: 600; font-style: normal;
  letter-spacing: 0; word-spacing: 0;
  line-height: calc(var(--a11y-poem-lh) / .72);
  color: var(--muted);
  user-select: none; -webkit-user-select: none;
}
@media (max-width: 768px) {
  html.a11y-line-numbers .poem-text.a11y-lines { padding-left: 52px; }
  html.a11y-line-numbers .a11y-line:not(.a11y-line-blank)::before { right: calc(100% + 10px); width: 30px; }
}


/* ── Read Aloud: the block or poem line being spoken ── */
.a11y-speaking {
  background: rgba(232,201,122,.38);
  box-shadow: 0 0 0 4px rgba(232,201,122,.38);
  border-radius: 3px;
}
html.a11y-theme-night .a11y-speaking {
  background: rgba(196,154,60,.32);
  box-shadow: 0 0 0 4px rgba(196,154,60,.32);
}