/* readable.css — accessibility + legibility layer that sits on top of each
   page's inline styles. Uses !important where the page's inline styles
   would otherwise win on document-order specificity. Loaded AFTER the
   page-specific styles so overrides stick.

   Principles:
   - Body copy uses Atkinson Hyperlegible (a font designed by the Braille
     Institute specifically for low-vision, cognitive-load, and new-reader
     legibility). Falls back to DM Sans and system sans.
   - Display serif (Fraunces) is preserved — it's warm and still very
     readable at the sizes we use it.
   - All interactive targets are >= 48px (WCAG AAA for motor disability).
   - Focus is loud and impossible to miss for keyboard users.
   - Link underlines are always on.
   - Letter/word spacing loosened slightly for easier chunking.
*/

/* ---------- Base typography ---------- */
:root {
  --read-ink: #201414;
  --read-ink-soft: #3D2D26;
  --read-accent: #9E4428;
  --read-focus: #D4A34B;
}

body {
  font-family: 'Atkinson Hyperlegible', 'DM Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.005em;
  word-spacing: 0.03em;
}

/* Keep the display serif where pages set it explicitly — don't clobber
   everything, just tighten the fallback. */
h1, h2, h3, h4, h5, h6,
.serif, .display-serif {
  letter-spacing: -0.015em;
}

/* Slightly lighter line-height for big display headings (they looked
   too airy at 1.6). */
h1 { line-height: 1.08; }
h2 { line-height: 1.12; }
h3 { line-height: 1.2; }

/* Comfortable reading width on prose paragraphs. */
p {
  max-width: 64ch;
}
p.wide { max-width: none; }

/* ---------- Prose sizing overrides ---------- */
body.community-home,
body.event-detail,
body.subscribe-page,
body.pay-page {
  font-size: 1.15rem !important;
  line-height: 1.65 !important;
}
@media (max-width: 575px) {
  body.community-home,
  body.event-detail,
  body.subscribe-page,
  body.pay-page {
    font-size: 1.1rem !important;
  }
}

/* ---------- Minimum touch targets ---------- */
button,
a.btn, .btn,
.event-cta, .join-cta, .dir-btn,
.pay-tile, .pay-option,
input[type="submit"], input[type="button"] {
  min-height: 48px;
}
.qty-minus, .qty-plus {
  min-width: 48px;
}

/* ---------- Focus ring (loud and always visible) ---------- */
:focus-visible {
  outline: 3px solid var(--read-focus) !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.pay-tile:focus-visible,
.pay-option:focus-visible {
  box-shadow: 0 0 0 4px rgba(212, 163, 75, 0.35) !important;
}

/* ---------- Links always underlined inside content ---------- */
main a:not(.btn):not(.event-cta):not(.join-cta):not(.dir-btn):not(.pay-option):not(.pay-tile):not(.navbar-brand) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* ---------- Input fields: bigger, clearer ---------- */
input.form-control,
textarea.form-control,
select.form-select {
  font-size: 1.1rem !important;
  padding: 0.85rem 1rem !important;
  min-height: 52px;
}

/* ---------- Number input: hide browser spinner (we have +/- buttons) ---------- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* ---------- Alerts / notices: louder, clearer ---------- */
.alert {
  font-size: 1.08rem !important;
  line-height: 1.55 !important;
  padding: 1rem 1.25rem !important;
}
.alert strong { font-weight: 700; }

/* ---------- Buttons: clearer pressed state for low-coordination users ---------- */
button:active, .btn:active,
.event-cta:active, .join-cta:active, .dir-btn:active {
  filter: brightness(0.92);
}

/* Disabled buttons look obviously disabled. */
button:disabled, .btn:disabled, [disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* ---------- Selection color ---------- */
::selection {
  background: var(--read-focus);
  color: var(--read-ink);
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Skip-to-content affordance (appears on keyboard focus) ---------- */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-to-content:focus {
  position: fixed;
  top: 8px; left: 8px;
  width: auto; height: auto;
  padding: 0.75rem 1.25rem;
  background: var(--read-ink);
  color: #FBF7EE !important;
  z-index: 1080;
  text-decoration: none !important;
  border-radius: 4px;
  font-weight: 700;
}

/* ---------- Navbar tuning ---------- */
.navbar-brand {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
}
.navbar .btn-sm {
  font-size: 1rem !important;
  padding: 0.55rem 1rem !important;
  min-height: 42px;
}

/* ---------- Product-card qty input: clearer look ---------- */
.qty-input {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ---------- High-contrast mode helpers ---------- */
@media (prefers-contrast: more) {
  :root {
    --border-subtle: rgba(32, 20, 20, 0.3) !important;
    --border-soft: rgba(32, 20, 20, 0.45) !important;
  }
  body {
    background: #F5EFE4 !important;
    color: #0D0808 !important;
  }
  .event-card, .product-card, .summary-card, .pickup, .key-info, .data-section {
    border-width: 3px !important;
  }
}