/* ══════════════════════════════════════════════════════════════════
   editorial.css · REDESIGN LAYER - loads last, wins on equal specificity
   "NŪR: Editorial" - asymmetric grid, hairline rules, flat paper.

   Replaces the v1 language of glass/glow/gradient with a printed
   publication language: rules, ledgers, mastheads, marginalia.
   ══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   1 · NAVIGATION - a masthead bar, not a floating glass pill
   ═══════════════════════════════════════════════════════════════════ */
#nav {
  padding: 14px var(--pad);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
  transition: padding var(--dur) var(--ease-soft),
              background var(--dur) var(--ease-soft),
              border-color var(--dur) var(--ease-soft);
}
#nav.scrolled {
  padding: 9px var(--pad);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-bottom-color: var(--rule-strong);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--maxw); margin: 0 auto;
}

.nav-logo { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.nav-logo-img { width: 40px; height: 40px; border-radius: var(--radius-sm); }

.nav-logo-text {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
  display: flex; flex-direction: column;
}
.nav-logo-text span {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-top: 3px;
}

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
.nav-links a:hover { color: var(--ink); background: var(--green-dim); }

/* Active = brass underscore rule, not a glow */
.nav-links a.active { color: var(--green); font-weight: 700; background: none; }
/* v1 drew a 5px centred dot here; its width/transform survive a partial
   override and shrink the rule to a stub, so both are reset. */
.nav-links a.active::after {
  content: '';
  position: absolute; left: 13px; right: 13px; bottom: 6px;
  width: auto;
  height: 2px;
  transform: none;
  border-radius: 2px;
  background: var(--brass);
  box-shadow: none;
}

.nav-links a.nav-donate {
  background: var(--green);
  color: var(--green-on);
  font-weight: 700;
  margin-left: var(--space-2);
  padding: 0 20px;
  border-radius: var(--radius);
}
.nav-links a.nav-donate:hover { background: var(--green-light); color: var(--green-on); }
.nav-links a.nav-donate.active::after { display: none; }

.theme-toggle, .nav-hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-soft),
              color var(--dur) var(--ease-soft),
              background var(--dur) var(--ease-soft);
}
.theme-toggle:hover, .nav-hamburger:hover {
  border-color: var(--green); color: var(--green); background: var(--green-dim);
}
.nav-hamburger { flex-direction: column; gap: 5px; }
.nav-hamburger span {
  display: block; width: 18px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   2 · HERO - asymmetric editorial masthead
   ═══════════════════════════════════════════════════════════════════ */
.hero {
  min-height: auto;
  padding: clamp(140px, 20vh, 210px) var(--pad) clamp(56px, 8vw, 96px);
  justify-content: flex-end;
}

.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 78% 8%, var(--brass-dim), transparent 62%),
    radial-gradient(70% 60% at 8% 96%, var(--green-dim), transparent 60%),
    var(--paper);
  z-index: -2;
}

/* Ruled paper - faint horizontal baseline grid, an editorial signature */
.hero-grid-pattern {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px);
  background-size: 100% 48px;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  z-index: -1;
}

/* ── Girih rosette ───────────────────────────────────────────────
   The hero's centrepiece. Sits in the right margin so it never
   competes with the masthead type. Three nested groups rotate at
   different speeds and directions, which reads as a slowly turning
   mashrabiya screen rather than a spinning logo. */
.hero-geo {
  position: absolute;
  top: 50%; right: clamp(-220px, -4vw, -30px);
  width: min(56vw, 660px);
  aspect-ratio: 1;
  transform: translateY(-48%);
  color: var(--brass);
  opacity: 0.30;
  filter: none;                       /* drop the v1 drop-shadow bloom */
  z-index: -1;
  pointer-events: none;
  animation: none;                    /* motion lives on the layers */
  mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 82%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 82%);
}
.hero-geo svg { width: 100%; height: 100%; display: block; overflow: visible; }

.geo-layer { transform-origin: 200px 200px; }
/* Density is deliberately graded: construction lines sit well back,
   the star reads first. Flattening these opacities turns the whole
   figure into visual noise. */
.geo-construct { animation: geo-spin 240s linear infinite;         opacity: 0.30; }
.geo-rosette   { animation: geo-spin 150s linear infinite reverse; opacity: 0.55; color: var(--green); }
.geo-star      { animation: geo-spin  96s linear infinite;         opacity: 0.95; }

@keyframes geo-spin { to { transform: rotate(360deg); } }

/* The rosette breathes very slightly - enough to feel alive, far too
   little to distract from reading. */
.geo-rosette polygon { animation: geo-breathe 14s var(--ease-soft) infinite; transform-origin: 200px 200px; }
@keyframes geo-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .geo-layer, .geo-rosette polygon { animation: none !important; }
}

.hero-content {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}

.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); }
.hero-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  flex: none;
}
.hero-eyebrow-text { color: var(--brass-text); }

.hero h1.display {
  font-size: clamp(46px, 8.2vw, 118px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.032em;
  max-width: 15ch;
}

.hero-sub {
  margin-top: var(--space-5);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--ink-2);
}

.hero-actions {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* Quick facts become a ruled ledger strip.
   Explicitly clears the v1 glass card (border/bg/blur/radius). */
.hero-badge {
  display: flex; flex-wrap: wrap;
  gap: 0;
  margin-top: var(--space-7);
  padding: var(--space-5) 0 0;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  max-width: 560px;
}
.hero-badge-item {
  flex: 1 1 0; min-width: 96px;
  padding-right: var(--space-5);
  border-right: 1px solid var(--rule);
}
.hero-badge-item:last-child { border-right: 0; }
.hero-badge-num {
  font-family: var(--font-display);
  font-size: 42px; font-weight: 500; line-height: 1;
  color: var(--green);
}
.hero-badge-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════
   3 · PRAYER STRIP - a ledger rail beneath the hero
   ═══════════════════════════════════════════════════════════════════ */
/* Clears the v1 floating glass card (negative margin, blur, shadow,
   pill radius) - this is now a flush ledger rail. */
.prayer-strip, .prayer-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--space-4) var(--pad);
  background: var(--paper-3);
  border: 0;
  border-block: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.prayer-strip > * { max-width: var(--maxw); }
.prayer-strip-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-text);
  flex: none;
}
.prayer-strip-times {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: baseline;
}

/* ═══════════════════════════════════════════════════════════════════
   4 · CARDS - flat paper, hairline borders, no glass
   ═══════════════════════════════════════════════════════════════════ */
.programs-grid, .programs-full-grid, .values-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.programs-grid   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.programs-full-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.values-grid     { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.program-card, .program-card-full, .value-card {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: none;
  overflow: visible;
  transition: border-color var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft),
              transform var(--dur) var(--ease-soft);
}
.program-card:hover, .program-card-full:hover, .value-card:hover {
  border-color: var(--green-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Brass top-rule appears on hover - a printed accent */
.program-card::before, .program-card-full::before {
  content: '';
  position: absolute; top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--brass);
  border-radius: var(--radius) var(--radius) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.program-card:hover::before, .program-card-full:hover::before { transform: scaleX(1); }

.program-icon, .pcf-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid var(--green-line);
  font-size: 0;                       /* kills any stray emoji glyph */
  margin-bottom: var(--space-3);
}
.program-icon .icon, .pcf-icon .icon { width: 22px; height: 22px; }
.pcf-icon.gold { background: var(--brass-dim); color: var(--brass-text); border-color: var(--brass-line); }

.program-title, .pcf-title {
  font-family: var(--font-display);
  font-size: 25px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.program-desc, .pcf-desc {
  font-size: 15px; line-height: 1.72;
  color: var(--ink-2);
}
.program-tag {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green);
}

.pcf-header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.pcf-header .pcf-icon { margin-bottom: 0; }
.pcf-badge {
  display: inline-block; margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid var(--green-line);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.pcf-badge.gold { color: var(--brass-text); background: var(--brass-dim); border-color: var(--brass-line); }

.pcf-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.pcf-meta span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-3);
}

/* Values - oversized numeral in the margin */
.value-card { padding-top: var(--space-6); }
.value-num {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-family: var(--font-display);
  font-size: 46px; font-weight: 500; line-height: 1;
  color: var(--brass);
  opacity: 0.30;
}
.value-card h3 { margin-bottom: var(--space-2); }
.value-card p { font-size: 15px; line-height: 1.72; color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════════════
   5 · HOME "ABOUT" - asymmetric editorial split
   ═══════════════════════════════════════════════════════════════════ */
.home-about, .about-detail-grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.home-about       { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.about-detail-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.about-visual-block {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.av-box {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper-3);
  color: var(--green);
}
.av-box-2 { background: var(--brass-dim); border-color: var(--brass-line); color: var(--brass-text); }
.av-icon { font-size: 0; }
.av-icon .icon { width: 40px; height: 40px; }
.av-quote {
  grid-column: 1 / -1;
  padding: var(--space-4);
  border-left: 2px solid var(--brass);
  background: var(--paper-3);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.av-quote p {
  font-family: var(--font-display);
  font-style: italic; font-size: 18px; line-height: 1.5;
  color: var(--ink);
}

/* Quote block - a set epigraph */
.quote-block {
  border: 0;
  border-left: 2px solid var(--brass);
  background: none;
  border-radius: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  margin-top: var(--space-5);
}
.quote-block .q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.48;
  color: var(--ink);
}
.quote-block .cite {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-text);
}

/* ═══════════════════════════════════════════════════════════════════
   6 · PRAYER TIMES - a printed schedule table
   ═══════════════════════════════════════════════════════════════════ */
.prayer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin-top: var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}
.prayer-card {
  text-align: left;
  padding: var(--space-4);
  border-radius: 0;
  background: var(--paper);
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur) var(--ease-soft);
}
.prayer-card:hover { background: var(--green-dim); transform: none; }
/* renderPrayer() sets .current (prayer in progress) and .next */
.prayer-card.current {
  background: var(--green-dim);
  box-shadow: inset 3px 0 0 var(--green);
}
.prayer-card.next { box-shadow: inset 3px 0 0 var(--brass); }
.p-name {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--brass-text);
}
.p-arabic {
  font-family: var(--font-arabic);
  font-size: 20px; color: var(--ink-3);
  margin-top: var(--space-1);
  line-height: 1.4;
}
.p-time {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 500; line-height: 1.1;
  color: var(--ink);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.p-iqama {
  font-size: 12px; color: var(--ink-3);
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}

.jumuah-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius);
  border: 1px solid var(--brass-line);
  background: var(--brass-dim);
}
.jc-right { display: flex; gap: var(--space-5); }
.jc-item { text-align: right; }
.jc-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.jc-value {
  font-family: var(--font-display);
  font-size: 27px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}

/* Block, not flex: this note contains an icon mid-sentence, and flex
   would eject it from the text flow to the end of the line. */
.prayer-note-box {
  display: block;
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--green);
  background: var(--paper-3);
  font-size: 14px; line-height: 1.7;
  color: var(--ink-2);
}

/* ═══════════════════════════════════════════════════════════════════
   7 · EVENTS
   ═══════════════════════════════════════════════════════════════════ */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.event-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft),
              transform var(--dur) var(--ease-soft);
}
.event-card:hover {
  border-color: var(--green-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.event-card-date {
  display: flex; align-items: baseline; gap: 6px;
  padding: var(--space-3) var(--space-4);
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.event-day {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600; line-height: 1; color: var(--green);
}
.event-month, .event-month-year, .event-year {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.event-body { padding: var(--space-4); flex: 1; }
.event-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.012em;
  color: var(--ink); margin-bottom: var(--space-2);
}
.event-desc { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.event-time-loc {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-3);
}
.event-category {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-text);
  background: var(--brass-dim);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  margin-bottom: var(--space-2);
}

.events-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.filter-btn {
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur) var(--ease-soft);
}
.filter-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.filter-btn.active {
  background: var(--green); color: var(--green-on);
  border-color: var(--green); font-weight: 700;
}

.event-search-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-4);
  min-height: 52px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.event-search-bar:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim);
}
.event-search-bar > svg { color: var(--ink-3); flex: none; }
.event-search-input {
  flex: 1; border: 0; background: none; outline: none;
  color: var(--ink); font-size: 16px;
}
.event-search-input::placeholder { color: var(--ink-4); }

/* ═══════════════════════════════════════════════════════════════════
   8 · DONATE
   ═══════════════════════════════════════════════════════════════════ */
.donate-amounts-large {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.amount-card {
  text-align: center;
  padding: var(--space-4) var(--space-3);
  min-height: 92px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  cursor: pointer;
  transition: all var(--dur) var(--ease-soft);
}
.amount-card:hover { border-color: var(--green); background: var(--green-dim); }
.amount-card.selected {
  border-color: var(--green);
  border-width: 2px;
  background: var(--green-dim);
  box-shadow: var(--shadow-sm);
}
.ac-num {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600; color: var(--ink);
}
.amount-card.selected .ac-num { color: var(--green); }
.ac-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--space-1);
}

.bank-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-3);
  overflow: hidden;
}
.bank-row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
}
.bank-row:last-child { border-bottom: 0; }
.bank-row .k {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.bank-row .v {
  font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.secure-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: 12px; color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════════
   9 · FORMS
   ═══════════════════════════════════════════════════════════════════ */
.panel {
  padding: var(--space-5);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}
.form-input {
  width: 100%;
  min-height: 48px;
  padding: 13px 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.form-input::placeholder { color: var(--ink-4); }
.form-input:hover { border-color: var(--ink-4); }
.form-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim);
}
.form-input[aria-invalid="true"], .form-input.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}
textarea.form-input { min-height: 130px; resize: vertical; line-height: 1.65; }
select.form-input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) center, calc(100% - 13px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.contact-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}
.contact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--green-dim);
  border: 1px solid var(--green-line);
  color: var(--green);
  font-size: 0;
}
.contact-icon .icon { width: 19px; height: 19px; }
.contact-detail-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.contact-detail-value { color: var(--ink); font-size: 15px; line-height: 1.6; margin-top: 3px; }
.contact-detail-value a { color: var(--green-light); text-decoration: none; }
.contact-detail-value a:hover { text-decoration: underline; }

.map-frame {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--space-3);
}

.contact-success { text-align: center; padding: var(--space-6) var(--space-4); }
.contact-success .star { font-size: 38px; color: var(--brass); line-height: 1; margin-bottom: var(--space-3); }

/* ═══════════════════════════════════════════════════════════════════
   10 · GALLERY
   ═══════════════════════════════════════════════════════════════════ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  overflow: hidden;
  cursor: pointer;
  background: var(--paper-3);
  transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.gallery-item:hover { border-color: var(--brass); box-shadow: var(--shadow-md); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════════
   11 · FOOTER - a colophon
   ═══════════════════════════════════════════════════════════════════ */
footer {
  background: var(--paper-3);
  border-top: 2px solid var(--rule-heavy);
  padding: clamp(56px, 8vw, 96px) var(--pad) var(--space-5);
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: clamp(32px, 5vw, 64px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; color: var(--ink);
  cursor: pointer; line-height: 1.1;
}
.footer-logo span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--brass-text);
  margin-top: 5px;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: var(--space-3);
}
.footer-col a { color: var(--ink-2); }
.footer-col a:hover { color: var(--green); text-decoration: underline; }
.footer-links a {
  display: inline-flex; align-items: center;
  min-height: 32px;
}
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  max-width: var(--maxw);
  margin: var(--space-6) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.footer-bottom p { color: var(--ink-3); font-size: 12px; }
.footer-ack { max-width: 56ch; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════
   12 · CHROME - toasts, banners, overlays, tab bar
   ═══════════════════════════════════════════════════════════════════ */
.announcement-banner {
  background: var(--brass-dim);
  border-bottom: 1px solid var(--brass-line);
  color: var(--ink);
}
/* v1 hard-coded a 44px nav offset. The banner wraps to two (or three)
   lines on narrow viewports, so the offset is measured at runtime and
   published as --ann-h by ui.js. 44px stays as the fallback. */
body.has-announcement #nav { top: var(--ann-h, 44px); }
.announcement-icon { color: var(--brass-text); font-size: 0; }
.announcement-icon .icon { width: 18px; height: 18px; }

.toast {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.toast.error   { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--green); }
.toast-title { font-weight: 700; color: var(--ink); }
.toast-message { color: var(--ink-2); font-size: 14px; }

.reading-progress-fill, .page-transition-bar { background: var(--brass); }

.mobile-menu {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.mobile-menu a {
  display: flex; align-items: center;
  min-height: 52px;
  padding: 0 var(--pad);
  font-family: var(--font-display);
  font-size: 21px; font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.mobile-menu a:hover, .mobile-menu a.active { color: var(--green); background: var(--green-dim); }

.mobile-tab-bar {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-bar-item { min-height: 52px; color: var(--ink-3); }
.tab-bar-item.active { color: var(--green); }
.tab-label { font-size: 10px; letter-spacing: 0.06em; }

.scroll-to-top {
  width: 48px; height: 48px;
  background: var(--green);
  color: var(--green-on);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}
.scroll-to-top:hover { background: var(--green-light); }

.quick-actions-trigger {
  background: var(--green);
  color: var(--green-on);
  box-shadow: var(--shadow-md);
}
.quick-actions-trigger:hover { background: var(--green-light); }
.quick-actions-menu {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.quick-action-item {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.quick-action-item:hover { background: var(--green-dim); color: var(--green); }

.lightbox-overlay { background: color-mix(in srgb, #06120E 92%, transparent); }
.lightbox-close, .lightbox-nav {
  min-width: 48px; min-height: 48px;
  background: color-mix(in srgb, #FBF8F1 12%, transparent);
  border: 1px solid rgba(251,248,241,0.28);
  border-radius: var(--radius);
  color: #FBF8F1;
}
.lightbox-close:hover, .lightbox-nav:hover { background: color-mix(in srgb, #FBF8F1 24%, transparent); }
.lightbox-caption, .lightbox-counter { color: rgba(251,248,241,0.82); }

/* Admin panel - utility surface, quiet and dense */
.admin-panel {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.admin-header { border-bottom: 1px solid var(--rule); }
.admin-title { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.admin-input {
  min-height: 44px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
}
.admin-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-dim); outline: none; }
.admin-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.admin-section-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-text);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule);
}
/* ── Admin trigger ───────────────────────────────────────────────
   v1 hid this entirely below 900px (`.admin-trigger { display:none }`)
   and set it to opacity 0.5 on desktop, so the only way into the
   events admin was invisible on every phone and tablet and easy to
   miss otherwise. Committee members manage events from their phones.
   Now: always present, full opacity, 44px target, and lifted clear of
   the mobile tab bar. */
.admin-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  position: fixed;
  bottom: 26px; left: 26px;
  width: 44px; height: 44px;
  z-index: 940;
  opacity: 1;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--ink-2);
  box-shadow: var(--shadow-md);
  transition: color var(--dur) var(--ease-soft),
              border-color var(--dur) var(--ease-soft),
              background var(--dur) var(--ease-soft);
}
.admin-trigger:hover {
  opacity: 1;
  color: var(--green);
  border-color: var(--green);
  background: var(--green-dim);
}

@media (max-width: 900px) {
  /* Override v1's display:none - same specificity, but this file
     loads last, and the media query must be restated to win. */
  .admin-trigger { display: inline-flex; bottom: 84px; }
}
body.has-tab-bar .admin-trigger { bottom: 84px; }

/* Events failed-to-load state - honest, actionable, not a blank page */
.events-empty {
  grid-column: 1 / -1;
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--ink-2);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
}
.events-error { border-style: solid; border-color: var(--brass-line); background: var(--brass-dim); }
.events-error .icon { color: var(--brass-text); margin: 0 auto var(--space-3); }
.events-error strong { color: var(--ink); font-size: 17px; }
.events-error p { margin-bottom: var(--space-2); }
.events-error .btn { margin-top: var(--space-4); }
.events-error a { color: var(--green-light); font-weight: 600; }

/* ── Events loading state (animated) ─────────────────────────────── */
.events-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  color: var(--ink-2);
}
.events-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--rule-strong);
  border-top-color: var(--green);
  animation: spin-slow 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .events-spinner { animation-duration: 2.4s; }
}

/* ── 404 page action buttons ─────────────────────────────────────── */
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}
.notfound-actions .btn { text-decoration: none; }

/* ── Iqamah rule editor (admin only) ─────────────────────────────── */
.iq-row {
  display: grid;
  grid-template-columns: 92px 168px minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}
.iq-row:last-child { border-bottom: 0; }
.iq-name {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-text);
}
.iq-value { display: flex; align-items: center; gap: var(--space-2); }
.iq-value .admin-input { min-height: 42px; }
.iq-offset { width: 84px; }
.iq-fixed  { width: 100%; max-width: 180px; }
.iq-unit   { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.iq-mode   { min-height: 42px; }

.iq-preview {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--ink-3);
  padding-left: 2px;
}
.iq-preview.ok   { color: var(--green); }
.iq-preview.warn { color: var(--brass-text); font-weight: 600; }

/* The preview always gets its own row. A viewport media query is the
   wrong tool here: this editor lives inside a narrow modal, so the
   panel is far smaller than the viewport and a side-by-side column
   gets squeezed to a few characters wide. */
@media (max-width: 560px) {
  .iq-row { grid-template-columns: minmax(0, 1fr); }
  .iq-fixed { max-width: none; }
}

.admin-warn-error {
  border-color: var(--danger);
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.admin-warn-error strong { color: var(--danger); }

/* Iqamah sanity warnings (admin only) */
.admin-warn {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--brass-line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  background: var(--brass-dim);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.admin-warn strong { display: flex; align-items: center; gap: 8px; color: var(--brass-text); }
.admin-warn ul { margin: var(--space-2) 0 var(--space-2) var(--space-4); }
.admin-warn li { margin-bottom: 4px; }
.admin-warn span { color: var(--ink-2); font-size: 13px; }
.admin-warn .icon { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════════
   13 · NEXT-EVENT BANNER
   ═══════════════════════════════════════════════════════════════════ */
/* NOTE: display is deliberately NOT set here. events.js toggles this
   banner with a .visible class on top of a v1 `display:none` base -
   declaring display on the bare selector would pin it permanently
   open even when there is no upcoming event. */
.next-event-banner {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  max-width: var(--maxw);
  margin: var(--space-6) auto;
  padding: var(--space-5) var(--pad);
  background: var(--green-dim);
  border: 1px solid var(--green-line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
}
.next-event-banner.visible { display: grid; }
.next-event-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--brass-text);
}
.next-event-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px); font-weight: 600; color: var(--ink);
  margin-top: var(--space-2);
}
.next-event-meta { font-size: 14px; color: var(--ink-2); margin-top: var(--space-1); }
.next-event-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--green); cursor: pointer;
}
.next-event-cta:hover { text-decoration: underline; }
.next-event-countdown {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 42px); font-weight: 600;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   14 · PROGRAMS CTA
   ═══════════════════════════════════════════════════════════════════ */
/* v1 was a saturated green gradient band with hardcoded dark text.
   Those colour declarations survive the background change and go
   invisible on paper, so they're all restated here. */
.programs-cta {
  background: var(--paper-3);
  border-block: 1px solid var(--rule);
  border-top-color: var(--rule);
  border-bottom-color: var(--rule);
  padding: clamp(56px, 8vw, 96px) var(--pad);
}
.programs-cta-inner { max-width: var(--maxw-text); margin: 0 auto; text-align: center; }
.programs-cta h3            { color: var(--ink); }
.programs-cta p             { color: var(--ink-2); }
.programs-cta .btn          { background: var(--green); color: var(--green-on); }
.programs-cta .btn:hover    { background: var(--green-light); }

/* v1 decorative radial blob on the corner of every full program card */
.program-card-full::after   { content: none; }
.programs-cta-inner .pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 7px 16px;
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-pill);
  background: var(--brass-dim);
  color: var(--brass-text);
  font-size: 13px; font-weight: 600;
  margin-bottom: var(--space-4);
}
.programs-cta-inner h3 { font-size: clamp(28px, 4vw, 44px); margin-bottom: var(--space-3); }
.programs-cta-inner p { color: var(--ink-2); margin-bottom: var(--space-5); }

/* ═══════════════════════════════════════════════════════════════════
   15 · EVENT DETAIL
   ═══════════════════════════════════════════════════════════════════ */
.event-detail-hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(104px, 15vh, 160px) var(--pad) var(--space-5);
  border-bottom: 2px solid var(--rule-heavy);
}
.event-detail-back {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
  background: none; border: 0;
  color: var(--green); font-weight: 600; font-size: 14px;
  cursor: pointer; margin-bottom: var(--space-4);
}
.event-detail-back:hover { text-decoration: underline; }
.event-detail-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1); font-weight: 500;
  line-height: var(--lh-display); letter-spacing: -0.022em;
  color: var(--ink); margin-top: var(--space-3);
}
.event-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.event-detail-info {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.edi-row {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
}
.edi-row:last-child { border-bottom: 0; }
.edi-icon { color: var(--green); font-size: 0; flex: none; }
.edi-icon .icon { width: 19px; height: 19px; }
.edi-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}
.edi-value { color: var(--ink); font-size: 15px; margin-top: 2px; }
.event-detail-desc {
  margin-top: var(--space-5);
  font-size: var(--fs-lead); line-height: var(--lh-body);
  color: var(--ink-2); max-width: var(--measure);
}

/* ═══════════════════════════════════════════════════════════════════
   16 · SKELETONS
   ═══════════════════════════════════════════════════════════════════ */
.skeleton, .skeleton-event, .skeleton-gallery {
  background: linear-gradient(90deg, var(--paper-3) 25%, var(--paper-4) 50%, var(--paper-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ═══════════════════════════════════════════════════════════════════
   16b · ICON SIZING - every emoji became an <svg class="icon">, which
   defaults to 1em. Containers that used to size a glyph via font-size
   need an explicit box.
   ═══════════════════════════════════════════════════════════════════ */
.theme-toggle .icon,
.nav-hamburger .icon        { width: 19px; height: 19px; }
.theme-toggle #themeIcon    { display: inline-flex; }

.tab-icon                   { font-size: 0; color: inherit; }
.tab-icon .icon             { width: 21px; height: 21px; }

.quick-action-icon          { font-size: 0; display: inline-flex; color: inherit; }
.quick-action-icon .icon    { width: 19px; height: 19px; }
.quick-actions-trigger .icon { width: 22px; height: 22px; }

.admin-trigger .icon        { width: 19px; height: 19px; }
.admin-close .icon,
.announcement-close .icon,
.event-search-clear .icon,
.lightbox-close .icon       { width: 18px; height: 18px; }

.scroll-to-top .icon        { width: 20px; height: 20px; }

.filter-btn                 { display: inline-flex; align-items: center; gap: 8px; }
.filter-btn .icon           { width: 16px; height: 16px; }
.filter-btn span            { display: inline-flex; align-items: center; gap: 8px; }

.prayer-note-box .icon      { width: 17px; height: 17px; color: var(--green);
                              display: inline-block; vertical-align: -3px; margin-right: 5px; }
.pcf-meta .icon             { width: 14px; height: 14px; }
.contact-success .star      { font-size: 0; display: flex; justify-content: center; color: var(--brass); }
.btn .icon                  { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════════════════════════
   16c · LEGIBILITY & TARGET FLOORS
   Audit fixes: v1 shipped 9–10px micro-labels and sub-44px hit areas.
   Tracked uppercase mono is legible small, but not below 11px - and
   an ageing congregation is a core audience here.
   ═══════════════════════════════════════════════════════════════════ */
.nav-logo-text span                        { font-size: 10px; }
.prayer-strip-times .ps-name               { font-size: 11px; color: var(--brass-text); }
.next-event-countdown .countdown-label     { font-size: 11px; color: var(--ink-3); }
.next-event-tag                            { font-size: 11px; }
.pcf-badge, .event-category, .ac-label,
.edi-label, .jc-label, .contact-detail-label,
.admin-label, .footer-logo span            { font-size: 11px; }

.next-event-countdown .countdown-unit {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
/* class is .countdown-number (set in events.js), not .countdown-num */
.next-event-countdown .countdown-number {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; color: var(--green);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Hit areas - 44×44 minimum on everything interactive */
.announcement-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--ink-2); cursor: pointer;
}
.announcement-close:hover { background: var(--brass-dim); color: var(--ink); }

.footer-col a, .footer-links a, .footer-hours a {
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.footer-col p { margin-bottom: 0; }
.footer-logo { min-height: 44px; }

/* ═══════════════════════════════════════════════════════════════════
   17 · RESPONSIVE - mobile-first collapse points
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .home-about, .about-detail-grid, .contact-grid, .event-detail-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-geo { right: -22%; opacity: 0.10; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: inline-flex; }

  .hero { padding-top: clamp(112px, 16vh, 150px); }
  .hero h1.display { font-size: clamp(38px, 11vw, 60px); max-width: none; }
  .hero-badge { gap: var(--space-3) 0; }

  .jumuah-card, .next-event-banner { grid-template-columns: minmax(0, 1fr); }
  .jc-item, .jc-right { text-align: left; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .prayer-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  .btn { width: 100%; }
  .hero-actions .btn { width: auto; flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .prayer-grid { grid-template-columns: minmax(0, 1fr); }
  .donate-amounts-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════
   18 · PRINT - prayer times & contact are the things people print
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  #nav, footer, .mobile-tab-bar, .scroll-to-top, .theme-toggle,
  .announcement-banner, .hero-geo, .hero-grid-pattern, body::before { display: none !important; }
  body { background: #fff; color: #000; }
  .page { display: block !important; }
  .section, .section-dark { background: none; border: 0; padding: 16px 0; }
}