/* _polish.css — look-and-feel overrides for Father's House mockups.
   Loaded after each page's inline <style> so these rules win on conflict.
   See docs/superpowers/specs/2026-04-29-mockup-look-and-feel-pass-design.md */

/* === Visually-hidden utility (a11y label pattern) === */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Skip-to-content link (a11y baseline) ===
   Hidden using the visually-hidden pattern by default so it never appears
   in the layout. Becomes a focusable pill the moment a keyboard user tabs
   onto it (and not a millisecond before). */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  width: auto;
  height: auto;
  padding: 0.75rem 1.25rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--brand-ink, oklch(32.5% 0.05 236));
  color: var(--fg-on-ink, oklch(97.5% 0.008 70));
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid var(--brand-warm, oklch(66% 0.13 42));
  outline-offset: 2px;
}

/* === A11y: nav touch targets — 44px minimum (WCAG 2.5.5/2.5.8) === */
nav.primary a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* === Mobile: stack newsletter form on narrow phones === */
@media (max-width: 480px) {
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-form input,
  .newsletter-form .btn {
    width: 100%;
  }
}

/* === Tablet: drop sticky give-form (overflows narrow viewports) === */
@media (max-width: 1100px) {
  .give-form {
    position: static !important;
  }
}

/* === Reduced-motion: stop pulse animations on live indicators === */
@media (prefers-reduced-motion: reduce) {
  .live-dot,
  .ns-countdown::before,
  .player-live .live-dot {
    animation: none !important;
  }
}


/* === Direction A — Editorial typography amplification === */

/* A.1 Hero h1 magazine scale */
.hero h1,
section.hero h1,
.hero-section h1,
header.intro h1 {
  font-size: clamp(2.75rem, 8vw + 1rem, 9rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

/* A.3 Section h2 weight modulation
   Targets the existing `.section-head h2` markup pattern. Default weight
   becomes 600. Pages opt into the lighter italic variant by adding
   class="intro" on the h2 (e.g., conversational intros, mission paragraphs). */
.section-head h2 {
  font-weight: 600;
}
.section-head h2.intro {
  font-weight: 300;
  font-style: italic;
}

/* A.4 Eyebrow + coastline stamp */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 12px;
  background-image: url("_coastline.svg");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  opacity: 0.7;
}
.eyebrow .dot { display: none; }

/* === Direction C — Coastline rule below hero h1 ===
   The SVG strokes use currentColor, but <img> elements load SVG as a
   separate document where currentColor defaults to black. So we use
   `filter: invert` on dark surfaces (index intro, watch body) to flip
   the stroke colour. Add class="coastline-rule on-dark" on those pages. */
.coastline-rule {
  display: block;
  width: clamp(280px, 50vw, 600px);
  height: auto;
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
  pointer-events: none;
  opacity: 0.85;
}
.coastline-rule.on-dark {
  filter: invert(1);
}

/* === Direction B + C — Ambient warm gradient + grain === */
.hero-warm-wash {
  position: relative;
  isolation: isolate;
}
.hero-warm-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 30% 20%, oklch(94% 0.016 72 / 0.55), transparent 60%),
    radial-gradient(80% 60% at 80% 90%, oklch(94% 0.016 72 / 0.35), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero-warm-wash.with-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("_grain.svg");
  background-size: 200px 200px;
  opacity: 0.08;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

/* === Direction B — Scroll-reveal motion === */
.has-motion .section,
.has-motion .tile,
.has-motion .story-card,
.has-motion .programme-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.has-motion .section.visible,
.has-motion .tile.visible,
.has-motion .story-card.visible,
.has-motion .programme-card.visible {
  opacity: 1;
  transform: none;
}

/* === Direction B — Hover depth === */
.btn-warm {
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.btn-warm:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 18px oklch(40% 0.06 42 / 0.18);
}
.card,
.tile,
.story-card,
.programme-card {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover,
.tile:hover,
.story-card:hover,
.programme-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px oklch(32.5% 0.05 236 / 0.10);
}

/* === Direction B — Active-link contrast fix === */
nav.primary a.active {
  color: var(--fg-default);
}

/* === Niggle: watch.html dark nav variant === */
header[data-theme="dark"] {
  background: oklch(20% 0.015 236 / 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(50% 0.015 236 / 0.2);
}
header[data-theme="dark"] .logo {
  color: var(--fg-on-ink);
}
header[data-theme="dark"] nav.primary a {
  color: color-mix(in oklab, var(--fg-on-ink), transparent 25%);
}
header[data-theme="dark"] nav.primary a:hover,
header[data-theme="dark"] nav.primary a.active {
  color: var(--fg-on-ink);
}
header[data-theme="dark"] nav.primary a.active::after {
  background: var(--fg-on-ink);
}
header[data-theme="dark"] .nav-cta .btn-ghost {
  color: var(--fg-on-ink);
  border-color: oklch(60% 0.02 236 / 0.4);
}

/* === Niggle: Reduced-motion guards === */
@media (prefers-reduced-motion: reduce) {
  .has-motion .section,
  .has-motion .tile,
  .has-motion .story-card,
  .has-motion .programme-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn-warm,
  .card,
  .tile,
  .story-card,
  .programme-card {
    transition: none !important;
  }
  .btn-warm:hover,
  .card:hover,
  .tile:hover,
  .story-card:hover,
  .programme-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .hero-warm-wash::before,
  .hero-warm-wash.with-grain::after {
    transition: none !important;
  }
}

/* === Pastor George portrait — real photo integration ===
   The inline style already sets .pastor-portrait img to object-fit: cover.
   We pin object-position to top so the face/upper body stays in frame when
   the 4:5 portrait container crops the square-ish source image.
   The dark stage backdrop in the photo blends naturally with the card surface. */
.pastor-portrait-img {
  object-position: center top;
}

/* === Back-to-top button ===
   Injected by _motion.js on every mockup page. Fixed bottom-right; appears
   after 600px of scroll and smooth-scrolls back to top on click. */
.to-top-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: var(--brand-warm, oklch(66% 0.13 42));
  color: var(--fg-on-warm, oklch(18% 0.02 236));
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px oklch(40% 0.06 42 / 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.to-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.to-top-btn:hover {
  background: oklch(60% 0.13 42);
  box-shadow: 0 8px 22px oklch(40% 0.06 42 / 0.35);
  transform: translateY(-2px);
}
.to-top-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.to-top-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .to-top-btn,
  .to-top-btn:hover {
    transition: opacity 200ms ease;
    transform: none !important;
  }
}

/* === Depth amplification ===
   Deepen card surfaces and add elevation to elements that previously sat
   flat. Stays within DESIGN.md's three-layer ink-tinted shadow vocabulary
   (no flat single-layer shadows; ink-hue tint, not neutral grey). Loaded
   after the per-page <style> blocks so these win on conflict. */

/* Cards at rest — bumped from the original ~0.05 alpha shadows to ~0.10
   alpha mid-layer plus a deeper far-layer for stronger depth perception. */
.tile,
.story-card,
.event,
.fund-card,
.campus,
.expect-card,
.recent-card {
  box-shadow:
    0 2px 4px oklch(32% 0.05 236 / 0.07),
    0 14px 32px oklch(32% 0.05 236 / 0.11),
    0 32px 72px oklch(32% 0.05 236 / 0.10);
}
.tile:hover,
.story-card:hover,
.event:hover,
.fund-card:hover,
.campus:hover,
.expect-card:hover,
.recent-card:hover {
  box-shadow:
    0 4px 8px oklch(32% 0.05 236 / 0.10),
    0 28px 56px oklch(32% 0.05 236 / 0.20),
    0 56px 112px oklch(32% 0.05 236 / 0.18);
}

/* Sticky header gets a soft floating shadow below its border (was border-only). */
header {
  box-shadow:
    0 1px 2px oklch(32% 0.05 236 / 0.04),
    0 8px 24px oklch(32% 0.05 236 / 0.08);
}

/* Scripture chips, give-widget, signup-form, give-form — text-bearing surfaces
   that previously sat flat or with very light elevation. */
.scripture-chip {
  box-shadow:
    0 1px 2px oklch(32% 0.05 236 / 0.20),
    0 8px 22px oklch(0% 0 0 / 0.22);
}
.scripture-chip:hover {
  box-shadow:
    0 2px 4px oklch(32% 0.05 236 / 0.28),
    0 14px 32px oklch(0% 0 0 / 0.32);
}
.give-widget {
  box-shadow:
    0 2px 4px oklch(32% 0.05 236 / 0.10),
    0 24px 48px oklch(32% 0.05 236 / 0.22),
    0 56px 112px oklch(32% 0.05 236 / 0.24);
}
.signup-form {
  box-shadow:
    0 4px 8px oklch(32% 0.05 236 / 0.14),
    0 32px 64px oklch(32% 0.05 236 / 0.28);
}
.give-form {
  box-shadow:
    0 2px 4px oklch(32% 0.05 236 / 0.06),
    0 24px 56px oklch(32% 0.05 236 / 0.14),
    0 56px 120px oklch(32% 0.05 236 / 0.12);
}

/* Scripture blockquote (give.html "Each of you should give...") gets a
   subtle wrap shadow so the quote feels lifted off paper. */
.scripture {
  background: var(--surface-card, oklch(99% 0.005 70));
  padding: 1.75rem 2rem 1.5rem;
  border-radius: var(--radius-lg, 16px);
  border-top: 0;
  margin-top: 2rem;
  box-shadow:
    0 1px 2px oklch(32% 0.05 236 / 0.05),
    0 12px 28px oklch(32% 0.05 236 / 0.08),
    0 28px 64px oklch(32% 0.05 236 / 0.06);
}

/* Series banner image and pastor portrait — already deep but bumped for
   clarity against warm-paper sections. */
.series {
  box-shadow:
    0 4px 8px oklch(32% 0.05 236 / 0.12),
    0 32px 64px oklch(32% 0.05 236 / 0.20),
    0 72px 140px oklch(32% 0.05 236 / 0.24);
}
.pastor-portrait {
  box-shadow:
    0 6px 12px oklch(32% 0.05 236 / 0.12),
    0 36px 72px oklch(32% 0.05 236 / 0.18),
    0 88px 160px oklch(32% 0.05 236 / 0.18);
}

/* Reduced-motion: keep shadows but suppress the hover-state transition. */
@media (prefers-reduced-motion: reduce) {
  .tile, .story-card, .event, .fund-card, .campus, .expect-card,
  .recent-card, .scripture-chip {
    transition: none !important;
  }
}

/* === A.5 Homepage asymmetric hero — desktop only ===
   The homepage's `<section class="hero">` wraps a single `<div class="hero-grid">`
   which itself contains text-block and image children. We override the existing
   `.hero-grid` columns (defaults to 1.15fr 1fr inline) with a 7fr/1fr/4fr split
   when the parent `.hero` carries `data-asymmetric`. Task 8 adds that attribute. */
@media (min-width: 960px) {
  .hero[data-asymmetric] .hero-grid {
    grid-template-columns: 7fr 1fr 4fr;
    gap: 2rem;
    align-items: start;
  }
  .hero[data-asymmetric] .hero-grid > :first-child {
    grid-column: 1 / 2;
  }
  .hero[data-asymmetric] .hero-grid > :last-child {
    grid-column: 3 / 4;
  }
}