/*
Theme Name: Al-Murtaza Society
Theme URI: https://almurtazasocietyofficial.com
Author: Al-Murtaza Society
Description: A custom theme for Al-Murtaza Society — Iznik-tile-inspired colors (turquoise, cobalt, coral, gold, sage) on a light paper ground, with a crest logo, scroll reveals, hover states, editable Customizer colors/prayer-times/daily-recitation, and Courses/Events as manageable post types.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: almurtaza
*/

:root{
  --paper-0:#FFFDF8;
  --paper-50:#FBF3E4;
  --paper-100:#F4E9D2;
  --ink-900:#2B2118;
  --ink-700:#5B4C3B;
  --ink-500:#8B7A64;

  --turquoise-700:#0B6B6F;
  --turquoise-600:#0E8A8F;
  --turquoise-100:#DBF1F0;
  --cobalt-700:#1E3A6B;
  --cobalt-600:#2A4B8D;
  --cobalt-100:#E1E8F7;
  --coral-700:#B33A22;
  --coral-600:#D8492E;
  --coral-100:#FBE3DC;
  --gold-700:#A87A1E;
  --gold-600:#D2A02A;
  --gold-100:#FBF0D2;
  --sage-700:#38684A;
  --sage-600:#4C8562;
  --sage-100:#E3F1E7;

  --line-ink-soft:rgba(43,33,24,.16);
  --line-ink-faint:rgba(43,33,24,.09);
  --radius-card:8px;
  --maxw:1180px;
}
/* Note: --turquoise-600, --cobalt-600, --coral-600, --gold-600, --sage-600,
   --paper-0 and --ink-900 are re-declared dynamically in <head> from
   Appearance → Customize → Al-Murtaza: Brand Colors (see functions.php,
   am_dynamic_css()) — the values above are just the defaults. */

*{box-sizing:border-box;}
html{font-size:16px;-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  max-width:100%;
  overflow-x:hidden;
  background:var(--paper-0);
  color:var(--ink-900);
  font-family:'Catamaran',-apple-system,'Segoe UI',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  animation:pageFadeIn .32s ease both;
}
@keyframes pageFadeIn{from{opacity:0;} to{opacity:1;}}
/* Fading OUT just before leaving the page (see main.js) — a soft cut
   instead of an instant one when moving to another page on the site. */
html.page-leaving body{animation:none; opacity:0; transition:opacity .2s ease;}
@media (prefers-reduced-motion:reduce){
  body{animation:none !important; opacity:1 !important;}
  html.page-leaving body{transition:none !important; opacity:1 !important;}
}
img{max-width:100%;display:block;}

/* ============================== intro splash (homepage only) ==============================
   A short "Bismillah" calligraphy reveal shown once per browser session,
   right before the real homepage content. See main.js for the logic that
   skips it on repeat visits, honours reduced-motion, and lets a click,
   tap or key press skip straight past it — this is purely the look. */
html.intro-active, html.intro-active body{overflow:hidden;}
.intro-splash{
  position:fixed; inset:0; z-index:9999;
  background:var(--paper-0);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:1.1rem; padding:2rem; text-align:center;
  opacity:1; visibility:visible;
  transition:opacity .55s ease, visibility .55s;
  /* Hard backstop: guarantees the splash goes away and the site
     becomes usable no matter what happens in main.js (blocked script,
     an unrelated JS error earlier in the file, a slow/failed load).
     main.js normally removes the splash itself around ~3.3s in, well
     before this ever fires -- this only kicks in if that never
     happens, so the whole site can never get stuck behind it. */
  animation: introHardHide 0s linear 6.5s forwards;
}
@keyframes introHardHide{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.intro-splash::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(42,75,141,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-45deg, rgba(42,75,141,.05) 0 1px, transparent 1px 44px);
}
.intro-splash.intro-done{opacity:0; visibility:hidden; pointer-events:none;}
/* The phrase is real vector letterforms (traced from an actual Arabic
   typeface via its own font outlines — see the build notes in index.php),
   not text — each <path> is one letter, already positioned right-to-left
   within its line. main.js draws each letter's outline stroke, then
   fills it solid, staggered letter by letter (JS controls the per-letter
   timing since it depends on each glyph's own traced path length, which
   only the browser can measure at runtime via getTotalLength()). */
.intro-phrase-lines{
  display:flex; flex-direction:column; align-items:center; gap:.35em;
  /* Both lines are sized as a % of THIS shared width below, not each
     given their own independent max-width -- that's what keeps the
     letters the same true size on both lines. (They used to each get
     their own px cap, which happened to scale line 2's much wider
     content down more than line 1's, making its letters visibly
     smaller.) */
  width:min(85vw, 760px);
}
.intro-phrase-svg{
  width:100%; height:auto; display:block; overflow:visible;
}
.intro-phrase-svg.line1{ width:55.52%; }
.intro-phrase-svg path.letter{
  fill:var(--ink-900); fill-opacity:0;
  stroke:var(--ink-900); stroke-width:9; stroke-linecap:round; stroke-linejoin:round;
  /* Pure-CSS baseline draw, needs no JS at all: a dasharray/dashoffset
     bigger than any letter's real outline length still draws correctly
     (see note in main.js). main.js overrides this with each letter's
     exact traced length for a crisper result when it can run -- but if
     it can't, this alone still draws and fills every letter on its own. */
  stroke-dasharray:3000; stroke-dashoffset:3000;
  animation-name: introLetterDraw, introLetterFill;
  animation-duration: .5s, .35s;
  animation-timing-function: ease-in-out, ease;
  animation-fill-mode: forwards, forwards;
}
@keyframes introLetterDraw{ to{ stroke-dashoffset:0; } }
@keyframes introLetterFill{ to{ fill-opacity:1; } }
.intro-phrase-svg path[data-i="0"]{ animation-delay:0.0s,0.55s; }
.intro-phrase-svg path[data-i="1"]{ animation-delay:0.09s,0.64s; }
.intro-phrase-svg path[data-i="2"]{ animation-delay:0.18s,0.73s; }
.intro-phrase-svg path[data-i="3"]{ animation-delay:0.27s,0.82s; }
.intro-phrase-svg path[data-i="4"]{ animation-delay:0.36s,0.91s; }
.intro-phrase-svg path[data-i="5"]{ animation-delay:0.45s,1.0s; }
.intro-phrase-svg path[data-i="6"]{ animation-delay:0.54s,1.09s; }
.intro-phrase-svg path[data-i="7"]{ animation-delay:0.63s,1.18s; }
.intro-phrase-svg path[data-i="8"]{ animation-delay:0.72s,1.27s; }
.intro-phrase-svg path[data-i="9"]{ animation-delay:0.81s,1.36s; }
.intro-phrase-svg path[data-i="10"]{ animation-delay:0.9s,1.45s; }
.intro-phrase-svg path[data-i="11"]{ animation-delay:0.99s,1.54s; }
.intro-phrase-svg path[data-i="12"]{ animation-delay:1.08s,1.63s; }
.intro-phrase-svg path[data-i="13"]{ animation-delay:1.17s,1.72s; }
.intro-phrase-svg path[data-i="14"]{ animation-delay:1.26s,1.81s; }
.intro-phrase-svg path[data-i="15"]{ animation-delay:1.35s,1.9s; }
.intro-phrase-svg path[data-i="16"]{ animation-delay:1.44s,1.99s; }
.intro-phrase-svg path[data-i="17"]{ animation-delay:1.53s,2.08s; }
.intro-phrase-svg path[data-i="18"]{ animation-delay:1.62s,2.17s; }
.intro-phrase-en{
  position:relative; display:block; font-size:.82rem; letter-spacing:.05em;
  color:var(--ink-500); opacity:0; animation:introEnIn .7s ease 2.85s forwards;
}
@keyframes introEnIn{ to{opacity:1;} }
.intro-skip{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  font-family:'Segoe UI',-apple-system,sans-serif; font-size:.76rem; letter-spacing:.06em;
  color:var(--ink-500); background:none; border:1px solid var(--line-ink-soft);
  border-radius:999px; padding:.5rem 1.15rem; cursor:pointer; opacity:0;
  animation:introSkipIn .5s ease .4s forwards;
}
.intro-skip:hover{border-color:var(--cobalt-600); color:var(--cobalt-600);}
@keyframes introSkipIn{ to{opacity:.85;} }
@media (max-width:480px){
  .intro-phrase-lines{width:88vw;}
  .intro-skip{bottom:1.5rem;}
}
@media (prefers-reduced-motion:reduce){
  .intro-splash{display:none !important;}
  html.intro-active, html.intro-active body{overflow:visible !important;}
}
a{color:inherit;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3{
  font-family:'Amiri',Georgia,'Times New Roman',serif;
  font-weight:700; line-height:1.14; text-wrap:balance; margin:0; color:var(--ink-900);
}
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-family:'Catamaran',sans-serif; font-weight:700; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-700);
}
.eyebrow .star8{flex:none;}
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:clamp(20px,5vw,48px); }
section{padding-block:clamp(52px,8vw,96px);}
section p{color:var(--ink-700);}

.star8{width:1em;height:1em;display:inline-block;}
.star8 svg{width:100%;height:100%;display:block;}

.tile-ribbon{
  height:9px;
  background:repeating-linear-gradient(135deg,
    var(--turquoise-600) 0 16px, var(--coral-600) 16px 32px,
    var(--gold-600) 32px 48px, var(--sage-600) 48px 64px, var(--cobalt-600) 64px 80px);
}

.lattice{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, var(--lattice-line,rgba(42,75,141,.05)) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-45deg, var(--lattice-line,rgba(42,75,141,.05)) 0 1px, transparent 1px 44px);
  pointer-events:none;
}

/* -------- scroll reveal (progressive enhancement: safe when JS is off) -------- */
.reveal{opacity:1; transform:none;}
.js-revealing .reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
.js-revealing .reveal.is-visible{opacity:1; transform:none;}

/* directional variants — pair with class="reveal reveal-left" / "reveal reveal-right"
   for elements that should slide in sideways instead of rising up (e.g. the two
   halves of a text/list split). Falls back to the normal fade-up if JS is off. */
.reveal-left, .reveal-right{opacity:1; transform:none;}
.js-revealing .reveal.reveal-left{transform:translateX(-28px);}
.js-revealing .reveal.reveal-right{transform:translateX(28px);}
.js-revealing .reveal.reveal-left.is-visible,
.js-revealing .reveal.reveal-right.is-visible{transform:none;}

.stagger > *:nth-child(1){transition-delay:0s;}
.stagger > *:nth-child(2){transition-delay:.07s;}
.stagger > *:nth-child(3){transition-delay:.14s;}
.stagger > *:nth-child(4){transition-delay:.21s;}
.stagger > *:nth-child(5){transition-delay:.28s;}
.stagger > *:nth-child(6){transition-delay:.35s;}
@media (prefers-reduced-motion:reduce){
  .js-revealing .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ============================== topbar ============================== */
.topbar{ background:var(--cobalt-700); color:#F1F5FC; font-size:.82rem; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:.5rem; flex-wrap:wrap; }
.topbar-left{display:flex; gap:1.4rem; flex-wrap:wrap; opacity:.92; min-width:0;}
.topbar-left span{white-space:normal;}
.social-row{display:flex; gap:.7rem;}
.social-row a{
  width:25px;height:25px;border-radius:50%; border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center; color:#F1F5FC;
  transition:background .15s,color .15s,transform .15s,border-color .15s;
}
.social-row a:hover{background:var(--gold-600); color:var(--cobalt-700); border-color:var(--gold-600); transform:translateY(-2px);}
.social-row svg{width:12px;height:12px;}
.teacher-login-link{
  width:auto !important; height:auto !important; border-radius:999px !important;
  padding:.32rem .8rem; gap:.4rem; font-size:.78rem; font-weight:600;
  text-decoration:none; white-space:nowrap;
}
.teacher-login-link svg{width:12px;height:12px;}

/* ============================== header ============================== */
/* .header-wrap = the whole sticky header: a fixed logo panel on the left
   (like the real site's Tabligh header) plus the topbar+nav stacked on
   the right. On mobile the panel collapses away and a small inline
   brand (badge+name) takes its place inside the nav row instead — see
   the .brand-mobile rules and the 980px breakpoint below. */
.header-wrap{
  display:flex; align-items:stretch;
  position:sticky; top:0; z-index:40;
  background:var(--paper-0);
  border-bottom:1px solid var(--line-ink-faint);
  transition:box-shadow .25s ease;
}
.header-wrap.is-scrolled{box-shadow:0 12px 26px -20px rgba(43,33,24,.4);}
.header-right{flex:1; min-width:0; display:flex; flex-direction:column;}

.logo-panel{
  flex:none; width:clamp(150px,15vw,220px);
  display:flex; align-items:center; justify-content:center;
  background:var(--turquoise-600);
  position:relative; text-decoration:none;
}
.logo-panel::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--gold-600), var(--coral-600), var(--sage-600));
}
.logo-panel .badge{
  display:flex; align-items:center; justify-content:center;
  width:clamp(76px,8vw,116px); height:clamp(76px,8vw,116px);
  transition:transform .3s ease;
  filter:drop-shadow(0 8px 18px rgba(20,20,20,.22));
}
.logo-panel:hover .badge{transform:rotate(6deg) scale(1.05);}
.logo-panel .badge-real-logo img{width:100%; height:100%; object-fit:contain; border-radius:50%; background:var(--paper-0);}

/* The raw crest <svg> (placeholder logo, before a real logo is uploaded
   in Customizer > Site Identity) has no width/height of its own beyond
   its viewBox, so — in EVERY context this badge markup is used (header
   panel, mobile inline brand, footer) — it must be told to fill its
   .badge wrapper exactly, or it renders at browser-default size instead
   of the small badge it's meant to be. */
.badge svg{width:100%; height:100%; display:block;}

.nav-row .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:.7rem; gap:1.5rem; flex-wrap:wrap; }

/* Generic brand mark (badge + name). Used as-is in the footer; inside
   the header's nav row it also carries .brand-mobile, which keeps it
   hidden until the side logo panel is hidden on small screens — see
   the 980px breakpoint below. */
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none;}
.brand .badge{width:44px; height:44px; flex:none; transition:transform .3s ease; display:flex; align-items:center; justify-content:center;}
.brand:hover .badge{transform:rotate(8deg) scale(1.04);}
.badge-real-logo img{width:100%; height:100%; object-fit:contain; border-radius:50%;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.header-right .brand-mobile{display:none;}
.brand-text strong{ font-family:'Amiri',serif; font-size:1.3rem; color:var(--ink-900); letter-spacing:.01em; }
.brand-text span{ font-size:.64rem; letter-spacing:.17em; text-transform:uppercase; color:var(--turquoise-700); font-weight:700; }

nav.primary-nav{display:flex; align-items:center; gap:clamp(1rem,2vw,2.1rem); flex-wrap:wrap;}
nav.primary-nav li{list-style:none;}
nav.primary-nav a{
  font-size:.92rem; font-weight:600; text-decoration:none; color:var(--ink-700);
  position:relative; padding-block:.3rem; display:inline-block;
}
nav.primary-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--coral-600); transition:right .2s ease;
}
nav.primary-nav a:hover{color:var(--ink-900);}
nav.primary-nav a:hover::after{right:0;}
nav.primary-nav a.is-active{color:var(--cobalt-700);}
nav.primary-nav a.is-active::after{right:0; background:var(--cobalt-600);}
.header-actions{display:flex; align-items:center; gap:1rem;}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Catamaran',sans-serif; font-weight:700; font-size:.88rem;
  padding:.72rem 1.35rem; border-radius:6px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-coral{background:var(--coral-600); color:#fff; box-shadow:0 10px 22px -12px rgba(216,73,46,.55);}
.btn-coral:hover{background:var(--coral-700); box-shadow:0 16px 28px -14px rgba(216,73,46,.6);}
.btn-outline{border-color:var(--line-ink-soft); color:var(--ink-900);}
.btn-outline:hover{border-color:var(--cobalt-600); background:var(--cobalt-100);}
.btn-ink{background:var(--ink-900); color:#FFFDF8;}
.btn-ink:hover{background:var(--cobalt-700);}

.nav-toggle{
  display:none; background:none; border:1px solid var(--line-ink-soft);
  border-radius:6px; width:40px; height:38px; color:var(--ink-900);
  align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s,color .15s;
}
.nav-toggle:hover{border-color:var(--cobalt-600); color:var(--cobalt-600);}
/* hamburger → X: main.js sets aria-expanded on this button when the menu
   opens/closes, which is all these rules key off — no extra class needed.
   Each bar is transformed individually (top+bottom rotate to cross,
   middle fades) rather than the icon as a whole, so it reads as one
   shape morphing rather than a swap. transform-box:fill-box makes each
   line rotate around its own center instead of the whole SVG's corner. */
.nav-toggle svg{overflow:visible;}
.nav-toggle .bar{transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .2s ease; transform-box:fill-box; transform-origin:center;}
.nav-toggle[aria-expanded="true"] .bar-top{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bar-mid{opacity:0;}
.nav-toggle[aria-expanded="true"] .bar-bottom{transform:translateY(-6px) rotate(-45deg);}

/* dimmed backdrop behind the open mobile menu — see .nav-backdrop.open
   below (max-width:980px) and main.js, which toggles it together with
   the menu and closes both on a backdrop tap, an outside click, or Esc. */
.nav-backdrop{display:none;}

/* ============================== hero ============================== */
.hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 12% 0%, var(--turquoise-100), transparent 65%),
    radial-gradient(ellipse 55% 60% at 100% 15%, var(--gold-100), transparent 60%),
    radial-gradient(ellipse 50% 45% at 75% 100%, var(--coral-100), transparent 60%),
    var(--paper-0);
  padding-bottom:0;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem);
  align-items:start; padding-block:clamp(52px,8vw,96px) clamp(56px,9vw,104px);
}
.hero-copy .eyebrow{color:var(--coral-600);}
.hero-copy h1{ margin-top:1.1rem; font-size:clamp(2.35rem,4.6vw,3.9rem); }
.hero-copy h1 em{color:var(--cobalt-600); font-style:italic;}
.hero-copy p.lede{ margin-top:1.3rem; max-width:46ch; font-size:1.1rem; color:var(--ink-700); }
.hero-ctas{display:flex; gap:1rem; margin-top:2.1rem; flex-wrap:wrap;}
.hero-anim > *{animation:riseIn .7s cubic-bezier(.2,.7,.3,1) both;}
.hero-anim > *:nth-child(2){animation-delay:.08s;}
@keyframes riseIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){
  .hero-anim > *{animation:none !important; opacity:1 !important; transform:none !important;}
}

.prayer-panel{
  background:var(--paper-0); border:1px solid var(--line-ink-soft); border-radius:var(--radius-card);
  padding:0 1.6rem 1.3rem; position:relative; overflow:hidden;
  box-shadow:0 22px 44px -30px rgba(43,33,24,.35);
  margin-top:clamp(0px,3vw,2.6rem);
}
.prayer-panel .ribbon-top{ height:6px; margin:0 -1.6rem 1.3rem;
  background:linear-gradient(90deg, var(--turquoise-600), var(--cobalt-600), var(--coral-600), var(--gold-600)); }
.prayer-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem;}
.prayer-head .eyebrow{color:var(--cobalt-600);}
.prayer-list{display:flex; flex-direction:column;}
.prayer-row{
  display:grid; grid-template-columns:1fr auto; gap:.75rem; align-items:center;
  padding:.62rem .4rem; margin-inline:-.4rem; border-radius:5px;
  border-bottom:1px solid var(--line-ink-faint); font-size:.92rem;
  transition:background .15s ease;
}
.prayer-row:not(.is-current):hover{background:var(--paper-50);}
.prayer-row:last-of-type{border-bottom:none;}
.prayer-row .name{font-weight:700; letter-spacing:.03em; color:var(--ink-900);}
.prayer-row .adhan{font-variant-numeric:tabular-nums; color:var(--ink-700);}
.prayer-row.is-current{ background:var(--gold-100); }
.prayer-row.is-current .name{color:var(--coral-600);}
.prayer-row.is-current .name::before{content:'٭ '; color:var(--gold-700);}
.prayer-note{
  margin-top:1rem; font-size:.72rem; letter-spacing:.03em; color:var(--ink-500);
  border-top:1px dashed var(--line-ink-faint); padding-top:.8rem;
}

/* ============================== daily recitation ============================== */
.recitation-bar{ background:var(--gold-100); padding-block:clamp(2.2rem,4vw,3rem); position:relative; overflow:hidden; }

.recitation-card{
  max-width:720px; margin-inline:auto; position:relative; z-index:1;
  background:var(--paper-0); border:1px solid var(--line-ink-soft); border-radius:var(--radius-card);
  box-shadow:0 22px 44px -30px rgba(43,33,24,.35);
  padding:0 clamp(1.2rem,4vw,2rem) clamp(1.4rem,3vw,1.9rem); overflow:hidden;
}
.recitation-card .ribbon-top{ height:6px; margin:0 -2rem 1.3rem;
  background:linear-gradient(90deg, var(--gold-600), var(--coral-600), var(--turquoise-600), var(--cobalt-600)); }
.recitation-label{ color:var(--gold-700); display:flex; align-items:center; justify-content:center; gap:.5rem; text-align:center; }
.recitation-label .star8{color:var(--coral-600);}

.recitation-empty{ margin-top:.9rem; text-align:center; font-size:.88rem; color:var(--ink-700); font-style:italic; }

.recitation-info{ text-align:center; margin-top:.6rem; }
.recitation-info strong{ display:block; font-family:'Amiri',serif; font-size:clamp(1.35rem,3vw,1.8rem); color:var(--ink-900); }
.recitation-info .reciter{ display:block; margin-top:.25rem; font-size:.88rem; color:var(--ink-700); }

.player{ display:flex; align-items:center; gap:.9rem; margin-top:1.5rem; }
.player-play{
  flex:none; width:50px; height:50px; border-radius:50%; border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--turquoise-600), var(--cobalt-600));
  box-shadow:0 10px 22px -10px rgba(14,138,143,.55); transition:transform .18s ease, box-shadow .18s ease;
}
.player-play:hover{ transform:scale(1.06); }
.player-play svg{width:18px; height:18px; display:block;}
.player-play .i-pause-icon{display:none;}
.player-play.is-playing .i-play-icon{display:none;}
.player-play.is-playing .i-pause-icon{display:block;}

.player-nav{
  flex:none; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; background:transparent; color:var(--ink-700);
  transition:background .15s ease, color .15s ease;
}
.player-nav:hover{background:var(--paper-50); color:var(--turquoise-700);}
.player-nav svg{display:block;}

.player-track{flex:1; min-width:0;}
.player-progress{
  height:6px; border-radius:99px; background:var(--paper-100); cursor:pointer; position:relative; overflow:hidden;
}
.player-progress-fill{
  position:absolute; inset:0 auto 0 0; width:0%; border-radius:99px;
  background:linear-gradient(90deg, var(--gold-600), var(--coral-600));
}
.player-time{ display:flex; justify-content:space-between; margin-top:.4rem; font-size:.72rem; font-variant-numeric:tabular-nums; color:var(--ink-500); }

.player-volume{
  flex:none; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; background:transparent; color:var(--ink-700);
  transition:background .15s ease, color .15s ease;
}
.player-volume:hover{background:var(--paper-50); color:var(--turquoise-700);}
.player-volume svg{width:17px; height:17px; display:block;}
.player-volume .i-mute-icon{display:none;}
.player-volume.is-muted .i-vol-icon{display:none;}
.player-volume.is-muted .i-mute-icon{display:block;}
.player-volume-slider{ flex:none; width:72px; accent-color:var(--turquoise-600); cursor:pointer; }
@media (max-width:480px){ .player-volume-slider{width:44px;} }

/* On a narrow phone there isn't room for prev/play/next + the progress
   track + volume controls all on one line -- the track would get squeezed
   to almost nothing and its time labels ("0:00" / "3:45") would spill out
   over the volume button next to them. Below ~560px, move the progress
   bar + time onto its own full-width line, and keep all the round icon
   buttons together on the line above where they have plenty of room. */
@media (max-width:560px){
  .player{ flex-wrap:wrap; row-gap:.7rem; justify-content:center; }
  .player-prev{ order:1; }
  .player-play{ order:2; }
  .player-next{ order:3; }
  .player-volume{ order:4; }
  .player-volume-slider{ order:5; }
  .player-track{ order:6; flex:1 1 100%; }
}

/* ============================== section shared ============================== */
.section-head{max-width:56ch; margin-bottom:clamp(2rem,4vw,3.2rem);}
.section-head h2{font-size:clamp(1.7rem,3vw,2.5rem); margin-top:.7rem; color:var(--ink-900);}
.section-head p{margin-top:.9rem; font-size:1.03rem; color:var(--ink-700);}
.section-head p em{color:var(--ink-500); font-style:normal; font-size:.85rem;}

/* ============================== about ============================== */
.about{background:var(--paper-0); position:relative; overflow:hidden;}
.about .lattice{--lattice-line:rgba(56,104,74,.07);}
.about .eyebrow{color:var(--sage-600);}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.2rem,5vw,4rem); align-items:start;}
.about-grid p{color:var(--ink-700); font-size:1.02rem; max-width:52ch;}
.about-grid p + p{margin-top:1rem;}
.objectives{display:flex; flex-direction:column;}
.objectives li{
  display:flex; gap:.9rem; padding-block:.85rem; border-bottom:1px solid var(--line-ink-faint);
  transition:padding-left .18s ease; border-radius:4px;
}
.objectives li:hover{padding-left:.4rem; background:var(--paper-50);}
.objectives li:first-child{padding-top:0;}
.objectives li:last-child{border-bottom:none;}
.objectives .star8{width:18px; height:18px; flex:none; margin-top:.2rem; transition:transform .2s ease;}
.objectives li:hover .star8{transform:rotate(20deg) scale(1.15);}
.objectives li:nth-child(1) .star8{color:var(--coral-600);}
.objectives li:nth-child(2) .star8{color:var(--turquoise-600);}
.objectives li:nth-child(3) .star8{color:var(--gold-600);}
.objectives li:nth-child(4) .star8{color:var(--sage-600);}
.objectives li:nth-child(5) .star8{color:var(--cobalt-600);}
.objectives strong{display:block; font-size:1rem; color:var(--ink-900);}
.objectives span{font-size:.92rem; color:var(--ink-700);}

/* ============================== courses ============================== */
.courses{background:var(--paper-50); position:relative; overflow:hidden;}
.courses .lattice{--lattice-line:rgba(30,58,107,.05);}
.courses .eyebrow{color:var(--cobalt-600);}
.course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; position:relative; z-index:1; }
.course-card{
  --accent:var(--cobalt-600); --tint:var(--cobalt-100);
  background:var(--paper-0); border:1px solid var(--line-ink-faint);
  border-top:4px solid var(--accent);
  border-radius:var(--radius-card); padding:1.6rem 1.5rem;
  display:flex; flex-direction:column; gap:.85rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.course-card:hover{transform:translateY(-5px); box-shadow:0 22px 34px -22px rgba(43,33,24,.32);}
.course-card:hover .course-icon{transform:scale(1.1) rotate(-4deg);}
.course-card:nth-child(2){--accent:var(--turquoise-600); --tint:var(--turquoise-100);}
.course-card:nth-child(3){--accent:var(--coral-600); --tint:var(--coral-100);}
.course-card:nth-child(4){--accent:var(--gold-600); --tint:var(--gold-100);}
.course-card:nth-child(5){--accent:var(--sage-600); --tint:var(--sage-100);}
.course-card:nth-child(6){--accent:var(--cobalt-600); --tint:var(--cobalt-100);}
.course-card.flagship{
  grid-column:span 2; background:linear-gradient(155deg,var(--paper-0),var(--gold-100) 180%);
  border-top:none; border-image:linear-gradient(90deg,var(--cobalt-600),var(--gold-600)) 1;
  padding:2rem 2.1rem; flex-direction:row; gap:1.8rem; align-items:flex-start;
}
.course-icon{
  width:40px; height:40px; flex:none; color:var(--accent); background:var(--tint); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:transform .2s ease;
}
.course-icon svg{width:19px; height:19px;}
.flagship .course-icon{width:52px; height:52px; color:var(--cobalt-600); background:var(--cobalt-100);}
.flagship .course-icon svg{width:24px; height:24px;}
.course-card h3{font-size:1.14rem; color:var(--ink-900); font-family:'Amiri',serif;}
.flagship h3{font-size:1.5rem;}
.course-card .tag{
  align-self:flex-start; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:#fff; background:var(--cobalt-600); padding:.22rem .55rem; border-radius:3px;
}
.course-card p{font-size:.92rem; color:var(--ink-700); margin:0;}
/* .learn is also reused outside course cards (homepage "More about us" /
   "Read more" links) — the base rule here covers every use; the
   .course-card rule right after it just retints the color/hover to
   match each card's accent color. */
.learn{
  margin-top:.3rem; font-size:.84rem; font-weight:700; color:var(--cobalt-600);
  text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; transition:gap .15s ease;
}
.learn:hover{gap:.6rem;}
.learn svg{width:13px; height:13px; flex:none;}
.course-card .learn{color:var(--accent);}
.course-card .learn:hover{gap:.6rem;}
.flagship .learn{color:var(--cobalt-700);}

/* ============================== audience ============================== */
.audience{background:var(--paper-0); border-top:1px solid var(--line-ink-faint); border-bottom:1px solid var(--line-ink-faint); position:relative; overflow:hidden;}
.audience .lattice{--lattice-line:rgba(168,122,30,.09);}
.audience .wrap{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:2.4rem; flex-wrap:wrap;
  padding-block:clamp(2rem,4vw,2.8rem) !important;
}
.audience-lede{max-width:26ch; flex:none; padding-right:2.4rem; border-right:1px solid var(--line-ink-soft);}
.audience-lede .eyebrow{color:var(--gold-700);}
.audience-lede h2{font-size:1.5rem; margin-top:.5rem; color:var(--ink-900);}
.audience-chips{display:flex; gap:.7rem; flex-wrap:wrap; flex:1; justify-content:flex-end;}
.chip{
  border-radius:999px; padding:.55rem 1.15rem; font-size:.88rem; font-weight:700;
  border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease;
}
.chip:hover{transform:translateY(-3px) rotate(-1deg); box-shadow:0 12px 20px -12px rgba(43,33,24,.3);}
.chip:nth-child(5n+1){background:var(--coral-100); color:var(--coral-700);}
.chip:nth-child(5n+2){background:var(--turquoise-100); color:var(--turquoise-700);}
.chip:nth-child(5n+3){background:var(--gold-100); color:var(--gold-700);}
.chip:nth-child(5n+4){background:var(--sage-100); color:var(--sage-700);}
.chip:nth-child(5n+5){background:var(--cobalt-100); color:var(--cobalt-700);}

/* ============================== welfare ============================== */
.welfare{background:var(--turquoise-100); position:relative; overflow:hidden;}
.welfare .lattice{--lattice-line:rgba(11,107,111,.09);}
.welfare-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.3fr .7fr; gap:2.5rem; align-items:center; }
.welfare .eyebrow{color:var(--turquoise-700);}
.welfare h2{font-size:clamp(1.7rem,3vw,2.35rem); margin-top:.6rem;}
.welfare p{font-size:1.03rem; margin-top:1rem; max-width:54ch; color:var(--ink-700);}
.welfare-cta{
  display:flex; flex-direction:column; gap:.9rem; align-items:flex-start;
  border-left:1px solid var(--turquoise-700); padding-left:2rem;
}
.welfare-cta .big{font-family:'Amiri',serif; font-size:1.2rem; color:var(--ink-900);}

/* ============================== events ============================== */
.events{background:var(--paper-0); position:relative; overflow:hidden;}
.events .lattice{--lattice-line:rgba(179,58,34,.06);}
.events .eyebrow{color:var(--coral-600);}
.event-list{border-top:1px solid var(--line-ink-soft);}
.event-row{
  display:grid; grid-template-columns:150px 1fr auto; gap:1.6rem; align-items:center;
  padding:1.5rem .6rem; margin-inline:-.6rem; border-radius:8px;
  border-bottom:1px solid var(--line-ink-soft); transition:background .18s ease, transform .18s ease;
}
.event-row:hover{background:var(--paper-50); transform:translateX(4px);}
.event-when{
  font-family:'Catamaran',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; padding:.3rem .6rem; border-radius:5px; width:fit-content;
  background:var(--coral-100); color:var(--coral-700);
}
.event-row:nth-child(2) .event-when{background:var(--turquoise-100); color:var(--turquoise-700);}
.event-row:nth-child(3) .event-when{background:var(--gold-100); color:var(--gold-700);}
.event-body h3{font-family:'Amiri',serif; font-size:1.2rem; color:var(--ink-900); font-weight:700; display:flex; align-items:center; gap:.5rem;}
.event-body p{margin:.35rem 0 0; font-size:.94rem; color:var(--ink-700); max-width:56ch;}
.event-row .star8{width:15px;height:15px; color:var(--gold-600);}

/* ============================== visit ============================== */
.visit{background:var(--paper-50); position:relative; overflow:hidden;}
.visit .lattice{--lattice-line:rgba(42,75,141,.06);}
.visit .eyebrow{color:var(--cobalt-600);}
.visit-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem);}
.visit h2{font-size:clamp(1.7rem,3vw,2.4rem);}
.visit p.lede{margin-top:1rem; color:var(--ink-700); max-width:44ch;}

.contact-form{
  display:flex; flex-direction:column; gap:.85rem;
  margin-top:1.8rem; max-width:32rem;
  padding:1.5rem; border-radius:14px;
  background:var(--paper-0); border:1px solid var(--line-ink-soft);
}
.contact-form input,
.contact-form textarea{
  font-family:'Catamaran',sans-serif; font-size:.94rem; color:var(--ink-900);
  background:var(--paper-50); border:1px solid var(--line-ink-soft); border-radius:8px;
  padding:.75rem .9rem; resize:vertical; transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--ink-500);}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none; border-color:var(--turquoise-600);
  box-shadow:0 0 0 3px var(--turquoise-100);
}
.contact-form button{align-self:flex-start; margin-top:.3rem;}

.contact-cards{display:flex; flex-direction:column; gap:1rem;}
.contact-card{
  display:flex; gap:1rem; align-items:flex-start;
  border:1px solid var(--line-ink-faint); border-radius:var(--radius-card);
  padding:1.25rem 1.4rem; background:var(--paper-0);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.contact-card:hover{transform:translateY(-3px); box-shadow:0 16px 28px -20px rgba(43,33,24,.3); border-color:var(--line-ink-soft);}
.contact-card .ci{
  width:34px; height:34px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:transform .18s ease;
  background:var(--cobalt-100); color:var(--cobalt-600);
}
.contact-card:hover .ci{transform:scale(1.1);}
.contact-card:nth-child(1) .ci{background:var(--coral-100); color:var(--coral-600);}
.contact-card:nth-child(2) .ci{background:var(--turquoise-100); color:var(--turquoise-600);}
.contact-card:nth-child(3) .ci{background:var(--gold-100); color:var(--gold-700);}
.contact-card .ci svg{width:16px; height:16px;}
.contact-card strong{display:block; font-size:.98rem; color:var(--ink-900);}
.contact-card span{font-size:.88rem; color:var(--ink-700);}

/* ============================== photo banner (parallax) ==============================
   A reusable full-width photo section — the picture genuinely stays put
   in the window while the section scrolls over it (a real CSS "fixed"
   background), which is the actual "stays still" look, with none of the
   direction-reversing wobble a JS approximation can introduce. Applied
   on every screen size, including mobile. Drop in with a page-specific
   background photo; until that photo file exists on the server, a
   themed gradient + pattern shows in its place instead of a broken
   image, so the section still looks finished either way. */
.photo-banner{position:relative; overflow:hidden; min-height:clamp(300px,42vw,440px); display:flex; align-items:center; justify-content:center;}
.photo-banner-bg{
  position:absolute; inset:0; z-index:0;
  background-image:var(--banner-img, none), linear-gradient(135deg, var(--turquoise-700), var(--cobalt-700));
  background-size:cover, cover; background-position:center, center; background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
}
/* Phones/tablets briefly resize the visible page area as the address bar
   hides and shows while you scroll. "cover" sizing reacts to that live
   height, which is what reads as a tiny zoom mid-scroll. "lvh" is a screen-
   height unit phones keep steady (it's fixed to the address bar's hidden
   state) instead of the live, ever-changing one, so pinning the photo's
   size to it stops the resizing without changing how it looks. The
   gradient placeholder layer is unaffected either way and stays on
   "cover". Browsers too old to understand "lvh" just ignore this whole
   line and keep the normal "cover" sizing from above. */
@media (max-width:768px){
  .photo-banner-bg{ background-size:auto 105lvh, cover; }
}
.photo-banner-pattern{
  position:absolute; inset:0; z-index:0; opacity:.15; pointer-events:none;
  background-image:radial-gradient(var(--paper-0) 1.5px, transparent 1.5px);
  background-size:22px 22px;
}
.photo-banner-overlay{position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(20,14,8,.48), rgba(20,14,8,.62));}
.photo-banner-content{position:relative; z-index:1; text-align:center; max-width:58ch; margin-inline:auto; padding:clamp(2.4rem,6vw,3.6rem) 1.6rem;}
.photo-banner-content .eyebrow{justify-content:center; color:var(--gold-100);}
.photo-banner-content h2{color:#FFFDF8; margin-top:.6rem; font-size:clamp(1.6rem,3.4vw,2.3rem);}
.photo-banner-content p{color:rgba(255,253,248,.92); margin-top:.9rem; font-size:1.02rem;}
.photo-banner-content .btn{margin-top:1.3rem;}

/* ============================== welfare feature rows ==============================
   Alternating image + text rows, one per initiative. Each photo starts
   zoomed-in and slightly blurred, then settles into place — sharp, at
   normal size — the moment IT (not its row) actually scrolls into view.
   This deliberately does NOT use the shared .reveal/.is-visible system:
   that system force-reveals everything ~2.5s after page load no matter
   where you've scrolled to (right for body text, which must never get
   stuck invisible) — but that would mean this effect finishes before you
   even scroll down to see it. So main.js wires these up with their own
   separate, dedicated observer (search "zoom-into-focus" there) that has
   no such time-based fallback — purely scroll-position-driven. Safe
   default (no JS, or reduced-motion): plain sharp image, no blur/zoom,
   via the .js-revealing gate below (added by main.js only when the
   effect can actually run). Missing photo? The gradient in the second
   background-image layer shows instead, so nothing looks broken. */
.welfare-features{display:flex; flex-direction:column; gap:clamp(2.6rem,6vw,4.2rem);}
.welfare-feature{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:center;
}
.welfare-feature-media{
  order:1; position:relative; overflow:hidden; border-radius:var(--radius-card); aspect-ratio:4/3;
  border:1px solid var(--line-ink-faint); background:var(--paper-50);
  box-shadow:0 22px 40px -28px rgba(43,33,24,.4);
}
.welfare-feature-media .zoom-img{
  position:absolute; inset:0; width:100%; height:100%; will-change:transform, filter;
  background-image:var(--img,none), linear-gradient(135deg, var(--turquoise-700), var(--cobalt-700));
  background-size:cover, cover; background-position:center, center; background-repeat:no-repeat, no-repeat;
}
.js-revealing .welfare-feature-media .zoom-img{
  transform:scale(1.22); filter:blur(14px);
  transition:transform 1.4s cubic-bezier(.16,.8,.24,1), filter 1.4s ease;
}
.js-revealing .welfare-feature-media .zoom-img.is-zoomed{
  transform:scale(1); filter:blur(0);
}
.welfare-feature-text{order:2;}
.welfare-feature-text .eyebrow{margin-bottom:.5rem;}
.welfare-feature-text h3{font-size:1.5rem; color:var(--ink-900); margin-bottom:.7rem;}
.welfare-feature-text p{color:var(--ink-700); font-size:.98rem;}
.welfare-feature.reverse .welfare-feature-media{order:2;}
.welfare-feature.reverse .welfare-feature-text{order:1;}

/* ============================== gallery ============================== */
.gallery-section{background:var(--paper-0);}
.gallery-section .eyebrow{color:var(--coral-600);}
.empty-note{color:var(--ink-500); font-style:italic; font-size:.95rem;}

/* A nicer "nothing here yet" card for a whole section with no content at
   all (Highlights, Courses, Gallery, Azkaar) — used instead of a plain
   line of italic text so an empty page still looks intentional and
   finished to a visitor, with no mention of how the content gets added. */
.empty-state{
  max-width:420px; margin:1.6rem auto 0; padding:2.6rem 1.8rem; text-align:center;
  background:var(--paper-0); border:1px solid var(--line-ink-soft); border-radius:var(--radius-card);
  box-shadow:0 22px 44px -30px rgba(43,33,24,.3);
}
.empty-state-icon{
  display:inline-flex; align-items:center; justify-content:center; width:3.2rem; height:3.2rem;
  border-radius:50%; background:var(--turquoise-100); color:var(--turquoise-700); margin-bottom:1.1rem;
}
.empty-state-icon svg{width:1.5rem; height:1.5rem;}
.empty-state-title{font-weight:700; font-size:1.08rem; color:var(--ink-900); margin:0 0 .4rem;}
.empty-state-text{color:var(--ink-500); font-size:.94rem; line-height:1.55; margin:0;}
/* Photos / Videos / YouTube are shown as separate subsections, each with
   its own small heading and its own grid, rather than one mixed grid. */
.gallery-subsection{margin-top:2.6rem;}
.gallery-subsection:first-of-type{margin-top:0;}
.gallery-subhead{
  display:flex; align-items:center; gap:.5rem; font-size:1.1rem; font-weight:700;
  color:var(--ink-900); margin:0 0 1.1rem;
}
.gallery-subhead .star8{color:var(--coral-600); width:1.1em; height:1.1em;}
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.2rem;
}
.gallery-item{
  position:relative; border-radius:var(--radius-card); overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--line-ink-faint); background:var(--paper-50);
  box-shadow:0 16px 30px -24px rgba(43,33,24,.4); display:block; text-decoration:none;
}
/* .gallery-thumb is a plain, still wrapper — every tile in the Gallery
   grid (photo, video, single YouTube video or playlist) holds its
   thumbnail in place rather than drifting on scroll; the <img>/<video>
   inside keeps its own separate hover-zoom transform. */
.gallery-item .gallery-thumb{position:absolute; inset:0; height:100%;}
.gallery-item img, .gallery-item video{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.gallery-item:hover img, .gallery-item:hover video{transform:scale(1.07);}
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:.7rem .9rem .6rem;
  background:linear-gradient(0deg,rgba(20,14,8,.78),rgba(20,14,8,0));
  color:#FFFDF8; font-size:.86rem; font-weight:600;
  opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease;
}
.gallery-item:hover .cap{opacity:1; transform:translateY(0);}
/* video/YouTube items get a play-button badge centered over the thumbnail
   (photos don't — .gallery-play is only rendered for those types in the
   PHP template). Sits above .gallery-thumb, which is why it's a plain
   sibling rather than nested inside it. */
.gallery-item .gallery-play{
  position:absolute; inset:0; margin:auto; width:54px; height:54px; z-index:1;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(20,14,8,.55); color:#FFFDF8; pointer-events:none;
  transition:transform .2s ease, background .2s ease;
}
.gallery-item .gallery-play svg{width:22px; height:22px; margin-left:3px;}
.gallery-item:hover .gallery-play{background:var(--coral-600); transform:scale(1.08);}

/* a playlist tile (YouTube) or category tile (uploaded videos) shows its
   first video's thumbnail (so visitors see what's inside), plus a small
   badge with the video count. Clicking it opens a picker (below) rather
   than playing a video directly. */
.playlist-badge{
  position:absolute; left:.6rem; top:.6rem; z-index:1; display:flex; align-items:center; gap:.35rem;
  padding:.3rem .55rem; border-radius:999px; background:rgba(20,14,8,.68); color:#FFFDF8;
  font-size:.72rem; font-weight:700; letter-spacing:.02em; pointer-events:none;
}
.playlist-badge svg{width:14px; height:14px;}

/* ---- playlist/category picker: shown inside the lightbox when a playlist
   or category tile is clicked, instead of playing something straight away —
   a titled grid of every photo/video in the group so the visitor can see
   what's inside and choose. ----
   .lightbox-picker wraps a header (name + count, built in main.js) and the
   card grid together, so the whole thing reads as one panel instead of a
   flat wall of thumbnails with a caption line as an afterthought below. */
.lightbox-picker{width:100%; display:flex; flex-direction:column; gap:1rem; padding:1.2rem 1rem .9rem;}
.lightbox-picker-header{
  display:flex; align-items:baseline; justify-content:center; gap:.5rem; flex-wrap:wrap; text-align:center;
}
.lightbox-picker-title{color:#FFFDF8; font-size:1.05rem; font-weight:700;}
.lightbox-picker-count{color:rgba(255,253,248,.6); font-size:.85rem;}
/* Flexbox + a responsive card width (not CSS grid's auto-fill) so a picker
   with only one or two items hugs its content and stays centered, instead
   of grid reserving a full row's worth of columns and leaving a big empty
   black strip next to a lone card. clamp() shrinks cards to fit narrow
   phone screens without needing a separate breakpoint. */
.lightbox-playlist-picker{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem;
  max-width:100%; max-height:62vh; overflow-y:auto; padding:.2rem;
}
.playlist-picker-card{
  display:block; width:clamp(112px,30vw,160px); border:1px solid rgba(255,253,248,.08);
  border-radius:12px; background:rgba(255,253,248,.05); padding:.5rem .5rem .65rem;
  cursor:pointer; text-align:left; transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.playlist-picker-card:hover{background:rgba(255,253,248,.1); border-color:rgba(255,253,248,.22); transform:translateY(-2px);}
/* The thumbnail's own rounded corners clip the hover zoom cleanly, kept
   separate from the card's padding/background panel around it. */
.playlist-picker-thumb{border-radius:8px; overflow:hidden; display:block;}
/* img: YouTube picker thumbnails (naturally 16:9); video: uploaded-video-
   category picker thumbnails (muted, relies on the browser's own first-
   frame preview, also 16:9). Photo thumbnails get .is-photo — a square
   crop reads as a proper photo grid instead of cropping tall/portrait
   photos down to a thin sliver under a forced 16:9 box. */
.playlist-picker-thumb img, .playlist-picker-thumb video{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .2s ease;}
.playlist-picker-thumb img.is-photo{aspect-ratio:1/1;}
.playlist-picker-card:hover .playlist-picker-thumb img, .playlist-picker-card:hover .playlist-picker-thumb video{transform:scale(1.06);}
.playlist-picker-card span{display:block; color:#FFFDF8; font-size:.82rem; font-weight:600; margin-top:.5rem; line-height:1.3;}
/* Overlaid on the video/iframe's own top-left corner (not an in-flow
   element above it) — same "pin, don't push" fix as .lightbox-close. A
   flex sibling here used to add its own height above the player, which on
   a tall PORTRAIT video pushed the whole block up until this button
   collided with the site's sticky header (only its rounded bottom edge
   peeking out below the header — the "mystery shape" bug) and threw the
   video off from true vertical centering. Anchoring it to the player's own
   corner means its position never depends on the video's aspect ratio. */
.playlist-back{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem;
  border:1px solid rgba(255,253,248,.3); border-radius:999px; background:rgba(20,14,8,.7); color:#FFFDF8;
  font-size:.85rem; font-weight:600; cursor:pointer; transition:background .15s ease;
}
.playlist-back:hover{background:var(--coral-600);}
/* wraps the "back to playlist" button (absolutely positioned, above) over
   the video/iframe when a video is opened from a playlist picker (main.js) */
.lightbox-playlist-video{position:relative; display:flex; flex-direction:column; width:100%;}
.lightbox-playlist-video iframe{width:100%; aspect-ratio:16/9; max-height:70vh; border:0; display:block;}
/* Shorts-style playlists (name contains "short", set in main.js) get a
   tall portrait player instead of the normal 16:9 box, centered in the
   available width so it isn't stretched or letterboxed down to a sliver. */
.lightbox-playlist-video--portrait iframe{
  width:auto; height:70vh; max-height:70vh; max-width:100%; aspect-ratio:9/16; margin:0 auto; display:block;
}
/* Next/Previous overlay the player itself (never in-flow — same "pin, don't
   push" reasoning as .playlist-back) so a visitor can flip straight through
   every video in a playlist without returning to the picker grid. */
.lightbox-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,253,248,.3); background:rgba(20,14,8,.55); color:#FFFDF8;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease;
}
.lightbox-nav-btn:hover{background:var(--coral-600); border-color:var(--coral-600);}
.lightbox-nav-prev{left:.6rem;}
.lightbox-nav-next{right:.6rem;}

/* ---- lightbox: opens on any gallery item click (see main.js), shows the
   full photo, plays the uploaded video, or embeds the YouTube player. ---- */
.lightbox{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:5vh 5vw; opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox-backdrop{position:absolute; inset:0; background:rgba(15,11,7,.86);}
.lightbox-inner{position:relative; z-index:1; max-width:min(960px,100%); max-height:90vh; width:100%; display:flex; flex-direction:column; align-items:center;}
.lightbox-media{
  width:100%; max-height:78vh; display:flex; align-items:center; justify-content:center; border-radius:14px; overflow:hidden;
  background:#000; border:1px solid rgba(255,253,248,.08); box-shadow:0 30px 60px -30px rgba(0,0,0,.65);
}
.lightbox-media img{max-width:100%; max-height:78vh; width:auto; height:auto; display:block; object-fit:contain;}
.lightbox-media video{max-width:100%; max-height:78vh; width:100%; display:block; background:#000;}
.lightbox-media iframe{width:100%; aspect-ratio:16/9; max-height:78vh; border:0; display:block;}
.lightbox-caption{color:#FFFDF8; font-size:.95rem; margin-top:.9rem; text-align:center; max-width:70ch;}
/* Pinned to the screen corner (not to the media box) so it always lands in
   the same spot regardless of how tall the content is — a portrait/vertical
   video can make .lightbox-inner nearly fill the viewport height, which
   would otherwise push a box-relative close button off-screen. The
   safe-area-inset keeps it clear of a phone's notch/status bar. */
.lightbox-close{
  position:fixed; z-index:2;
  top:calc(env(safe-area-inset-top, 0px) + 14px);
  right:calc(env(safe-area-inset-right, 0px) + 14px);
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,253,248,.4); background:rgba(20,14,8,.55); color:#FFFDF8;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease;
}
.lightbox-close svg{width:16px; height:16px;}
.lightbox-close:hover{background:var(--coral-600); border-color:var(--coral-600);}
body.lightbox-open{overflow:hidden;}

/* ============================== azkaar ============================== */
.azkaar-section{background:var(--paper-50); position:relative; overflow:hidden;}
.azkaar-section .lattice{--lattice-line:rgba(56,104,74,.08);}
.azkaar-section .eyebrow{color:var(--sage-600);}

/* Morning / Evening / whatever categories have actually been entered in the
   admin panel — built from the real data, not a fixed list, so it always
   matches what's there (see azkaar.php). Hidden entirely when there's only
   one category (or none) to switch between; no "All" option, one is always
   selected. */
.azkaar-tabs{
  display:flex; flex-wrap:wrap; gap:.4rem;
  background:var(--paper-0); padding:.4rem; border-radius:999px;
  border:1px solid var(--line-ink-faint);
  box-shadow:0 16px 30px -26px rgba(43,33,24,.35);
  margin-bottom:1.4rem;
}
.azkaar-tabs a{
  flex:1 1 auto; text-align:center; padding:.62rem .9rem;
  border-radius:999px; text-decoration:none; font-weight:700; font-size:.86rem;
  color:var(--ink-700);
}
.azkaar-tabs a.active{background:var(--turquoise-700); color:var(--paper-0);}

.azkaar-list{display:flex; flex-direction:column; gap:1.2rem;}
.azkaar-card{
  background:var(--paper-0); border:1px solid var(--line-ink-faint); border-left:4px solid var(--sage-600);
  border-radius:var(--radius-card); padding:1.4rem 1.6rem;
  box-shadow:0 16px 30px -26px rgba(43,33,24,.35);
}
.azkaar-card-head{display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem;}
.azkaar-num{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--turquoise-700); color:var(--paper-0);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; font-family:'Catamaran',sans-serif;
}
.azkaar-card .cat{
  display:inline-block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--sage-700,var(--sage-600)); background:var(--sage-100); padding:.2rem .55rem; border-radius:3px;
}
.azkaar-card .ar{
  direction:rtl; font-family:'Amiri',serif; font-size:1.55rem; line-height:2; color:var(--ink-900);
  margin:.2rem 0 .9rem; text-align:right;
  background:var(--paper-50); border-right:4px solid var(--gold-600); border-radius:10px;
  padding:1rem 1.1rem;
}
.azkaar-card .translit{font-style:italic; color:var(--ink-500); font-size:.92rem; margin:.3rem 0 .7rem;}
.azkaar-card .translation{
  color:var(--ink-700); font-size:.96rem; margin-top:.3rem;
  background:var(--paper-100); border-radius:10px; padding:.85rem 1rem;
}
/* The hadith/dua reference — its own clearly-visible badge instead of a
   line buried inside the translation paragraph. */
.azkaar-card .azkaar-ref{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.8rem; padding:.4rem .8rem;
  background:var(--gold-100); color:var(--gold-700);
  border-radius:999px; font-size:.78rem; font-weight:700;
  font-family:'Catamaran',sans-serif;
}
.azkaar-card .azkaar-ref svg{flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}

@media (max-width:480px){
  .azkaar-card .ar{font-size:1.3rem; padding:.85rem .9rem;}
  .azkaar-tabs a{font-size:.78rem; padding:.55rem .5rem;}
}

/* Scroll-to-top — small floating button, shown once you've scrolled a bit.
   Purely a convenience; if its JS ever fails to run the button just never
   appears, nothing else on the page depends on it. */
.scroll-top{
  position:fixed; right:20px; bottom:24px; width:46px; height:46px;
  background:var(--gold-600); color:#fff; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 16px 30px -18px rgba(43,33,24,.45);
  cursor:pointer; z-index:40; border:none;
}
.scroll-top.show{display:flex;}
@media print{ .scroll-top{display:none !important;} }

/* ============================== highlights (news feed) ============================== */
.highlights-section{background:var(--paper-0);}
.highlights-section .eyebrow{color:var(--gold-700);}
.highlight-list{display:flex; flex-direction:column; gap:1.4rem;}
.highlight-post{
  background:var(--paper-0); border:1px solid var(--line-ink-faint); border-radius:var(--radius-card);
  padding:1.6rem 1.7rem; box-shadow:0 16px 30px -26px rgba(43,33,24,.35);
}
.highlight-post time{
  display:block; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--gold-700); margin-bottom:.5rem;
}
.highlight-post h3{font-family:'Amiri',serif; font-size:1.35rem; color:var(--ink-900);}
.highlight-post .body{margin-top:.7rem; color:var(--ink-700); font-size:.98rem; white-space:pre-line;}

/* ============================== generic page content (page.php / index.php) ============================== */
.am-page-content h1,.am-page-content h2,.am-page-content h3,.am-page-content h4{margin-top:1.6rem; margin-bottom:.6rem;}
.am-page-content h1:first-child,.am-page-content h2:first-child{margin-top:0;}
.am-page-content p{margin:.9rem 0; color:var(--ink-700); font-size:1.02rem;}
.am-page-content ul,.am-page-content ol{margin:.9rem 0; padding-left:1.4rem; color:var(--ink-700);}
.am-page-content li{margin-top:.4rem;}
.am-page-content a{color:var(--cobalt-600); text-decoration-color:var(--cobalt-100);}
.am-page-content img{border-radius:var(--radius-card); margin:1.2rem 0;}
.am-page-content blockquote{
  border-left:3px solid var(--gold-600); margin:1.4rem 0; padding:.4rem 0 .4rem 1.2rem;
  font-family:'Amiri',serif; font-style:italic; color:var(--ink-900);
}

/* ============================== footer ============================== */
footer{background:var(--paper-50); border-top:1px solid var(--line-ink-soft);}
.footer-top{
  display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:2.5rem;
  padding-block:clamp(2.6rem,5vw,3.6rem);
}
.footer-brand .brand{margin-bottom:.9rem;}
.footer-brand .brand .badge{width:44px; height:44px;}
.footer-brand .brand-text strong{color:var(--ink-900);}
.footer-brand p{font-size:.9rem; color:var(--ink-700); max-width:32ch;}
.footer-col h4{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-700); margin:0 0 1rem; }
.footer-col ul{display:flex; flex-direction:column; gap:.65rem;}
.footer-col a{font-size:.9rem; text-decoration:none; color:var(--ink-700); transition:color .15s ease, padding-left .15s ease;}
.footer-col a:hover{color:var(--cobalt-600); padding-left:.3rem;}
.footer-bottom{
  border-top:1px solid var(--line-ink-faint); padding-block:1.3rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:.8rem; color:var(--ink-500);
}

/* ============================== responsive ============================== */
@media (max-width:980px){
  .logo-panel{display:none;}
  .header-right .brand-mobile{display:flex;}
  /* The full address + email line is nice-to-have on desktop, but on a
     phone it's two more lines above the actual site, pushing the logo,
     menu and hero further down for no real benefit — the same email and
     address are already in the footer. So below tablet width, the topbar
     is just "Teachers Login" + social links, on one tidy row. */
  .topbar-left{display:none;}
  .topbar .wrap{justify-content:center; padding-block:.42rem;}
  /* --header-h is measured live off the real header (main.js) — it varies
     by device (e.g. the topbar's contact line can wrap to two lines on
     narrower phones), so a guessed fixed number here drifts out of sync
     and the menu ends up overlapping the header instead of sitting
     cleanly below it. The 64px is only a fallback for the instant before
     JS runs. */
  nav.primary-nav{
    position:fixed; inset:var(--header-h,64px) 0 auto 0; z-index:2; background:var(--paper-0);
    flex-direction:column; align-items:flex-start; gap:0; padding:.6rem clamp(20px,5vw,48px) 1.2rem;
    border-radius:0 0 18px 18px; box-shadow:0 24px 48px -22px rgba(43,33,24,.45);
    max-height:calc(100vh - var(--header-h,64px)); overflow-y:auto; overscroll-behavior:contain;
    transform:translateY(-14px); opacity:0;
    visibility:hidden; transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  nav.primary-nav.open{opacity:1; transform:none; visibility:visible;}
  nav.primary-nav li{width:100%;}
  nav.primary-nav li:last-child a{border-bottom:none;}
  nav.primary-nav a{padding-block:.85rem; width:100%; border-bottom:1px solid var(--line-ink-faint); font-size:1rem;}
  nav.primary-nav a:active{background:var(--paper-50);}
  /* links cascade in one after another as the menu opens, instead of
     appearing all at once — each starts faded/shifted left, then settles
     in with an increasing delay. The delay lives only on the .open rule
     (the "target" state), so opening cascades but closing is immediate —
     that asymmetry falls out of how CSS transitions pick up the newly
     computed style's own transition-delay, no JS timing needed. */
  nav.primary-nav li a{opacity:0; transform:translateX(-18px); transition:opacity .3s ease, transform .3s ease, background-color .15s ease;}
  nav.primary-nav.open li a{opacity:1; transform:none;}
  nav.primary-nav.open li:nth-child(1) a{transition-delay:.05s;}
  nav.primary-nav.open li:nth-child(2) a{transition-delay:.1s;}
  nav.primary-nav.open li:nth-child(3) a{transition-delay:.15s;}
  nav.primary-nav.open li:nth-child(4) a{transition-delay:.2s;}
  nav.primary-nav.open li:nth-child(5) a{transition-delay:.25s;}
  nav.primary-nav.open li:nth-child(6) a{transition-delay:.3s;}
  nav.primary-nav.open li:nth-child(7) a{transition-delay:.35s;}
  nav.primary-nav.open li:nth-child(8) a{transition-delay:.4s;}
  nav.primary-nav.open li:nth-child(n+9) a{transition-delay:.45s;}
  /* dims and blocks the rest of the page while the mobile menu is open —
     tapping anywhere on it closes the menu (see main.js). Sits just below
     the nav panel itself (z-index:2 above) within the header's own
     stacking context, so it never has to out-rank unrelated page content. */
  .nav-backdrop{
    display:block; position:fixed; inset:var(--header-h,64px) 0 0 0; z-index:1;
    background:rgba(34,26,18,.4); opacity:0; visibility:hidden;
    transition:opacity .22s ease, visibility .22s;
  }
  .nav-backdrop.open{opacity:1; visibility:visible;}
  body.nav-open{overflow:hidden;}
  .nav-toggle{display:flex;}
  /* belt-and-suspenders alongside the --header-h fix above: keep the
     toggle button (and its hamburger↔X icon) explicitly above both the
     menu panel (z-index:2) and its backdrop (z-index:1), so it's never
     visually buried even for the brief instant before JS measures the
     header on a very first paint. */
  .header-actions{position:relative; z-index:3;}
  .header-actions .btn-coral{display:none;}
  .hero-grid{grid-template-columns:1fr;}
  .prayer-panel{margin-top:0;}
  .about-grid{grid-template-columns:1fr;}
  .course-grid{grid-template-columns:repeat(2,1fr);}
  .course-card.flagship{grid-column:span 2; flex-direction:column;}
  .welfare-inner{grid-template-columns:1fr;}
  .welfare-cta{border-left:none; padding-left:0; border-top:1px solid var(--turquoise-700); padding-top:1.5rem;}
  .welfare-feature{grid-template-columns:1fr;}
  .welfare-feature-media, .welfare-feature.reverse .welfare-feature-media{order:1;}
  .welfare-feature-text, .welfare-feature.reverse .welfare-feature-text{order:2;}
  .visit-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr; gap:2rem;}
  .audience-lede{border-right:none; padding-right:0;}
}
@media (max-width:640px){
  .topbar{font-size:.74rem;}
  .course-grid{grid-template-columns:1fr;}
  .course-card.flagship{grid-column:span 1;}
  .audience .wrap{flex-direction:column; align-items:flex-start;}
  .audience-chips{max-width:100%; justify-content:flex-start;}
  .event-row{grid-template-columns:1fr; gap:.5rem;}
  .footer-top{grid-template-columns:1fr;}
}