/*
Theme Name:        Church Classic (Valorous)
Theme URI:         https://valorousweb.com
Author:            Valorous Web LLC
Author URI:        https://valorousweb.com
Description:       A warm, reverent, fully accessible multi-page website template for small Christian churches. Options-driven (Church Identity in the Customizer) and content-driven (Sermons, Ministries, Events, Staff via the Valorous Church Core plugin) so the church maintains it with no code. WCAG 2.1 AA baseline. Requires the Valorous Church Core plugin.
Version:           1.0.0
Requires at least: 6.4
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       church-classic
Tags:              church, non-profit, custom-colors, custom-menu, custom-logo, featured-images, accessibility-ready, translation-ready
*/

/* ============================================================================
   GRACE FELLOWSHIP — elevated homepage overlay styles.
   Loads LAST (after tokens.css -> base.css). Navy / burnished-gold / cream,
   symmetric editorial. Every value composes from the existing design tokens;
   the only additions are a homepage-local layout vocabulary. WCAG 2.1 AA.
   ========================================================================== */

.church-editor-note { display: none; }

:root {
  /* Saturated gold that clears WCAG AA (>=4.5:1) as text on the navy bands. */
  --g-gold-navy: #d7a44a;
  --g-navy-band: var(--brand-deep);
  /* Flat neutral accent-button shadow — overrides the canonical gold glow
     (was 0 12px 26px rgba(198,154,74,.32)) to kill the AI-slop halo. */
  --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* ---- HERO (light editorial: navy serif over the sunlit sanctuary) ---------
   The mockup hero is dark serif text on the naturally-light upper-left of the
   sanctuary photo. A cream scrim (strong at the left where the text sits, fading
   to reveal the room at the right) keeps every hero text node well above WCAG AA
   for the navy ink, no matter how bright the window light behind it. */
.g-hero { color: var(--ink); }
.g-hero .hero-inner { grid-template-columns: 1fr; }
.g-hero .hero-copy { max-width: 44rem; position: relative; z-index: 1; }
.g-hero .hero-media::after {
  background: linear-gradient(96deg,
    rgba(247,243,234,0.95) 0%,
    rgba(247,243,234,0.90) 30%,
    rgba(247,243,234,0.60) 52%,
    rgba(247,243,234,0.12) 74%,
    rgba(247,243,234,0) 100%);
}
.g-hero h1 { color: var(--brand); font-size: clamp(2.9rem, 1.8rem + 5vw, 5.4rem); }
.g-hero .hero-tagline { color: var(--ink-soft); }
.g-hero .hero-affil { color: var(--accent-text); margin-bottom: 0.6rem; }

.g-hero-facts {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.9rem;
}
.g-hero-facts li { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1rem; color: var(--ink); }
.g-hero-facts svg { width: 1.2rem; height: 1.2rem; color: var(--accent-text); flex: none; }
.g-hero-textlink {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 4px;
}
.g-hero-textlink svg { width: 1.05rem; height: 1.05rem; transition: transform var(--dur-fast) var(--ease-out); }
.g-hero-textlink:hover { color: var(--accent-text); }
.g-hero-textlink:hover svg { transform: translateX(3px); }

/* Mobile: the copy spans full width, so wash the whole image lightly to hold AA. */
@media (max-width: 760px) {
  .g-hero .hero-media::after {
    background: linear-gradient(180deg, rgba(247,243,234,0.90) 0%, rgba(247,243,234,0.82) 100%);
  }
}

/* ---- VISITOR UTILITY STRIP (navy band, four items) ----------------------- */
.g-utility { background: var(--g-navy-band); color: #fff; padding-block: clamp(1.8rem, 3vw, 2.4rem); }
.g-utility-grid {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(4, 1fr);
}
.g-utility-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.g-utility-item + .g-utility-item { position: relative; }
.g-utility-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex: none;
  border: 1px solid rgba(215,164,74,0.5); border-radius: 50%;
  color: var(--g-gold-navy);
}
.g-utility-icon svg { width: 1.3rem; height: 1.3rem; }
.g-utility-title { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-gold-navy); margin: 0.1rem 0 0.35rem; }
.g-utility-item p { margin: 0 0 0.4rem; font-size: 0.96rem; line-height: 1.5; color: rgba(255,255,255,0.9); }
.g-utility-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--g-gold-navy); text-decoration: none; }
.g-utility-link svg { width: 0.95rem; height: 0.95rem; transition: transform var(--dur-fast) var(--ease-out); }
.g-utility-link:hover { color: #ecc987; }
.g-utility-link:hover svg { transform: translateX(3px); }

/* ---- YOUR FIRST SUNDAY (asymmetric walkthrough + arched photo) ----------- */
.g-firstsunday-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .g-firstsunday-grid { grid-template-columns: 1fr 1.02fr; } }
.g-steps { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.g-steps li { display: grid; grid-template-columns: auto auto 1fr; gap: 0.9rem 1rem; align-items: start; }
.g-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; flex: none;
  border: 1.5px solid var(--accent); border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--accent-text);
}
.g-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; color: var(--accent-text); }
.g-step-icon svg { width: 1.5rem; height: 1.5rem; }
.g-steps h3 { font-size: 1.2rem; margin: 0.2rem 0 0.25rem; }
.g-steps p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.g-firstsunday-media img { width: 100%; border-radius: var(--img-frame-radius); box-shadow: var(--shadow-lg); }

/* ---- BREATHER (quiet, photo-free) ---------------------------------------- */
.g-breather { padding-block: clamp(3rem, 6vw, 5rem); text-align: center; }
.g-breather-rule { display: block; width: 3rem; height: 2px; background: var(--accent); margin: 0 auto 1.8rem; opacity: 0.8; }
.g-breather-line { font-family: var(--font-display); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.15; color: var(--brand); max-width: 22ch; margin: 0 auto 0.9rem; }
.g-breather-body { max-width: 40rem; margin: 0 auto; color: var(--ink-soft); font-size: var(--fs-lead); }

/* ---- THIS WEEK AT GRACE (schedule table) --------------------------------- */
.g-schedule-head, .g-sermons-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem 1.5rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.g-schedule-head .section-title, .g-sermons-head .section-title { margin: 0; }
.g-inline-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.95rem; color: var(--accent-text); text-decoration: none; }
.g-inline-link svg { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease-out); }
.g-inline-link:hover { color: var(--brand); }
.g-inline-link:hover svg { transform: translateX(3px); }

.g-schedule-table { border-top: 1px solid var(--line); }
.g-schedule-row {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 1rem;
  align-items: center; padding: 1.05rem 0.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.g-schedule-row--head { border-bottom: 1px solid var(--line); }
.g-schedule-row--head span { font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.g-schedule-row > span[role="cell"] { color: var(--ink-soft); font-size: 0.98rem; }
.g-schedule-name { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--ink) !important; }
.g-schedule-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: none; color: var(--accent-text); }
.g-schedule-icon svg { width: 1.25rem; height: 1.25rem; }

/* ---- MINISTRIES (editorial index + arched photo) ------------------------- */
.g-ministries-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .g-ministries-grid { grid-template-columns: 0.92fr 1.08fr; } }
.g-ministries-list {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 2rem;
}
.g-ministries-list a {
  display: block; padding: 0.7rem 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--line-soft);
  transition: color var(--dur-fast), padding-left var(--dur-fast) var(--ease-out);
}
.g-ministries-list a:hover { color: var(--accent-text); padding-left: 0.4rem; }
.g-ministries-media img { width: 100%; border-radius: var(--img-frame-radius); box-shadow: var(--shadow-lg); }

/* ---- RECENT MESSAGES (sermon media cards) -------------------------------- */
.g-sermons-grid { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }
@media (min-width: 900px) { .g-sermons-grid { grid-template-columns: 1.12fr 0.88fr; align-items: start; } }
.g-sermon { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.g-sermon-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--brand-deep);
}
.g-sermon-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.g-sermon:hover .g-sermon-thumb img { transform: scale(1.03); }
.g-play {
  position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30,44,79,0.6); color: #fff; border: 2px solid rgba(255,255,255,0.85);
  border-radius: 50%; backdrop-filter: blur(2px);
}
.g-play svg { width: 2rem; height: 2rem; }
.g-play--sm { width: 3rem; height: 3rem; }
.g-play--sm svg { width: 1.5rem; height: 1.5rem; }

.g-sermon-body { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 1.1rem; }
.g-sermon-series { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.g-sermon-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.12; color: var(--ink); }
.g-sermon-scripture { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: var(--brand); }
.g-sermon-meta { font-size: 0.9rem; color: var(--ink-faint); }
.g-sermon-blurb { color: var(--ink-soft); font-size: 1rem; margin-top: 0.15rem; }
.g-sermon-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-weight: 600; font-size: 0.92rem; color: var(--accent-text); }
.g-sermon-cta svg { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease-out); }
.g-sermon:hover .g-sermon-cta svg { transform: translateX(3px); }

.g-sermon-list { display: grid; gap: 1.1rem; }
.g-sermon--row { flex-direction: row; gap: 1rem; align-items: center; }
.g-sermon--row .g-sermon-thumb--sm { flex: none; width: 42%; max-width: 12rem; aspect-ratio: 16 / 9; }
.g-sermon--row .g-sermon-body { padding-top: 0; gap: 0.25rem; }
.g-sermon--row .g-sermon-title { font-size: 1.18rem; }
.g-sermon--row .g-sermon-blurb { display: none; }

/* ---- FIRST VISIT FAQ (two columns on desktop) ---------------------------- */
@media (min-width: 800px) { .g-faq { grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; } }

/* ---- CLOSING CTA BAND ----------------------------------------------------- */
.g-cta { background: var(--g-navy-band); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.g-cta .eyebrow { justify-content: center; }
.g-cta .cta-band { max-width: 46rem; margin-inline: auto; }

/* ---- RESPONSIVE PASS ------------------------------------------------------ */
@media (max-width: 980px) {
  .g-utility-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.8rem; }
}
@media (max-width: 680px) {
  .g-utility-grid { grid-template-columns: 1fr; }

  /* Schedule collapses to stacked cards with labels */
  .g-schedule-row--head { display: none; }
  .g-schedule-row { grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; padding: 1.1rem 0.2rem; }
  .g-schedule-name { grid-column: 1 / -1; margin-bottom: 0.2rem; }
  .g-schedule-row > span[role="cell"][data-label]::before {
    content: attr(data-label); display: block;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
    margin-bottom: 0.1rem;
  }

  .g-ministries-list { grid-template-columns: 1fr; }
  .g-sermon--row { flex-direction: column; align-items: stretch; }
  .g-sermon--row .g-sermon-thumb--sm { width: 100%; max-width: none; }
}

/* ============================================================================
   INSTALLED LOGO SYSTEM  (added with the generated emblem + composited lockups)
   Header uses logo-header.png (dark wordmark on the light header); the footer
   uses logo-footer.png (reversed white lockup on the dark brand footer).
   ========================================================================== */
/* ============================================================================
   POLISH SWEEP (2026-07-23) — overlay-scoped tap-target + affordance fixes.
   These load LAST over base.css; the canonical theme is never edited (New Song /
   Cornerstone share it). Each rule is measured against WCAG AA.
   ========================================================================== */

/* Footer social icons: base.css sizes them 42px; lift to the 44px house tap
   target (WCAG 2.5.5). Circle art stays visually the same via a centered glyph. */
.site-footer .footer-social a { width: 44px; height: 44px; }

/* Footer explore links sat at ~19-21px tall (below the 24px WCAG 2.5.8 target).
   Add vertical padding so each link clears 24px and is comfortable on touch,
   without changing the footer's visual rhythm materially. */
.site-footer .footer-col ul li a {
  display: inline-block; padding-block: 0.28rem; min-height: 24px;
}

.site-header .brand-logo { max-height: 3.05rem; width: auto; display: block; }
.footer-brand .brand { display: inline-flex; align-items: center; }
.footer-brand .brand-logo { max-height: 3.4rem; width: auto; display: block; }
@media (max-width: 640px) {
  .site-header .brand-logo { max-height: 2.7rem; }
}

/* ============================================================================
   MOBILE OPTIMIZATION PASS (2026-07-24) — Grace overlay only, loads LAST.
   The house rule is desktop-first, then a dedicated small-screen usability pass.
   This compresses the desktop vertical rhythm so stacked sections feel dense but
   breathable (not desktop-spacing-stretched), trims the sticky header + honesty
   ribbon so pre-scroll content shows, brings the hero CTA into thumb reach, and
   tightens a few interior-page ergonomics. Grace-scoped (siblings share the
   canonical theme and are untouched); every text size stays at/above the AA and
   16px floors, and all seeded copy + the demo rails are unchanged.
   ========================================================================== */
@media (max-width: 600px) {
  :root {
    /* Section rhythm: was 56px (min of the desktop clamp) -> 40px. Stacked
       sections stop reading as stretched desktop spacing. */
    --section-y: 2.5rem;
    /* Sticky header: 76 -> 62 returns ~15px of viewport on every scroll while
       still clearing the 44px nav toggle and the 43px brand lockup. */
    --header-height: 62px;
  }

  /* Bespoke homepage bands carry their own clamps; compress to match the rhythm. */
  .g-utility  { padding-block: 1.9rem; }
  .g-breather { padding-block: 2.6rem; }
  .g-cta      { padding-block: 3rem; }
  /* Hero: shrink the tall vertical void so the primary CTA sits in thumb reach
     without scroll-hunting. */
  .g-hero .hero-inner { padding-block: 2.3rem 2.6rem; }

  /* Honesty ribbon: verbatim text + rails unchanged; tightened so it stops
     eating the first screen (was ~71px of loose 3-line type). */
  .demo-ribbon { font-size: 0.76rem; line-height: 1.32; padding: 0.42rem 0.9rem; }

  /* Header "Plan a Visit" CTA was wrapping to two lines at the narrow widths. */
  .site-header .header-cta { white-space: nowrap; padding-inline: 0.95rem; }

  /* First-Sunday numbered walkthrough: tighten the inter-step gap. */
  .g-steps { gap: 1.15rem; }

  /* Interior EVENTS rows: top-align the date badge (it was centered against the
     tall text block, floating in dead space) and separate the meta line from the
     description so the two paragraphs stop reading as one run-on. */
  .event-row { align-items: start; }
  .event-main p:first-of-type { color: var(--ink-faint); font-size: 0.92rem; margin-bottom: 0.15rem; }
  .event-main p + p { margin-top: 0.5rem; }
}

/* Narrowest phones (<=380): give the gutters and the hero display a touch more
   room so nothing crowds the safe area. */
@media (max-width: 380px) {
  :root { --gutter: 1.05rem; }
  .g-hero h1 { font-size: clamp(2.5rem, 1.3rem + 6.5vw, 3.2rem); }
}

/* ============================================================================
   MOBILE HEADER + DRAWER FIX (2026-07-24) — Grace overlay only, loads LAST.
   Two defects, both fixed overlay-scoped (canonical base.css / app.js untouched):

   1) CONTROL CLUSTER PINNED RIGHT. On mobile the .site-nav becomes a
      position:fixed drawer and leaves the header flex, so nothing pushed the
      "Plan a Visit" CTA + hamburger cluster to the edge — it packed left right
      behind the brand and floated toward centre as viewport width grew.
      margin-left:auto pins the cluster flush right at every phone width, with the
      gutter as the only breathing room to the edge.

   2) DRAWER RESTORED TO A FULL PANEL. The sticky .site-header carries
      backdrop-filter (the frosted-glass header). A non-none filter /
      backdrop-filter makes an element the containing block for its
      position:fixed descendants — so the drawer sized itself to the 63px header
      instead of the viewport and opened as a ~110px translucent stub showing
      only "Home". Neutralising backdrop-filter on the header at the widths where
      the drawer actually lives (<=900) releases the drawer back to full-viewport
      height; a solid --paper header keeps scrolled content legible without the
      blur. Desktop (>=901) keeps the frosted glass untouched.
   ========================================================================== */
@media (max-width: 900px) {
  .site-header .header-actions { margin-left: auto; }

  /* TAP-FIX (2026-07-24): the sticky header (position:sticky; z-index:900 in
     base.css) forms a stacking context, so the position:fixed drawer (.site-nav,
     z-index:950) it contains is pinned to the header's 900 level across contexts.
     The tap-scrim (.nav-backdrop, z-index:940) is appended to <body> by app.js —
     the ROOT stacking context — and 940 > 900, so the scrim painted ABOVE the
     drawer: it greyed the open menu and intercepted every tap (elementFromPoint
     over a nav link returned .nav-backdrop, not the link). Lifting the header's
     stacking context above the scrim (960 > 940) carries its descendant drawer up
     with it, so the panel renders solid and its links receive taps again.
     Tap-outside-to-close still works: the scrim stays the topmost element
     everywhere OUTSIDE the header bar + drawer panel. backdrop-filter stays off
     here so the drawer keeps its full-viewport height (yesterday's fix). */
  .site-header {
    z-index: 960;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--paper);
  }
}