/* ============================================================
   theme.css
   Global utility styles for The Prayer Candle.
   Reduced motion backstop and keyboard focus ring.
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Prevent double-tap zoom on all interactive elements across all pages. */
  touch-action: manipulation;
}
html, body, button, a, input, textarea, select, label {
  touch-action: manipulation;
}

/* Prevent iOS long-press text selection callout on interactive surfaces.
   Inputs and textareas keep selection so users can edit normally; prose
   content stays selectable so users can copy a verse. Just kill it on
   buttons, tabs, links, and role="button" elements. */
button, a, .tab, .chapter-tab, [role="button"], [role="switch"], [role="tab"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ============================================================
   Global reduced motion backstop. Individual pages can still
   override with their own reduced-motion rules for nuance.
   This is the safety net so any page with animations we
   forget still honors the OS preference.
   ============================================================ */
@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;
  }
}

/* ============================================================
   Global visible focus ring for keyboard users.
   Uses :focus-visible so mouse/touch clicks do not get a ring,
   only Tab navigation. Warm amber tone, never blue browser default.
   ============================================================ */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid #D45A20;
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 5px rgba(245, 239, 227, 0.7);
  transition: outline-offset 120ms ease-out;
}
.flame-overlay *:focus-visible,
body.candlelight *:focus-visible {
  outline-color: #F2C060;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(26, 17, 8, 0.7);
}

/* ============================================================
   High contrast support. Darkens ink tokens and boosts borders
   when the user prefers more contrast.
   ============================================================ */
@media (prefers-contrast: more) {
  :root {
    --ink-deep: #000000;
    --ink-charcoal: #1a1a1a;
    --ink-graphite: #333333;
    --ink-faded: #4a4a4a;
    --rule: rgba(0, 0, 0, 0.4);
  }
  body.candlelight {
    --ink-deep: #ffffff;
    --ink-charcoal: #f0f0f0;
    --ink-graphite: #d0d0d0;
    --ink-faded: #b0b0b0;
    --rule: rgba(255, 255, 255, 0.4);
  }
}

/* ============================================================
   .pc-card
   One card component, used everywhere. Pages should replace
   their local .card / .prayer-card / .module styles with this
   class progressively, so the whole app shares one surface.

   Structure is open. Use whatever inner markup you want.
   Suggested inner classes:
     .pc-card__header   title row
     .pc-card__body     main content
     .pc-card__meta     timestamps, tags, tiny affordances
     .pc-card__actions  buttons along the bottom

   Variants:
     .pc-card--lift     elevated, for modals and emphasis
     .pc-card--quiet    lower contrast, for archived or muted items
     .pc-card--paper    the paper vellum variant (default)
     .pc-card--inkwell  deeper panel, used sparingly
   ============================================================ */
.pc-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-6);
  background: var(--paper-vellum);
  border: 1px solid var(--hairline-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--ink-deep);
  position: relative;
  transition:
    transform var(--motion-paper-dur) var(--motion-paper-ease),
    box-shadow var(--motion-paper-dur) var(--motion-paper-ease);
}
.pc-card--lift {
  box-shadow: var(--shadow-lift);
}
.pc-card--quiet {
  background: transparent;
  border-color: var(--hairline-color);
  box-shadow: none;
  opacity: 0.78;
}
.pc-card--inkwell {
  background: var(--paper-aged);
  border-color: var(--hairline-color-strong);
}
.pc-card--compact {
  padding: var(--s-4) var(--s-5);
  gap: var(--s-1);
}

/* When the whole card is a button or link, give it a press state. */
button.pc-card,
a.pc-card {
  appearance: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
button.pc-card:active,
a.pc-card:active {
  transform: scale(0.993);
}

/* Inner semantic helpers. Optional. */
.pc-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.pc-card__title {
  margin: 0;
  font-family: var(--font-display-emotional);
  font-style: italic;
  font-weight: var(--fw-display-emotional);
  font-size: var(--text-title);
  line-height: var(--lh-tight);
  color: var(--ink-deep);
}
.pc-card__body {
  font-family: var(--font-ui);
  font-weight: var(--fw-ui-regular);
  font-size: var(--text-body);
  line-height: var(--lh-readable);
  color: var(--ink-charcoal);
  margin: 0;
}
.pc-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--hairline-color);
  font-family: var(--font-display-ceremonial);
  font-size: var(--text-caption);
  color: var(--ink-faded);
}
.pc-card__actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}

/* ============================================================
   Typography role helpers.
   These utility classes let pages declare intent without
   redeclaring font-family inline. Use .pc-display-emotional
   on verse blockquotes, .pc-ceremonial on handwritten labels,
   .pc-body on everything else.
   ============================================================ */
.pc-display-emotional {
  font-family: var(--font-display-emotional);
  font-style: italic;
  font-weight: var(--fw-display-emotional);
  line-height: var(--lh-tight);
}
.pc-ceremonial {
  font-family: var(--font-display-ceremonial);
  font-weight: var(--fw-display-ceremonial);
  line-height: var(--lh-readable);
}
.pc-body {
  font-family: var(--font-ui);
  font-weight: var(--fw-ui-regular);
  line-height: var(--lh-readable);
}
.pc-emphasis {
  font-family: var(--font-ui);
  font-weight: var(--fw-ui-emphasis);
  line-height: var(--lh-readable);
}