/*
Theme Name:        Church Classic (Valorous) — Cornerstone variant
Theme URI:         https://valorousweb.com
Author:            Valorous Web LLC
Author URI:        https://valorousweb.com
Description:       Cornerstone Chapel (DEMO) skin of the church-classic template. Warm-earth personality: warm cream base, deep olive brand, terracotta accent, humanist serif type, traditional chapel-arch shape. Loaded last, so this file carries the handful of overrides that live outside tokens.css (the hardcoded hero eyebrow tints in base.css). WCAG 2.1 AA baseline.
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
*/

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

/* --- Cornerstone overrides of base.css hardcoded hero tints -----------------
   Retint the hero eyebrow/affiliation and the on-dark/page-hero eyebrows to a
   warm clay cream that is on-brand for the olive/terracotta world and AA-proven
   on the olive brand-deep band. */
.hero .eyebrow { color: #E7C3A6; }
/* Affiliation label sits highest in the hero, over the brightest window region;
   a warm near-white keeps it AA over the golden backdrop while staying on-brand. */
.hero-affil { color: #F3E7D6; }

.on-dark .eyebrow,
.section--brand .eyebrow,
.page-hero .eyebrow { color: #E7C3A6; }

/* Traditional touch: let Fraunces headings breathe with a hair more spacing. */
.hero h1,
h2.section-title { letter-spacing: 0.004em; }

/* =============================================================================
   ELEVATION HOMEPAGE  —  Cornerstone Chapel (DEMO)
   -----------------------------------------------------------------------------
   Section-specific layout for the approved elevation (kit mockup final-r2.png).
   Cornerstone-only: every rule is prefixed .cs- and lives in this variant file,
   so the shared base.css / template-parts are untouched. All text pairings use
   the AA-proven tokens (ink/ink-soft/ink-faint on cream, accent-text on light,
   accent-ink on the terracotta fill, on-brand on the olive brand).
============================================================================= */

/* ---- Pre-header invite bar (front page only; sits above the site header) ---- */
.cs-preheader { background: var(--brand-deep); color: var(--on-brand); text-align: center; }
.cs-preheader .container { padding-block: 0.55rem; }
.cs-preheader span { font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.01em; }

/* ---- Hero (single-column serif headline over the sanctuary) ---------------- */
.cs-hero .hero-inner { grid-template-columns: 1fr; }
.cs-hero .hero-copy { max-width: 34rem; }
.cs-hero h1 { color: #fff; font-size: var(--fs-mega); line-height: var(--leading-tight); margin-bottom: 0; }
.cs-hero .hero-actions { margin-top: 2rem; align-items: center; }
.cs-hero-watch { background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; padding-inline: 0.4rem; }
.cs-hero-watch:hover { background: transparent; border-color: transparent; color: #fff; transform: none; }

/* ---- Schedule strip -------------------------------------------------------- */
.cs-schedule-band { background: var(--surface); border-block: 1px solid var(--line-soft); }
.cs-schedule { display: flex; align-items: stretch; gap: 0; padding-block: clamp(1.4rem, 3vw, 2.1rem); }
.cs-schedule-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
.cs-schedule-item + .cs-schedule-item { border-left: 1px solid var(--line-soft); }
.cs-schedule-icon { display: inline-flex; color: var(--brand); }
.cs-schedule-icon svg { width: 2rem; height: 2rem; }
.cs-schedule-text { display: flex; flex-direction: column; line-height: 1.25; }
.cs-schedule-name { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.cs-schedule-time { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); }

/* ---- Scripture + greeting band -------------------------------------------- */
.cs-welcome { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); align-items: stretch; }
.cs-welcome-media { min-height: 340px; }
.cs-welcome-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-welcome-card { display: flex; align-items: center; justify-content: center; padding: clamp(2.2rem, 5vw, 4.5rem) var(--gutter); }
.cs-welcome-inner { max-width: 30rem; text-align: center; }
.cs-welcome-inner h2 { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--brand); margin: 0; }
.cs-quote { margin: 0; }
.cs-quote-mark { display: block; font-family: var(--font-display); font-size: 3.2rem; line-height: 0.4; color: var(--accent); margin-bottom: 0.4rem; }
.cs-quote blockquote { margin: 0 0 1.1rem; font-family: var(--font-body); font-size: var(--fs-lead); font-style: italic; line-height: 1.5; color: var(--ink-soft); }
.cs-quote figcaption { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--accent-text); }

/* ---- Shared elevation bits ------------------------------------------------- */
.cs-rule { display: block; width: 3rem; height: 2px; background: var(--accent); border-radius: 2px; margin: 1.1rem 0; }
.cs-rule--center { margin-inline: auto; }
.cs-welcome-inner .cs-rule { margin-inline: auto; }
.cs-section-head { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.cs-section-head--left { text-align: left; }
.cs-section-head .section-title { font-family: var(--font-display); margin: 0; }
.cs-section-head--left .cs-rule { margin-block: 0.9rem 0; }

/* ---- Ministry icon cards --------------------------------------------------- */
.cs-ministry-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.6rem, 1.4vw, 1rem); }
.cs-ministry-card { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding: clamp(1.1rem, 2.4vw, 1.7rem) 0.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.cs-ministry-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cs-ministry-icon { color: var(--brand); }
.cs-ministry-icon svg { width: 2.3rem; height: 2.3rem; }
.cs-ministry-label { font-size: 1rem; font-weight: 500; }

/* ---- Featured sermon + list ------------------------------------------------ */
.cs-sermons-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
.cs-sermon-featured { display: grid; grid-template-columns: minmax(0, 0.9fr) 1fr; gap: clamp(1rem, 2.4vw, 1.6rem); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1rem, 2.4vw, 1.5rem); }
.cs-sermon-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; }
.cs-sermon-featured-body .eyebrow { margin-top: 0; }
.cs-sermon-featured-body h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0.2rem 0 0.5rem; color: var(--ink); }
.cs-sermon-scripture { color: var(--accent-text); font-weight: 600; margin: 0 0 0.3rem; }
.cs-sermon-meta { color: var(--ink-faint); font-size: 0.92rem; margin: 0 0 1.1rem; }
.cs-sermon-list { display: flex; flex-direction: column; gap: 0.6rem; }
.cs-sermon-row { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; padding: 0.65rem; border: 1px solid transparent; border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.cs-sermon-row:hover { background: var(--surface); border-color: var(--line); }
.cs-sermon-row-thumb img { width: 88px; height: 66px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.cs-sermon-row-body { display: flex; flex-direction: column; gap: 0.1rem; }
.cs-sermon-row-title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; }
.cs-sermon-row-scripture { color: var(--ink-faint); font-size: 0.9rem; }
.cs-sermon-row-watch { color: var(--accent-text); font-weight: 600; font-size: 0.9rem; margin-top: 0.15rem; }

/* ---- Upcoming events ------------------------------------------------------- */
.cs-event-list { display: flex; flex-direction: column; }
.cs-event-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: clamp(0.8rem, 2vw, 1.4rem); align-items: center; padding: 1rem 0.3rem; border-top: 1px solid var(--line-soft); }
.cs-event-row:last-child { border-bottom: 1px solid var(--line-soft); }
.cs-event-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm); line-height: 1; }
.cs-event-mon { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; }
.cs-event-day { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-top: 0.1rem; }
.cs-event-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.cs-event-when { color: var(--ink-soft); font-size: 0.95rem; white-space: nowrap; }
.cs-event-time { color: var(--ink-soft); font-size: 0.95rem; white-space: nowrap; }
.cs-events-more { text-align: center; margin-top: clamp(1.5rem, 3vw, 2.2rem); }

/* ---- CTA band (olive, greeting photo) ------------------------------------- */
.cs-cta-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) 1fr; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
.cs-cta-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; box-shadow: var(--shadow); }
.cs-cta-copy h2 { font-family: var(--font-display); font-size: var(--fs-h2); margin: 0.1rem 0 0.6rem; }
.cs-cta-copy p { color: var(--on-brand-soft); max-width: 34rem; margin: 0 0 1.5rem; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
	.cs-welcome { grid-template-columns: 1fr; }
	.cs-welcome-media { min-height: 260px; max-height: 360px; }
	.cs-sermons-grid { grid-template-columns: 1fr; }
	.cs-cta-grid { grid-template-columns: 1fr; }
	.cs-schedule { flex-direction: column; gap: 1.1rem; }
	.cs-schedule-item { justify-content: flex-start; }
	.cs-schedule-item + .cs-schedule-item { border-left: 0; border-top: 1px solid var(--line-soft); padding-top: 1.1rem; }
}
@media (max-width: 640px) {
	.cs-ministry-grid { grid-template-columns: repeat(3, 1fr); }
	.cs-sermon-featured { grid-template-columns: 1fr; }
	.cs-event-row { grid-template-columns: auto 1fr; row-gap: 0.15rem; }
	.cs-event-chip { grid-row: 1 / span 3; }
	.cs-event-title { grid-column: 2; grid-row: 1; }
	.cs-event-when { grid-column: 2; grid-row: 2; white-space: normal; }
	.cs-event-time { grid-column: 2; grid-row: 3; white-space: normal; }
}
@media (max-width: 400px) {
	.cs-ministry-grid { grid-template-columns: repeat(2, 1fr); }
	.cs-hero h1 { font-size: var(--fs-display); }
}

/* ============================================================================
   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).
   ========================================================================== */
.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; }
}

/* ============================================================================
   INNER-PAGE HARMONIZATION + POLISH SWEEP  (2026-07-23)
   -----------------------------------------------------------------------------
   Pulls the six interior pages up to the elevated homepage system and clears the
   UI/UX findings from the full-site sweep. Cornerstone-scoped only (this variant
   style.css loads last); base.css, app.js and the canonical templates are left
   untouched. Every color pairing below is AA-proven on the warm-earth tokens.
   ========================================================================== */

/* --- Interior hero: echo the homepage's terracotta accent-rule language by
   closing each interior page-hero text block with the same cs-rule. --- */
.page-hero .cs-hero-rule { margin: 1.4rem 0 0; }

/* --- Give page: size the generosity badge icon. church_icon() svgs carry no
   intrinsic dimensions (they are sized per context in base.css); the give-badge
   had no size rule, so the gift glyph ballooned and wrapped the label onto three
   lines. Constrain it and keep the pill on one line. --- */
.give-badge { white-space: nowrap; }
.give-badge svg { width: 1.1rem; height: 1.1rem; flex: none; }

/* --- Tap targets: lift the few controls that measured just under 44px. --- */
.footer-social a { width: 44px; height: 44px; }   /* was 42px */
.brand { min-height: 44px; }                        /* logo link hit area */
@media (min-width: 901px) {
  .nav-link { min-height: 44px; }                   /* desktop nav rows; mobile stays 48 */
}

/* --- Header CTA on phones: the brand lockup + CTA + toggle crowd the bar at
   phone widths and the CTA wrapped to two lines. Below 560px the hamburger (which
   carries the Visit item) covers the same destination, so the redundant button is
   hidden; it returns at tablet width and up. --- */
@media (max-width: 560px) {
  .header-cta { display: none; }
}

/* ============================================================================
   MOBILE-EXPERIENCE OPTIMIZATION PASS  (2026-07-24)
   -----------------------------------------------------------------------------
   Desktop-first house rule: this block is the dedicated mobile pass on top of the
   verified-correct baseline. It optimizes the phone EXPERIENCE at 360/390/414:
   density, thumb-reach, image weight already handled in markup + renditions.
   Cornerstone-scoped only (this variant style.css loads last); base.css / app.js /
   canonical templates untouched. Colors unchanged (AA already proven). No em dashes.
   ========================================================================== */

/* --- Phone shell: trim the sticky header and compress vertical rhythm so the
   chrome does not eat the small viewport and sections read denser without losing
   the quiet-classic breathing. Only the header is sticky; the pre-header invite
   scrolls away, so combined sticky chrome stays light. --- */
@media (max-width: 560px) {
  :root {
    --header-height: 62px;                          /* was 78px; logo 2.7rem + 44px toggle still fit */
    --section-y: clamp(2.4rem, 6vw, 3.3rem);        /* was floor 3.5rem; denser but still airy */
  }
  .cs-hero .hero-inner { padding-block: clamp(2.6rem, 8vw, 3.6rem); } /* tighter first view, CTA higher */
  .cs-welcome-media { min-height: 220px; max-height: 300px; }         /* portrait greeting not too tall */
}

/* --- Pre-header invite bar: keep the time phrase whole so it never orphans an
   "AM." onto its own line; size it down a hair on the narrowest phones so it lands
   as a tidy one or two line invite. Content is unchanged. --- */
.cs-nowrap { white-space: nowrap; }
@media (max-width: 480px) {
  .cs-preheader .container { padding-block: 0.48rem; }
  .cs-preheader span { font-size: 0.85rem; line-height: 1.35; }
}

/* --- Ministry icon cards: unify a clean 2-up grid across every phone width. The
   old 400px cutoff meant a 414px phone (iPhone Pro Max) got a tighter 3-up while a
   390px phone got the roomier 2-up. 2-up gives these six icon tiles bigger tap
   targets and a calmer read on phones; 3-up returns above 560px. --- */
@media (max-width: 560px) {
  .cs-ministry-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .cs-ministry-card { padding-block: 1.25rem; }
}

/* --- Schedule strip: a touch more separation between the three stacked gatherings
   so each reads as its own instant unit on a phone. --- */
@media (max-width: 560px) {
  .cs-schedule { gap: 0.9rem; padding-block: 1.5rem; }
  .cs-schedule-item + .cs-schedule-item { padding-top: 0.95rem; }
  .cs-schedule-time { font-size: 1.28rem; }
}

/* --- Footer: give the stacked link columns and the phone/email lines comfortable
   thumb-sized tap rows on phones (they were ~16px tall text links). --- */
@media (max-width: 700px) {
  .footer-col li { margin-bottom: 0.1rem; }
  .footer-col li a {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.3rem;
  }
}

/* ============================================================================
   MOBILE HEADER + DRAWER FIX (2026-07-24) — Cornerstone overlay only, loads LAST.
   Same class of fix as the Grace overlay; canonical base.css / app.js untouched.

   1) CONTROL CLUSTER PINNED RIGHT. On mobile .site-nav becomes a position:fixed
      drawer and leaves the header flex, so nothing pushed the header controls to
      the edge — the hamburger (and, above 560px, the "Plan a Visit" CTA) packed
      left behind the wide brand lockup and floated toward centre (measured ~67px
      of dead space to the right edge at 390). margin-left:auto pins the control
      cluster flush right at every phone width. (The CTA stays intentionally
      hidden below 560px per the existing rule above — Cornerstone's brand lockup
      is too wide to also carry the CTA at phone widths; the hamburger covers the
      same Visit destination. Only its alignment is corrected here.)

   2) DRAWER RESTORED TO A FULL PANEL. The sticky .site-header carries
      backdrop-filter (frosted glass). A non-none filter / backdrop-filter makes
      an element the containing block for its position:fixed descendants, so the
      drawer sized to the ~62px header instead of the viewport and opened as a
      small translucent stub showing only "Home". Neutralising backdrop-filter on
      the header at the widths where the drawer lives (<=900) releases the drawer
      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);
  }
}