/* ==========================================================================
   Attarbiya Masjid & Kowneyn Community Centre - site stylesheet

   The look: light and simple. A white header, the building's photograph at the
   top of the homepage, teal page headings, cream and pale teal sections, and a
   teal footer. Colours and type are sampled from the masjid's logo and shared
   with the donation page.

   Plain CSS, no build step. Sections run top to bottom in page order.
   ========================================================================== */

:root {
  /* Brand, sampled from the logo. See CLAUDE.md before changing any of these. */
  --green: #42bac5;        /* fills and borders only: fails as text on white */
  --green-text: #17808a;   /* large teal text on white (4.68:1) */
  --green-dark: #1a7078;   /* headings, links, solid buttons, the footer */
  --green-ink: #0e4a50;    /* darkest teal */
  --green-light: #e9f7f9;  /* pale teal section background */
  --gold: #d4ae61;         /* fills; never text on a light background */
  --gold-deep: #b08d3f;
  --gold-text: #7a5c1f;    /* the only gold safe as text on white (6.22:1) */
  --gold-light: #f8f0e0;   /* cream panel; also gold-tinted text on teal (5:1) */

  /* Madrasah Al Furqan's logo colour, sampled from its brown logo. It colours
     the logo only: the madrasah's pages use the masjid's teal like every other
     page, so the site reads as one. Navy is defined further down. */
  --furqan: #52322e;

  --ink: #1c2321;
  --ink-soft: #4b5a55;
  --bg: #fbfaf7;
  --white: #ffffff;
  --border: #e2e0d8;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(1, 88, 99, 0.1);
  --max-width: 1140px;
  --topbar-h: 38px;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Marcellus", Georgia, "Times New Roman", serif;
  --font-arabic: "Reem Kufi", "Geeza Pro", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

  /* A tile of eight-pointed stars, laid faintly over the teal bands. */
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M36 4l9 23 23 9-23 9-9 23-9-23-23-9 23-9z'/%3E%3Cpath d='M0 0l13 13M72 0L59 13M0 72l13-13M72 72L59 59'/%3E%3C/g%3E%3C/svg%3E");

  /* The pointed arch of the windows in the logo, used as a mask. */
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 125V50C0 24 25 9 50 0c25 9 50 24 50 50v75z'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-dark); text-decoration: underline; text-decoration-color: rgba(26, 112, 120, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  color: var(--green-dark);
  line-height: 1.25;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; color: var(--ink-soft); }
strong { color: var(--ink); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

.ar { font-family: var(--font-arabic); font-weight: 500; line-height: 1.3; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--green-dark);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--white); }

:focus-visible { outline: 3px solid var(--green-text); outline-offset: 2px; border-radius: 4px; }
.topbar :focus-visible,
.site-footer :focus-visible,
.page-hero :focus-visible,
.hero-photo :focus-visible { outline-color: var(--white); }

.section { padding: 64px 0; }
.section-alt, .section--mist { background: var(--green-light); }
.section--sand { background: var(--gold-light); }

.section-head, .section-intro { text-align: center; max-width: 660px; margin: 0 auto 40px; }
.section-intro--split {
  max-width: none;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
}
.section-intro--split > div { max-width: 640px; }
.section-intro--split h2 { margin-bottom: 0.3em; }
.section-intro--split p { margin-bottom: 0; }

.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-text);
  margin: 0 0 10px;
}

.lede { font-size: 1.1rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.center-row { display: flex; justify-content: center; margin-top: 36px; }

/* A plain text link for "see all" and "read more": underlined, no arrow. */
.more { font-weight: 600; color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.more:hover { color: var(--green-ink); }
.links-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.links-row a { font-weight: 600; color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.links-row a:hover { color: var(--green-ink); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: 600 0.95rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-gold { background: var(--gold); color: var(--ink); font-weight: 700; }
.btn-gold:hover { background: var(--gold-deep); color: var(--ink); }

.btn-teal { background: var(--green-dark); color: var(--white); }
.btn-teal:hover { background: var(--green-ink); color: var(--white); }

.btn-line { background: transparent; border-color: var(--green-dark); color: var(--green-dark); }
.btn-line:hover { background: var(--green-dark); color: var(--white); }

.btn-ghost { background: transparent; border-color: var(--white); color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--green-dark); }

.btn-on-gold { background: var(--white); color: var(--gold-text); font-weight: 700; }
.btn-on-gold:hover { background: var(--ink); color: var(--white); }

.btn-small { min-height: 44px; padding: 8px 18px; font-size: 0.88rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Header: a slim teal top bar (next prayer, the madrasah, parent login) above
   the white main bar. The whole header is sticky with a negative offset equal
   to the top bar, so on scroll the top bar slides away and the main bar stays.
   ========================================================================== */

.site-header {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) - var(--topbar-h));
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.topbar { height: var(--topbar-h); background: var(--green-dark); font-size: 0.84rem; }
.topbar-inner {
  max-width: var(--max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.topbar p { color: var(--white); }
.topbar a { color: var(--white); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-next, .topbar-note {
  flex: 1;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-next b { color: var(--white); font-weight: 700; }
.topbar-next .gold { color: var(--gold-light); }
.topbar-next .tabular { font-variant-numeric: tabular-nums; }
.topbar-madrasah { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.topbar a.topbar-madrasah { color: var(--gold-light); font-weight: 600; }
.topbar-madrasah .ar { font-size: 1.05rem; }
.topbar-portal, .topbar-back { white-space: nowrap; }
.topbar-portal { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.3); font-weight: 600; }

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand-logo { height: 46px; width: auto; }

.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.main-nav a {
  position: relative;
  display: block;
  padding: 8px 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
/* The current page gets a gold bar as well as colour, never colour alone. */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.main-nav a:hover { color: var(--green-dark); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--green-dark); }

.header-donate { flex-shrink: 0; padding: 10px 22px; }
/* Links the top bar carries on a wide screen, repeated in the phone menu where
   the top bar has no room for them. */
.nav-mobile-only { display: none; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.site-header.is-open .nav-toggle-bars { background: transparent; }
.site-header.is-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .header-donate { margin-left: auto; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .site-header.is-open .main-nav { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 20px 16px; }
  .main-nav li + li { border-top: 1px solid var(--border); }
  .main-nav a { padding: 14px 0; min-height: 48px; font-size: 1rem; }
  .main-nav a::after { display: none; }
  .main-nav a.active { box-shadow: inset 3px 0 0 var(--gold); padding-left: 14px; }
  .nav-mobile-only { display: block; }
}

@media (max-width: 640px) {
  .topbar-inner { gap: 14px; }
  .topbar-portal { display: none; }
  .topbar-madrasah .ar { display: none; }
  .brand-logo { height: 40px; }
  .header-inner { padding: 10px 16px; gap: 12px; }
  .header-donate { padding: 8px 18px; min-height: 44px; }
}

/* The madrasah's logos, from assets/furqan/. Each is used as a mask, so one
   file serves every colour. Brown shows by default; the navy logo (Arabic
   only, so the English name is set beneath it) shows when the navy palette is
   chosen. The masks are SVGs traced from the small PNG originals, so they stay
   sharp on high-density screens where the PNGs went blurry. */
.furqan-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; color: var(--furqan); line-height: 1; }
.furqan-logo-brown, .furqan-logo-navy { display: block; background: currentColor; }
.furqan-logo-brown {
  width: 170px;
  aspect-ratio: 175 / 59;
  -webkit-mask: url("../assets/furqan/madrasah-al-furqan-brown.svg") center / contain no-repeat;
  mask: url("../assets/furqan/madrasah-al-furqan-brown.svg") center / contain no-repeat;
}
.furqan-logo-navy {
  display: none;
  width: 160px;
  aspect-ratio: 507 / 104;
  -webkit-mask: url("../assets/furqan/madrasah-al-furqan-navy.svg") center / contain no-repeat;
  mask: url("../assets/furqan/madrasah-al-furqan-navy.svg") center / contain no-repeat;
}
.furqan-logo-en { display: none; font: 600 0.58rem/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; }
:root[data-furqan="navy"] .furqan-logo-brown { display: none; }
:root[data-furqan="navy"] .furqan-logo-navy,
:root[data-furqan="navy"] .furqan-logo-en { display: block; }
@media (forced-colors: active) {
  .furqan-logo-brown, .furqan-logo-navy { forced-color-adjust: none; background: CanvasText; }
}
@media (max-width: 640px) {
  .furqan-logo-brown { width: 140px; }
  .furqan-logo-navy { width: 132px; }
}

/* The madrasah's sub-navigation: a slim strip under the site header on its two
   pages, with its logo and the sections of the madrasah. On a phone it scrolls
   sideways inside its own box. */
.subnav { background: var(--white); border-bottom: 1px solid var(--border); }
.subnav-inner { display: flex; align-items: center; gap: 22px; min-height: 56px; }
.subnav-brand { display: inline-flex; align-items: center; flex-shrink: 0; padding: 8px 0; text-decoration: none; }
.subnav-brand .furqan-logo-brown { width: 118px; }
.subnav-brand .furqan-logo-navy { width: 110px; }
.subnav-brand .furqan-logo-en { font-size: 0.5rem; }
.subnav ul { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav li { flex-shrink: 0; }
.subnav ul a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.subnav ul a:hover { background: var(--green-light); color: var(--green-dark); }
.subnav ul a[aria-current="page"] { background: var(--green-dark); color: var(--white); }
@media (max-width: 760px) {
  .subnav-inner { gap: 14px; min-height: 52px; }
  .subnav ul { margin-left: 0; }
}
@media (max-width: 480px) {
  .subnav-brand { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--green-dark);
  color: var(--white);
  padding: 56px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-logo-chip {
  display: inline-block;
  background: var(--white);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.footer-logo { height: 34px; width: auto; }
.site-footer p { color: rgba(255, 255, 255, 0.92); margin: 0 0 6px; }
.footer-charity { font-size: 0.84rem; }
.site-footer .footer-heading {
  color: var(--white);
  font: 400 1rem/1.3 var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: rgba(255, 255, 255, 0.95); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
}

.social-row { display: flex; gap: 8px; margin-top: 16px; }
.social-row a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.social-row a:hover { background: rgba(255, 255, 255, 0.1); }
.social-row svg { width: 20px; height: 20px; fill: currentColor; }
.social-row a[title^="Instagram"] svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.social-row a[title^="Instagram"] .dot { fill: currentColor; stroke: none; }
.social-row .play { fill: var(--green-dark); }

@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-id { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Inner page heading band: teal, centred, with a breadcrumb. The gradient
   stays between --green-dark and --green-text wherever text can sit, so white
   type passes contrast; the brighter brand teal is only a glow in the corner.
   ========================================================================== */

.page-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 100% 0%, rgba(66, 186, 197, 0.55), transparent 32%),
    linear-gradient(135deg, var(--green-dark) 0%, var(--green-text) 60%);
  color: var(--white);
  padding: 56px 0;
  text-align: center;
}
/* A faint lattice of eight-pointed stars over the teal bands and the footer:
   enough to feel like a masjid, not enough to touch the text. */
.page-hero::before, .site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lattice) center / 72px 72px repeat;
  opacity: 0.07;
  pointer-events: none;
}
.page-hero h1 { color: var(--white); margin-bottom: 8px; }
.page-hero p { color: var(--white); margin: 0 auto; max-width: 640px; }
.page-hero .lede { font-size: 1.05rem; }
.page-hero .page-hero-ar { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); line-height: 1.2; color: var(--gold-light); margin-bottom: 4px; }
.page-hero .crumbs { font-size: 0.85rem; margin-bottom: 10px; }
.crumbs a { color: var(--white); }

/* Buttons and a status line inside a heading band. */
.page-hero .hero-actions { justify-content: center; margin-top: 22px; }
.page-hero .hero-status { margin: 18px auto 0; font-size: 0.92rem; }
.page-hero .hero-status .tbc { margin-right: 6px; vertical-align: 1px; }

/* Our Story carries two figures under its heading. */
.story-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; margin: 24px 0 0; padding: 0; list-style: none; }
.story-stats li { display: flex; flex-direction: column; font-size: 0.86rem; color: rgba(255, 255, 255, 0.9); }
.story-stats b { font: 400 1.9rem/1.1 var(--font-head); color: var(--gold-light); }

/* ==========================================================================
   Home
   ========================================================================== */

/* The building, at the top, with the name over it. */
.hero-photo {
  position: relative;
  height: min(60vh, 560px);
  min-height: 420px;
  background-color: var(--ink);
  background-size: cover;
  background-position: center 30%;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Dark enough under the text to keep white type readable over the white
     sign; the right of the picture, where the sign is, stays clear. */
  background: linear-gradient(90deg, rgba(10, 20, 18, 0.82) 0%, rgba(10, 20, 18, 0.72) 45%, rgba(10, 20, 18, 0.4) 70%, rgba(10, 20, 18, 0.12) 90%);
}
.hero-photo-body {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
}
.hero-photo-body > * { max-width: 560px; }
.hero-photo p { color: rgba(255, 255, 255, 0.92); font-size: 1.08rem; }
.hero-photo .eyebrow { color: var(--gold-light); font-size: 0.75rem; }
.hero-ar, .hero-photo .hero-ar { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); line-height: 1.1; color: var(--gold); margin: 0 0 4px; }
.hero-photo h1 { color: var(--white); font-size: clamp(2.1rem, 5vw, 3.1rem); margin-bottom: 0.3em; }
.hero-photo .btn-row { margin-top: 10px; }

@media (max-width: 700px) {
  .hero-photo { height: auto; min-height: 0; }
  .hero-photo-body { padding: 44px 20px 48px; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(10, 20, 18, 0.68), rgba(10, 20, 18, 0.82)); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero-photo { height: auto; min-height: 0; }
  .hero-photo-body { padding: 40px 20px; }
}

/* Today's prayer times, overlapping the photograph. */
.prayer-card--home { margin-top: -56px; }
@media (max-width: 700px) { .prayer-card--home { margin-top: 20px; } }

/* Cards are for real things only: a class, an event, a step. Rows of icon
   cards with a heading and a "read more" are what every templated site has,
   so the homepage and the About page use lists and photographs instead. */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  height: 100%;
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
/* About the masjid, on the homepage: prose beside the prayer hall photograph,
   then the three strands as a plain list with hairlines. */
.about-home { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.about-home h2 { margin-bottom: 0.5em; }
.about-home-photo { margin: 0; }
.about-home-photo img { width: 100%; max-width: 680px; border-radius: var(--radius); box-shadow: var(--shadow); }
.about-home-photo figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 860px) { .about-home { grid-template-columns: 1fr; gap: 32px; } }

.strands { list-style: none; margin: 28px 0 24px; padding: 0; border-top: 1px solid var(--border); }
.strands li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--border); }
.strand-ar { font-size: 1.9rem; line-height: 1; color: var(--green-text); }
.strands b { font-family: var(--font-head); font-weight: 400; font-size: 1.15rem; color: var(--green-dark); margin-right: 6px; }
.strands div { color: var(--ink-soft); }
.strands a { font-weight: 600; color: var(--green-dark); white-space: nowrap; }
.strands--full { max-width: 760px; margin-top: 20px; }
.strands--full li { padding: 18px 0; }
.about-strands h2 { margin-bottom: 0.2em; }
@media (max-width: 480px) { .strands li { grid-template-columns: 1fr; gap: 4px; } }

/* Trustees: a plain list of names. Portraits can replace it once there are
   photographs the trustees have agreed to. */
.trustees { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px 56px; align-items: start; }
.people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.people li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.people b { font-family: var(--font-head); font-weight: 400; font-size: 1.15rem; color: var(--green-dark); }
.people span { color: var(--ink-soft); }
@media (max-width: 860px) { .trustees { grid-template-columns: 1fr; } }

/* Notices: short, dated announcements from assets/notices.json (an Eid prayer
   time, a changed iqamah, a closure). Shown only while current; the container
   stays empty otherwise and takes no space. */
.notices:empty { display: none; }
.notices { display: grid; gap: 12px; margin: 28px 0 0; }
.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  padding: 16px 18px;
  background: var(--gold-light);
  border: 1px solid #ead9b3;
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice-kind { grid-row: span 2; font: 700 0.7rem/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); padding-top: 4px; }
.notice h3 { font: 600 1.05rem/1.35 var(--font-body); color: var(--ink); margin: 0; }
.notice p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.notice p a { font-weight: 600; }
@media (max-width: 560px) { .notice { grid-template-columns: 1fr; } .notice-kind { grid-row: auto; } }

/* The madrasah, introduced from the masjid's homepage: its logo inside the
   arch of the masjid's windows. */
.furqan-band { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.furqan-arch {
  max-width: 300px;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  background: var(--white);
  -webkit-mask: var(--arch) 0 0 / 100% 100% no-repeat;
  mask: var(--arch) 0 0 / 100% 100% no-repeat;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  /* Pixels, not percentages: percentage padding resolves against the grid
     column the arch sits in, not the arch, so on a mid-width screen it grew
     past the arch's own width and pushed the logo off centre and downward. */
  padding: 44px 20px 20px;
  text-align: center;
}
.furqan-arch .furqan-logo { gap: 10px; }
.furqan-arch-link { display: inline-flex; text-decoration: none; border-radius: 6px; padding: 6px; }
.furqan-arch-link:focus-visible { outline-offset: 6px; }
.footer-logo-chip:focus-visible { outline-color: var(--white); }
/* Fixed widths: the logo sits in a shrink-to-fit box, so a percentage here
   would resolve to nothing and the logo would vanish. */
.furqan-arch .furqan-logo-brown { width: 175px; }
.furqan-arch .furqan-logo-navy { width: 190px; }
.furqan-arch .furqan-logo-en { color: var(--furqan); font-size: 0.66rem; }
.furqan-arch p.furqan-arch-caption { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
@media (max-width: 760px) {
  .furqan-band { grid-template-columns: 1fr; gap: 28px; }
  .furqan-arch { max-width: 230px; }
  .furqan-arch .furqan-logo-brown { width: 150px; }
  .furqan-arch .furqan-logo-navy { width: 160px; }
}

/* From the masjid: recent events and the newest recorded talks. */
.feed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.feed-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--green-light); margin-bottom: 6px; }
.feed-head h3 { margin: 0 0 10px; }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.feed-thumb { display: block; width: 72px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: var(--green-light); }
/* No poster: a small arch in its place, so every row keeps the same shape. */
.feed-thumb--none { position: relative; }
.feed-thumb--none::before {
  content: "";
  position: absolute;
  inset: 22% 26% 16%;
  background: var(--green);
  opacity: 0.5;
  -webkit-mask: var(--arch) 0 0 / 100% 100% no-repeat;
  mask: var(--arch) 0 0 / 100% 100% no-repeat;
}
.feed-item h4 { font: 600 1rem/1.35 var(--font-body); color: var(--ink); margin: 2px 0 4px; }
.feed-meta { font-size: 0.84rem; margin: 0; }
.feed-meta b { color: var(--green-dark); font-weight: 600; }
.feed-empty { padding: 18px 0; }

.talk-feature { display: block; color: inherit; text-decoration: none; margin-top: 16px; }
.talk-feature h4 { font: 400 1.25rem/1.3 var(--font-head); color: var(--green-dark); margin: 14px 0 4px; }
.talk-feature:hover h4 { text-decoration: underline; }
.talk-list { list-style: none; margin: 12px 0 0; padding: 0; }
.talk-list li { border-top: 1px solid var(--border); }
.talk-list a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.94rem; }
.talk-list a:hover { color: var(--green-dark); }
.talk-list span { flex-shrink: 0; font-weight: 400; color: var(--ink-soft); font-size: 0.84rem; }
@media (max-width: 820px) { .feed { grid-template-columns: 1fr; } }

/* Our story, in brief. */
.story-band { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 48px; align-items: center; }
.years { margin: 0; display: flex; align-items: baseline; gap: 16px; }
.years-num { font: 400 clamp(4.5rem, 3rem + 6vw, 7.5rem)/0.9 var(--font-head); color: var(--green-dark); font-variant-numeric: lining-nums; }
.years-label { font-size: 1.05rem; line-height: 1.4; color: var(--ink); max-width: 11em; }

.mini-line { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.mini-line::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: rgba(26, 112, 120, 0.18); }
.mini-line li { position: relative; padding: 48px 12px 0 0; font-size: 0.86rem; line-height: 1.4; color: var(--ink-soft); }
.mini-line li::before {
  content: "";
  position: absolute;
  top: 25px; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--green-light);
}
.mini-line b { position: absolute; top: 0; left: 0; font: 400 1.3rem/1 var(--font-head); color: var(--green-dark); }
@media (max-width: 900px) { .story-band { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) {
  .mini-line { grid-template-columns: 1fr; }
  .mini-line::before { left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .mini-line li { padding: 0 0 16px 30px; }
  .mini-line li::before { top: 4px; }
  .mini-line b { position: static; display: block; margin-bottom: 2px; }
}

/* Giving: the gold panel. Dark type on gold, because white on this gold
   fails contrast. */
.donate-hero {
  background: linear-gradient(135deg, #e3c37d, var(--gold) 55%, #c9a04c);
  border-radius: var(--radius);
  padding: 44px 32px;
  text-align: center;
}
.donate-hero h2 { color: var(--green-ink); }
.donate-hero p { color: var(--ink); max-width: 620px; margin: 0 auto 22px; }
.donate-hero :focus-visible { outline-color: var(--green-ink); }

/* Visit. */
/* Visiting: the facts a first-time visitor needs, as a plain list beside the
   photograph of the entrance. The Jumu'ah line is filled in by js/main.js. */
.visit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: start; }
.visit h2 { margin-bottom: 0.4em; }
.visit-photo { margin: 0; }
.visit-photo img { width: 100%; max-width: 680px; border-radius: var(--radius); box-shadow: var(--shadow); }
.visit-photo figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--ink-soft); }
.facts { margin: 0; border-top: 1px solid var(--border); }
.facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.facts dt { font-family: var(--font-head); font-size: 1.1rem; color: var(--green-dark); }
.facts dd { margin: 0; color: var(--ink-soft); }
.facts dd p { margin: 0 0 6px; }
.facts dd p:last-child { margin-bottom: 0; }
.facts address { font-style: normal; color: var(--ink); }
.facts a { font-weight: 600; color: var(--green-dark); }
.visit .btn-row { margin-top: 22px; }
@media (max-width: 860px) { .visit { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 480px) { .facts > div { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 820px) { .visit { grid-template-columns: 1fr; gap: 28px; } }

/* ==========================================================================
   Prayer times, rendered from assets/prayer-times.json
   ========================================================================== */

.prayer-card {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
}
@media (max-width: 700px) { .prayer-card { padding: 22px 18px 20px; } }
.prayer-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.prayer-card-head h2 { margin: 0; font-size: 1.35rem; }
.prayer-card-head > a:not(.btn) { font-size: 0.88rem; font-weight: 600; }

.prayer-dates {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.prayer-greg { font-weight: 600; color: var(--ink); }
.prayer-now b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--green-dark); }
.prayer-hijri { margin: 4px 0 0; font-size: 0.95rem; color: var(--gold-text); }

.prayer-next {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 16px;
  margin: 16px 0 6px;
  padding: 14px 18px;
  background: var(--green-light);
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
}
.prayer-next-label { grid-column: 1 / -1; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.prayer-next-name { font: 400 1.8rem/1.1 var(--font-head); color: var(--green-dark); }
.prayer-next-when { text-align: right; font-size: 0.86rem; line-height: 1.35; color: var(--ink-soft); }
.prayer-next-when b { display: block; font: 700 1.5rem/1.1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.prayer-next-count { grid-column: 1 / -1; font-size: 0.86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.prayer-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.prayer-table thead th {
  padding: 14px 8px 10px;
  text-align: right;
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
}
.prayer-table thead th:first-child { text-align: left; }
.prayer-table tbody th { text-align: left; padding: 13px 8px; font: 600 1.02rem/1.2 var(--font-body); color: var(--green-dark); }
.prayer-table td { text-align: right; padding: 13px 8px; font-size: 1.08rem; color: var(--ink-soft); }
.prayer-table td + td { color: var(--ink); font-weight: 600; }
.prayer-table tbody tr + tr > * { border-top: 1px solid var(--border); }
.prayer-table tr.is-next > * { background: var(--green-light); }
.prayer-table tr.is-next th { box-shadow: inset 3px 0 0 var(--green-text); }
.prayer-table tr.is-jumuah th { color: var(--gold-text); }
.prayer-table tr.is-passed th, .prayer-table tr.is-passed td { color: var(--ink-soft); font-weight: 400; }
.next-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green-dark);
  color: var(--white);
  font: 700 0.66rem/1.5 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.prayer-note, .prayer-upnext p, .prayer-jumuah {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 0.92rem;
  color: var(--ink);
}
.prayer-jumuah { background: var(--gold-light); border-left: 3px solid var(--gold); }
.prayer-upnext p { background: var(--green-light); border-left: 3px solid var(--green); margin: 0; }
.prayer-upnext:not(:empty) { margin-top: 14px; }
.prayer-source { margin: 16px 0 0; font-size: 0.82rem; text-align: right; }
.prayer-source a { color: var(--ink-soft); }
.prayer-loading, .prayer-fallback { color: var(--ink-soft); font-size: 0.95rem; margin: 8px 0 0; }

@media (max-width: 420px) {
  .prayer-table tbody th, .prayer-table td { padding-inline: 4px; }
  .prayer-next-name { font-size: 1.5rem; }
}

/* The prayer times page. */
.prayer-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 48px; align-items: start; }
.prayer-aside h2 { font-size: 1.4rem; }
.prayer-aside dl { margin: 0; display: grid; gap: 16px; }
.prayer-aside dt { font-weight: 700; color: var(--ink); }
.prayer-aside dd { margin: 2px 0 0; color: var(--ink-soft); }
@media (max-width: 860px) { .prayer-layout { grid-template-columns: 1fr; gap: 32px; } }

.week-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.week-table { width: 100%; min-width: 680px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.week-table th, .week-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--border); }
.week-table thead th { vertical-align: bottom; font-weight: 600; font-size: 0.9rem; color: var(--ink); background: var(--white); }
.week-table thead th span { display: block; font: 400 1.3rem/1.1 var(--font-head); color: var(--green-dark); }
.week-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--white);
  font-weight: 600;
  color: var(--green-dark);
  box-shadow: 1px 0 0 var(--border);
}
.week-table td { font-size: 0.98rem; }
.week-table td small { display: block; font-size: 0.78rem; color: var(--ink-soft); }
.week-table td b { font-weight: 600; color: var(--ink); }
.week-table .is-today { background: var(--green-light); }
.week-table thead .is-today { box-shadow: inset 0 3px 0 var(--gold); background: var(--green-light); }
.week-table tbody tr:last-child > * { border-bottom: 0; }
.week-key { font-size: 0.86rem; color: var(--ink-soft); margin-top: 12px; }
.week-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.print-only { display: none; }

/* Printing the week: just the masjid's name, the table and where the times
   come from, on one sheet, for the fridge or the noticeboard. */
@media print {
  .site-header, .site-footer, .page-hero, .prayer-layout, .week-actions, .week-key, .colour-preview, .thanks-banner, .skip-link, .notices { display: none !important; }
  .print-only { display: block; margin: 0 0 12px; }
  .print-only .print-title { font: 400 20pt/1.2 var(--font-head); margin: 0 0 4px; color: #000; }
  .print-only p { margin: 0; color: #000; font-size: 10pt; }
  body { background: #fff; color: #000; }
  .section { padding: 0; }
  .section-intro { display: none; }
  .week-wrap { border: 0; overflow: visible; }
  .week-table { min-width: 0; width: 100%; font-size: 10pt; }
  .week-table th, .week-table td { padding: 6px 4px; border-bottom: 1px solid #999; }
  .week-table thead th span { font-size: 12pt; }
  .week-table .is-today, .week-table thead .is-today { background: #eee; box-shadow: none; }
  a[href]::after { content: ""; }
}

/* ==========================================================================
   Events and recorded talks
   ========================================================================== */

.event-year {
  font-size: 1.6rem;
  color: var(--green-dark);
  margin: 44px 0 6px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--green-light);
}
.events > .event-year:first-child { margin-top: 0; }
.event-year--next { color: var(--gold-text); }

.event-list { list-style: none; margin: 0; padding: 0; }
.event {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 120px;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.event:last-child { border-bottom: 0; }
.event-when { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.event-date { font-weight: 600; color: var(--green-dark); }
.event-time { font-size: 0.86rem; color: var(--ink-soft); }
.event-kind {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green-ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.event-body h3 { font-size: 1.2rem; margin: 0 0 8px; }
.event-body p { margin: 0; max-width: 62ch; }
.event-with { display: block; margin-top: 8px; font-size: 0.86rem; color: var(--gold-text); }
.event-poster { display: block; align-self: start; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.event-poster:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.event-poster img { width: 100%; }
.event:not(:has(.event-poster)) { grid-template-columns: 170px minmax(0, 1fr); }
@media (max-width: 760px) {
  .event, .event:not(:has(.event-poster)) { grid-template-columns: minmax(0, 1fr) 88px; gap: 8px 18px; }
  .event-when { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .event-poster { grid-row: 2; grid-column: 2; }
  .event:not(:has(.event-poster)) .event-body { grid-column: 1 / -1; }
}

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.video-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.video-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.video-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--green-ink); overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.talk-feature .video-thumb { border-radius: var(--radius); }
/* Play badge drawn in CSS, so no icon file or third-party request is needed. */
.video-thumb::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(26, 112, 120, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23ffffff'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.video-meta { padding: 14px 16px 16px; }
.video-meta h3 { font: 600 0.95rem/1.4 var(--font-body); color: var(--ink); margin: 0 0 6px; }
.video-card:hover h3 { color: var(--green-dark); }
.video-date { font-size: 0.8rem; color: var(--ink-soft); }
.events-empty, .video-empty { color: var(--ink-soft); background: var(--green-light); border-radius: var(--radius); padding: 20px 22px; margin: 0; }
.section--mist .video-empty { background: var(--white); }

/* ==========================================================================
   Our Story: the timeline
   A spine down the middle that fills with gold as the reader scrolls. Open
   questions are drawn as unfinished pages, dashed, asking to be filled in.
   ========================================================================== */

.tl-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 44px; }
.tl-filter {
  min-height: 44px;
  padding: 8px 18px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 600 0.9rem/1 var(--font-body);
  cursor: pointer;
}
.tl-filter:hover { border-color: var(--green-dark); }
.tl-filter[aria-pressed="true"] { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }

.timeline {
  --progress: 0;
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 960px;
  perspective: 1400px;
}
.timeline::before, .timeline::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  margin-left: -1px;
}
.timeline::before { bottom: 0; background: var(--border); }
.timeline::after { height: calc(var(--progress) * 100%); background: linear-gradient(var(--gold), var(--gold-deep)); }

.tl-item { position: relative; width: 50%; padding: 0 48px 44px 0; }
.tl-item.is-right { margin-left: 50%; padding: 0 0 44px 48px; }
/* Opposite sides interleave, so the page is not half empty. Safe because every
   item is taller than the overlap, so a card never meets the one above it on
   its own side. */
.tl-item:not([hidden]) ~ .tl-item:not([hidden]) { margin-top: -96px; }
.tl-item[hidden] { display: none; }

.tl-item::after {
  content: "";
  position: absolute;
  top: 8px;
  right: -9px;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.tl-item.is-right::after { right: auto; left: -9px; }
.tl-item.is-reached::after { border-color: var(--gold-deep); background: var(--gold); }
.tl-item.is-unknown::after { border-style: dashed; }

.tl-year { display: block; font: 400 clamp(2rem, 1.6rem + 1.6vw, 2.8rem)/1 var(--font-head); color: var(--green-dark); margin-bottom: 12px; font-variant-numeric: lining-nums; }
.tl-item:not(.is-right) .tl-year { text-align: right; }
.tl-item.is-unknown .tl-year { color: var(--gold-text); }
.tl-strand {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Readable first: the resting state is fully visible with no transform. The
   script opts in to animation by adding .is-animated only once it knows it can
   finish the reveal. See CLAUDE.md for why this matters. */
.tl-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.tl-card h3 { font-size: 1.3rem; margin: 0 0 8px; }
.tl-card p { margin: 0; }
.tl-source { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--ink-soft); }
.tl-source::before { content: "Source: "; font-weight: 700; color: var(--ink); }

.tl-item.is-unknown .tl-card {
  background: var(--gold-light);
  border: 1.5px dashed var(--gold-deep);
  box-shadow: none;
}
.tl-item.is-unknown .tl-strand { background: var(--white); color: var(--gold-text); }
.tl-askhead { display: block; margin-top: 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); }
.tl-asks { margin: 8px 0 0; padding-left: 1.1em; }
.tl-asks li { color: var(--ink); margin-bottom: 4px; font-size: 0.95rem; }
.tl-remember { margin-top: 16px; min-height: 44px; padding: 8px 18px; font-size: 0.9rem; }

/* Cards wait tilted back in depth and settle forward as they are reached. They
   are never transparent: a card the observer misses (a full-page capture, a
   print, a quirk) is still fully readable, just leaning slightly. */
.timeline.is-animated .tl-card { transform: translateZ(-90px) rotateY(8deg); will-change: transform; }
.timeline.is-animated .tl-item.is-right .tl-card { transform: translateZ(-90px) rotateY(-8deg); }
.timeline.is-animated .tl-item.is-visible .tl-card { transform: none; will-change: auto; }

/* The escape hatch: if nothing was ever revealed, snap everything readable
   with no transition, because a background tab will not run one. */
.timeline.is-settled .tl-card,
.timeline.is-settled .tl-item.is-right .tl-card { transform: none !important; opacity: 1 !important; transition: none !important; }

@media (max-width: 760px) {
  .timeline { perspective: none; }
  .timeline::before, .timeline::after { left: 9px; }
  .tl-item, .tl-item.is-right, .tl-item:not([hidden]) ~ .tl-item:not([hidden]) { width: 100%; margin: 0; padding: 0 0 32px 40px; }
  .tl-item::after, .tl-item.is-right::after { left: 0; right: auto; top: 6px; }
  .tl-item:not(.is-right) .tl-year { text-align: left; }
  .timeline.is-animated .tl-card, .timeline.is-animated .tl-item.is-right .tl-card { transform: translateY(18px); }
  .timeline.is-animated .tl-item.is-visible .tl-card { transform: none; }
}

.help-band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px 56px; align-items: center; }
@media (max-width: 760px) { .help-band { grid-template-columns: 1fr; } }

/* ==========================================================================
   About, contact, prose
   ========================================================================== */

.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about-split--top { align-items: start; }
@media (max-width: 860px) { .about-split { grid-template-columns: 1fr; gap: 32px; } }

.img-frame { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--green-light); box-shadow: var(--shadow); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 36px; } }

.prose { max-width: 720px; }
.prose h2 { font-size: 1.3rem; margin: 36px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 20px; margin: 0 0 1em; }
.prose li { color: var(--ink-soft); margin-bottom: 8px; }

/* A panel of facts quoted from the Charity Commission register. */
.register { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 26px 20px; }
.register h2 { font-size: 1.3rem; margin-bottom: 4px; }
.register > p { font-size: 0.86rem; }
.register dl { margin: 16px 0; }
.register dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); }
.register dd { margin: 2px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); color: var(--ink); }
.register dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

/* Photographs with a caption. Capped at 680px: the source photographs are
   phone pictures around 900px wide, and stretching one across the container
   both dominates the page and makes it visibly soft. */
.photo-figure { margin: 40px auto 0; max-width: 680px; }
.photo-figure img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.photo-figure figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--ink-soft); text-align: center; }

.contact-ways { list-style: none; margin: 0; padding: 0; }
.contact-ways li { border-bottom: 1px solid var(--border); }
.contact-ways li:last-child { border-bottom: 0; }
.contact-ways a { display: block; padding: 16px 6px; color: var(--ink); text-decoration: none; border-radius: 8px; }
.contact-ways a:hover { background: var(--green-light); }
.contact-ways b { display: block; font: 400 1.2rem/1.3 var(--font-head); color: var(--green-dark); }
.contact-ways span span { font-size: 0.92rem; color: var(--ink-soft); }

/* The contact form. It posts to Formspree (CLAUDE.md, "Contact form"), and
   nothing leaves the page until the visitor presses Send. */
.contact-form-wrap { max-width: 680px; }
.contact-form-wrap h2 { margin-bottom: 0.3em; }
.contact-form { margin-top: 24px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field .optional { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font: 400 1rem/1.4 var(--font-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--green-text); outline-offset: 1px; border-color: var(--green-text); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.gotcha { display: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-note { font-size: 0.88rem; color: var(--ink-soft); }
.form-status { margin: 18px 0 0; font-weight: 600; color: var(--ink); }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--green-dark); }
.form-status.is-error { color: #9b2f1f; }
.form-sent { display: none; margin-top: 18px; padding: 14px 16px; background: var(--white); border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0; }
.form-sent:target { display: block; }

/* The weekly class on the events page: the book cover beside the details. */
.weekly-class { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: center; max-width: 760px; }
.book-cover { margin: 0; }
.book-cover img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow); }
.book-cover figcaption { margin-top: 6px; font-size: 0.74rem; line-height: 1.35; color: var(--ink-soft); }
.book-cover figcaption a { color: var(--ink-soft); }
.weekly-when { margin: 0 0 4px; font: 400 1.1rem/1.3 var(--font-head); color: var(--green-dark); }
.weekly-body h3 { font-size: 1.5rem; margin: 0 0 8px; }
.weekly-body p:last-child { margin-bottom: 0; }
@media (max-width: 520px) { .weekly-class { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: start; } }

.map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4 / 3; background: var(--green-light); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* The donate page (donate.html) carries its own styles: it is the original
   donation page, moved here unchanged and kept self-contained on purpose. */

/* Post-payment thank-you banner, injected by js/main.js */
.thanks-banner { background: linear-gradient(135deg, var(--green-text), var(--green-dark)); color: var(--white); text-align: center; padding: 16px 20px; line-height: 1.5; font-size: 0.95rem; }
.thanks-banner strong { display: block; color: var(--white); font: 400 1.15rem/1.3 var(--font-head); margin-bottom: 2px; }

/* ==========================================================================
   Madrasah Al Furqan and the parent portal
   ========================================================================== */

/* The madrasah's heading band is the same teal band as every other page, with
   its logo in a white arch beside the text. Brown appears only in the logo. */
.furqan-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 48px; align-items: center; text-align: left; }
.furqan-hero-grid .page-hero-ar, .furqan-hero-grid .crumbs, .furqan-hero-grid p { margin-left: 0; }
.furqan-hero-grid .lede { max-width: 600px; }
.furqan-hero-grid .hero-actions { justify-content: flex-start; }
.furqan-hero-grid .furqan-arch { max-width: 260px; }
@media (max-width: 760px) { .furqan-hero-grid { grid-template-columns: 1fr; } .furqan-hero-grid .furqan-arch { display: none; } }

.one-roof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.one-roof > div { background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--green-dark); border-radius: var(--radius); padding: 22px 24px; }
.one-roof b { display: block; font: 400 1.25rem/1.3 var(--font-head); color: var(--green-dark); margin-bottom: 6px; }
.one-roof p { margin: 0; }
@media (max-width: 760px) { .one-roof { grid-template-columns: 1fr; } }

/* Registration is a real sequence, so these steps are numbered. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.steps li { counter-increment: step; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--green-light);
  font: 400 1.3rem/1 var(--font-head);
  color: var(--green-dark);
}
.steps b { display: block; font-size: 1.05rem; margin-bottom: 4px; color: var(--ink); }
.steps p { margin: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

.notice { padding: 22px 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--border); }
.notice h3 { margin-bottom: 6px; }
.notice p:last-child { margin-bottom: 0; }

/* "To be confirmed": the label every placeholder carries, so nobody mistakes a
   draft time or date for a confirmed one. Dashed, like the open questions on
   Our Story, because it means the same thing. */
.tbc {
  display: inline-block;
  padding: 2px 9px;
  border: 1.5px dashed var(--gold-deep);
  border-radius: 999px;
  background: var(--gold-light);
  color: var(--gold-text);
  font: 700 0.68rem/1.5 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 2px;
}
.draft-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 28px;
  padding: 16px 18px;
  border: 1.5px dashed var(--gold-deep);
  border-radius: var(--radius);
  background: var(--white);
}
.draft-note .tbc { flex-shrink: 0; margin-top: 2px; }
.draft-note p { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .draft-note { flex-direction: column; gap: 8px; } }

/* Madrasah at a glance */
.furqan-facts { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.furqan-facts li { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; color: var(--ink-soft); font-size: 0.94rem; }
.furqan-facts b { display: block; font: 400 1.2rem/1.3 var(--font-head); color: var(--green-dark); margin-bottom: 2px; }
@media (max-width: 820px) { .furqan-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .furqan-facts { grid-template-columns: 1fr; } }

.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 28px; }
.curriculum { max-width: 720px; margin: 0 0 22px; }
.group-sessions { list-style: none; margin: 8px 0 0; padding: 0; }
.group-sessions li { padding: 6px 0; border-top: 1px solid var(--border); color: var(--ink); font-variant-numeric: tabular-nums; }
.group-sessions li:first-child { border-top: 0; padding-top: 0; }
.group-card { padding: 22px 24px; background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--green-dark); border-radius: var(--radius); }
.group-card h3 { margin: 0; font-size: 1.4rem; }
.group-ages { margin: 2px 0 10px; font-weight: 700; color: var(--ink); }
@media (max-width: 640px) { .groups { grid-template-columns: 1fr; } }

.timetable-wrap { position: relative; overflow-x: auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.timetable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.timetable caption { text-align: left; padding: 14px 16px 6px; font: 400 1.2rem/1.3 var(--font-head); color: var(--green-dark); }
.timetable th, .timetable td { padding: 12px 16px; text-align: left; border-top: 1px solid var(--border); }
.timetable thead th { font-weight: 600; color: var(--ink); }
.timetable thead small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--ink-soft); }
.timetable tbody th { font-weight: 600; color: var(--green-dark); white-space: nowrap; }
.timetable tr.is-today > * { background: var(--green-light); }
.timetable tr.is-today th { box-shadow: inset 3px 0 0 var(--gold); }
.timetable tr.is-closed td { color: var(--ink-soft); font-style: italic; }
@media (max-width: 480px) {
  .timetable th, .timetable td { padding: 11px 8px; font-size: 0.88rem; }
  .timetable td { white-space: nowrap; }
  .timetable tbody .next-tag { display: table; margin: 4px 0 0; }
  .timetable caption { padding-inline: 8px; }
}

.terms-year { font-weight: 700; color: var(--ink); }
.terms { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--border); }
.terms li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2px 18px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.terms b { font: 400 1.2rem/1.3 var(--font-head); color: var(--green-dark); grid-row: span 2; }
.terms small { color: var(--ink-soft); font-size: 0.86rem; }
@media (max-width: 480px) { .terms li { grid-template-columns: 1fr; } .terms b { grid-row: auto; } }

.resource-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.resource-list li { border-bottom: 1px solid var(--border); }
.resource-list a { display: block; padding: 16px 0; text-decoration: none; color: var(--ink); }
.resource-list b { display: block; color: var(--green-dark); }
.resource-list span { font-size: 0.9rem; color: var(--ink-soft); }
.resource-list li.is-soon { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; }
.resource-list li.is-soon b { color: var(--ink); }

/* Parent portal: the madrasah uses Teach 'n Go. This page is the front door to
   it, laid out as a guided path for a parent on a phone: what happens in three
   steps, then one card per job (register, or log in), then the questions
   parents ask. Nothing that does not work yet is drawn as a button: the online
   form and login appear as a status line until the portal opens. The page uses
   the masjid's teal rather than the madrasah's brown, at the masjid's request. */
.portal-steps { max-width: 980px; margin-inline: auto; }
.portal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
@media (max-width: 640px) { .portal-actions { grid-template-columns: 1fr; } }
.portal-action {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 26px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--green-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.portal-action h2 { font-size: 1.5rem; margin: 0; }
.portal-action > p { margin: 0 0 6px; }
.portal-action .btn { width: 100%; }
.portal-action .btn-row { flex-direction: column; gap: 10px; margin-top: auto; }
/* "Online form: opening soon" - a statement, not a dead button. */
.status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--green-light);
  color: var(--ink);
  font-size: 0.92rem;
}
.status-line .tbc { flex-shrink: 0; }

.portal-faq-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 40px 56px; align-items: start; }
@media (max-width: 860px) { .portal-faq-layout { grid-template-columns: 1fr; gap: 28px; } }
.portal-need { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; }
.portal-need h2 { font-size: 1.3rem; }
.portal-need ul { margin: 0 0 14px; padding-left: 1.1em; color: var(--ink-soft); }
.portal-need li { margin-bottom: 6px; }
.portal-need p { margin: 0; font-size: 0.92rem; }

/* Questions and answers: native details/summary, so they work with no script,
   open with Enter or Space, and read as a list to a screen reader. */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 16px 44px 16px 0;
  font-weight: 600;
  color: var(--green-dark);
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--green-dark);
  border-bottom: 2px solid var(--green-dark);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--green-ink); }
.faq .faq-body { padding: 0 0 18px; }
.faq .faq-body p, .faq .faq-body li { color: var(--ink-soft); }
.faq .faq-body p:last-child { margin-bottom: 0; }
.faq .faq-body ul { margin: 0 0 1em; padding-left: 1.1em; }

/* ==========================================================================
   The madrasah's colour, and the brown / navy preview.

   The madrasah has two logos, a brown one and a navy one, and the trustees
   have not chosen yet. Both are defined here; brown is the default. Add
   ?furqan=navy (or ?furqan=brown) to any page address to preview the other: a
   small switch appears so the two can be compared, and the choice is kept for
   the rest of the visit. Delete the losing palette, the switch and its script
   once a decision is made.
   ========================================================================== */
:root[data-furqan="navy"] {
  --furqan: #003060;        /* sampled from the navy logo */
}

.colour-preview {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 0.84rem;
  color: var(--ink);
}
.colour-preview button {
  min-height: 40px;
  padding: 6px 14px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--ink);
  font: 600 0.86rem/1 var(--font-body);
  cursor: pointer;
}
.colour-preview button[aria-pressed="true"] { background: var(--furqan); color: var(--white); }
@media (max-width: 480px) { .colour-preview { left: 16px; right: 16px; justify-content: center; } }
.colour-preview button span { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }

/* ==========================================================================
   404
   ========================================================================== */

.lost { text-align: center; max-width: 640px; margin: 0 auto; }
.lost .hero-ar { color: var(--green-text); font-size: clamp(3rem, 2rem + 5vw, 5rem); }
.lost .btn-row { justify-content: center; margin-top: 28px; }

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .timeline, .timeline.is-animated { perspective: none; }
  .timeline.is-animated .tl-card,
  .timeline.is-animated .tl-item.is-right .tl-card,
  .timeline.is-animated .tl-item.is-visible .tl-card { transform: none; opacity: 1; }
  .btn:hover, .event-poster:hover, .video-card:hover { transform: none; }
}