/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Al-Mustafa Academy BC — Site Stylesheet
   Crafted for warmth, depth, and quiet authority.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

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

:root{
  /* ── Brand palette ─────────────────────────
     Deep forest with warm cream — no gold.
     Inspired by old library bindings and
     architectural tilework. */
  --ink:        #1d2026;        /* main text */
  --ink-soft:   #4a5160;        /* secondary text */
  --ink-faint:  #7a8190;        /* tertiary / meta */
  --paper:      #faf7f2;        /* warm off-white bg */
  --paper-2:    #f3eee5;        /* warmer surface */
  --surface:    #ffffff;        /* card / panel */
  --rule:       #e8e0d2;        /* warm border */
  --rule-2:     #d4cab8;        /* stronger border */

  /* Forest greens — deeper, less corporate */
  --g:          #1f4d3b;        /* primary */
  --g-dk:       #143226;        /* darkest */
  --g-md:       #2a6249;        /* mid */
  --g-soft:     #e7eee9;        /* faint tint */
  --g-fog:      #f1f5f1;        /* mist */

  /* Section banding. index.php alternates sections between these two so a long
     page reads as distinct bands rather than one flat sheet. They were being
     used before they were ever declared, so every banded section silently fell
     back to the body colour. */
  --bg:         #faf7f2;        /* = --paper  */
  --bgs:        #f3eee5;        /* = --paper-2 */

  /* One quiet accent — clay/terracotta, used sparingly */
  --clay:       #a85842;
  --clay-soft:  #f3e5df;

  /* Functional */
  --gold:       #c9973f;        /* donate / giving accent */
  --gold-dk:    #ad7f2e;
  --live:       #962d22;
  --ok:         #2a6249;
  --warn:       #b08530;

  /* Geometry — flatter, more architectural */
  --r:    4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Shadows — soft, paper-on-paper feel */
  --sh-1: 0 1px 2px rgba(20,20,25,.04), 0 1px 4px rgba(20,20,25,.04);
  --sh-2: 0 4px 16px rgba(20,20,25,.06), 0 2px 4px rgba(20,20,25,.03);
  --sh-3: 0 18px 48px rgba(20,20,25,.10), 0 4px 8px rgba(20,20,25,.04);

  --tr: all .25s cubic-bezier(.22,.61,.36,1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Base typography
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  overflow-x:hidden;
  font-feature-settings:'kern','liga','calt','ss01';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
/* Phone numbers and emails linked automatically by app.js. Kept in the
   surrounding text colour so a paragraph doesn't turn into a row of blue, but
   underlined so it is visibly tappable rather than a link only a mouse
   discovers. */
.auto-link{
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset:2px;
  cursor:pointer;
}
.auto-link:hover,.auto-link:focus-visible{
  color:var(--g);
  text-decoration-color:currentColor;
}
img{max-width:100%;height:auto;display:block}
iframe{max-width:100%}
ul{list-style:none}

/* Friendlier touch feedback on mobile (no blue flash) */
a,button,.btn,[role="button"]{-webkit-tap-highlight-color:rgba(31,77,59,.15)}

/* Serif display family for headlines */
h1,h2,h3,.serif{
  font-family:'Cormorant Garamond','Source Serif Pro',Georgia,serif;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}
h1{font-size:clamp(2.3rem,5.2vw,3.6rem);line-height:1.08;letter-spacing:-.02em;font-weight:500}
h2{font-size:clamp(1.7rem,3.3vw,2.5rem);line-height:1.15;letter-spacing:-.015em;font-weight:500}
h3{font-size:1.22rem;font-weight:600;line-height:1.3}
h4{font-size:.98rem;font-weight:600;font-family:'Inter',sans-serif;letter-spacing:-.005em}

p{color:var(--ink-soft)}

/* ── Layout container ── */
.c{max-width:1180px;margin:0 auto;padding:0 28px}

/* ── Eyebrow tag — small typographic detail ── */
.tag{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--g);
  padding:0 0 14px;
  margin-bottom:6px;
  position:relative;
}
.tag::before{
  content:'';
  display:inline-block;
  width:22px;
  height:1px;
  background:var(--g);
  vertical-align:middle;
  margin-right:10px;
  position:relative;top:-3px;
}

/* ── Sections ── */
.sec{padding:104px 0;position:relative}
.sec-hdr{text-align:center;max-width:640px;margin:0 auto 64px}
.sec-hdr p{color:var(--ink-soft);margin-top:14px;font-size:1.02rem;line-height:1.65}

/* ── Buttons — sharper, more architectural ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--g);color:#fff;
  padding:13px 30px;
  border-radius:var(--r);
  font-family:'Inter',sans-serif;
  font-weight:500;font-size:.92rem;letter-spacing:.01em;
  border:1px solid var(--g);
  transition:var(--tr);
  cursor:pointer;
}
.btn:hover{background:var(--g-dk);border-color:var(--g-dk);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}

.btn-o{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:#fff;
  padding:13px 30px;border-radius:var(--r);
  font-weight:500;font-size:.92rem;letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.55);
  transition:var(--tr);
}
.btn-o:hover{background:rgba(255,255,255,.10);border-color:#fff}

.btn-lg{padding:16px 38px;font-size:.98rem}

/* Donate CTA — warm gold so giving reads as distinct from the green nav actions */
.btn-donate{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gold);color:#241a06;
  padding:13px 30px;border-radius:var(--r);
  font-family:'Inter',sans-serif;
  font-weight:600;font-size:.92rem;letter-spacing:.01em;
  border:1px solid var(--gold);
  transition:var(--tr);cursor:pointer;
}
.btn-donate:hover{background:var(--gold-dk);border-color:var(--gold-dk);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn-donate:active{transform:translateY(0)}
.btn-gh{
  background:transparent;color:var(--g);border:1px solid var(--g);
}
.btn-gh:hover{background:var(--g);color:#fff}

.card-lnk{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--g);font-weight:500;font-size:.88rem;
  margin-top:18px;
  border-bottom:1px solid transparent;
  padding-bottom:2px;transition:var(--tr);
}
.card-lnk:hover{border-bottom-color:var(--g)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAVBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.topbar{display:none} /* removed — site doesn't need it anymore */

.nav{
  position:sticky;top:0;z-index:900;
  background:rgba(250,247,242,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--rule);
  transition:var(--tr);
}
.nav.scrolled{background:rgba(250,247,242,.98);box-shadow:var(--sh-1)}
.nav>.c{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px}
/* !important prevents editor's _imageStyles max-width/width/height from compressing the logo */
.nav-logo img{height:54px!important;width:auto!important;max-width:none!important}
.nav-brand{display:flex;align-items:center;gap:12px;min-width:0}
.nav-logo-text{font-family:'Amiri',serif;font-weight:700;color:var(--g,#1f4d3b);font-size:1.15rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-logo-text:empty{display:none}
.edit-mode .nav-logo-text:empty{display:inline-block;min-width:90px;color:var(--ink-soft,#5d6b63);opacity:.6;font-weight:500}
.edit-mode .nav-logo-text:empty::before{content:attr(data-placeholder)}
@media(max-width:560px){.nav-logo-text{font-size:.95rem}}
/* Desktop: the whole menu sits on ONE line and never wraps. Without this base
   rule .nav-links was a plain block element, so its links flowed as inline text
   and spilled onto a second row (LIVE/Donate dropping below the page links). */
.nav-links{
  display:flex;align-items:center;flex-wrap:nowrap;gap:1px;
  white-space:nowrap;
}
.nav-links a{
  font-family:'Inter',sans-serif;
  font-size:.88rem;font-weight:500;
  color:var(--ink-soft);
  padding:8px 11px;border-radius:var(--r);
  transition:var(--tr);cursor:pointer;letter-spacing:.005em;
  white-space:nowrap;flex:0 0 auto;
}
.nav-links a:hover{color:var(--g)}
.nav-links a.act{color:var(--g);background:var(--g-fog)}

.btn-live{
  background:var(--live)!important;color:#fff!important;
  padding:7px 14px!important;border-radius:var(--r)!important;
  font-weight:500!important;margin-left:8px;font-size:.82rem!important;
  letter-spacing:.04em;
  display:inline-flex!important;align-items:center;gap:6px;
}
.btn-live::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#fff;animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.btn-live:hover{background:#7a221a!important}

.btn-dn{
  background:transparent!important;color:var(--g)!important;
  padding:7px 16px!important;border-radius:var(--r)!important;
  font-weight:500!important;
  border:1px solid var(--g);font-size:.85rem!important;
}
.btn-dn:hover{background:var(--g)!important;color:#fff!important}

.hbg{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hbg span{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;transition:var(--tr)}
.hbg.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hbg.open span:nth-child(2){opacity:0}
.hbg.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── Page routing ── */
[data-page]{display:none}
[data-page].show{display:block}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO — restrained, editorial
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero{
  position:relative;min-height:84vh;display:flex;align-items:center;
  background:var(--g-dk,#143226); /* fallback while the photo loads */
  overflow:hidden;
}
/* The building photo, blurred and slightly oversized so the blur's soft edge
   never shows at the box boundary. Kept on its own layer (rather than
   blurring .hero directly) so the hero text stays perfectly sharp. */
.hero::before{
  content:'';position:absolute;inset:0;
  background:url('images/hero-building.jpg') center/cover no-repeat;
  filter:blur(9px);
  transform:scale(1.08);
  z-index:0;
}
.hero::after{
  /* darken for text legibility + subtle vignette, over the blurred photo */
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(20,50,38,.78) 0%,rgba(20,50,38,.55) 60%,rgba(20,50,38,.85) 100%),
    radial-gradient(ellipse 90% 80% at 50% 50%,transparent 40%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
.hero-in{position:relative;z-index:2;color:#fff;max-width:720px;padding:90px 0}
.hero-tag{
  font-family:'Inter',sans-serif;
  font-size:.74rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.22em;
  color:rgba(255,255,255,.78);margin-bottom:22px;
  display:flex;align-items:center;gap:14px;
}
.hero-tag::before{
  content:'';width:32px;height:1px;background:rgba(255,255,255,.55);
}
.hero-in h1{
  color:#fff;margin-bottom:24px;
  text-shadow:0 2px 24px rgba(0,0,0,.18);
  font-weight:400;
}
.hero-in h1 em{
  font-style:italic;color:#fff;
  background:linear-gradient(transparent 65%,rgba(255,255,255,.18) 65%);
}
.hero-sub{
  font-size:1.08rem;color:rgba(255,255,255,.82);
  margin-bottom:40px;max-width:560px;
  font-weight:400;line-height:1.65;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-arrow{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.5);font-size:1.2rem;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);opacity:.5}50%{transform:translateX(-50%) translateY(10px);opacity:.85}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRAYER & CALENDAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pcal-section{background:var(--surface);padding:88px 0;border-bottom:1px solid var(--rule)}
.today-row{
  display:flex;justify-content:center;gap:22px;align-items:center;
  flex-wrap:wrap;margin-bottom:36px;
  font-size:.96rem;font-weight:500;color:var(--ink-soft);
}
.hijri-str{
  font-family:'Amiri',serif;font-size:1.18rem;color:var(--g);
  font-weight:400;letter-spacing:.01em;
}

/* Prayer cards — clean, low chrome */
.prayer-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.pcrd{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  padding:18px 10px;text-align:center;transition:var(--tr);
}
.pcrd:hover{border-color:var(--rule-2)}
.pcrd.nxt{background:var(--g);border-color:var(--g);color:#fff;box-shadow:var(--sh-2)}
.pname{
  display:block;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-faint);margin-bottom:8px;
  font-weight:500;
}
.pcrd.nxt .pname{color:rgba(255,255,255,.7)}
.ptime{display:block;font-size:1.05rem;font-weight:600;font-feature-settings:'tnum'}
.pcrd.nxt .ptime{color:#fff}
.pcrd.loading .ptime{color:var(--rule-2)}
.pnote{font-size:.78rem;color:var(--ink-faint);text-align:center;margin-bottom:44px;letter-spacing:.01em}
.pnote strong{color:var(--g);font-weight:500}

/* Calendar */
.cal-layout{display:grid;grid-template-columns:380px 1fr;gap:36px;align-items:start}
.cal-panel{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:26px;
  overflow:hidden;
  container-type:inline-size;
}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-nav h3{font-family:'Inter',sans-serif;font-size:.96rem;text-align:center;flex:1;font-weight:600;letter-spacing:.01em}
.cbtn{
  background:transparent;border:1px solid var(--rule);border-radius:var(--r);
  width:34px;height:34px;cursor:pointer;font-size:.9rem;color:var(--g);
  transition:var(--tr);display:flex;align-items:center;justify-content:center;
}
.cbtn:hover{background:var(--g);color:#fff;border-color:var(--g)}
.cal-heading{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.cal-hijri-range{
  font-size:.7rem;color:var(--ink-faint);letter-spacing:.01em;
  text-align:center;line-height:1.3;
  /* Two Hijri month names plus the year cannot fit one line on a phone.
     Balance the wrap so it breaks into two even lines instead of orphaning
     "AH" on its own. */
  text-wrap:balance;
}
.cal-hijri-range:empty{display:none}
@container (max-width: 380px){
  .cal-hijri-range{font-size:.64rem}
}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.cal-dow span{
  text-align:center;font-size:.64rem;font-weight:600;color:var(--ink-faint);
  text-transform:uppercase;padding:6px 0;letter-spacing:.12em;
}
.cal-dow .fri{color:var(--g)}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  /* Always reserve 6 rows of equal height — months can be 5 OR 6 rows,
     this keeps the panel a stable height for either case. */
  grid-template-rows:repeat(6, minmax(36px, 1fr));
  gap:3px;
  max-height:288px;
}
/* Two calendars in one cell. The Gregorian date is the heading and sits
   centred; the Hijri day is an annotation pinned to the top-right corner, so
   the two can never be mistaken for one another and neither has to shrink to
   make room. The Hijri month NAME is never rendered in here — it does not fit,
   and used to wrap to three lines and wreck the row. It lives in
   .cal-hijri-range under the month heading instead. */
.cday{
  /* No aspect-ratio so cells can shrink to fit the row */
  min-height:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);font-size:.9rem;cursor:default;position:relative;
  transition:var(--tr);border:1px solid transparent;font-feature-settings:'tnum';
  /* Top padding keeps the centred Gregorian number clear of the Hijri
     annotation in the corner, so the two never touch in a narrow cell. */
  padding:9px 2px 3px;overflow:hidden;
}
.cday:hover{background:var(--g-fog)}
.cday.today{background:var(--g);color:#fff;font-weight:600}
.cday-num{font-weight:600;font-size:.98rem;line-height:1}
.cday-hijri{
  position:absolute;top:2px;right:3px;
  font-size:.58rem;line-height:1;opacity:.5;color:var(--ink-soft);
  font-weight:500;font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.cday.today .cday-hijri{color:#fff;opacity:1;font-weight:600}
/* A month start is a filled pill on the number — unmissable, one glyph wide,
   and structurally incapable of wrapping. */
.cday.cday-hijri-newmonth .cday-hijri{
  top:1px;right:1px;
  background:var(--clay);color:#fff;opacity:1;font-weight:700;
  border-radius:999px;padding:1px 3px;min-width:6px;text-align:center;
  box-shadow:0 0 0 1.5px var(--paper, #fff);
}
.cday.today.cday-hijri-newmonth .cday-hijri{
  background:#ffd6c2;color:var(--g-dk);box-shadow:0 0 0 1.5px var(--g);
}
/* Event dot moves to the bottom-left so it never collides with the Hijri
   pill in the opposite corner. */
.cday.has-ev::after{
  content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;
  background:var(--clay);
}
.cday.today.has-ev::after{background:rgba(255,255,255,.85)}
/* Event days are clickable */
.cday.has-ev{cursor:pointer}
.cday.has-ev:hover{background:var(--g-soft);box-shadow:inset 0 0 0 1px var(--g)}
.cday.today.has-ev:hover{background:var(--g-md)}
.cday.has-ev:focus-visible{outline:2px solid var(--g);outline-offset:1px}

/* ━━ Calendar event details modal ━━ */
.cem-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px}
.cem-modal.show{display:flex}
.cem-backdrop{position:absolute;inset:0;background:rgba(20,33,30,.55);backdrop-filter:blur(2px)}
.cem-box{
  position:relative;z-index:1;background:var(--paper,#fff);border:1px solid var(--rule,#e5e7eb);
  border-radius:var(--r-lg,16px);box-shadow:0 24px 60px rgba(0,0,0,.28);
  width:min(460px,100%);max-height:85vh;overflow-y:auto;padding:26px 26px 22px;
}
.cem-close{
  position:absolute;top:12px;right:14px;border:none;background:transparent;
  font-size:1.6rem;line-height:1;color:var(--ink-soft,#7a8190);cursor:pointer;
  width:32px;height:32px;border-radius:8px;transition:var(--tr,.15s)
}
.cem-close:hover{background:var(--g-fog,#f1f5f1);color:var(--g,#1f4d3b)}
.cem-date{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--g,#1f4d3b);margin-bottom:14px;padding-right:30px}
.cem-event + .cem-event{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule,#e5e7eb)}
.cem-title{font-size:1.18rem;margin:0 0 10px;color:var(--ink,#1d2026);line-height:1.25}
.cem-meta{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.cem-meta-row{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-soft,#5d6b63)}
.cem-meta-row svg{flex-shrink:0;color:var(--g,#1f4d3b)}
.cem-desc{font-size:.92rem;line-height:1.6;color:var(--ink,#384149);margin:0 0 14px;white-space:pre-wrap;word-break:break-word}
.cem-links{display:flex;flex-wrap:wrap;gap:8px}
.cem-link{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:500;text-decoration:none;padding:8px 14px;border-radius:999px;transition:var(--tr,.15s)}
/* "Add to Google Calendar" is a <button> (it builds a file rather than
   navigating), so it needs the UA button styling stripped to match the
   anchors beside it. */
button.cem-link{font-family:inherit;line-height:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
button.cem-link:focus-visible{outline:2px solid var(--g,#1f4d3b);outline-offset:2px}
.cem-link.gcal{background:var(--g-fog,#f1f5f1);color:var(--g,#1f4d3b);border:1px solid var(--rule,#e5e7eb)}
.cem-link.gcal:hover{background:var(--g,#1f4d3b);color:#fff;border-color:var(--g,#1f4d3b)}
.cem-link.yt{background:#fdecea;color:#c0392b;border:1px solid #f5c6c0}
.cem-link.yt:hover{background:#c0392b;color:#fff;border-color:#c0392b}

/* Events panel */
.ev-panel{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:26px;max-height:480px;overflow-y:auto;
}
.ev-panel h3{margin-bottom:18px;font-size:1rem;color:var(--g);font-family:'Inter',sans-serif;letter-spacing:.01em}
.ev-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ev-item:last-child{border-bottom:none}
.ev-date{
  flex-shrink:0;text-align:center;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);
  padding:8px 12px;min-width:56px;
}
.ev-date .evd{display:block;font-size:1.1rem;font-weight:600;color:var(--g);line-height:1;font-feature-settings:'tnum'}
.ev-date .evm{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-top:3px;font-weight:600}
.ev-info{flex:1}
.ev-name{font-size:.92rem;font-weight:500;margin-bottom:4px;color:var(--ink)}
.ev-time{font-size:.78rem;color:var(--ink-faint);margin-top:3px}
.ev-type{
  font-size:.66rem;padding:2px 8px;border-radius:100px;
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  display:inline-block;
}
.ev-type.bday{background:var(--g-soft);color:var(--g)}
.ev-type.mty{background:rgba(150,45,34,.08);color:var(--live)}
.ev-type.eid{background:var(--clay-soft);color:var(--clay)}
.ev-type.special{background:rgba(70,90,130,.08);color:#3a4d70}
.ev-empty{color:var(--ink-faint);font-size:.9rem;padding:14px 0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IMAGE LOADING
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
img{opacity:1;transition:opacity .3s}
img[data-loading]{opacity:.6}
img.err{
  opacity:.3;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:var(--r);min-height:60px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ABOUT — home snippet
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ab-in{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.ab-txt h2{margin-bottom:22px;color:var(--ink)}
.ab-txt p{color:var(--ink-soft);margin-bottom:18px;line-height:1.75;font-size:1.02rem}
.ab-img{position:relative}
.ab-img img{
  border-radius:var(--r-lg);box-shadow:var(--sh-3);
  width:100%;object-fit:cover;max-height:480px;
}
/* Decorative accent — subtle */
.ab-img::before{
  content:'';position:absolute;top:-18px;left:-18px;
  width:90px;height:90px;border:1px solid var(--g);
  border-radius:var(--r-md);z-index:-1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SERVICE CARDS — editorial
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.sc{
  background:var(--surface);
  padding:42px 32px;
  transition:var(--tr);display:flex;flex-direction:column;
}
.sc:hover{background:var(--paper)}
.sc-ico{
  width:54px;height:54px;background:var(--g-soft);
  border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;padding:10px;
}
.sc-ico img{width:34px;height:34px;object-fit:contain}
.sc h3{margin-bottom:12px;font-size:1.32rem;color:var(--ink);font-weight:500}
.sc p{color:var(--ink-soft);font-size:.94rem;flex:1;line-height:1.7}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATS — refined, no gold
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stats{
  background:var(--g-dk);padding:72px 0;
  position:relative;overflow:hidden;
}
.stats::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 100% at 20% 50%,rgba(255,255,255,.04),transparent 60%);
}
.stats>.c{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative;z-index:1}
.stat{text-align:left;color:#fff;border-left:1px solid rgba(255,255,255,.15);padding-left:24px}
.stat:first-child{border-left:none;padding-left:0}
.stat-n{
  display:block;font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem,4vw,3.2rem);font-weight:400;
  color:#fff;line-height:1;margin-bottom:10px;letter-spacing:-.01em;
}
.stat-l{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.65);font-weight:500;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEADERSHIP — restrained
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.team{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.tcard{
  text-align:center;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:36px 28px;min-width:180px;max-width:220px;
  transition:var(--tr);
}
.tcard:hover{background:var(--surface);box-shadow:var(--sh-2);transform:translateY(-2px)}
.tavt{
  width:60px;height:60px;background:var(--g);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:500;font-size:1rem;margin:0 auto 18px;
  font-family:'Cormorant Garamond',serif;letter-spacing:.04em;
}
.tcard h4{font-size:.96rem;margin-bottom:5px;font-weight:600}
.tcard p{font-size:.82rem;color:var(--ink-faint);letter-spacing:.01em}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CTA BANNER — calmer
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-ban{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:72px 0;
}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-in h2{color:var(--ink);margin-bottom:10px;font-weight:500}
.cta-in p{color:var(--ink-soft);font-size:1.02rem}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE HEROES — for sub-pages
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pg-hero{
  background:var(--g-dk);
  padding:96px 0 88px;color:#fff;text-align:center;
  position:relative;overflow:hidden;
}
.pg-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 70% at 50% 0%,rgba(255,255,255,.06),transparent 70%);
}
.pg-hero>.c{position:relative;z-index:1}
.pg-hero .tag{color:rgba(255,255,255,.7)}
.pg-hero .tag::before{background:rgba(255,255,255,.45)}
.pg-hero h1{color:#fff;margin-top:14px;margin-bottom:18px;font-weight:400}
.pg-hero p{color:rgba(255,255,255,.78);max-width:600px;margin:0 auto;font-size:1.06rem}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ABOUT PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ab2-in{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.ab2-txt h2{margin-bottom:22px}
.ab2-txt p{color:var(--ink-soft);margin-bottom:18px;line-height:1.75;font-size:1.02rem}
.ab-vals{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:38px;
}
.ab-vals h3{color:var(--g);margin-bottom:22px;font-family:'Inter',sans-serif;font-size:1.02rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.ab-vals li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:.96rem;color:var(--ink-soft);margin-bottom:14px;line-height:1.65;
}
.ab-vals li::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--g);margin-top:10px;flex-shrink:0;
}

/* Highlight block */
.hl{
  background:var(--g-soft);border-left:2px solid var(--g);
  padding:18px 22px;margin:24px 0;font-size:.94rem;
  color:var(--g-dk);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.08rem;
}

/* School / Madressah cards */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.vcard{
  background:var(--surface);
  padding:34px 28px;transition:var(--tr);
}
.vcard:hover{background:var(--paper)}
.vi{
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;font-weight:500;color:var(--g);
  margin-bottom:14px;line-height:1;
  display:inline-block;
  padding-bottom:8px;border-bottom:1px solid var(--rule-2);
}
.vcard h4{color:var(--ink);margin-bottom:10px;font-size:1.04rem;font-weight:600}
.vcard p{font-size:.92rem;color:var(--ink-soft);line-height:1.7}

/* Info block */
.ib{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:38px;margin-bottom:30px;
}
.ib h3{color:var(--ink);margin-bottom:18px;font-family:'Inter',sans-serif;font-size:1.04rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ib p{color:var(--ink-soft);margin-bottom:14px;line-height:1.75}
.ib li{
  font-size:.94rem;color:var(--ink-soft);padding-left:22px;
  position:relative;margin-bottom:10px;line-height:1.6;
}
.ib li::before{
  content:'';position:absolute;left:0;top:11px;
  width:10px;height:1px;background:var(--g);
}

/* `.ab-txt p` is more specific than `.pull-quote`, so a pull quote placed in a
   two-column text block needs its own styling restated to win. */
.ab-txt p.pull-quote{
  color:var(--ink);font-size:1.32rem;line-height:1.55;
  margin:30px 0 26px;padding:26px 0 26px 30px;
}

/* ── School page ──────────────────────────────────────────────────────────
   The school's educational philosophy names exactly five values, and .val-grid
   is a 3-up. Five cards in a 3-up leaves a hole, and because the grid uses
   1px gaps over a --rule background, that hole renders as a grey block. So the
   last card stretches to fill the row instead. */
.val-grid--5>*:last-child{grid-column:span 2}

/* Three self-contained info blocks side by side. .ib already carries its own
   border and radius, so this is a plain gapped grid — not .val-grid, which
   would draw a second border around them. */
.ib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ib-grid .ib{margin-bottom:0}

/* A second button beside the primary CTA. .btn-o is the outline variant for
   dark bands; this is its counterpart for the light .cta-ban. */
.cta-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-ghost{
  background:transparent;color:var(--g);
  border-color:var(--rule-2);
}
.btn-ghost:hover{background:var(--g-soft);border-color:var(--g);color:var(--g-dk);box-shadow:none}

/* The principal's own published words, under the student photos. */
.principal-quote{
  margin:52px auto 0;max-width:760px;text-align:center;
  padding-top:40px;border-top:1px solid var(--rule);
}
.principal-quote blockquote{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.38rem;line-height:1.6;color:var(--ink);margin:0;
}
.principal-quote blockquote::before{content:'\201C'}
.principal-quote blockquote::after{content:'\201D'}
.principal-quote figcaption{
  margin-top:20px;font-family:'Inter',sans-serif;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-faint);
}
.principal-quote figcaption span{color:var(--ink);font-weight:600;display:block}
.principal-quote figcaption em{font-style:normal;display:block;margin-top:5px}

/* Mission: one dark band to break up a long page of warm paper tones. */
.mission-sec{background:var(--g-dk);color:#fff}
.mission-in{max-width:820px;margin:0 auto;text-align:center}
.mission-in .tag{color:rgba(255,255,255,.72)}
.mission-in .tag::before{background:rgba(255,255,255,.45)}
.mission-in h2{color:#fff;margin:14px 0 30px;font-weight:500}
.mission-in p{
  color:rgba(255,255,255,.84);line-height:1.85;font-size:1.04rem;
  margin-bottom:20px;
}
.mission-in p:first-of-type{
  font-family:'Cormorant Garamond',serif;font-size:1.34rem;
  color:#fff;line-height:1.6;font-style:italic;
}
.mission-in p:last-child{margin-bottom:0}

/* Careers */
.jcard{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:42px;margin-bottom:28px;
  transition:var(--tr);
}
.jcard:hover{border-color:var(--rule-2);box-shadow:var(--sh-2)}
.jbadge{
  display:inline-block;background:var(--g);color:#fff;
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  padding:5px 12px;border-radius:var(--r);margin-bottom:12px;
}
.jcard h3{font-size:1.5rem;margin-bottom:6px;font-weight:500}
.jmeta{font-size:.9rem;color:var(--ink-faint);letter-spacing:.01em}
.jdiv{border:none;border-top:1px solid var(--rule);margin:24px 0}
.jsec h4{
  font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-faint);margin-bottom:12px;
}
.jsec li{font-size:.94rem;padding-left:18px;position:relative;margin-bottom:8px;color:var(--ink-soft);line-height:1.65}
.jsec li::before{content:'';position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--g)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ct-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.ct-det{display:flex;align-items:flex-start;gap:18px;margin-bottom:28px}
.ct-ico{
  width:42px;height:42px;background:var(--g-soft);color:var(--g);
  border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ct-ico svg{width:18px;height:18px;stroke-width:1.8}
.ct-txt h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);margin-bottom:6px;font-weight:600}
.ct-txt a,.ct-txt p{color:var(--ink);font-weight:500;font-size:.98rem}
.ct-txt a:hover{color:var(--g)}
.ct-form{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:44px;
}
.ct-form h3{margin-bottom:30px;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500}

.fg{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.fg label{font-size:.82rem;font-weight:600;color:var(--ink);letter-spacing:.01em}
.fg input,.fg select,.fg textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--rule);border-radius:var(--r);
  font-family:'Inter',sans-serif;font-size:.95rem;color:var(--ink);
  background:var(--surface);transition:border-color .2s,box-shadow .2s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  outline:none;border-color:var(--g);
  box-shadow:0 0 0 3px rgba(31,77,59,.10);
}
.fg textarea{resize:vertical;min-height:130px;line-height:1.6}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fsub{width:100%;text-align:center;cursor:pointer;font-family:inherit}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer{
  background:var(--g-dk);color:rgba(255,255,255,.7);
  padding:80px 0 0;
}
.ft-in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;padding-bottom:56px}
.ft-logo{height:54px;margin-bottom:18px;filter:brightness(1.1)}
.footer p{font-size:.92rem;line-height:1.75;color:rgba(255,255,255,.62)}
.ft-col h4{
  color:#fff;margin-bottom:20px;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.14em;font-weight:600;
}
.ft-col li{margin-bottom:10px;font-size:.92rem}
.ft-col li a{color:rgba(255,255,255,.62);transition:color .2s}
.ft-col li a:hover{color:#fff}
.yt-lnk{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--r);
  font-size:.86rem;font-weight:500;
  background:transparent;color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.18);transition:var(--tr);
}
.yt-lnk:hover{background:var(--live);color:#fff;border-color:transparent}
.ft-btm{
  border-top:1px solid rgba(255,255,255,.08);padding:24px 0;
  text-align:center;font-size:.8rem;color:rgba(255,255,255,.4);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPINNERS / UTILITY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.spin{
  display:inline-block;width:18px;height:18px;
  border:2px solid var(--g-fog);border-top-color:var(--g);
  border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GALLERY / EVENTS GRID
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gallery-sec{background:var(--paper-2)}
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:240px;gap:12px;
}
.gal-item{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background:var(--rule);cursor:pointer;
}
.gal-item.gal-wide{grid-column:span 2}
.gal-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .4s;
  filter:saturate(.94);
}
.gal-item:hover img{transform:scale(1.06);filter:saturate(1.08)}
.gal-cap{
  position:absolute;bottom:0;left:0;right:0;
  padding:36px 20px 18px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.78));
  font-family:'Cormorant Garamond',serif;font-size:1.08rem;font-weight:500;
  letter-spacing:.01em;pointer-events:none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FACILITY PHOTO COMPOSITES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fac-photos{
  height:380px;border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;
  gap:6px;background:var(--rule);
}
.fac-main{grid-row:span 2}
.fac-photos img,.fac-sub img{width:100%;height:100%;object-fit:cover;display:block}

.ev-photos{
  height:360px;border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:6px;background:var(--rule);
}
.ev-tall{grid-row:span 2}
.ev-photos img{width:100%;height:100%;object-fit:cover;display:block}

.comm-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.comm-photos .cp{position:relative;border-radius:var(--r-md);overflow:hidden;height:200px}
.comm-photos .cp img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:saturate(.94)}
.comm-photos .cp:hover img{transform:scale(1.05)}
.comm-cap{
  position:absolute;bottom:0;left:0;right:0;padding:28px 14px 12px;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));
  font-family:'Cormorant Garamond',serif;font-size:.95rem;font-weight:500;
}

.students-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.students-grid img{width:100%;height:310px;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--sh-2)}

.fac-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.fac-thumbs img{width:100%;height:120px;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh-1)}

/* ── Editorial pull quote ── */
.pull-quote{
  position:relative;padding:32px 36px 32px 36px;
  background:transparent;border-left:2px solid var(--g);
  margin:36px 0;font-family:'Cormorant Garamond',serif;
  font-size:1.32rem;color:var(--ink);line-height:1.55;font-style:italic;
  font-weight:400;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EVENTS PAGE / SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.events-sec{background:var(--paper)}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:48px}
.event-card{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden;transition:var(--tr);
  display:flex;flex-direction:column;
}
.event-card:hover{border-color:var(--rule-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.event-card .ec-img{aspect-ratio:16/10;background:var(--paper-2);overflow:hidden;position:relative}
.event-card .ec-img img{width:100%;height:100%;object-fit:cover}
.event-card .ec-img.no-img{display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-style:italic}
.event-card .ec-body{padding:24px 26px;display:flex;flex-direction:column;flex:1}
.event-card .ec-date{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--g);font-weight:600;margin-bottom:10px;
}
.event-card h3{font-size:1.25rem;margin-bottom:8px;line-height:1.25;font-weight:500}
.event-card .ec-desc{color:var(--ink-soft);font-size:.94rem;line-height:1.65;margin-bottom:16px;flex:1}
.event-card .ec-meta{font-size:.85rem;color:var(--ink-faint);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.event-card .ec-meta span{display:inline-flex;align-items:center;gap:5px}
.event-card .ec-yt{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--live);font-size:.86rem;font-weight:500;
  border-top:1px solid var(--rule);padding-top:14px;margin-top:auto;
}
.event-card .ec-yt:hover{color:#7a221a}
.event-badge{
  position:absolute;top:12px;left:12px;
  background:rgba(255,255,255,.95);color:var(--g);
  font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:var(--r);
}
.event-badge.past{color:var(--ink-faint)}
.events-empty{text-align:center;color:var(--ink-faint);padding:60px 0;font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.2rem}

.events-tabs{display:flex;justify-content:center;gap:4px;margin-bottom:36px;border-bottom:1px solid var(--rule)}
.events-tab{
  background:transparent;border:none;font-family:inherit;
  font-size:.88rem;font-weight:500;color:var(--ink-faint);
  padding:14px 22px;cursor:pointer;
  border-bottom:2px solid transparent;transition:var(--tr);
  letter-spacing:.02em;
}
.events-tab:hover{color:var(--ink)}
.events-tab.active{color:var(--g);border-bottom-color:var(--g)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:1024px){
  .sv-grid,.val-grid{grid-template-columns:repeat(2,1fr)}
  .ib-grid{grid-template-columns:1fr;gap:20px}
  .ft-in{grid-template-columns:1fr 1fr}
  .ab-in,.ab2-in{grid-template-columns:1fr;gap:48px}
  .ab-img{order:-1}
  .ab-img::before{display:none}
  .cal-layout{grid-template-columns:1fr}
  .cal-panel{max-width:420px}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gal-item.gal-wide{grid-column:1 / -1}
  .comm-photos{grid-template-columns:1fr 1fr}
  .events-grid{grid-template-columns:1fr 1fr}
  .stats>.c{grid-template-columns:repeat(2,1fr);gap:32px}
  .stat{border-left:none;padding-left:0}
  .sec{padding:84px 0}
}

/* ── Tablet & phone: collapse the nav into a hamburger menu ──
   Raised 960 → 1024: with the page links plus LIVE and Donate the bar needs
   ~1025px to stay on one line, so anything narrower gets the hamburger. */
@media(max-width:1024px){
  .hbg{display:flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);flex-direction:column;align-items:stretch;
    padding:14px 24px 22px;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    box-shadow:var(--sh-2);gap:2px;
    max-height:calc(100vh - 72px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.open{display:flex}
  .nav-links a{
    width:100%;padding:13px 14px;border-radius:var(--r);
    font-size:.96rem;min-height:46px;display:flex;align-items:center;
  }
  .nav-links a.act{background:var(--g-fog)}
  /* Page links and CTAs separated visually */
  .btn-live,.btn-dn{
    margin-left:0!important;width:100%;justify-content:center;
    padding:13px 16px!important;font-size:.92rem!important;min-height:46px;
  }
  .btn-live{margin-top:10px!important}
}

@media(max-width:768px){
  .hero{min-height:72vh}
  .hero-in{padding:60px 0}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .prayer-grid{grid-template-columns:repeat(3,1fr)}
  .sv-grid,.val-grid{grid-template-columns:1fr}
  /* Single column: a card asking to span 2 would make grid invent a second
     one and push the row off the side of the screen. */
  .val-grid--5>*:last-child{grid-column:auto}
  .mission-in p:first-of-type{font-size:1.18rem}
  .cta-btns{width:100%;flex-direction:column}
  .cta-btns .btn{width:100%}
  .principal-quote{margin-top:40px;padding-top:32px}
  .principal-quote blockquote{font-size:1.16rem}
  .ct-grid,.fr{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr;gap:36px}
  .cta-in{flex-direction:column;text-align:center;align-items:center}
  .sec{padding:72px 0}
  .pg-hero{padding:72px 0 64px}
  .jcard>div[style*="grid"]{grid-template-columns:1fr!important}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
  .fac-photos,.ev-photos{grid-template-columns:1fr;height:auto}
  .fac-main,.ev-tall{grid-row:auto}
  .fac-photos img,.ev-photos img{height:220px}
  .students-grid{grid-template-columns:1fr}
  .students-grid img{height:240px}
  .comm-photos{grid-template-columns:1fr 1fr}
  .comm-photos .cp{height:160px}
  .events-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .c{padding:0 20px}
  .nav>.c{height:72px}
  .nav-logo img{height:46px!important}
  .team{flex-direction:column;align-items:center}
  .tcard{max-width:100%;width:100%}
  .prayer-grid{grid-template-columns:repeat(2,1fr)}
  .ev-panel{max-height:none}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:240px}
  .gal-item.gal-wide{grid-column:1}
  .comm-photos{grid-template-columns:1fr 1fr}
  .stats>.c{grid-template-columns:1fr}
  .sec{padding:60px 0}
  .pg-hero{padding:60px 0 52px}
}

/* ── Very small phones (≤380px) ── */
@media(max-width:380px){
  .c{padding:0 16px}
  .nav-logo img{height:42px!important}
  .prayer-grid{grid-template-columns:1fr 1fr}
  .comm-photos{grid-template-columns:1fr}
  .btn,.btn-lg{width:100%}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Accessibility — skip link (also helps SEO)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.skip-link{
  position:absolute;top:-40px;left:0;z-index:1000;
  background:var(--g-dk);color:#fff;padding:10px 16px;
  font-weight:600;font-size:.95rem;border-radius:0 0 6px 0;
  transform:translateY(-100%);transition:transform .2s;
}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--clay);outline-offset:2px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Maintenance Mode
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.maint-locked{overflow:hidden}
body.maint-locked .nav,
body.maint-locked .footer,
body.maint-locked #ed-side,
body.maint-locked #ed-topbar,
body.maint-locked [data-page]:not(#pg-maintenance){display:none!important}
body.maint-locked main{padding:0;margin:0}

#pg-maintenance{display:none}
#pg-maintenance.show{display:block}

.maint-screen{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:48px 22px;
  background:linear-gradient(160deg,var(--paper) 0%,var(--paper-2) 100%);
  overflow:hidden;
}
.maint-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 600px 400px at 20% 10%, rgba(31,77,59,.08), transparent 70%),
    radial-gradient(ellipse 500px 380px at 85% 90%, rgba(168,88,66,.07), transparent 70%);
}
.maint-wrap{
  position:relative;z-index:1;max-width:620px;width:100%;
  text-align:center;
}
.maint-logo{
  width:96px;height:96px;margin:0 auto 26px;
  border-radius:50%;background:#fff;padding:14px;
  box-shadow:var(--sh-2);
  object-fit:contain;
}
.maint-tag{
  display:inline-block;padding:5px 14px;
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--g);background:var(--g-soft);
  border-radius:999px;margin-bottom:18px;
}
.maint-head{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.1;
  color:var(--g-dk);margin-bottom:18px;font-weight:500;
}
.maint-msg{
  font-size:1.06rem;color:var(--ink-soft);line-height:1.6;
  max-width:480px;margin:0 auto 14px;
}
.maint-eta{
  font-size:.95rem;color:var(--ink-faint);font-style:italic;
  margin-bottom:38px;
}
.maint-card{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:24px 26px;
  box-shadow:var(--sh-1);max-width:480px;margin:0 auto;
}
.maint-card-label{
  font-size:.92rem;font-weight:600;color:var(--ink);margin-bottom:14px;
}
.maint-contact{
  display:flex;flex-direction:column;gap:10px;align-items:center;
}
.maint-link{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:8px;
  color:var(--g);font-weight:600;font-size:.98rem;
  transition:var(--tr);
}
.maint-link:hover{background:var(--g-soft);color:var(--g-dk)}
.maint-foot{
  font-size:.82rem;color:var(--ink-faint);margin-top:38px;
  letter-spacing:.02em;
}
@media(max-width:520px){
  .maint-contact{flex-direction:column}
  .maint-head{font-size:2rem}
  .maint-card{padding:20px}
}

/* Maintenance-active banner shown only to logged-in CMS users */
.maint-banner{
  position:sticky;top:0;z-index:9999;
  background:linear-gradient(90deg,#b88030,#a85842);
  color:#fff;padding:10px 18px;
  font-size:.92rem;font-weight:500;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.maint-banner a{color:#fff;text-decoration:underline;font-weight:600;margin:0 4px}
.maint-banner button{
  background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.4);
  border-radius:6px;padding:4px 12px;font-size:.85rem;font-weight:600;
  margin-left:10px;cursor:pointer;
}
.maint-banner button:hover{background:rgba(255,255,255,.3)}

/* ── Site-wide announcement bar ─────────────────── */
.site-announcement{
  position:relative;z-index:1100;
  background:var(--g,#1f4d3b);color:#fff;
  font-size:.92rem;line-height:1.45;
}
.site-announcement .ann-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;padding:10px 44px 10px 18px;text-align:center;
}
.site-announcement .ann-msg{font-weight:500}
.site-announcement .ann-link{
  color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap;
}
.site-announcement .ann-link:hover{opacity:.85}
.site-announcement .ann-close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:transparent;color:#fff;border:0;
  font-size:1.4rem;line-height:1;cursor:pointer;opacity:.75;
  padding:0 6px;
}
.site-announcement .ann-close:hover{opacity:1}
@media (max-width:560px){
  .site-announcement{font-size:.85rem}
  .site-announcement .ann-inner{padding:9px 40px 9px 14px;gap:8px}
}

/* Honeypot field for spam protection (must be invisible to humans) */
.hp-field{
  position:absolute!important;left:-9999px!important;
  width:1px;height:1px;opacity:0;pointer-events:none;
}

/* Contact-form status message */
.cf-status{
  margin:10px 0 0;padding:10px 14px;
  border-radius:8px;font-size:.9rem;line-height:1.5;
  border:1px solid transparent;
}
.cf-status.ok{
  color:#1f4d3b;background:#e7eee9;border-color:#bcd2c5;
}
.cf-status.err{
  color:#962d22;background:#fde8e3;border-color:#f1c2b6;
}

/* Calendar legend — Hijri label */
.cal-legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:12px;font-size:.78rem;color:var(--ink-faint);
}
.cal-legend-hijri{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink-faint);font-style:italic;
}
.cal-legend-hijri::before{
  content:'1';
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border:1px solid var(--rule-2);border-radius:3px;
  font-size:.62rem;font-weight:600;font-style:normal;
  color:var(--ink-faint);
}
.cal-legend-newmonth{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink-faint);font-style:italic;
}
.cal-legend-newmonth::before{
  content:'1';
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--clay);color:#fff;
  font-size:.62rem;font-weight:700;font-style:normal;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAST LIVE-STREAM RECORDINGS (events page)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rec-hdr{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin:64px 0 28px;
}
.rec-hdr h2{margin:10px 0 6px}
.rec-hdr p{color:var(--ink-soft);max-width:520px}
.rec-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:22px;
}
/* "Show more" under the grid — the archive now holds the channel's whole back
   catalogue, so the list is paged rather than rendered all at once. */
.rec-more-wrap{display:flex;justify-content:center;margin-top:30px}
.rec-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  overflow:hidden;transition:var(--tr);
}
.rec-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--rule-2)}
.rec-thumb{position:relative;aspect-ratio:16/9;background:var(--paper-2);overflow:hidden}
.rec-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rec-play{
  position:absolute;inset:0;margin:auto;
  width:46px;height:46px;border-radius:50%;
  background:rgba(150,45,34,.92);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:var(--tr);
}
.rec-card:hover .rec-play{background:var(--live);transform:scale(1.08)}
.rec-body{padding:14px 16px 16px}
.rec-title{
  font-family:'Inter',sans-serif;font-size:.94rem;font-weight:600;line-height:1.4;
  color:var(--ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rec-date{margin-top:6px;font-size:.82rem;color:var(--ink-faint)}
@media(max-width:560px){
  .rec-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .rec-hdr{margin-top:44px}
}

/* ── Event popup: rich description (bold / underline / YT button / embed) ── */
.cem-desc{color:var(--ink-soft);line-height:1.65;font-size:.95rem}
.cem-desc strong{color:var(--ink);font-weight:600}
.cem-desc u{text-underline-offset:2px}
.cem-desc a{color:var(--g);font-weight:600}
.cem-embed{
  display:block;position:relative;width:100%;aspect-ratio:16/9;
  margin:14px 0;border-radius:10px;overflow:hidden;background:#000;
  border:1px solid var(--rule);
}
.cem-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOMEPAGE — ANNOUNCEMENTS & NEWS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ann-sec{padding:84px 0}
.ann-list{display:flex;flex-direction:column;gap:14px;max-width:860px;margin:0 auto}
.ann-item{
  background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--g);border-radius:10px;padding:20px 22px;
}
.ann-item.pinned{border-left-color:var(--gold);background:#fffdf7}
.ann-item-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ann-item-head h3{font-size:1.1rem;margin:0;flex:1 1 auto;min-width:0}
.ann-pin{
  background:var(--gold);color:#241a06;font-size:.66rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
}
.ann-date{font-size:.82rem;color:var(--ink-faint);white-space:nowrap}
.ann-body{color:var(--ink-soft);font-size:.94rem;line-height:1.65}

.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.news-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:24px 22px;transition:var(--tr);
}
.news-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.news-date{display:block;font-size:.78rem;color:var(--ink-faint);letter-spacing:.04em;margin-bottom:8px}
.news-title{font-size:1.15rem;margin:0 0 10px}
.news-body{color:var(--ink-soft);font-size:.93rem;line-height:1.65}
.post-link{
  display:inline-block;margin-top:14px;color:var(--g);
  font-weight:600;font-size:.88rem;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:var(--tr);
}
.post-link:hover{border-bottom-color:var(--g)}
.ann-body .cem-embed,.news-body .cem-embed{margin:12px 0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STREAMING NOW banner + calendar indicator
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.live-banner{
  display:flex;align-items:center;gap:10px;
  background:var(--live);color:#fff;
  padding:10px 22px;font-size:.9rem;
  position:relative;z-index:950;
  text-decoration:none;
}
.live-banner:hover{background:#7a221a}
/* Mixed case now ("Streaming Now"), so the wide tracking that suited an
   all-caps LIVE NOW badge is dialled back. */
.live-banner strong{font-weight:800;letter-spacing:.02em;font-size:.86rem;white-space:nowrap}
/* Label and title are one flex item so the banner's gap cannot fall between
   "Streaming Now" and the colon that follows it. */
.live-lead{display:flex;align-items:baseline;gap:0;flex:1;min-width:0}
.live-title{
  flex:1;min-width:0;opacity:.94;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.live-cta{font-weight:600;white-space:nowrap;font-size:.85rem}
@media(max-width:640px){
  .live-banner{padding:9px 16px;font-size:.84rem;gap:8px}
  .live-title{display:none}
}

/* The pulsing dot. Respects reduced-motion: the dot stays solid rather than
   flashing for anyone who has asked the system to limit animation. */
.live-dot{
  width:9px;height:9px;border-radius:50%;
  background:#fff;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,255,255,.75);
  animation:livePulse 1.6s infinite;
}
@keyframes livePulse{
  0%  {box-shadow:0 0 0 0 rgba(255,255,255,.75)}
  70% {box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media(prefers-reduced-motion:reduce){
  .live-dot{animation:none}
}

/* Calendar day whose scheduled event is the stream currently on air */
.cday.is-live{
  background:rgba(150,45,34,.10);
  box-shadow:inset 0 0 0 2px var(--live);
}
.cday.is-live .cday-num{color:var(--live);font-weight:700}
.cday.is-live::after{
  content:'';position:absolute;top:5px;right:5px;
  width:7px;height:7px;border-radius:50%;background:var(--live);
  animation:livePulse 1.6s infinite;
}
@media(prefers-reduced-motion:reduce){
  .cday.is-live::after{animation:none}
}

/* LIVE row inside the event popup */
.cem-live{
  display:flex;align-items:center;gap:9px;
  background:var(--live);color:#fff;
  padding:10px 14px;border-radius:8px;margin:0 0 14px;
  font-weight:700;font-size:.85rem;letter-spacing:.02em;
}
.cem-live:hover{background:#7a221a}

/* Event cards open the detail popup, so they must look interactive */
.event-card[data-ev-open]{cursor:pointer}
.event-card[data-ev-open]:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.ev-item[data-ev-open]{cursor:pointer;border-radius:8px;transition:var(--tr)}
.ev-item[data-ev-open]:hover{background:var(--g-fog)}
.ev-item[data-ev-open]:focus-visible{outline:2px solid var(--g);outline-offset:2px}

/* ── Privacy policy page ── */
.priv-in{max-width:760px;margin:0 auto}
.priv-in h2{font-size:1.42rem;margin:44px 0 12px;color:var(--ink);font-weight:500}
.priv-in h2:first-of-type{margin-top:28px}
.priv-in p{color:var(--ink-soft);line-height:1.8;margin-bottom:16px}
.priv-updated{font-size:.86rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em}
.priv-in p.pull-quote{color:var(--ink);font-size:1.24rem;line-height:1.6;margin:26px 0 8px}
.priv-list{margin:0 0 16px;padding-left:0;list-style:none}
.priv-list li{
  color:var(--ink-soft);line-height:1.7;margin-bottom:10px;
  padding-left:22px;position:relative;
}
.priv-list li::before{
  content:'';position:absolute;left:0;top:12px;
  width:10px;height:1px;background:var(--g);
}
.priv-contact a{color:var(--g);font-weight:600;line-height:2}

/* Footer legal row. The footer bottom bar is dark, so this takes its colour
   from that palette rather than the page's ink tokens — which are near-black
   and would have been invisible down there. */
.ft-btm{display:flex;flex-direction:column;align-items:center;gap:8px}
.ft-btm p{margin:0}
.ft-legal{
  color:rgba(255,255,255,.55);font-size:.8rem;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);
  text-underline-offset:3px;transition:var(--tr);
}
.ft-legal:hover,.ft-legal:focus-visible{color:#fff;text-decoration-color:rgba(255,255,255,.7)}