/*
Theme Name:        Church Classic (Valorous) — New Song variant
Theme URI:         https://valorousweb.com
Author:            Valorous Web LLC
Author URI:        https://valorousweb.com
Description:       New Song Church (DEMO) skin of the church-classic template. Modern-light personality: airy cool-white base, deep teal brand, soft coral accent, contemporary all-sans type. 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; }

/* --- New Song overrides of base.css hardcoded warm-cream hero tints ---------
   base.css ships a Grace-warm #ecdcb6 for the hero eyebrow/affiliation and a
   color-mix(accent 70%,#fff) for the on-dark/page-hero eyebrows. On the teal
   scrim those read cool-off and (for some palettes) sit under AA. Retint to a
   light coral that is on-brand and AA-proven on the teal brand-deep band. */
.hero .eyebrow { color: #F6C9BC; }
/* Affiliation label sits highest in the hero, over the brightest window region;
   white keeps it AA over the airy backdrop without over-darkening the scrim. */
.hero-affil { color: #FFFFFF; }

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

/* Modern touch: a touch tighter display tracking suits Space Grotesk. */
.hero h1,
h2.section-title { letter-spacing: -0.01em; }

/* =============================================================================
   ELEVATED HOMEPAGE  —  New Song Church (DEMO)  ·  final-r2 elevation
   -----------------------------------------------------------------------------
   Bold asymmetric contemporary: oversized Space Grotesk display, diagonal hero,
   first-visit journey, irregular ministry bento, teal message band, asymmetric
   events, teal "You belong here" close. Namespaced .ns-* so nothing here touches
   the canonical inner pages. CONTRAST FLOOR (all measured >=4.5:1 for body text,
   >=3:1 for large): coral FILLS and the coral bento tile carry dark ink text
   (--accent-ink #3A1108 on #F0714F ~7:1) — never white on coral. Teal bands carry
   white / --on-brand text (white on teal-deep ~9:1). Coral text sits on paper
   only, as --accent-text #C24626 (~4.7:1). "this Sunday" highlight uses light
   coral #F6C9BC on teal-deep (AA, per the hero token proof).
============================================================================= */

.ns-home { overflow-x: clip; }
.ns-h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.ns-eyebrow--accent { color: var(--accent-text); }
.ns-eyebrow--accent .church-motif { display: none; }

/* Shared arrow link ---------------------------------------------------------- */
.ns-arrowlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; font-size: 1rem; color: var(--accent-text);
  text-decoration: none; letter-spacing: 0.01em;
}
.ns-arrowlink svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease-out); }
.ns-arrowlink:hover svg { transform: translateX(4px); }
.ns-arrowlink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================== HERO ======================================== */
.ns-hero { position: relative; overflow: clip; background: var(--paper); padding-block: clamp(2rem, 5vw, 4rem) 0; }
.ns-hero__inner {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
}
.ns-hero__copy { position: relative; z-index: 2; padding-block: clamp(1rem, 4vw, 3.5rem); }
.ns-hero__eyebrow {
  display: inline-block; font-weight: 600; font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 1.1rem;
}
.ns-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 8.4vw, 6.4rem); line-height: 0.94; letter-spacing: -0.035em;
  color: var(--ink); margin: 0 0 1.25rem;
}
.ns-hero__sub {
  font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-soft);
  margin: 0 0 1.9rem; max-width: 26ch;
}
.ns-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.ns-btn-play svg { color: var(--accent-text); }

.ns-hero__media {
  position: relative; align-self: stretch; min-height: 100%;
  margin-right: calc(-1 * max(0px, (100vw - var(--container)) / 2));
}
.ns-hero__media img {
  width: 100%; height: 100%; min-height: clamp(320px, 42vw, 560px);
  object-fit: cover; display: block;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
}
.ns-hero__wedge {
  position: absolute; left: -2px; bottom: -1px; z-index: 1;
  width: clamp(56px, 8vw, 104px); height: clamp(120px, 20vw, 240px);
  background: var(--accent);
  clip-path: polygon(38% 0, 100% 0, 62% 100%, 0% 100%);
}

/* ========================= SCHEDULE STRIP =================================== */
.ns-schedule { background: var(--surface); border-block: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.ns-schedule__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
}
.ns-schedule__item { display: flex; align-items: center; gap: 0.85rem; flex: 1 1 auto; min-width: 0; }
.ns-schedule__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm);
  background: var(--wash-accent); color: var(--accent-text);
}
.ns-schedule__icon svg { width: 1.35rem; height: 1.35rem; }
.ns-schedule__text { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.3; min-width: 0; }
.ns-schedule__text strong { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.ns-schedule__text > span { color: var(--ink-soft); font-size: 0.98rem; }
.ns-schedule__link { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--accent-text); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.ns-schedule__link svg { width: 1em; height: 1em; }
.ns-schedule__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ns-schedule__rule { width: 1px; align-self: stretch; background: var(--line); flex: none; }

/* ======================= FIRST VISIT JOURNEY =============================== */
.ns-fv__head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ns-fv__head .eyebrow { margin-bottom: 0.6rem; }
.ns-fv__lead { font-size: var(--fs-lead); color: var(--ink-soft); margin: 0.7rem 0 1.1rem; }
.ns-fv__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.6rem, 3.5vw, 3rem); }
.ns-fv__step { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.4rem, 4vw, 3.5rem); }
.ns-fv__media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--img-frame-radius); box-shadow: var(--shadow); }
.ns-fv__text { max-width: 30rem; }
.ns-fv__step--b .ns-fv__text { justify-self: end; }
.ns-fv__num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: var(--accent-text);
  margin-bottom: 0.4rem;
}
.ns-fv__text h3 { font-size: var(--fs-h3); color: var(--ink); margin: 0 0 0.5rem; }
.ns-fv__text p { font-size: var(--fs-body); color: var(--ink-soft); line-height: var(--leading-body); margin: 0; }

/* ========================= MINISTRIES BENTO ================================ */
.ns-ministries__inner { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
.ns-ministries__head { position: sticky; top: calc(var(--header-height) + 1rem); }
.ns-ministries__head .eyebrow { margin-bottom: 0.6rem; }
.ns-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(190px, auto); gap: clamp(0.8rem, 1.6vw, 1.15rem); }
.ns-tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); text-decoration: none; display: block; box-shadow: var(--shadow-sm); isolation: isolate; }
.ns-tile--kids     { grid-column: span 5; }
.ns-tile--groups   { grid-column: span 7; }
.ns-tile--students { grid-column: span 7; }
.ns-tile--serve    { grid-column: span 5; }
.ns-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--dur) var(--ease); }
.ns-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; }
/* Bottom-anchored, near-solid where the label sits so text always lands on the
   intended fill. Teal tiles carry white text (white on teal-deep ~7.9:1). The
   coral tile carries DARK ink, which needs the BRIGHT coral (#F0714F) beneath it
   (--accent-ink on #F0714F ~5.2:1) — never a darkened coral. */
.ns-tile--teal::after  { background: linear-gradient(to top, rgba(9, 58, 63, 0.95) 0%, rgba(9, 58, 63, 0.88) 42%, rgba(9, 58, 63, 0.30) 100%); }
.ns-tile--coral::after { background: linear-gradient(to top, rgba(240, 113, 79, 1) 0%, rgba(240, 113, 79, 0.97) 44%, rgba(240, 113, 79, 0.34) 100%); }
.ns-tile:hover img { transform: scale(1.05); }
.ns-tile__label { position: relative; display: flex; flex-direction: column; gap: 0.28rem; padding: clamp(1.15rem, 2.4vw, 1.6rem); min-height: 190px; height: 100%; justify-content: flex-end; }
.ns-tile__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.1; }
.ns-tile__tag  { font-size: 0.98rem; line-height: 1.35; }
.ns-tile--teal  .ns-tile__name,
.ns-tile--teal  .ns-tile__tag  { color: #FFFFFF; }
.ns-tile--teal  .ns-tile__tag  { color: rgba(255, 255, 255, 0.92); }
.ns-tile--coral .ns-tile__name,
.ns-tile--coral .ns-tile__tag  { color: var(--accent-ink); }
.ns-tile__arrow { display: inline-flex; margin-top: 0.35rem; width: 2rem; height: 2rem; border-radius: 50%; align-items: center; justify-content: center; }
.ns-tile--teal  .ns-tile__arrow { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ns-tile--coral .ns-tile__arrow { background: rgba(58, 17, 8, 0.18); color: var(--accent-ink); }
.ns-tile__arrow svg { width: 1.05rem; height: 1.05rem; }

/* ========================= FEATURED MESSAGE =============================== */
.ns-message { background: var(--brand-deep); color: var(--on-brand); overflow: clip; }
.ns-message__inner { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(1.6rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 5rem); }
.ns-message__copy .eyebrow { color: #F6C9BC; margin-bottom: 0.7rem; }
.ns-message__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 0.98; letter-spacing: -0.02em; color: #fff; margin: 0 0 1.25rem; }
.ns-message__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 0; margin: 0 0 1.9rem; }
.ns-message__meta li { position: relative; color: var(--on-brand); font-size: 1rem; font-weight: 500; }
.ns-message__meta li + li::before { content: ""; position: absolute; left: -0.75rem; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); }
.ns-message__media { position: relative; display: block; border-radius: var(--img-frame-radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; }
/* Absolute-fill so the img does not feed back into the aspect-ratio box height
   (a height:100% child collapses an aspect-ratio container to 0). */
.ns-message__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ns-message__play {
  position: absolute; inset: 0; margin: auto; width: clamp(64px, 9vw, 88px); height: clamp(64px, 9vw, 88px);
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--brand-deep);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform var(--dur-fast) var(--ease-spring);
}
.ns-message__media:hover .ns-message__play { transform: scale(1.08); }
.ns-message__play svg { width: 55%; height: 55%; }

/* ============================== EVENTS ==================================== */
.ns-events__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.ns-events__head .eyebrow { margin-bottom: 0.6rem; }
.ns-events__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.2rem, 2.6vw, 2rem); align-items: stretch; }
.ns-event--feature { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--img-frame-radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.ns-event__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ns-event__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ns-event__badge {
  position: absolute; top: 1rem; left: 1rem; display: flex; flex-direction: column; align-items: center;
  background: var(--surface); border-radius: var(--radius-sm); padding: 0.4rem 0.7rem; line-height: 1; box-shadow: var(--shadow-sm);
}
.ns-event__mon { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.ns-event__day { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
.ns-event__body { padding: clamp(1.25rem, 2.6vw, 1.8rem); display: flex; flex-direction: column; gap: 0.5rem; }
.ns-event__body h3 { font-size: var(--fs-h3); color: var(--ink); margin: 0; }
.ns-event__when { font-size: 0.95rem; font-weight: 600; color: var(--accent-text); margin: 0; }
.ns-event__detail { font-size: var(--fs-body); color: var(--ink-soft); line-height: var(--leading-body); margin: 0 0 0.4rem; }
.ns-event__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.2rem, 2.6vw, 2rem); }
.ns-event__list li { flex: 1; }
.ns-event__list a { display: flex; align-items: center; gap: 1rem; height: 100%; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--img-frame-radius); padding: clamp(1.1rem, 2.4vw, 1.5rem); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.ns-event__list a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ns-event__badge--sm { position: static; flex: none; }
.ns-event__mini { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.ns-event__mini strong { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); }
.ns-event__mini span { font-size: 0.92rem; color: var(--ink-soft); }
.ns-event__go { flex: none; color: var(--accent-text); display: inline-flex; }
.ns-event__go svg { width: 1.25rem; height: 1.25rem; }

/* ============================= CTA BAND =================================== */
.ns-cta { position: relative; overflow: clip; background: var(--brand-deep); color: var(--on-brand); isolation: isolate; }
.ns-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--ns-cta-bg); background-size: cover; background-position: center;
  opacity: 0.22;
}
.ns-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(9, 58, 63, 0.94) 0%, rgba(9, 58, 63, 0.80) 60%, rgba(9, 58, 63, 0.66) 100%);
}
.ns-cta__wedge { position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; width: clamp(70px, 10vw, 150px); background: var(--accent); clip-path: polygon(42% 0, 100% 0, 100% 100%, 0% 100%); opacity: 0.9; }
.ns-cta__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(2.8rem, 6vw, 4.6rem); }
.ns-cta__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1; letter-spacing: -0.02em; color: #fff; margin: 0 0 0.5rem; }
.ns-cta__sub { font-size: var(--fs-lead); color: var(--on-brand); margin: 0; }
.ns-cta__hl { color: #F6C9BC; font-weight: 700; }
.ns-cta__btn { flex: none; }

/* ============================ RESPONSIVE ================================== */
@media (max-width: 900px) {
  .ns-hero__inner { grid-template-columns: 1fr; gap: 0; }
  .ns-hero__media { margin-right: calc(-1 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); }
  .ns-hero__media img { clip-path: polygon(0 8%, 100% 0, 100% 100%, 0% 100%); min-height: clamp(280px, 60vw, 420px); }
  .ns-hero__wedge { display: none; }
  .ns-ministries__inner { grid-template-columns: 1fr; }
  .ns-ministries__head { position: static; }
  .ns-message__inner { grid-template-columns: 1fr; }
  .ns-events__grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .ns-fv__step,
  .ns-fv__step--b { grid-template-columns: 1fr; gap: 1rem; }
  .ns-fv__step--b .ns-fv__media { order: -1; }
  .ns-fv__step--b .ns-fv__text { justify-self: start; }
  .ns-fv__text { max-width: none; }
  /* Ministries bento keeps a 2-col mosaic on mobile (documented judgment call):
     a single full-width stack reads monotonous and buries the coral pop tile;
     a 2x2 grid preserves the mosaic rhythm and fits comfortably at 360-414. */
  .ns-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(168px, auto); gap: 0.7rem; }
  .ns-tile,
  .ns-tile--kids, .ns-tile--groups, .ns-tile--students, .ns-tile--serve { grid-column: auto !important; }
  .ns-tile__label { min-height: 168px; padding: 1rem; }
  .ns-tile__name { font-size: 1.16rem; }
  .ns-tile__tag  { font-size: 0.9rem; }
  .ns-schedule__rule { display: none; }
  .ns-schedule__item { flex: 1 1 100%; }
  .ns-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   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  —  New Song Church (DEMO)
   ----------------------------------------------------------------------------
   The elevated homepage (bold Space Grotesk display, tight tracking, coral
   diagonal wedges, motif-free eyebrows) shipped ahead of the six interior pages,
   which still wore the original flat design system. This block pulls the inner
   pages up to the same language WITHOUT rebuilding them: heavier + tighter
   display headings, an elevated page-hero and CTA band that echo the homepage
   diagonal, clean motif-free eyebrows, and AA-safe tap targets. Namespaced to
   shared inner-page classes only; the .ns-* homepage system is untouched except
   the two tap-target rules that lift its text-link hit areas to 44px.
   All colors inherit the AA-proven tokens (coral text token deepened to #B23F1F
   in tokens.css so coral-on-wash clears 4.5:1). Coral fills still carry dark ink.
============================================================================ */

/* --- Display headings: match the homepage weight + tracking ---------------- */
.page-hero h1,
h2.section-title,
.cta-band h2 { font-weight: 700; letter-spacing: -0.02em; }

/* --- Clean, motif-free eyebrows (the homepage dropped the diamond motif) ---- */
.eyebrow .church-motif { display: none; }
.eyebrow { gap: 0; }

/* --- Elevated interior page-hero: bolder title + coral diagonal wedge ------- */
.page-hero { position: relative; overflow: clip; isolation: isolate; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
  font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4.4rem);
  line-height: 0.98; letter-spacing: -0.03em; margin-bottom: 0.3em;
}
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-hero p { margin-top: 0.9rem; max-width: 46rem; }
.page-hero::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; z-index: 1;
  width: clamp(58px, 9vw, 132px); background: var(--accent);
  clip-path: polygon(42% 0, 100% 0, 100% 100%, 0% 100%); opacity: 0.92;
}

/* --- Elevated closing CTA band: coral diagonal wedge echo + tighter title --- */
.cta-band { position: relative; overflow: clip; isolation: isolate; }
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.2rem); line-height: 1.02; }
.cta-band::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; z-index: 1;
  width: clamp(64px, 10vw, 150px); background: var(--accent);
  clip-path: polygon(42% 0, 100% 0, 100% 100%, 0% 100%); opacity: 0.85;
}
@media (max-width: 640px) {
  .page-hero::after { width: clamp(40px, 13vw, 72px); opacity: 0.9; }
  .cta-band::after  { width: clamp(44px, 14vw, 80px); opacity: 0.8; }
}

/* --- Section-head rhythm on the interior list pages ------------------------- */
.page-template .section-head .section-title { margin-top: 0.1rem; }

/* --- Card polish: a touch more lift on hover, consistent with the homepage -- */
.card { border-radius: var(--img-frame-radius); }
.card-icon { border-radius: 14px; }

/* --- TAP TARGETS (WCAG 2.5.5 / mobile): raise sub-44px controls ------------- */
/* Footer social icons: 42 -> 44px. */
.footer-social a { width: 44px; height: 44px; }
/* Header + footer logo links: lift the tappable box to 44px tall (logo stays
   centered + undistorted; the anchor is already an inline-flex, align-items:center). */
.brand { min-height: 44px; }
/* Homepage arrow + schedule text links: grow the hit box to 44px tall while
   holding visual rhythm with an offsetting negative margin. */
.ns-arrowlink {
  padding-block: 0.55rem; margin-block: -0.55rem;
  min-height: 44px; box-sizing: border-box;
}
.ns-schedule__link {
  padding-block: 0.6rem; margin-block: -0.5rem;
  min-height: 44px; box-sizing: border-box;
}

/* ============================================================================
   HARD MOBILE-OPTIMIZATION PASS  -  New Song Church (DEMO)   (2026-07-24)
   ----------------------------------------------------------------------------
   Desktop-first house rule: this block is the dedicated small-screen experience
   layer (audited at 390 / 360 / 414 + landscape). It compresses the sticky
   chrome, tightens section rhythm, brings the schedule strip closer under the
   hero, keeps the ministries bento a 2-col mosaic, and trims the diagonal wedges
   so they never eat content at narrow widths. Nothing here changes copy, colors,
   or the .ns-* contrast contract (geometry + rhythm only). Loaded last.
============================================================================ */
@media (max-width: 640px) {
  :root {
    /* Slimmer sticky header + tighter vertical rhythm reclaim viewport on phones. */
    --header-height: 62px;
    --section-y: clamp(2.6rem, 7vw, 3.4rem);
  }
  /* Header: trim the persistent sticky band + logo so it eats less of the fold. */
  .site-header .brand-logo { max-height: 2.35rem; }
  /* Demo ribbon: keep the honesty copy verbatim, just make it read tighter. */
  .demo-ribbon { padding: 0.45rem 0.9rem; font-size: 0.78rem; line-height: 1.35; }

  /* HERO: lift the schedule strip closer to a single scroll; keep the giant
     display type bold but give the media a sensible mobile height. */
  .ns-hero { padding-block: 1.25rem 0; }
  .ns-hero__copy { padding-block: 0.5rem 1.5rem; }
  .ns-hero__media img { min-height: clamp(238px, 52vw, 340px); }

  /* First-visit: tighter step rhythm + capped photo height. */
  .ns-fv__steps { gap: 1.75rem; }
  .ns-fv__media img { max-height: 300px; }

  /* Featured message + events: trim band padding on small screens. */
  .ns-message__inner { padding-block: clamp(2.2rem, 8vw, 3rem); gap: 1.5rem; }
  .ns-events__grid { gap: 1rem; }

  /* CTA: keep the coral wedge as an accent, not a content-eater; give the copy
     room and let the button be a comfortable full-width thumb target. */
  .ns-cta__wedge { width: clamp(38px, 11vw, 64px); opacity: 0.85; }
  .ns-cta__inner { gap: 1.1rem; padding-block: clamp(2.4rem, 9vw, 3.4rem); }
  .ns-cta__btn { align-self: stretch; text-align: center; justify-content: center; }
  .ns-cta__copy { max-width: 30ch; }
}

/* Very narrow (<=344px): if the 2-col bento tiles get cramped, ease the tag. */
@media (max-width: 344px) {
  .ns-tile__name { font-size: 1.06rem; }
  .ns-tile__tag  { font-size: 0.86rem; }
  .ns-bento { gap: 0.55rem; }
}

/* Landscape phones (short viewport): stop the hero media from pushing the copy
   and schedule strip entirely below the fold. */
@media (max-height: 460px) and (orientation: landscape) {
  .ns-hero { padding-block: 0.75rem 0; }
  .ns-hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: 1.25rem; align-items: center; }
  .ns-hero__media { margin-inline: 0; }
  .ns-hero__media img { min-height: clamp(180px, 40vh, 240px); clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
  .ns-hero__copy { padding-block: 0.25rem; }
}

/* ============================================================================
   MOBILE HEADER + DRAWER FIX (2026-07-24) — New Song 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 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, base.css). A non-none filter /
      backdrop-filter makes an element the containing block for its
      position:fixed descendants — so the drawer (inset:0 0 0 auto) sized itself
      to the ~63px header instead of the viewport and opened as a short
      translucent stub showing only the first item. 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);
  }
}