/* ======================================================
   ICB Wayland — Modern Redesign
   Design tokens, reset, and shared component styles
   ====================================================== */


/* ---------- Tokens ---------- */
:root {
  /* Forest greens */
  --green-900: #0F3323;
  --green-800: #1A4530;
  --green-700: #2A6B48;
  --green-600: #3C8F63;
  --green-100: #DCEDE1;
  --green-50:  #F1F7F1;

  /* Brass gold */
  --gold-600:  #8C6A38;
  --gold-500:  #C08F45;
  --gold-400:  #E0B871;
  --gold-100:  #F6EAD2;

  /* Warm paper neutrals, no blue tint */
  --gray-900: #1B241C;
  --gray-700: #453F36;
  --gray-500: #726B5F;
  --gray-300: #DAD4C7;
  --gray-100: #F2EEE4;
  --gray-50:  #F9F7F2;

  --white: #FDFBF7;

  --font-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 18px rgba(0,0,0,.09);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.12);

  --transition: 200ms ease;

  --nav-height: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 17px base — easier reading for all ages */
html { scroll-behavior: smooth; font-size: 17px; }

body {
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ---------- Accessibility ---------- */
/* Available to screen readers, removed from the visual layout. Used for
   labels on controls whose purpose is already obvious to sighted users. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--green-800);
  color: var(--white);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  font-size: .95rem;
  transition: top 150ms ease;
}
.skip-link:focus { top: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Print (prayer schedules etc.) ---------- */
@media print {
  .nav, .footer, .prayer-bar, .hero, .page-hero,
  .nav__mobile, .btn, .verse-banner, .skip-link,
  [data-announcement], .filter-bar { display: none !important; }
  body { display: block; font-size: 12pt; color: #000; }
  .section { padding-block: 1rem; }
  .prayer-table th { background: #eee !important; color: #000 !important; }
  a::after { content: none !important; }
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.2;
  color: var(--gray-900);
  text-wrap: balance;
}
/* Sizes run a step above the old bold scale so the lighter weight keeps its presence */
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.65rem, 3.3vw, 2.35rem); line-height: 1.14; letter-spacing: -.012em; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p  { color: var(--gray-700); }

/* ---------- Layout helpers ---------- */
.container {
  width: min(1200px, 100% - 3rem);
  margin-inline: auto;
}
.section {
  padding-block: 5rem;
}
.section--alt {
  background: var(--gray-50);
}
.section__header {
  text-align: center;
  margin-bottom: 3rem;
}
/* Small uppercase labels are mono in two sizes only: .72rem for a kicker above a
   heading, .68rem for a data label inside a component. */
.section__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: .75rem;
}
.section__title {
  margin-bottom: .75rem;
}
.section__subtitle {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--gray-700); /* raised from gray-500 for readability */
  font-size: 1.05rem;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--green-800);
  line-height: 1.25;
}
.nav__logo-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.nav__logo-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 500;
  color: var(--gray-500);
  letter-spacing: .04em;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: .2rem;
}
.nav__link {
  font-size: .88rem;
  font-weight: 500;
  color: var(--gray-700);
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  /* Never let a nav item wrap. The Support Us pill in particular breaks out
     of its rounded background if the label splits over two lines. */
  white-space: nowrap;
}
.nav__link:hover,
.nav__link.active {
  background: var(--green-50);
  color: var(--green-800);
}
/* Donate CTA — must win over .nav__link.active/:hover so the
   button never ends up white-on-pale-green and unreadable. */
.nav__cta,
.nav__link.nav__cta,
.nav__link.nav__cta.active,
.nav__link.nav__cta:hover {
  font-size: .88rem;
  font-weight: 600;
  background: var(--green-800);
  color: var(--white) !important;
  padding: .55rem 1.2rem;
  border-radius: var(--radius-full);
  transition: background var(--transition);
  margin-left: .5rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__cta:hover,
.nav__link.nav__cta:hover { background: var(--green-700); }
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .6rem;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gray-900);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.nav__mobile {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  padding: 1rem 1.5rem 1.75rem;
  gap: .25rem;
  box-shadow: var(--shadow-md);
}
.nav__mobile.open { display: flex; }
/* Larger tap targets in mobile nav for elderly users */
.nav__mobile .nav__link { display: block; padding: .85rem .75rem; font-size: 1.05rem; font-weight: 500; }
.nav__mobile .nav__cta { display: block; text-align: center; margin: .75rem 0 0; padding: 1rem; border-radius: var(--radius-md); font-size: 1.05rem; }

/* ---------- Buttons — generous padding for easy tapping ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: 1rem;
  padding: .85rem 1.75rem;
  border-radius: var(--radius-full);
  transition: all var(--transition);
  cursor: pointer;
  min-height: 48px; /* WCAG minimum touch target */
}
.btn--primary {
  background: var(--green-800);
  color: var(--white);
}
.btn--primary:hover { background: var(--green-700); }
.btn--outline {
  border: 2px solid var(--green-800);
  color: var(--green-800);
}
.btn--outline:hover { background: var(--green-50); }
.btn--gold {
  background: var(--gold-500);
  color: var(--white);
}
.btn--gold:hover { background: var(--gold-600); }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__body { padding: 1.75rem; }
.card__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: .4rem;
}
.card__title { font-size: 1.1rem; margin-bottom: .5rem; }
.card__text { font-size: .95rem; color: var(--gray-700); line-height: 1.7; }

/* ---------- Prayer bar ---------- */
.prayer-bar {
  background: var(--green-800);
  color: var(--white);
  padding: .9rem 0;
  overflow: hidden;
}
.prayer-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.prayer-bar__inner::-webkit-scrollbar { display: none; }
.prayer-bar__label {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  flex-shrink: 0;
}
.prayer-bar__times {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  justify-content: center;
}
.prayer-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  white-space: nowrap;
}
.prayer-time__name {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.prayer-time__value {
  font-size: 1rem;
  font-weight: 700;
}
.prayer-time--next .prayer-time__name { color: var(--gold-400); }
.prayer-time--next .prayer-time__value { color: var(--gold-400); font-size: 1.05rem; }
.prayer-bar__link {
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255,255,255,.85);
  transition: color var(--transition);
  flex-shrink: 0;
}
.prayer-bar__link:hover { color: var(--white); }
@media (max-width: 640px) {
  .prayer-bar__inner {
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 60%, var(--green-600) 100%);
  overflow: hidden;
}
.hero__pattern {
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30Z' fill='none' stroke='white' stroke-width='1'/%3E%3Cpath d='M30 10 L50 30 L30 50 L10 30Z' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.hero__content {
  position: relative;
  z-index: 1;
  padding-block: 5rem;
  max-width: 680px;
}
.hero__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 1rem;
}
.hero__title {
  color: var(--white);
  margin-bottom: 1.25rem;
}
.hero__subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,.92);
  margin-bottom: 2rem;
  max-width: 50ch;
  line-height: 1.7;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__actions .btn--outline {
  border-color: rgba(255,255,255,.55);
  color: var(--white);
}
.hero__actions .btn--outline:hover { background: rgba(255,255,255,.12); }

/* ---------- Stats strip ---------- */
.stats {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 2rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--gray-100);
}
.stat:last-child { border-right: none; }
.stat__value {
  font-family: var(--font-serif);
  font-size: 2.35rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--green-800);
  line-height: 1;
  margin-bottom: .6rem;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-700);
}

/* ---------- Events grid ---------- */
/* Sizing lives on the track, not the card.
   
   The obvious fix for "a lone card stretches across the whole page" is to cap
   the card (max-width) and centre it (margin-inline:auto). That is wrong here,
   and measurably so: auto margins make a grid item shrink to fit its own
   content instead of filling its track, so card width started following title
   length. Two real events rendered at 420px and 226px, each floating in the
   middle of its own 587px cell, which reads as mismatched cards at uneven
   gaps.
   
   Capping the track instead fixes both problems at once. A fixed max in
   minmax() (rather than 1fr) means a track can never grow past 420px however
   few cards there are, so a single card cannot balloon. Cards then stretch to
   their track as grid items normally do, so every card in a row is exactly the
   same width whatever its content. justify-content:center puts the leftover
   space outside the row rather than between the cards, keeping every gap equal
   to the gap value.
   
   380px for the max is chosen off the container, not by eye: it is the widest
   track that still fits three columns in the 1200px container
   ((1200 + 24) / (380 + 24) = 3.03), so a third event completes a row instead
   of stranding itself on a second one. It also suits both card kinds. A text
   card's title ("Quran In Conversation With Dr. Mustafa Khattab") wraps to
   2 lines anywhere from 340px to 500px, so 380px costs nothing there; and a
   portrait flyer lands about 670px tall, near the size this looked right at
   before, where 420px pushed it to 718px.
   
   align-items:start so a plain text card next to a tall flyer card keeps its
   own height instead of stretching to match. */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: center;
  /* Deliberately not align-items:start. Cards stretch to match the tallest in
     their row, so a two-line title next to a one-line title gives two cards of
     equal height rather than a stepped edge. */
  gap: 1.5rem;
}
/* The card is a 2-row subgrid of .events-grid rather than a self-contained
   flex box, so its media area and its text area line up with every other card
   in the row. As a flex box each card divided its own height independently:
   the poster card split 474/149 between picture and text while the panel card
   beside it split 380/242, so the two white bands started at different heights
   and the row read as misaligned. Sharing the parent's rows means one row
   height for all the pictures and one for all the text. */
.event-card {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-row: span 2;
  grid-template-rows: subgrid;
  /* A subgrid inherits the parent's gap, which would open the 1.5rem meant to
     separate cards between the poster and the text inside each card. The gap
     belongs between cards, not within one. */
  gap: 0;
  transition: box-shadow var(--transition), transform var(--transition);
}
.event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* The media area at the top of every card. A poster is shown whole, at its own
   proportions, rather than cropped to a strip: cropping read as careless on a
   flyer someone designed, and the detail at the foot of a poster is often the
   part people need.
   
   That makes a poster card tall, so the card beside it stretches to match and
   its green panel grows into the space rather than a white void opening up.
   Growth matters here: with a fixed height the panel could not follow its card
   when the grid stretched it, and the leftover space surfaced as a 24px white
   band between the panel and the date block. */
.event-card__flyer {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  line-height: 0;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
.event-card__flyer img {
  display: block;
  width: 100%;
  height: auto;
}
/* An event with no poster gets the site's green with the same diamond motif as
   the homepage hero, so the card reads as designed rather than as one missing
   its picture. min-height keeps it a real panel when nothing taller is forcing
   it to grow. */
.event-card__flyer--blank {
  min-height: 240px;
  background-color: var(--green-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30Z' fill='none' stroke='white' stroke-opacity='0.10' stroke-width='1'/%3E%3Cpath d='M30 10 L50 30 L30 50 L10 30Z' fill='none' stroke='white' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  border-bottom: none;
}
.event-card__date {
  grid-column: 1;
  grid-row: 2;
  background: var(--green-800);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem .75rem;
  text-align: center;
}
.event-card__month { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: .3rem; }
.event-card__day { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.event-card__body {
  grid-column: 2;
  grid-row: 2;
  padding: 1.35rem 1.25rem 1.35rem 1rem;
  /* Centred, so the shorter card in a row wears its extra height as
     breathing room instead of a gap below the text. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.event-card__tag {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: .4rem;
}
.event-card__title { font-family: var(--font-serif); font-size: 1.22rem; font-weight: 500; margin-bottom: .4rem; line-height: 1.25; letter-spacing: -.005em; color: var(--gray-900); text-wrap: balance; }
.event-card__meta { font-size: .88rem; color: var(--gray-700); line-height: 1.5; }

/* ---------- Quick links ---------- */
.quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.quicklink {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 1.75rem 1rem;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-md);
  text-align: center;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  min-height: 120px;
  flex: 0 0 240px;
}
@media (max-width: 560px) {
  .quicklink { flex-basis: 100%; }
}
.quicklink:hover {
  border-color: var(--green-700);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.quicklink__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-800);
  transition: background var(--transition), color var(--transition);
}
.quicklink:hover .quicklink__icon { background: var(--green-800); color: var(--white); }
.quicklink__label { font-size: .92rem; font-weight: 600; color: var(--gray-900); line-height: 1.3; }
.quicklink__go {
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  transition: all var(--transition);
}
.quicklink:hover .quicklink__go { color: var(--gold-600); transform: translate(2px, -2px); }

/* ---------- Verse banner — redesigned for readability ---------- */
.verse-banner {
  background: var(--gold-100);
  border-top: 3px solid var(--gold-300, #ddb96a);
  border-bottom: 3px solid var(--gold-300, #ddb96a);
  padding: 4rem 0;
  text-align: center;
}
.verse-banner__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  font-style: italic;
  font-weight: 400;
  color: var(--green-900);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.verse-banner__ref {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--gold-600);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- About snippet ---------- */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.about-split__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--green-900);
  box-shadow: var(--shadow-md);
}
.about-split__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-split__label { color: var(--gold-600); font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .75rem; }
.about-split__title { margin-bottom: 1rem; }
.about-split__body { color: var(--gray-700); margin-bottom: 1.5rem; line-height: 1.85; font-size: 1.02rem; }
.about-split__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Prayer page table ---------- */
.prayer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.prayer-table th {
  background: var(--green-800);
  color: var(--white);
  text-align: left;
  padding: 1rem 1.25rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.prayer-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.prayer-table th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
.prayer-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.prayer-table tr:last-child td { border-bottom: none; }
.prayer-table tr:hover td { background: var(--green-50); }
.prayer-table__highlight td { background: var(--gold-100) !important; font-weight: 600; }

/* ---------- Page hero ---------- */
.page-hero {
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
  padding: 3.25rem 0 3rem;
  color: var(--white);
}
.page-hero__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: .75rem;
}
.page-hero__title { color: var(--white); margin-bottom: .75rem; }
.page-hero__sub { color: rgba(255,255,255,.92); max-width: 55ch; font-size: 1.05rem; line-height: 1.7; }

/* ---------- Info grid ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* Fixed 2-up variant for grids with an even, known card count (avoids a ragged 3+1 wrap) */
.info-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
  .info-grid.cols-2 { grid-template-columns: 1fr; }
}
.info-card {
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.info-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
/* Only cards with an actual action (a .btn) get the stronger "clickable" cue */
.info-card:has(.btn):hover { border-color: var(--green-700); }
.info-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-800);
  margin-bottom: 1.1rem;
  transition: background var(--transition), color var(--transition);
}
.info-card:has(.btn):hover .info-card__icon { background: var(--green-800); color: var(--white); }
.info-card__title { font-size: 1.28rem; line-height: 1.25; margin-bottom: .55rem; color: var(--gray-900); }
.info-card__body { font-size: .97rem; color: var(--gray-700); line-height: 1.75; }

/* ---------- Portal buttons (school quick-links grid) ---------- */
.portal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 700px) {
  .portal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .portal-grid { grid-template-columns: 1fr; }
}
.portal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem 1rem;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  font-size: .9rem;
  color: var(--green-800);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.portal-btn svg { transition: color var(--transition); }
.portal-btn:hover {
  border-color: var(--green-700);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color: var(--green-900);
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.faq-item {
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 0 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition);
}
.faq-item[open] { border-color: var(--green-200, var(--green-100)); }
.faq-item summary {
  padding: 1.1rem 0;
  font-weight: 600;
  color: var(--gray-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ''; }
.faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--gold-600);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  color: var(--gray-700);
  font-size: .95rem;
  line-height: 1.75;
  padding-bottom: 1.25rem;
}

/* ---------- Nav cards (whole-card links to a sub-page) ---------- */
.nav-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
/* Five cards in a four-column grid strand the fifth alone on its own row.
   Lay five out as three across with the remaining two centred underneath, by
   counting in sixths so a card can start on a half-column. Scoped to exactly
   five so the four-card Services grid is untouched. */
.nav-card-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
  grid-template-columns: repeat(6, 1fr);
}
.nav-card-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > * {
  grid-column: span 2;
}
.nav-card-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(4) {
  grid-column: 2 / span 2;
}

/* Six cards in a four-column grid strand two alone on a second row;
   three-and-three needs no centring trick, just a plain three-column grid.
   Scoped to exactly six so four- and five-card grids elsewhere are untouched. */
.nav-card-grid:has(> :nth-child(6)) {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 860px) {
  .nav-card-grid { grid-template-columns: repeat(2, 1fr); }
  /* Back to a plain two-up below this; the centring above assumes three
     columns and would leave cards half-off the row. */
  .nav-card-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
    grid-template-columns: repeat(2, 1fr);
  }
  .nav-card-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *,
  .nav-card-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(4) {
    grid-column: auto;
  }
  /* The count-scoped rules outrank the plain one above on specificity, so each
     needs restating here or six cards stay three-up and run off a phone. */
  .nav-card-grid:has(> :nth-child(6)) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .nav-card-grid { grid-template-columns: 1fr; }
  .nav-card-grid:has(> :nth-child(6)) { grid-template-columns: 1fr; }
}
.nav-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 2rem 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.nav-card:hover,
.nav-card:focus-visible {
  border-color: var(--green-700);
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}
.nav-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--green-50);
  color: var(--green-800);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: background var(--transition), color var(--transition);
}
.nav-card:hover .nav-card__icon,
.nav-card:focus-visible .nav-card__icon {
  background: var(--green-800);
  color: var(--white);
}
.nav-card__title {
  font-size: 1.28rem;
  line-height: 1.25;
  margin-bottom: .5rem;
  color: var(--gray-900);
  transition: color var(--transition);
}
.nav-card:hover .nav-card__title,
.nav-card:focus-visible .nav-card__title { color: var(--green-800); }
.nav-card__body { font-size: .95rem; color: var(--gray-700); line-height: 1.7; flex: 1; }
.nav-card__arrow {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gold-600);
}
.nav-card__arrow svg { transition: transform var(--transition); }
.nav-card:hover .nav-card__arrow svg,
.nav-card:focus-visible .nav-card__arrow svg { transform: translateX(4px); }

/* ---------- Tab bar (page-level section switcher) ---------- */
.tab-bar {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.tab-btn {
  padding: .65rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: .92rem;
  font-weight: 700;
  border: 1.5px solid var(--gray-200);
  color: var(--gray-600);
  background: var(--white);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}
.tab-btn.active {
  background: var(--green-800);
  color: var(--white);
  border-color: var(--green-800);
}
.tab-btn:hover:not(.active) {
  border-color: var(--green-700);
  color: var(--green-800);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Empty states ---------- */
/* Used wherever a date-filtered list (events, youth events) has nothing
   upcoming to show. Reads as a designed, deliberate state rather than
   a section that failed to load. */
.empty-state {
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-lg);
}
.empty-state p { color: var(--gray-500); font-size: .95rem; }

/* ---------- Footer ---------- */
.footer {
  background: var(--green-900);
  color: rgba(255,255,255,.88);
  padding: 4rem 0 0;
  margin-top: auto;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer__brand-logo {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: .75rem;
}
.footer__brand-text {
  font-size: .92rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  max-width: 36ch;
  color: rgba(255,255,255,.82);
}
.footer__social { display: flex; gap: .75rem; }
.footer__social-link {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.footer__social-link:hover { background: var(--green-700); }
.footer__col-title {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1rem;
}
.footer__links { display: flex; flex-direction: column; gap: .6rem; }
.footer__link {
  font-size: .92rem;
  color: rgba(255,255,255,.82);
  transition: color var(--transition);
}
.footer__link:hover { color: var(--white); }
.footer__bottom {
  padding: 1.35rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .84rem;
  color: rgba(255,255,255,.6);
  flex-wrap: wrap;
  gap: .5rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .about-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-split__visual { aspect-ratio: 16/9; }
}
/* The horizontal nav needs about 1050px to lay out: 763px of links plus the
   209px logo plus container padding. Below that the Support Us pill was being
   squeezed until its label wrapped and spilled out of the rounded background,
   so hand over to the hamburger here rather than at the general mobile
   breakpoint. */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
}
@media (max-width: 768px) {
  :root { --nav-height: 64px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__content { padding-block: 3.5rem; }
  .section { padding-block: 3.5rem; }
  .footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  /* Stack rather than hide the label. On a phone the bar is the first thing
     on the page, and a bare row of times reads as "prayer times for Boston"
     when it is really the congregation schedule at ICB. */
  .prayer-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
    overflow-x: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .prayer-bar__label {
    display: block;
    text-align: center;
    font-size: .68rem;
  }
  .prayer-bar__link { display: none; }
  /* The times row is the part that scrolls now, so the fade belongs here. */
  .prayer-bar__times {
    gap: .75rem;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
  }
  .prayer-bar__times::-webkit-scrollbar { display: none; }
  .prayer-time__name { font-size: .62rem; }
  .prayer-time__value { font-size: .88rem; }
  .hero__actions { flex-wrap: wrap; }
  .hero__actions .btn { flex: 0 0 auto; }
}

/* ---------- Responsive 2-col helper ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; }
}