/* Darul Ihsan homepage, modernized. Keeps the center's paper, green and gold identity. */
:root {
  /* Tuned to the official logo: its leaf green (#088708) leads, deep forest carries
     large surfaces, warm gold and cream stay as the accents. */
  --paper: #f8f6ee;
  --paper-2: #eff0e3;
  --white: #fffdf8;
  --green: #0f4424;
  --green-3: #1b6634;
  --leaf: #0b7a1e;
  --ink: #16301f;
  --muted: #55665a;
  --gold: #a5873f;
  --gold-soft: #dcc68a;
  --gold-text: #75601f;
  --line: #d9ddcc;
  --on-green: #eef3e8;
  --on-green-muted: #b6cbb8;
  --green-ink: #0f4424;
  --on-gold: #0f4424;
  --em: #3f6a2a;
  --badge: #fffdf6;
  --badge-edge: #e6dcbf;
  color-scheme: light;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --label: 'Manrope', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --header-h: 88px;
  --radius: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
::selection { background: var(--gold-soft); color: var(--green-ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(48px, 6vw, 88px); }
h2 { font-size: clamp(36px, 4.2vw, 60px); }
h3 { font-weight: 500; line-height: 1.3; }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
/* Like ISGOC: the menu bar and the home hero run edge to edge, logo pinned left and Donate pinned right */
:root { --edge: 48px; }
.header-inner.wrap, .hero-video > .wrap { width: calc(100% - 2 * var(--edge)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
svg.ico { width: 16px; height: 16px; flex-shrink: 0; transition: transform 200ms var(--ease-out); }


/* Buttons and links */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--green); color: #fff; font-size: 14px; font-weight: 500; border: 1px solid var(--green); transition: background-color 200ms ease, transform 160ms var(--ease-out), box-shadow 200ms ease; white-space: nowrap; }
.button:active { transform: scale(0.97); }
.button-outline { background: transparent; color: var(--green-ink); border-color: #b9c3b7; }
.button-light { background: var(--paper); color: var(--green-ink); border-color: var(--paper); }
.button-gold { background: var(--gold-soft); color: var(--green-ink); border-color: var(--gold-soft); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--gold); }
.text-link-light { color: var(--gold-soft); border-color: #ffffff40; }
.inline-link { color: var(--green-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--green-3); box-shadow: 0 8px 20px -10px #0f442480; }
  .button-outline:hover, .button-light:hover { background: var(--white); }
  .button-gold:hover { background: #e4d3a6; }
  .button:hover svg.ico, .text-link:hover svg.ico { transform: translate(2px, -2px); }
  .text-link:hover svg[class="ico"] use[href="#i-right"] { transform: translateX(2px); }
}

/* Announcement and live ticker */
/* The green top bar (Bismillah + next prayer) is retired at Alvin's request: the logo bar sits at the very top */
.announcement { display: none; background: var(--green); color: var(--on-green); font-size: 12px; }
.announcement-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; }
.bismillah { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.bismillah [lang="ar"] { font-family: 'Amiri', serif; font-size: 16px; color: var(--gold-soft); white-space: nowrap; }
.bismillah-en { color: var(--on-green-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 4px 12px; border-radius: 999px; background: #ffffff10; transition: background-color 200ms ease; }
.ticker b { font-weight: 600; color: #fff; }
.ticker-in { color: var(--on-green-muted); }
.ticker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 0 #d8c48f80; }
.ticker-dot.ping { animation: pulse 1.2s var(--ease-out) 3; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #d8c48f90; } 70%, 100% { box-shadow: 0 0 0 8px #d8c48f00; } }
@media (hover: hover) { .ticker:hover { background: #ffffff1e; } }

/* Header */
.header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: background-color 250ms ease, border-color 200ms ease, box-shadow 200ms ease; }
body:has(.hero-video) .header.swap, body:has(.hero-video) .header.swap :not(.header-inner) { transition: none !important; }
.header.scrolled { border-color: var(--line); box-shadow: 0 10px 30px -24px #0f442460; }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 28px; transition: height 250ms var(--ease-out); }
.header.scrolled .header-inner { height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; line-height: 1.15; }
/* The official logo is never recoloured and sits directly on the page, with no plate.
   The dark surfaces it sits on (dark paper, footer) are tuned so its greens stay legible. */
.brand-mark { width: 60px; height: 60px; display: grid; place-items: center; flex-shrink: 0; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
/* The logo is transparent everywhere (no plate). On dark grounds a twin asset swaps only the
   near-black ring lettering for warm cream so it stays readable; shapes and greens are unchanged. */
.brand-mark img { grid-area: 1 / 1; }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light, .brand-light .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark, .brand-light .logo-dark { display: block; }
.brand-title { font-family: var(--serif); font-size: 21px; letter-spacing: -0.02em; }
.brand-sub { display: block; font: 700 11px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; color: var(--muted); }

.nav { position: relative; margin-inline: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.nav-trigger, .nav-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink); transition: color 150ms ease; }
.chev { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-pill { position: absolute; top: 0; left: 0; height: 40px; border-radius: 999px; background: var(--paper-2); opacity: 0; transition: transform 250ms var(--ease-out), width 250ms var(--ease-out), opacity 150ms ease; pointer-events: none; }
.nav-pill.on { opacity: 1; }

.mega { position: absolute; top: calc(100% + 14px); left: 0; z-index: 2; transform-origin: top left; transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out); }
.mega[data-state="closed"] { opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; visibility: hidden; transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s 220ms; }
/* A closed menu's last panel keeps .active (pointer-events: auto), which re-enabled clicks on the invisible
   panel and sent clicks on forms under it to a menu link. Nothing in a closed menu takes clicks or focus. */
.mega[data-state="closed"] * { pointer-events: none !important; }
.mega::before { content: ''; position: absolute; inset: -16px 0 auto; height: 16px; }
.mega-viewport { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 50px -22px #0b301940, 0 2px 6px #0b30190d; transition: width 280ms var(--ease-out), height 280ms var(--ease-out); }
.mega-panel { position: absolute; top: 0; left: 0; display: flex; gap: 8px; padding: 10px; width: max-content; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 280ms var(--ease-out), filter 200ms ease; filter: blur(2px); }
.mega-panel.active { opacity: 1; pointer-events: auto; transform: none; filter: none; }
.mega-panel.from-left { transform: translateX(-24px); }
.mega-panel.from-right { transform: translateX(24px); }
.mega-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 230px); gap: 2px; align-content: start; }
.mega-links-wide { grid-template-columns: repeat(2, 250px); }
#menu-about .mega-links { grid-template-columns: 260px; }
.mega-links a { display: block; padding: 12px 14px; border-radius: 10px; transition: background-color 150ms ease; }
.mega-links b { display: block; font-size: 14px; font-weight: 500; color: var(--green-ink); }
.mega-links span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.mega-links a:hover, .mega-links a:focus-visible { background: var(--paper); }
.mega-feature { width: 230px; padding: 10px; border-radius: 12px; background: var(--paper); font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.mega-feature img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 12px; }
.mega-feature-title { font-family: var(--serif); font-size: 18px; color: var(--green-ink); margin-bottom: 4px; }

.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav + .header-actions { margin-left: 0; }
.language-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; }
.language-switch a { padding: 5px 10px; border-radius: 999px; color: var(--muted); transition: background-color 150ms ease, color 150ms ease; }
.language-switch a[aria-current] { background: var(--green); color: #fff; }
.donate-button { min-height: 42px; padding: 0 18px; }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; position: relative; border: 1px solid var(--line); }
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform 250ms var(--ease-out); }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 25px; }
.menu-toggle:active { transform: scale(0.95); }

/* TV mode entry points */
.tv-toggle { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--green-ink); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.tv-toggle svg { width: 18px; height: 18px; }
.tv-toggle:active { transform: scale(0.97); }
@media (hover: hover) { .tv-toggle:hover { background: var(--white); } }
.tv-cta { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 500; color: var(--gold-soft); border-bottom: 1px solid #d8c48f66; padding-bottom: 4px; }
.tv-cta svg { width: 18px; height: 18px; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer-scrim { position: absolute; inset: 0; background: #0d241c66; opacity: 0; transition: opacity 300ms ease; }
.drawer-sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--paper); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 380ms var(--ease-drawer); padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.drawer.open .drawer-scrim { opacity: 1; }
.drawer.open .drawer-sheet { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.drawer-title { font-family: var(--serif); font-size: 24px; }
.drawer-close { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); }
.drawer-close svg { width: 20px; height: 20px; }
.drawer-prayer { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 12px 0 8px; padding: 16px 18px; background: var(--green); color: var(--on-green); border-radius: var(--radius); }
.drawer-prayer > span:first-child { grid-column: 1 / -1; font-size: 14px; color: var(--gold-soft); margin-bottom: 2px; }
.drawer-prayer b { font-weight: 500; font-size: 17px; color: #fff; }
.drawer-prayer .tnum { font-size: 17px; color: var(--gold-soft); }
.drawer-groups { flex: 1; }
.drawer-group { border-bottom: 1px solid var(--line); }
.drawer-group > button { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 58px; font-family: var(--serif); font-size: 22px; text-align: left; }
.drawer-group > button .chev { width: 18px; height: 18px; }
.drawer-group > button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drawer-group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-out); }
.drawer-group-body > div { overflow: hidden; }
.drawer-group.open .drawer-group-body { grid-template-rows: 1fr; }
.drawer-group-body a { display: block; padding: 11px 4px; font-size: 15px; color: var(--muted); }
.drawer-group-body a:last-child { margin-bottom: 12px; }
.drawer-foot { display: grid; gap: 10px; padding-top: 20px; }
.drawer-foot .button { width: 100%; }

/* Hero */
.hero { padding: 64px 0 72px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.hero h1 { margin-bottom: 26px; }
.hero h1 em { color: var(--em); }
.hero-intro { max-width: 440px; font-size: 16px; color: var(--muted); margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.hero-location { display: flex; align-items: center; gap: 10px; margin-top: 44px; font-size: 13px; color: var(--muted); }
.hero-location svg { width: 18px; height: 18px; color: var(--gold); }
.hero-art { position: relative; padding-bottom: 40px; }
.hero-photo-wrap { border-radius: 220px 220px 18px 18px; overflow: hidden; aspect-ratio: 5 / 5.4; background: var(--paper-2); }
.hero-photo { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.hero-art.in .hero-photo { transform: none; }
/* Home page: the film runs up behind the logo and menu bar; the bar turns solid once you scroll */
body:has(.hero-video) .header:not(.scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: transparent; }
body:has(.hero-video) .header:not(.scrolled) :is(.brand-title, .nav-trigger, .nav-link, .tv-toggle, .theme-button) { color: #fff; }
body:has(.hero-video) .header:not(.scrolled) .brand-sub { color: #ffffffbf; }
body:has(.hero-video) .header:not(.scrolled) :is(.tv-toggle, .theme-button, .language-switch, .menu-toggle) { border-color: #ffffff52; }
body:has(.hero-video) .header:not(.scrolled) .language-switch a:not([aria-current]) { color: #ffffffcc; }
body:has(.hero-video) .header:not(.scrolled) .menu-toggle span { background: #fff; }
body:has(.hero-video) .header:not(.scrolled) .logo-light { display: none; }
body:has(.hero-video) .header:not(.scrolled) .logo-dark { display: block; }
@media (hover: hover) { body:has(.hero-video) .header:not(.scrolled) :is(.tv-toggle, .theme-button):hover { background: #ffffff1f; } }
.header :is(.brand-title, .brand-sub, .nav-trigger, .nav-link, .tv-toggle, .theme-button) { transition: color 250ms ease, background-color 200ms ease, border-color 250ms ease; }
/* Home hero over a looping film of the center (photos of 1520 E Delavan), like a cinema backdrop */
.hero-video { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(100svh, 940px); margin-top: calc(-1 * var(--header-h) - 1px); padding: calc(var(--header-h) + 97px) 0 104px;  /* header is header-h plus its 1px border */ color: #fff; background: #0b1f16; }
.hero-video > .wrap { flex: none; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0b1f16 url(assets/video/center-loop-poster.jpg?v=20261107logo) center / cover; }
.hero-video-el { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero-video-el.playing { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0a1d14f0 0%, #0a1d14c2 38%, #0a1d1466 72%, #0a1d1440 100%), linear-gradient(0deg, #0a1d14b3 0%, #0a1d1400 40%); }
.hero-video h1 { color: #fff; }
.hero-video h1 em { color: var(--gold-soft); }
.hero-video .hero-intro { color: #ffffffd9; }
.hero-video .text-link { color: #fff; border-color: var(--gold-soft); }
.hero-video .hero-location { color: #ffffffbf; }
.hero-video .hero-location svg { color: var(--gold-soft); }
:root .hero-video .hero-actions .button-light { background: var(--paper); color: var(--green-ink); border-color: var(--paper); }
.hero-video .hero-art { position: absolute; right: var(--edge); bottom: 80px; padding-bottom: 0; }  /* bottom-right corner, just above the pause button */
.hero-video .next-card { position: relative; left: auto; bottom: auto; background: #0f4424e6; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #ffffff1f; }
.hero-video-toggle { position: absolute; right: var(--edge); bottom: 24px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #0a1d1466; border: 1px solid #ffffff4d; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.hero-video-toggle:hover { background: #0a1d14a6; }
.hero-video-toggle:active { transform: scale(0.94); }
.hero-video-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.hero-video-toggle .i-play, .hero-video-toggle[aria-pressed="true"] .i-pause { display: none; }
.hero-video-toggle[aria-pressed="true"] .i-play { display: inline; }
.next-card { position: absolute; left: -36px; bottom: 0; width: 300px; padding: 22px 24px 20px; background: var(--green); color: var(--on-green); border-radius: 18px; box-shadow: 0 24px 50px -20px #0d241c80; display: grid; gap: 6px; transition: transform 200ms var(--ease-out); }
.next-card:active { transform: scale(0.98); }
.next-card-label { font-size: 14px; color: var(--gold-soft); }
.next-card-name { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--serif); font-size: 32px; color: #fff; line-height: 1.15; }
.next-card-ar { font-family: 'Amiri', serif; font-size: 24px; color: var(--gold-soft); }
.next-card-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--on-green-muted); }
.next-card-row .tnum { color: #fff; font-weight: 500; }
.next-card-bar { height: 3px; border-radius: 3px; background: #ffffff1f; overflow: hidden; margin-top: 8px; }
.next-card-bar span { display: block; height: 100%; width: 100%; background: var(--gold-soft); transform-origin: left; transform: scaleX(0); transition: transform 1s linear; }

/* Prayer times */
.prayer { background: var(--green); color: var(--on-green); padding: 104px 0; position: relative; overflow: hidden; isolation: isolate; }
.prayer::before { content: ''; position: absolute; width: 760px; height: 760px; right: -220px; top: -260px; border-radius: 50%; border: 1px solid #d8c48f1f; box-shadow: 0 0 0 70px #ffffff05, 0 0 0 140px #ffffff04; z-index: -1; }
.prayer-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; }
.prayer h2 { color: #fff; margin-bottom: 14px; }
.prayer-date { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; color: var(--on-green-muted); margin-bottom: 36px; }
.prayer-hijri { color: var(--gold-soft); }
.countdown { padding: 24px 0; border-block: 1px solid #ffffff1f; margin-bottom: 28px; }
.countdown-label { font-size: 14px; color: var(--on-green-muted); margin-bottom: 6px; }
.countdown-value { font-family: var(--serif); font-size: clamp(44px, 5vw, 64px); line-height: 1; color: #fff; letter-spacing: -0.02em; }
.countdown-value i { font-style: normal; font-family: var(--sans); font-size: 0.32em; color: var(--gold-soft); margin-left: 2px; letter-spacing: 0; }
.asr-toggle { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.asr-toggle-label { font-size: 14px; color: var(--on-green-muted); }
.segmented { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: #0d2a20; border-radius: 999px; border: 1px solid #ffffff1a; }
.segmented button { position: relative; z-index: 1; min-height: 38px; padding: 0 18px; font-size: 14px; font-weight: 500; color: var(--on-green-muted); transition: color 200ms ease; }
.segmented button[aria-checked="true"] { color: var(--green-ink); }
.segmented-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--gold-soft); border-radius: 999px; transition: transform 280ms var(--ease-out); }
.prayer-note { font-size: 13px; color: var(--on-green-muted); max-width: 400px; line-height: 1.6; }

.prayer-list { list-style: none; margin: 0; padding: 0; }
.prayer-item { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; padding: 18px 22px; border-bottom: 1px solid #ffffff17; border-radius: 14px; transition: background-color 300ms ease; }
.prayer-item h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; color: #fff; letter-spacing: -0.01em; }
.prayer-item .ar { font-family: 'Amiri', serif; font-size: 20px; color: var(--on-green-muted); }
.prayer-item time { font-size: 20px; font-weight: 500; color: #fff; min-width: 96px; text-align: right; transition: opacity 200ms ease, filter 200ms ease; }
.prayer-item.changing time { opacity: 0.2; filter: blur(3px); }
.prayer-item.marker h3, .prayer-item.marker time { color: var(--on-green-muted); font-size: 18px; }
.prayer-item.marker { padding-block: 12px; }
.prayer-item.passed:not(.current) time { font-weight: 400; color: var(--on-green); }
.prayer-item.current { background: #ffffff0d; border-color: transparent; }
.prayer-item.next { background: var(--gold-soft); border-color: transparent; }
.prayer-item.next h3, .prayer-item.next time { color: var(--green-ink); }
.prayer-item.next .ar { color: #6c5a2c; }
.prayer-item .tag { position: absolute; top: -9px; left: 22px; font: 800 11px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--green); color: var(--gold-soft); border: 1px solid #d8c48f50; }
.jumuah { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; margin-top: 18px; border: 1px dashed #ffffff2e; border-radius: 14px; }
.jumuah h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; color: #fff; }
.jumuah p { font-size: 13px; color: var(--on-green-muted); }

/* Values */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 64px 0; border-bottom: 1px solid var(--line); }
.value { display: flex; gap: 18px; align-items: flex-start; }
.value svg { width: 38px; height: 38px; color: var(--gold); flex-shrink: 0; }
.value h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin-bottom: 4px; }
.value p { font-size: 14px; color: var(--muted); }

/* Sections */
.section { padding: 112px 0; }
.section-top { display: grid; grid-template-columns: 1fr minmax(0, 380px); gap: 40px; align-items: end; margin-bottom: 48px; }
.section-top > p { color: var(--muted); font-size: 15px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--muted); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.filter:active { transform: scale(0.97); }
.filter[aria-pressed="true"] { background: var(--green); border-color: var(--green-ink); color: #fff; }
@media (hover: hover) { .filter[aria-pressed="false"]:hover { border-color: var(--green-ink); color: var(--green-ink); } }

.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.program-card { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; transition: transform 300ms var(--ease-out), box-shadow 300ms ease, border-color 200ms ease, opacity 250ms ease; }
.program-card.hide { opacity: 0; transform: scale(0.96); }
.program-card[hidden] { display: none; }
.program-card-lead { grid-row: span 2; padding: 0; overflow: hidden; background: var(--green); color: var(--on-green); border-color: var(--green-ink); }
.program-card-lead img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.program-card-lead .program-body { padding: 4px 28px 28px; }
.program-card-lead h3 { color: #fff; }
.program-card-lead p { color: var(--on-green-muted) !important; }
.card-icon { width: 40px; height: 40px; color: var(--gold); }
.program-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.program-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.015em; }
.program-card p { font-size: 14.5px; color: var(--muted); }
.card-meta { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; border-top: 1px solid currentColor; border-color: #00000014; }
.program-card-lead .card-meta { border-color: #ffffff22; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .program-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px #0f442466; border-color: #c8cdbd; }
  .program-card:hover .ico { transform: translate(2px, -2px); }
}

/* Services */
.services-section { background: var(--paper-2); padding: 112px 0; }
.services-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; }
.services-intro { position: sticky; top: 120px; align-self: start; }
.services-intro h2 { margin-bottom: 22px; }
.services-intro > p { color: var(--muted); margin-bottom: 28px; max-width: 420px; }
.service-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 30px 8px; border-bottom: 1px solid var(--line); transition: padding 300ms var(--ease-out); }
.service-row:first-child { border-top: 1px solid var(--line); }
.service-row h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin-bottom: 6px; letter-spacing: -0.015em; }
.service-row p { color: var(--muted); font-size: 15px; max-width: 500px; }
.service-arrow { width: 44px; height: 44px; padding: 13px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line); color: var(--green-ink); transition: background-color 250ms ease, color 250ms ease, transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .service-row:hover { padding-left: 18px; }
  .service-row:hover .service-arrow { background: var(--green); color: #fff; transform: rotate(45deg); }
}

/* Story */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.story-photos { position: relative; padding: 0 60px 70px 0; }
.story-photo { width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; border-radius: 240px 240px 18px 18px; }
.story-photo-secondary { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; border: 6px solid var(--paper); }
.story-copy h2 { margin-bottom: 24px; }
.story-copy p { color: var(--muted); margin-bottom: 18px; max-width: 480px; }
.story-copy .text-link { margin-top: 10px; }

/* Gallery */
.community { padding-top: 0; }
.gallery { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.gallery-button { overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; }
.gallery-button:first-child { aspect-ratio: auto; }
.gallery-button img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
@media (hover: hover) { .gallery-button:hover img { transform: scale(1.04); } }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1000px, 92vw); color: #fff; overflow: visible; }
.lightbox::backdrop { background: #0b1e17d9; backdrop-filter: blur(6px); }
.lightbox[open] { animation: lightbox-in 280ms var(--ease-out); }
@keyframes lightbox-in { from { opacity: 0; transform: scale(0.96); } }
.lightbox-figure { margin: 0; }
.lightbox-figure img { max-height: 80vh; border-radius: 14px; }
.lightbox p { margin-top: 12px; font-size: 14px; text-align: center; }
.close-lightbox { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%; background: #ffffff1a; display: grid; place-items: center; }
.close-lightbox svg { width: 20px; height: 20px; }

/* Giving */
.giving-feature { background: var(--green); color: var(--on-green); padding: 96px 0; }
.giving-feature-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.giving-feature h2 { color: #fff; margin-bottom: 22px; }
.giving-feature-copy > p { color: var(--on-green-muted); max-width: 440px; }
.giving-feature-action { padding: 36px; border: 1px solid #ffffff22; border-radius: 22px; background: #ffffff08; }
.giving-methods { margin-bottom: 26px; color: var(--on-green); font-size: 16px; }
.giving-feature-note { font-size: 13px; color: var(--on-green-muted); margin-top: 16px; }

/* Downloads */
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.download-card { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: center; padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; }
.flyer-preview { width: 100%; aspect-ratio: 8.5 / 11; object-fit: cover; border-radius: 10px; box-shadow: 0 16px 30px -18px #0f442455; }
.download-card h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin-bottom: 8px; }
.flyer-open { display: block; color: inherit; text-decoration: none; border-radius: 10px; }
.download-card h3 .flyer-open { display: inline; border-radius: 4px; }
.download-card h3 .flyer-open:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.flyer-open .flyer-preview { transition: transform .25s ease, box-shadow .25s ease; cursor: zoom-in; }
.flyer-open:hover .flyer-preview { transform: translateY(-3px); box-shadow: 0 22px 36px -18px #0f442477; }
@media (prefers-reduced-motion: reduce) { .flyer-open .flyer-preview { transition: none; } .flyer-open:hover .flyer-preview { transform: none; } }
.download-card p { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }

/* Visit */
.visit { padding-top: 0; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: stretch; }
.visit h2 { margin-bottom: 20px; }
.visit-intro { color: var(--muted); max-width: 440px; margin-bottom: 36px; }
.contact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.contact-item { display: flex; gap: 14px; }
.contact-item svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.contact-item small { display: block; font: 800 11px/1.4 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.contact-item p, .contact-item a { font-size: 15px; }
.contact-item a { text-decoration: underline; text-decoration-color: #a58a4d70; text-underline-offset: 4px; overflow-wrap: anywhere; }
.visit-card { position: relative; min-height: 440px; border-radius: 24px; overflow: hidden; display: flex; align-items: flex-end; padding: 36px; color: #fff; background: linear-gradient(180deg, #0d241c10 10%, #0d241cd9 85%), url(assets/source-hero.png) center / cover; }
.visit-card h3 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.12; margin-bottom: 12px; }
.visit-card p { color: #dfe5dc; margin-bottom: 22px; }

/* Footer */
.footer { background: #121b16; color: var(--on-green-muted); padding: 80px 0 32px; }
.brand-light { color: #fff; margin-bottom: 18px; }
.brand-light .brand-sub { color: var(--on-green-muted); }
.footer-main { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; padding-bottom: 56px; border-bottom: 1px solid #ffffff17; }
.footer-main p { font-size: 14px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-links h2 { font: 800 11px/1 var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 18px; }
.footer-links a { display: block; font-size: 14px; padding: 5px 0; color: #dfe5dc; transition: color 150ms ease; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; font-size: 13px; }

/* Scroll reveal: content is visible by default; JS opts in. */
.js .prayer-item { animation: row-in 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.js .prayer-list.settled .prayer-item { animation: none; }
@keyframes row-in { from { opacity: 0; transform: translateX(-12px); } }
.prayer-item.next { transition: background-color 600ms ease, transform 600ms var(--ease-out); }
.prayer-item.arrived { animation: arrive 900ms var(--ease-out); }
@keyframes arrive { 0% { transform: scale(0.98); box-shadow: 0 0 0 0 #d8c48fcc; } 100% { transform: none; box-shadow: 0 0 0 14px #d8c48f00; } }


/* Dark theme: chosen in the theme menu, or following the device when set to System */
:root[data-theme="dark"] {
  /* Forest night (Alvin's pick, 2026-11-06): reads as deep green, not black. --green is the prayer band,
     kept a step brighter than the cards so it still stands apart. */
  --paper: #0f2619;
  --paper-2: #13301f;
  --white: #183a26;
  --green: #155a31;
  --leaf: #6fd27f;
  --ink: #e7eee5;
  --muted: #a9bdac;
  --line: #285039;
  --gold-soft: #dcc68a;
  --gold-text: #e0cb8e;
  --green-ink: #a6dcb0;
  --em: #b8d68a;
  --badge-edge: #c9b77f;
  color-scheme: dark;
}
:root[data-theme="dark"] .button-outline, :root[data-theme="dark"] .button-light { background: transparent; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .visit-card .button-light { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .footer { background: #0a1d12; }
:root[data-theme="dark"] .story-photo-secondary { border-color: var(--paper); }
.button-gold, .segmented button[aria-checked="true"], .prayer-item.next h3, .prayer-item.next time, .filter[aria-pressed="true"] { color: var(--on-gold); }
.filter[aria-pressed="true"] { color: #fff; }
.theme { position: relative; }
.theme-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.theme-button svg { width: 18px; height: 18px; }
.theme-button .chev { width: 14px; height: 14px; }
.theme-label { display: none; }
.theme-button:active { transform: scale(0.97); }
.theme-button[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (hover: hover) { .theme-button:hover { background: var(--white); } }
.theme-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; padding: 6px; margin: 0; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 40px -18px #0b301966; transform-origin: top right; transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out); z-index: 5; }
.theme-menu[data-state="closed"] { opacity: 0; transform: scale(0.96) translateY(-4px); pointer-events: none; }
.theme-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: 14px; text-align: left; color: var(--ink); }
.theme-menu button svg { width: 18px; height: 18px; color: var(--gold-text); }
.theme-menu button:hover, .theme-menu button:focus-visible { background: var(--paper); }
.theme-menu button[aria-checked="true"]::after { content: ''; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.drawer-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 4px; font-size: 15px; color: var(--muted); }
.drawer-lang .language-switch { display: flex; font-size: 14px; }
.drawer-lang .language-switch a { padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; }
.drawer-theme .segmented { background: var(--paper-2); border-color: var(--line); grid-template-columns: repeat(3, 1fr); }
.drawer-theme .segmented button { color: var(--muted); padding: 0 12px; }
.drawer-theme .segmented button[aria-checked="true"] { color: var(--on-gold); }
.drawer-theme .segmented-thumb { width: calc(33.333% - 2.67px); }
.drawer-theme .segmented[data-value="dark"] .segmented-thumb { transform: translateX(100%); }
.drawer-theme .segmented[data-value="system"] .segmented-thumb { transform: translateX(200%); }
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important; }

/* Top of the page: announcements beside today's times */
.today { padding: 96px 0 24px; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
/* Founder card: the right side of the visit section, photo with his story over it */
.founder-card { margin: 0; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); color: #fff; background: var(--green); }
.founder-card img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 25%; }
.founder-card figcaption { align-self: end; padding: 32px; }
.founder-kicker { font: 700 12px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 10px; }
.founder-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; margin-bottom: 12px; }
.founder-card figcaption > p:not(.founder-kicker) { color: #ffffffd9; max-width: 46ch; margin-bottom: 22px; }
:root[data-theme="dark"] .founder-card .button-light { background: var(--paper); color: var(--ink); }
@media (max-width: 680px) { .founder-card { grid-template-columns: 1fr; } .founder-card img { min-height: 0; aspect-ratio: 4 / 3; object-position: 50% 20%; } .founder-card figcaption { padding: 24px; } }
/* Calendar of recurring programs, beside the announcements */
.cal { position: sticky; top: calc(var(--header-h) + 16px); padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 20px 40px -32px #0f442466; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cal-head h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; white-space: nowrap; color: var(--ink); }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--ink); display: inline-grid; place-items: center; transition: background-color 150ms ease, transform 160ms var(--ease-out); }
.cal-nav button:active { transform: scale(0.95); }
.cal-nav [data-cal="-1"] svg { transform: scaleX(-1); }
@media (hover: hover) { .cal-nav button:hover { background: var(--paper); } }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-dow { font: 700 11px/1 var(--label); letter-spacing: 0.08em; color: var(--muted); padding-bottom: 8px; }
.cal-day { position: relative; aspect-ratio: 1; border-radius: 10px; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; transition: background-color 150ms ease; }
@media (hover: hover) { .cal-day:hover { background: var(--paper); } }
.cal-day.has-events::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--leaf); }
.cal-day.has-announcement::after { background: var(--gold); }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--gold); font-weight: 600; }
.cal-day.is-picked { background: var(--green); color: #fff; }
.cal-day.is-picked::after { background: var(--gold-soft); }
.cal-picked { margin: 18px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); font: 700 12px/1.3 var(--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-text); }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cal-list a { display: grid; gap: 2px; padding: 10px 12px; margin-inline: -12px; border-radius: 12px; transition: background-color 150ms ease; }
@media (hover: hover) { .cal-list a:hover { background: var(--paper); } }
.cal-when { font-size: 13px; color: var(--muted); }
.cal-what { font-size: 16px; font-weight: 500; color: var(--ink); }
.cal-none { font-size: 14px; color: var(--muted); padding: 4px 0; }
.cal-soon { font: 700 11px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 12px; }
@media (max-width: 1180px) { .today-grid { grid-template-columns: minmax(0, 1fr); } .cal { position: static; max-width: 520px; } }
@media (max-width: 680px) { .cal { padding: 20px 16px; } .cal-head { flex-wrap: wrap; gap: 8px 12px; } }
.today-head { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.today-title { font-size: clamp(36px, 4.2vw, 60px); }
.announce-grid { display: grid; gap: 14px; min-width: 0; }
/* Three or more announcements: the soonest as a lead card, the rest as rows. Posters are never cropped, so any number fits */
.ann-lead, .ann-row { display: grid; background: var(--white); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out); }
.ann-lead:active, .ann-row:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .ann-lead:hover, .ann-row:hover { background: var(--paper); border-color: var(--gold); } .ann-lead:hover .ann-more svg { transform: translateX(3px); } }
.ann-lead { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 28px; align-items: center; padding: 16px; }
.ann-lead img, .ann-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 10px; background: var(--paper-2); }
.ann-lead h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; margin-bottom: 10px; }
.ann-lead-text { color: var(--muted); font-size: 16px; max-width: 46ch; margin-bottom: 18px; }
.ann-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--green-ink); }
.ann-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ann-row { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; }
.ann-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ann-row h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; margin-bottom: 4px; }
.ann-row .ann-date { font-size: 13px; margin-bottom: 4px; }
.ann-row-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 1.4; }
.ann-all { justify-self: start; margin-top: 4px; }
.times-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.times-dates { display: flex; flex-direction: column; gap: 2px; text-align: center; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.times-hijri { font-family: var(--serif); font-size: 19px; color: var(--green-ink); }
.times-dates span:last-child { font-size: 14px; color: var(--muted); }
.times-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.times-table th { font-weight: 600; font-size: 13px; color: var(--muted); text-align: right; padding: 10px 6px 6px; }
.times-table th:first-child, .times-table td:first-child { text-align: left; }
.times-table td { padding: 9px 6px; text-align: right; border-top: 1px solid var(--line); }
.times-table td:first-child { font-weight: 600; color: var(--green-ink); }
.times-table tr.marker td { color: var(--muted); font-weight: 400; }
.times-table tr.next td { background: var(--gold-soft); color: var(--on-gold); }
.times-table tr.next td:first-child { border-radius: 8px 0 0 8px; }
.times-table tr.next td:last-child { border-radius: 0 8px 8px 0; }
.times-jumuah { margin-top: 10px; }
.times-confirm { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.times-events { width: 100%; margin-top: 14px; }
@media (max-width: 680px) {
  .today { padding: 64px 0 8px; }
  .ann-lead { grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 16px; padding: 12px; align-items: start; }
  .ann-lead h3 { font-size: 26px; margin-bottom: 6px; }
  .ann-lead-text { font-size: 14px; line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
  .ann-rows { grid-template-columns: minmax(0, 1fr); }
  .theme { display: none; }
}

/* Responsive */
@media (max-width: 1380px) {
  .tv-toggle span { display: none; }
  .tv-toggle { width: 42px; padding: 0; justify-content: center; }
}
/* Up to 1320px the full header only fits once it is tightened */
@media (max-width: 1320px) {
  .nav-trigger, .nav-link { padding: 0 8px; }
  .header-actions { gap: 8px; }
}
@media (max-width: 1180px) {
  .wrap { width: calc(100% - 64px); }
  :root { --edge: 32px; }
}
/* Below 1260px the full header no longer fits: the menu and the EN / বাংলা switch move into the drawer */
@media (max-width: 1260px) {
  :root { --header-h: 72px; }
  .nav { display: none; }
  .language-switch { display: none; }
  .menu-toggle { display: block; }
  .header-actions { margin-left: auto; }
  .nav + .header-actions { margin-left: auto; }
}
@media (max-width: 1020px) {
  .hero-grid, .prayer-grid, .services-layout, .story-grid, .giving-feature-inner, .visit-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-art { max-width: 560px; }
  .hero-video .hero-art { position: static; max-width: none; display: flex; justify-content: flex-start; }
  .services-intro { position: static; }
  .section-top { grid-template-columns: 1fr; gap: 16px; }
  .program-grid { grid-template-columns: 1fr 1fr; }
  .program-card-lead { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .program-card-lead img { height: 100%; aspect-ratio: auto; }
  .program-card-lead .program-body { padding: 28px; }
  .download-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .wrap { width: calc(100% - 32px); }
  :root { --edge: 16px; }
  body { font-size: 15px; }
  .bismillah-en { display: none; }
  .announcement-inner { gap: 12px; }
  .ticker { padding: 3px 10px; font-size: 12px; }
  .ticker-in { display: none; }
  .brand-title { font-size: 19px; }
  .brand-mark { width: 44px; height: 44px; }
  .donate-button, .tv-toggle { display: none; }
  .hero { padding: 40px 0 56px; }
  .hero-location { margin-top: 32px; }
  .hero-art { padding-bottom: 0; }
  .next-card { position: relative; left: auto; bottom: auto; width: auto; margin: -28px 12px 0; }
  .hero-video { min-height: 0; padding: calc(var(--header-h) + 48px) 0 84px; }
  .hero-video .hero-art { justify-content: stretch; }
  .hero-video .next-card { margin: 0; width: 100%; }
  .hero-media::after { background: linear-gradient(180deg, #0a1d14d9 0%, #0a1d14b3 55%, #0a1d14e6 100%); }
  .hero-video-toggle { bottom: 16px; }
  .prayer { padding: 72px 0; }
  .prayer-item { padding: 16px 14px; gap: 12px; }
  .prayer-item .ar { display: none; }
  .prayer-item h3 { font-size: 23px; }
  .prayer-item time { font-size: 18px; min-width: 0; }
  .jumuah { flex-direction: column; align-items: flex-start; }
  .values { grid-template-columns: 1fr; gap: 24px; padding: 48px 0; }
  .section, .services-section { padding: 80px 0; }
  .program-grid { grid-template-columns: 1fr; }
  .program-card-lead { display: flex; }
  .program-card-lead img { aspect-ratio: 16 / 10; height: auto; }
  .program-card-lead .program-body { padding: 4px 24px 24px; }
  .program-card { padding: 24px; }
  .service-row h3 { font-size: 24px; }
  .story-photos { padding: 0 32px 48px 0; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery-button:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
  .giving-feature { padding: 72px 0; }
  .giving-feature-action { padding: 24px; }
  .download-card { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .flyer-preview { width: 160px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex-shrink: 0; }
  .contact-list { grid-template-columns: 1fr; }
  .visit-card { min-height: 360px; padding: 24px; }
  .footer-main { grid-template-columns: 1fr; gap: 40px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .drawer-sheet, .mega-panel, .program-card, .hero-photo, .poster, .photo, .ann-poster, .related-card, .flyer-artwork img, .gallery-button img { transition-property: opacity; }
}

/* TV mode opened from the site: a full-screen stage holding the TV page */
.tv-stage { position: fixed; inset: 0; z-index: 200; background: #03130d; }
.tv-stage iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Iqamah under each adhan time, Jumu'ah times, empty announcements */
.prayer-item .times { display: grid; justify-items: end; gap: 2px; }
.prayer-item .iq { font-size: 13px; color: var(--on-green-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prayer-item.next .iq { color: #4a5a3a; }
.jumuah-times { font-size: 16px; font-weight: 500; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.announce-grid.announce-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 28px; border: 1px dashed var(--line); border-radius: 18px; grid-template-rows: none; }
.announce-empty p { color: var(--muted); font-size: 16px; }

/* ---------- Inner pages ---------- */
.page-hero { padding: 64px 0 40px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.back-link .ico { transform: rotate(180deg); }
.page-hero h1 { font-size: clamp(42px, 5.4vw, 76px); margin-bottom: 18px; max-width: 16ch; }
.page-intro { font-size: 18px; color: var(--muted); max-width: 60ch; margin-bottom: 28px; }
.page-section { padding: 24px 0 64px; }
.section-title { font-size: clamp(30px, 3.2vw, 44px); margin-bottom: 24px; }
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.points li { padding: 24px 0; border-bottom: 1px solid var(--line); }
.points h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin-bottom: 6px; color: var(--green-ink); }
.points p { color: var(--muted); font-size: 15px; }

/* Forms */
.form-section { padding: 72px 0 96px; background: var(--paper-2); }
.form-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.form-intro h2 { font-size: clamp(32px, 3.4vw, 46px); margin-bottom: 14px; }
.form-intro p { color: var(--muted); margin-bottom: 12px; }
.form-privacy { font-size: 14px; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 32px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 24px; align-items: start; }
.field-error { font-size: 13px; font-weight: 500; color: #a8382c; }
:root[data-theme="dark"] .field-error { color: #f0a597; }
.field [aria-invalid="true"] { border-color: #a8382c; border-width: 2px; }
.form-errors { padding: 14px 16px; margin-bottom: 18px; border-radius: 12px; background: #a8382c14; border: 1px solid #a8382c55; color: var(--ink); font-size: 15px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field small { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color 150ms ease, box-shadow 150ms ease; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px #a58a4d33; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 14px; }
.form-done h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin-bottom: 10px; }
.form-done p { color: var(--muted); margin-bottom: 10px; }
.form-done pre { white-space: pre-wrap; font: 14px/1.6 var(--sans); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 0 0 16px; }
.form-done-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.form-online { padding: 24px; }

/* Events */
.upcoming { display: grid; gap: 20px; }
.events-empty { padding: 28px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); max-width: 70ch; }
.event-card { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
.event-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin-bottom: 10px; }
.event-card > div > p:not(.event-date) { color: var(--muted); max-width: 60ch; margin-bottom: 22px; }
.poster, .photo { display: block; width: 100%; padding: 0; border-radius: 14px; overflow: hidden; background: var(--paper-2); box-shadow: 0 16px 30px -22px #0f442466; transition: transform 300ms var(--ease-out), box-shadow 300ms ease; }
.poster img, .photo img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .poster:hover, .photo:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px #0f442488; } }
.past-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 32px 20px; }
.past-grid .poster { aspect-ratio: 3 / 4; margin-bottom: 12px; }
.past-grid .poster img { object-position: top; }
.event-date { font-size: 13px; font-weight: 600; color: var(--gold-text); margin-bottom: 4px; }
.past-grid h3 { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.past-grid p:not(.event-date) { font-size: 14px; color: var(--muted); }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: 260px; gap: 16px; }
.gallery-grid li { min-height: 0; }
.gallery-grid li:first-child { grid-row: span 2; }
.gallery-grid .photo { height: 100%; }
@media (max-width: 680px) { .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 10px; } .gallery-grid li:first-child { grid-column: 1 / -1; grid-row: span 1; } .gallery-grid li:last-child:nth-child(even) { grid-column: 1 / -1; } }

/* Umrah */
.umrah { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.umrah-poster { aspect-ratio: auto; }
.umrah-poster img { height: auto; }
.umrah dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.umrah dl div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.umrah dt { font-weight: 600; color: var(--green-ink); }
.umrah dd { margin: 0; color: var(--ink); }
.umrah .fine { font-size: 13px; color: var(--muted); margin-top: 14px; }

@media (max-width: 1020px) {
  .form-wrap, .umrah { grid-template-columns: 1fr; gap: 32px; }
  .umrah-poster { max-width: 480px; }
}
@media (max-width: 680px) {
  .page-hero { padding: 40px 0 24px; }
  .page-intro { font-size: 16px; }
  .form-card { padding: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .event-card { grid-template-columns: 1fr; }
  .past-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .umrah dl div { grid-template-columns: 1fr; gap: 2px; }
}

/* One or two announcements: a feature row with the poster */
.announce-grid.announce-feature { display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 20px; }
.ann-feature { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: start; }
.ann-poster { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 36px -24px #0f442480; transition: transform 300ms var(--ease-out); }
.ann-poster img { width: 100%; height: auto; }
@media (hover: hover) { .ann-poster:hover { transform: translateY(-4px); } }
.ann-date { font-size: 14px; font-weight: 600; color: var(--gold-text); margin-bottom: 8px; }
.ann-feature h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; margin-bottom: 14px; color: var(--ink); }
.ann-feature-body { padding-top: 12px; }
.ann-feature-body > p:not(.ann-date) { color: var(--muted); font-size: 17px; max-width: 46ch; margin-bottom: 24px; }
.ann-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0 0 28px; border-top: 1px solid var(--line); max-width: 640px; }
.ann-facts div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ann-facts dt { font-size: 13px; font-weight: 600; color: var(--gold-text); }
.ann-facts dd { margin: 2px 0 0; font-size: 17px; color: var(--ink); }
@media (max-width: 680px) {
  .ann-feature { grid-template-columns: 1fr; gap: 20px; }
  .ann-facts { grid-template-columns: 1fr; }
  .ann-poster { max-width: 320px; }
}

/* One announcement in detail: a window on a computer, a sheet from the bottom on a phone */
.ann-sheet { border: 0; padding: 0; margin: auto; width: min(960px, calc(100vw - 48px)); max-width: none; max-height: min(88dvh, 780px); overflow: hidden; border-radius: 22px; background: var(--white); color: var(--ink); box-shadow: 0 40px 80px -30px #06150ecc; opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out); }
.ann-sheet.open { opacity: 1; transform: none; }
.ann-sheet::backdrop { background: #0b1e17b8; opacity: 0; transition: opacity 200ms ease; }
.ann-sheet.open::backdrop { opacity: 1; }
.ann-sheet-scroll { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: start; }
.ann-sheet-scroll.no-poster { grid-template-columns: minmax(0, 1fr); }
.ann-sheet-poster { display: block; position: sticky; top: 0; background: var(--paper-2); }
.ann-sheet-poster img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.ann-sheet-body { padding: 44px 40px 36px; }
.ann-sheet-body h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; margin-bottom: 14px; padding-right: 32px; color: var(--ink); }
.ann-sheet-text { color: var(--muted); font-size: 17px; margin-bottom: 24px; }
.ann-sheet .ann-facts { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; }
.ann-sheet .ann-facts div { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 12px; padding: 11px 0; }
.ann-sheet .ann-facts dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.ann-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ann-sheet-actions .button { min-height: 44px; padding: 0 18px; }
.ann-sheet-close { position: absolute; top: 14px; right: 14px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); color: var(--ink); border: 1px solid var(--line); transition: background-color 150ms ease, transform 160ms var(--ease-out); }
.ann-sheet-close svg { width: 18px; height: 18px; }
.ann-sheet-close:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .ann-sheet-close:hover { background: var(--paper-2); } }
@media (max-width: 680px) {
  .ann-sheet { width: 100%; margin: auto 0 0; max-height: 92dvh; border-radius: 22px 22px 0 0; opacity: 1; transform: translateY(100%); transition: transform 300ms var(--ease-drawer); }
  .ann-sheet-scroll { grid-template-columns: minmax(0, 1fr); }
  .ann-sheet-poster { position: static; padding: 16px 16px 0; background: none; }
  .ann-sheet-poster img { width: min(62vw, 260px); margin: 0 auto; border-radius: 12px; box-shadow: 0 16px 30px -22px #0f442488; }
  .ann-sheet-body { padding: 20px 20px max(24px, env(safe-area-inset-bottom)); }
  .ann-sheet-body h2 { padding-right: 0; }
  .ann-sheet-text { font-size: 16px; margin-bottom: 18px; }
  .ann-sheet-actions .button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ann-sheet, .ann-sheet.open { transform: none; opacity: 0; transition: opacity 120ms ease; }
  .ann-sheet.open { opacity: 1; }
}

/* Service page hero with a photograph in the arch frame */
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 64px; align-items: center; }
.page-hero-photo { margin: 0; aspect-ratio: 4 / 3.4; border-radius: 220px 220px 18px 18px; overflow: hidden; background: var(--paper-2); }
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Khutbah photo is tall and the imam stands top right: frame from his face down to the front row of the congregation */
.page-hero-photo img[src$="khutbah-1.jpg"] { object-position: 50% 27%; transform: translateX(-4%) scale(1.08); transform-origin: 50% 0%; }
@media (max-width: 600px) { .page-hero-photo img[src$="khutbah-1.jpg"] { object-position: 50% 22%; } } /* the arch is rounder on phones, so drop his face clear of it */
/* His portrait is 3:4, so give it a matching portrait frame: no crop, cap clear of the arch */
.page-hero-photo:has(img[src$="imam-abdur-rahman.jpg"]) { aspect-ratio: 3 / 4; max-width: 400px; justify-self: end; width: 100%; }
.page-hero-photo img[src$="imam-abdur-rahman.jpg"] { object-position: 50% 100%; }
.js .page-hero-photo { animation: inner-reveal 900ms var(--ease-out) 120ms both; }
@keyframes inner-reveal { from { opacity: 0; clip-path: inset(12% 0 0 0 round 220px 220px 18px 18px); } }
.feature-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px 32px; margin-top: 32px; background: var(--green); color: var(--on-green); border-radius: 22px; }
.feature-line h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); color: #fff; }
.feature-line p { color: var(--on-green-muted); max-width: 52ch; }
.feature-line .button { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--on-gold); }
.form-steps { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.form-steps li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.form-steps b { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 1020px) { .page-hero-grid { grid-template-columns: 1fr; gap: 32px; } .page-hero-photo { max-width: 520px; } }
@media (prefers-reduced-motion: reduce) { .js .page-hero-photo { animation: none; } }

/* ---------- Zeffy donations ---------- */
.zeffy-modal { width: min(560px, calc(100% - 24px)); height: min(860px, calc(100dvh - 24px)); max-height: none; padding: 0; border: 0; border-radius: 22px; background: var(--white); color: var(--ink); box-shadow: 0 40px 80px -30px #000a; overflow: hidden; display: none; flex-direction: column; }
.zeffy-modal[open] { display: flex; animation: zeffy-in 260ms var(--ease-out); }
.zeffy-modal::backdrop { background: #06140bb3; backdrop-filter: blur(4px); }
@keyframes zeffy-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.zeffy-modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--line); }
.zeffy-modal-head p { font-family: var(--serif); font-size: 20px; margin-right: auto; }
.zeffy-newtab { font-size: 13px; font-weight: 500; color: var(--green-ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.zeffy-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); }
.zeffy-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; display: block; }
.zeffy-embed { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.zeffy-embed .zeffy-frame { height: 1150px; }
.zeffy-soon { padding: 32px; background: var(--white); border: 1px dashed var(--gold); border-radius: 22px; }
.zeffy-soon h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin-bottom: 8px; color: var(--green-ink); }
.zeffy-soon p { color: var(--muted); }
.zeffy-soon a { color: var(--green-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
@media (max-width: 680px) { .zeffy-modal { width: 100%; height: 100dvh; border-radius: 0; } .zeffy-embed .zeffy-frame { height: 1300px; } }
@media (prefers-reduced-motion: reduce) { .zeffy-modal[open] { animation: none; } }

/* ---------- Form controls: choices, consent, sending state ---------- */
.choice-group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.choice-group legend { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 8px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 15px; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.choice span::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); flex-shrink: 0; transition: border-color 150ms ease, box-shadow 150ms ease; }
.choice input[type="checkbox"] + span::before { border-radius: 5px; }
.choice input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.choice input:checked + span::before { border-color: #fff; box-shadow: inset 0 0 0 3px var(--green), inset 0 0 0 9px #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice-group[aria-invalid="true"] .choice span { border-color: #a8382c; }
.consent { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 15px; }
.consent input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--green); flex-shrink: 0; }
.honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.form-status[data-kind="error"] { background: #a8382c14; border: 1px solid #a8382c55; }
.form-status[data-kind="sending"] { background: var(--paper); border: 1px solid var(--line); }
.button[aria-busy="true"] { opacity: 0.75; pointer-events: none; }
.button[aria-busy="true"]::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
.button[aria-busy="true"] svg.ico { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-done .done-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; margin-bottom: 16px; }
.form-done .done-ref { font-size: 14px; color: var(--muted); }

/* Multi-step forms (matrimonial bio-data) */
.steps-progress { margin-bottom: 24px; }
.steps-progress-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 10px; }
.steps-progress-top b { font-weight: 600; color: var(--green-ink); }
.steps-progress-top span { color: var(--muted); }
.steps-bar { height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.steps-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green-3), var(--gold)); border-radius: inherit; transition: width 400ms var(--ease-out); }
.steps-dots { display: flex; gap: 6px; margin-top: 12px; list-style: none; padding: 0; flex-wrap: wrap; }
.steps-dots button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); background: var(--paper); }
.steps-dots button[aria-current="step"] { background: var(--green); border-color: var(--green); color: #fff; }
.steps-dots button.done { border-color: var(--green-3); color: var(--green-ink); }
.form-step[hidden] { display: none; }
.form-step > h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin-bottom: 4px; color: var(--green-ink); }
.form-step > p { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.step-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.js .form-step:not([hidden]) { animation: step-in 320ms var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .js .form-step:not([hidden]) { animation: none; } }
.form-intro .price-tag, .price-tag { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--gold-soft); color: var(--on-gold); font-weight: 600; }
.price-tag b { font-family: var(--serif); font-size: 28px; font-weight: 500; }

/* Conditional fields, multi-date picker, totals: the form answers back as it is filled */
.form-grid > [data-show-when].revealing { animation: field-in 280ms var(--ease-out); }
@keyframes field-in { from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 40% 0); } }
.choice[data-show-when].revealing { animation: field-in 220ms var(--ease-out); }
.md-store { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.md-field { position: relative; }
.md-help { display: block; }
.md-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.md-chips:empty { display: none; }
.md-chips li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border-radius: 999px; background: var(--green); color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; animation: field-in 220ms var(--ease-out); }
.md-chips button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: inherit; transition: background-color 150ms ease; }
.md-chips button svg { width: 16px; height: 16px; }
.md-chips button:hover, .md-chips button:focus-visible { background: #ffffff26; }
.field-total { grid-column: 1 / -1; font-family: var(--serif); font-size: 22px; color: var(--green-ink); font-variant-numeric: tabular-nums; margin-top: -6px; }
.field-total:empty { display: none; }
.field input[type="date"], .field input[type="time"] { cursor: pointer; min-height: 50px; }
.field input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
.field input, .field textarea { caret-color: var(--gold); }
.field input::placeholder { color: var(--muted); opacity: 0.7; }
.consent input, .choice input { accent-color: var(--green); }
@media (prefers-reduced-motion: reduce) { .form-grid > [data-show-when].revealing, .choice[data-show-when].revealing, .md-chips li { animation: none; } }

/* Accessibility fixes (audit, Oct 31) */
[data-show-when][hidden], .field[hidden], .choice[hidden], .choice-group[hidden], .consent[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.steps-dots button { min-width: 44px; min-height: 44px; }
.md-chips button { width: 44px; height: 44px; }
.field input::placeholder { opacity: 1; }
.form-errors ul { margin: 8px 0 0; padding-left: 20px; }
.form-errors a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .field :is(input, select, textarea), :root[data-theme="dark"] .choice span { border-color: #3f6a50; }
:root[data-theme="dark"] .field :is(input, select, textarea):focus { border-color: var(--gold); box-shadow: 0 0 0 3px #a5873f80; }
:root[data-theme="dark"] .field [aria-invalid="true"], :root[data-theme="dark"] .choice-group[aria-invalid="true"] .choice span { border-color: #f0a597; }
@media (forced-colors: active) { .choice input:checked + span::before { background: CanvasText; } .choice input:focus-visible + span { outline-color: Highlight; } }
@media (prefers-reduced-motion: reduce) { .button[aria-busy="true"]::after { animation-duration: 2.4s; } .steps-bar span { transition: none; } }

/* Motion review (Emil Kowalski's design-engineering guidance): under 300ms, press feedback,
   hover only on real pointers, reduced motion keeps a gentle fade instead of nothing */
.form-grid > [data-show-when].revealing { animation-duration: 220ms; }
.js .form-step:not([hidden]) { animation-duration: 240ms; }
.choice span { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out); }
.choice:active span { transform: scale(0.97); }
.md-chips button:hover { background: transparent; }
@media (hover: hover) and (pointer: fine) { .md-chips button:hover { background: #ffffff26; } }
@keyframes soft-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .form-grid > [data-show-when].revealing, .choice[data-show-when].revealing, .md-chips li, .js .form-step:not([hidden]) { animation: soft-fade 150ms ease; }
  .choice:active span { transform: none; }
}

/* Phones (mobile-native): instant taps, no text selection on controls, keyboards that fit the field */
button, a, [role="button"], .choice, .md-pick { touch-action: manipulation; }
.button, .choice span, .steps-dots button, .md-chips button, .zeffy-close, .filter { user-select: none; -webkit-user-select: none; }
.zeffy-modal { height: min(860px, calc(100dvh - 24px)); }
@media (max-width: 680px) { .zeffy-modal { height: 100dvh; } }

/* Finish-gate fixes (Oct 31) */
.steps-bar span { width: 100%; transform-origin: left; transform: scaleX(0); transition: transform 240ms var(--ease-out); }
.js .form-step:not([hidden]) { animation: none; }
[data-dir] .form-step:not([hidden]) { animation: step-in 240ms var(--ease-out); }
[data-dir="back"] .form-step:not([hidden]) { --dx: -10px; }
@keyframes step-in { from { opacity: 0; transform: translateX(var(--dx, 10px)); } }
.md-chips li { animation: none; }
.md-chips li.chip-new { animation: field-in 200ms var(--ease-out); }
.zeffy-modal { max-width: none; margin: auto; }
.zeffy-close { width: 44px; height: 44px; }
html[data-zeffy="off"] [data-when-zeffy="on"] { display: none; }
@media (prefers-reduced-motion: reduce) { .steps-bar span { transition: none; } [data-dir] .form-step:not([hidden]), .md-chips li.chip-new { animation: soft-fade 150ms ease; } }

/* Anything marked hidden in a form or its done panel stays hidden, whatever display a button has */
.form-done [hidden], .form-card [hidden], form [hidden] { display: none !important; }


/* ---------- November 2026: flyers, coming-soon banners, program pages, nonprofit line ---------- */
.lightbox-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.button-outline-light { background: transparent; border: 1px solid #ffffff66; color: #fff; }
.lightbox .ico, .flyer-actions .ico { width: 16px; height: 16px; }
.lightbox-figure img { max-height: 72vh; margin-inline: auto; }
.flyer-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.footer-nonprofit { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 20px; margin-top: 8px; border-top: 1px solid #ffffff1f; font-size: 13px; }
.footer-nonprofit b { font-weight: 600; color: #fff; }
.contact-item .inline-link { display: inline-block; margin-top: 4px; }
.contact-item a.button { margin-top: 12px; text-decoration: none; }
.contact-item a.button svg { width: 16px; height: 16px; margin: 0; color: inherit; }
.aside-visit { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--gold-soft); text-decoration: underline; text-decoration-color: #d8c48f66; text-underline-offset: 4px; }

.soon { position: relative; isolation: isolate; display: grid; align-items: center; min-height: min(78vh, 760px); padding: 72px 0; overflow: hidden; background: var(--green); color: var(--on-green); }
.soon-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; filter: saturate(0.5); }
.soon::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, #0a2e18f2 15%, #0a2e1880 100%); }
.soon .back-link { display: flex; width: fit-content; color: var(--gold-soft); margin-bottom: 32px; }
.soon-label { display: flex; width: fit-content; align-items: center; gap: 10px; padding: 6px 16px; margin-bottom: 20px; border: 1px solid var(--gold-soft); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--gold-soft); }
.soon-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-soft); animation: soon-pulse 2.4s ease-in-out infinite; }
@keyframes soon-pulse { 50% { opacity: 0.35; transform: scale(0.8); } }
.soon h1 { max-width: 16ch; margin-bottom: 18px; font-size: clamp(42px, 6vw, 84px); color: #fff; }
.soon p.soon-text { max-width: 54ch; margin-bottom: 28px; font-size: 18px; line-height: 1.7; color: var(--on-green-muted); }
.soon .button { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--on-gold); }
@media (prefers-reduced-motion: reduce) { .soon-label::before { animation: none; } }

.facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(130px, 220px) 1fr; gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; color: var(--green-ink); }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts > div { grid-template-columns: 1fr; } }
.program-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.program-body p + p { margin-top: 14px; }
.program-body > div > p { font-size: 17px; line-height: 1.75; }
.program-body .section-title { margin-bottom: 18px; }
@media (max-width: 860px) { .program-body { grid-template-columns: 1fr; gap: 36px; } }
.check-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.check-list li { position: relative; padding-left: 22px; }
.check-list li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.program-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.program-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.program-list h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); }
.program-list p { color: var(--muted); max-width: 62ch; }
.program-list-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.soon-tag { padding: 6px 14px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--gold-text); }
.fee-table-wrap { overflow-x: auto; }
.fee-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.fee-table th, .fee-table td { padding: 14px 16px 14px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.fee-table thead th { font-size: 14px; color: var(--muted); font-weight: 600; }
.fee-table tbody th { font-weight: 600; color: var(--green-ink); }
.policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px 48px; }
.policy-grid h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin-bottom: 10px; }
.policy-grid p { line-height: 1.7; }
.policy-grid p + p { margin-top: 12px; }
.form-summary { display: grid; gap: 0; margin: 18px 0; border-top: 1px solid var(--line); }
.form-summary > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.form-summary dt { font-weight: 600; color: var(--green-ink); }
.form-summary dd { margin: 0; }
.field-note { grid-column: 1 / -1; padding: 12px 16px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.field input[readonly] { background: var(--paper-2); cursor: default; }
.field input[type="file"] { padding: 10px; }
.field input[type="file"][hidden] { display: none; }
.picture-preview { display: grid; justify-items: start; gap: 10px; }
.picture-preview img { max-width: min(100%, 260px); max-height: 260px; border-radius: 12px; border: 1px solid var(--line); object-fit: contain; }
.picture-preview p { font-size: 15px; color: var(--muted); }
.picture-remove { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--green-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.picture-remove:hover { border-color: var(--gold); }
/* Umrah: package overview, and the registration form's long options, passport list and terms */
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.umrah-package ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 40px; border-top: 1px solid var(--line); }
.umrah-package li { display: grid; align-content: start; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.umrah-package b { font-weight: 600; color: var(--green-ink); }
.umrah-package .fine { font-size: 14px; color: var(--muted); margin-top: 14px; }
[data-form="umrah-registration"] .choices { flex-direction: column; align-items: stretch; }
[data-form="umrah-registration"] .choice { display: block; }
[data-form="umrah-registration"] .choice span { display: grid; grid-template-columns: 16px 1fr; column-gap: 10px; border-radius: 14px; }
[data-form="umrah-registration"] .choice span::before { grid-row: 1 / span 2; }
[data-form="umrah-registration"] .choice small { grid-column: 2; font-size: 13px; }
.field-total small { display: block; margin-top: 4px; font-family: var(--sans, inherit); font-size: 14px; color: var(--muted); }
.file-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.file-list li { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.file-list img, .file-kind { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.file-kind { display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--green-ink); }
.file-name { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.file-count { font-size: 14px; color: var(--muted); }
.file-count:empty { display: none; }
.form-terms { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 8px; }
.form-terms h3 { font-size: 18px; margin: 0; color: var(--green-ink); }
.form-terms p { margin: 0; font-size: 15px; }
.form-done-pay { margin-top: 16px; }
.form-privacy-link { font-size: 14px; color: var(--muted); }
.picture-later { display: grid; gap: 8px; padding: 16px; margin: 16px 0; border: 1px solid var(--line); border-radius: 14px; text-align: left; }
.picture-later label { font-weight: 600; }
.give-amount { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 24px; margin-bottom: 16px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--gold); }
.give-amount-label { font-size: 13px; font-weight: 600; color: var(--gold-text); }
.give-amount-value { font-family: var(--serif); font-size: clamp(34px, 4vw, 46px); line-height: 1.1; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.give-amount-help { font-size: 14px; color: var(--muted); }
.give-amount-ref { flex-basis: 100%; font-size: 14px; color: var(--muted); }
.give-ein { margin-top: 10px; font-size: 15px; color: var(--muted); }
.flyer-group { margin-bottom: 56px; }
.flyer-group > h2 { margin-bottom: 20px; }
.flyer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 32px 24px; list-style: none; margin: 0; padding: 0; }
.flyer-grid .poster { aspect-ratio: 4 / 5; margin-bottom: 12px; }
.flyer-grid .poster img { object-position: top; }
.flyer-grid h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
.flyer-grid .flyer-actions { font-size: 14px; }
.flyer-grid .flyer-page { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

.form-intro .facts { margin: 18px 0; }
.form-intro .facts > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; font-size: 15px; }

/* Notices: a slim bar at the very top of every page (notices in data/site-data.js, drawn by home.js).
   Info is a green room with a gold dot; an alert is Soft Gold with green ink and a ringed "!", the same pairing as
   the next-prayer row, so the two differ by shape as well as colour. Both keep their colours in the dark theme.
   Hidden (and taking no room) until there is a notice to show. */
.notice-bar { background: var(--green); color: var(--on-green); font-size: 15px; font-weight: 500; line-height: 1.4; }
.notice-bar[hidden] { display: none; }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice + .notice { border-top: 1px solid #ffffff24; }
.notice.is-alert { background: var(--gold-soft); color: var(--on-gold); font-weight: 600; }
.notice.is-alert + .notice.is-alert { border-top-color: #0f442433; }
.notice-inner { display: flex; align-items: center; gap: 12px; width: calc(100% - 2 * var(--edge)); margin-inline: auto; min-height: 48px; }
.notice-mark { flex: none; width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; background: var(--gold-soft); }
.notice.is-alert .notice-mark { display: grid; place-items: center; width: 18px; height: 18px; margin: 0; background: none; border: 1.5px solid currentColor; }
.notice.is-alert .notice-mark::before { content: '!'; font: 700 12px/1 var(--sans); }
/* One line where it fits, never more than two */
.notice-text { flex: 1; min-width: 0; margin: 8px 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.notice-link { text-decoration: underline; text-decoration-color: var(--gold-soft); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.notice.is-alert .notice-link { text-decoration-color: currentColor; }
.notice-link svg { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; transition: transform 200ms var(--ease-out); }
.notice-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -14px; border-radius: 50%; color: inherit; transition: background-color 150ms ease; }
.notice-close svg { width: 16px; height: 16px; }
.notice-more { display: block; width: 100%; min-height: 44px; padding: 0 var(--edge); border-top: 1px solid #ffffff24; color: var(--on-green); font-size: 14px; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 4px; }
.notice-bar :focus-visible { outline-color: var(--gold-soft); outline-offset: -3px; }
.notice.is-alert :focus-visible { outline-color: var(--on-gold); }
/* A gentle entrance the first time the bar shows; only when script has opted in to motion */
.js .notice-bar.entering .notice-inner { animation: notice-in 180ms var(--ease-out) both; }
@keyframes notice-in { from { opacity: 0; transform: translateY(-6px); } }
@media (hover: hover) and (pointer: fine) {
  .notice-close:hover { background: #ffffff1f; }
  .notice.is-alert .notice-close:hover { background: #0f44241f; }
  .notice-link:hover svg { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .notice-bar.entering .notice-inner { animation: none; }
  .notice-close, .notice-link svg { transition: none; }
  .notice-link:hover svg { transform: none; }
}
@media print { .notice-close, .notice-more { display: none; } }

/* Registration deadline: a small pill beside the date on announcement cards and in the pop-out.
   Soft Gold while registration is open, a muted paper pill in the same place once it has closed. */
:is(.ann-date, .event-date):has(.ann-deadline) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ann-deadline { display: inline-block; min-width: 0; padding: 2px 10px; border-radius: 12px; background: var(--gold-soft); color: var(--on-gold); font-size: 12px; font-weight: 600; line-height: 1.5; }
.ann-deadline.is-closed { background: var(--paper-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
/* In the pop-out the button to the form gives way to this label once registration has closed */
.ann-closed { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 600; }
@media (max-width: 680px) { .ann-sheet-actions .ann-closed { flex: 1 1 100%; } }

/* "Lost your code?" (find-my-code): one card, one field, one button. Links to the page stay hidden until the
   lookup is switched on in data/site-config.js. */
[data-lookup-link][hidden] { display: none !important; }
.done-lookup { font-size: 14px; }
.lookup-section { padding-top: 56px; }
.lookup-wrap { max-width: 560px; }
.lookup-wrap .form-grid { margin-bottom: 20px; }
.lookup-wrap form .button { width: 100%; }
.lookup-off { display: grid; gap: 18px; justify-items: start; font-size: 17px; color: var(--ink); }
.lookup-result { display: grid; justify-items: start; gap: 16px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.lookup-result:focus { outline: none; }
.lookup-result a[href^="tel:"] { white-space: nowrap; }
.lookup-result .done-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; }
.lookup-failed { grid-template-columns: auto 1fr; align-items: start; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #a8382c14; border: 1px solid #a8382c55; font-size: 15px; }
.lookup-mark { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 13px/1 var(--sans); }
@media (max-width: 680px) { .lookup-section { padding-top: 32px; } }