/* =========================================================================
   POLISH LAYER (loaded after professional.css)
   Small, calm refinements: header that tightens on scroll, hover lift on
   programme cards, gold ornament dividers, softer heading reveals.
   Motion is skipped for visitors who prefer reduced motion.
   To go back, remove the link to this file and js/polish.js.
   ========================================================================= */

/* ---------- gold ornament between the main home sections ------------------ */
.home-page .home-purpose::before, .home-page .home-programmes::before,
.home-page .home-admissions::before, .home-page .home-leadership::before {
  content: ""; position: absolute; left: 50%; top: 22px; z-index: 1; width: 190px; height: 14px;
  transform: translateX(-50%); pointer-events: none; opacity: .9;
  background:
    linear-gradient(90deg, transparent, #CFB047) left center / 76px 1px no-repeat,
    linear-gradient(90deg, #CFB047, transparent) right center / 76px 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0l7 7-7 7-7-7z' fill='%23CFB047'/%3E%3Cpath d='M7 4l3 3-3 3-3-3z' fill='%233B1A27'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

/* ---------- programme cards: lift + gold edge that draws in -------------- */
.home-page .programme-card-text {
  background-image: linear-gradient(90deg, #CFB047, #E3C45A);
  background-repeat: no-repeat; background-position: top left; background-size: 0 3px;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, background-size .45s ease;
}
.home-page .programme-card-text:hover, .home-page .programme-card-text:focus-within { transform: translateY(-6px); background-size: 100% 3px; }

/* step + feature cards get the same quiet lift */
.home-page .feature-card, .home-page .admission-step {
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.home-page .feature-card:hover, .home-page .admission-step:hover {
  transform: translateY(-4px); border-color: rgba(207, 176, 71, .7); box-shadow: 0 18px 38px -18px rgba(59, 26, 39, .35);
}

/* ---------- quick facts: neat number alignment ---------------------------- */
.home-page .fact-value [data-count] { font-variant-numeric: tabular-nums; }

/* ---------- header: tightens and gains a soft shadow once you scroll ----- */
@media (min-width: 992px) {
  .public-nav { transition: min-height .3s ease, box-shadow .3s ease; }
  .public-nav .brand-link img { transition: width .3s ease, height .3s ease; }
  .public-nav.is-scrolled { min-height: 66px; box-shadow: 0 10px 28px -14px rgba(20, 6, 12, .55); }
  .public-nav.is-scrolled .brand-link img { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* headings come into focus, gold rules draw out from the centre */
  .js-motion .reveal .home-heading { filter: blur(6px); letter-spacing: .02em; transition: filter .9s ease .1s, letter-spacing 1.1s ease .1s; }
  .js-motion .reveal.in .home-heading { filter: none; letter-spacing: -.01em; }
  .js-motion .reveal .home-eyebrow::before, .js-motion .reveal .home-eyebrow::after { transform: scaleX(0); transition: transform .8s ease .25s; }
  .js-motion .reveal.in .home-eyebrow::before { transform: scaleX(1); transform-origin: right; }
  .js-motion .reveal.in .home-eyebrow::after { transform: scaleX(1); transform-origin: left; }

  /* arabic words on the programme cards glide in after the card appears */
  .js-motion .reveal-stagger .pc-ar, .js-motion .reveal-stagger .programme-head .ar { opacity: 0; transform: translateY(8px); transition: opacity .8s ease .35s, transform .8s ease .35s; }
  .js-motion .reveal-stagger.in .pc-ar, .js-motion .reveal-stagger.in .programme-head .ar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .programme-card-text:hover, .home-page .feature-card:hover, .home-page .admission-step:hover { transform: none; }
}


/* =========================================================================
   NEW IN v49
   ========================================================================= */

/* ---------- drifting Arabic calligraphy behind the hero ------------------- */
.hero-fx .fx-calli {
  position: absolute; display: block; white-space: nowrap; user-select: none; line-height: 1.4 !important;
  color: rgba(227, 196, 90, .06); font-weight: 700;
}
.hero-fx .fx-calli-a { top: 6%; right: 4%; font-size: clamp(9rem, 20vw, 19rem); }
.hero-fx .fx-calli-b { bottom: 10%; left: -2%; font-size: clamp(2.6rem, 6vw, 5.6rem); color: rgba(227, 196, 90, .06); }
@media (prefers-reduced-motion: no-preference) {
  .hero-fx .fx-calli-a { animation: pf-drift-a 48s ease-in-out infinite alternate; }
  .hero-fx .fx-calli-b { animation: pf-drift-b 62s ease-in-out infinite alternate; }
  @keyframes pf-drift-a { from { transform: translate3d(-3vw, 0, 0) rotate(-3deg); } to { transform: translate3d(3vw, 5%, 0) rotate(2deg); } }
  @keyframes pf-drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(14vw, -8%, 0); } }
}

/* ---------- next-intake countdown ---------------------------------------- */
.intake-countdown {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem .85rem; margin: 1.25rem 0 .25rem;
  padding: .55rem .6rem .55rem 1rem; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(207, 176, 71, .55); color: #fff;
}
.intake-countdown[hidden] { display: none; }
.intake-countdown .ic-icon { color: var(--pf-gold-l, #E3C45A); }
.intake-countdown .ic-text { font-size: .98rem; }
.intake-countdown .ic-days { color: var(--pf-gold-l, #E3C45A); font-size: 1.35rem; font-variant-numeric: tabular-nums; margin: 0 .1rem; }
.intake-countdown .ic-btn {
  background: var(--pf-gold, #CFB047); color: #3B1A27 !important; font-weight: 800; font-size: .88rem; text-decoration: none;
  padding: .45rem 1rem; border-radius: 999px; transition: background .2s ease, transform .2s ease;
}
.intake-countdown .ic-btn:hover { background: #fff; transform: translateY(-1px); }
@media (prefers-reduced-motion: no-preference) { .intake-countdown:not([hidden]) { animation: pf-rise .7s ease .5s both; } @keyframes pf-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } }

/* ---------- testimonials slider ------------------------------------------ */
.tslider { max-width: 820px; margin: 2.2rem auto 0; }
.ts-viewport { overflow: hidden; border-radius: 18px; }
.ts-track { display: flex; direction: ltr; transition: transform .7s cubic-bezier(.22, .7, .2, 1); will-change: transform; }
.ts-slide {
  flex: 0 0 100%; margin: 0; padding: 2.6rem clamp(1.4rem, 5vw, 3.4rem) 2.2rem; text-align: center; position: relative;
  background: #FAF7F5; border: 1px solid var(--pf-line, #E9E3E1); border-radius: 18px; border-top: 3px solid var(--pf-gold, #CFB047);
  opacity: .35; transition: opacity .6s ease; direction: ltr;
}
.ts-slide.is-active { opacity: 1; }
.ts-mark { display: block; font-family: Georgia, serif; font-size: 4.4rem; line-height: .6; height: 2rem; color: var(--pf-gold, #CFB047); }
.ts-slide blockquote { margin: 1rem 0 1.3rem; font-family: var(--font-display, Georgia, serif); font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.75; color: #3B1A27; unicode-bidi: plaintext; }
.ts-slide figcaption strong { display: block; color: #3B1A27; font-size: 1rem; }
.ts-slide figcaption small { display: block; color: #6B6368; margin-top: .15rem; }
.ts-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.1rem; }
.ts-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pf-line, #E9E3E1); background: #fff; color: #3B1A27; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.ts-btn:hover { background: #3B1A27; color: #fff; border-color: #3B1A27; }
.ts-dots { display: flex; gap: .5rem; }
.ts-dot { width: 9px; height: 9px; border-radius: 99px; border: 0; padding: 0; background: #D9CFD3; cursor: pointer; transition: width .3s ease, background .3s ease; }
.ts-dot.is-active { width: 26px; background: var(--pf-gold, #CFB047); }
@media (prefers-reduced-motion: reduce) { .ts-track, .ts-slide { transition: none; } }

/* ---------- back-to-top ----------------------------------------------------- */
.to-top {
  position: fixed; right: 1.1rem; bottom: 5rem; z-index: 1085; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--pf-gold, #CFB047); color: #3B1A27; font-size: 1rem; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #E3C45A; }

/* ---------- prayer-times strip -------------------------------------------- */
.prayer-strip { background: #2A1019; color: rgba(255, 255, 255, .85); border-bottom: 1px solid rgba(207, 176, 71, .35); font-size: .82rem; }
.prayer-strip[hidden] { display: none; }
.ps-inner { max-width: 1240px; margin: 0 auto; padding: .42rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.ps-inner::-webkit-scrollbar { display: none; }
.ps-hijri { color: var(--pf-gold-l, #E3C45A); font-weight: 600; }
.ps-times { display: flex; gap: 1.1rem; align-items: center; }
.ps-t { display: inline-flex; gap: .4rem; align-items: baseline; padding: .12rem .55rem; border-radius: 99px; }
.ps-t b { font-weight: 600; color: rgba(255, 255, 255, .6); font-size: .74rem; letter-spacing: .03em; }
.ps-t span { font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; }
.ps-t.is-next { background: rgba(207, 176, 71, .18); outline: 1px solid rgba(207, 176, 71, .6); }
.ps-t.is-next b { color: var(--pf-gold-l, #E3C45A); }
.ps-place { color: rgba(255, 255, 255, .55); }
@media (max-width: 767px) { .ps-place { display: none; } .ps-inner { justify-content: flex-start; } }

/* ---------- dark-mode switch in the menu ----------------------------------- */
.theme-toggle {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .55); background: transparent; color: #fff; font-size: .95rem; transition: background .18s ease, color .18s ease;
}
.theme-toggle:hover { background: #fff; color: #3B1A27; }
@media (max-width: 991px) {
  /* on phones the switch floats bottom-left so the menu bar stays uncrowded */
  .theme-toggle { position: fixed; left: 1rem; bottom: 1rem; z-index: 1085; width: 42px; height: 42px; background: #3B1A27; border-color: var(--pf-gold, #CFB047); color: var(--pf-gold-l, #E3C45A); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
}

/* ---------- smooth page-to-page fade ---------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s ease both pf-vt-out; }
::view-transition-new(root) { animation: .32s ease both pf-vt-in; }
@keyframes pf-vt-out { to { opacity: 0; } }
@keyframes pf-vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
/* browsers without view transitions: simple fade-in on load */
@supports not (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) { body { animation: pf-vt-in .4s ease both; } }
}

/* ---------- fixes: centred section titles ---------- */
.home-page .home-heading.text-center { text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 575px) { .to-top { bottom: 4.6rem; } }


/* =========================================================================
   DARK MODE  (only when the visitor taps the moon button; html[data-theme="dark"])
   Same burgundy and gold, on a warm near-black.
   ========================================================================= */
html[data-theme="dark"] { color-scheme: dark; --d-bg: #150A0F; --d-s1: #1F1118; --d-s2: #291720; --d-line: #3B2631; --d-text: #D9CED3; --d-mute: #A99CA3; --d-head: #F7F0F2; }
html[data-theme="dark"] body, html[data-theme="dark"] .public-page { background: var(--d-bg) !important; color: var(--d-text); }
html[data-theme="dark"] .home-page .home-section { background: var(--d-bg) !important; }
html[data-theme="dark"] .home-page .home-purpose, html[data-theme="dark"] .home-page .home-admissions,
html[data-theme="dark"] .home-page .home-intro { background: var(--d-s1) !important; }
html[data-theme="dark"] .home-page .home-levels { background: #2A1019 !important; }
html[data-theme="dark"] .home-page .home-heading, html[data-theme="dark"] .home-page h2, html[data-theme="dark"] .home-page h3,
html[data-theme="dark"] .home-page h4, html[data-theme="dark"] .home-page .fact-value, html[data-theme="dark"] .home-page strong,
html[data-theme="dark"] .public-page h1, html[data-theme="dark"] .public-page h2, html[data-theme="dark"] .public-page h3 { color: var(--d-head) !important; }
html[data-theme="dark"] .home-page p, html[data-theme="dark"] .home-page li, html[data-theme="dark"] .home-page .fact-label,
html[data-theme="dark"] .public-page p, html[data-theme="dark"] .public-page li { color: var(--d-text); }
html[data-theme="dark"] .home-page .home-eyebrow { color: #E3C45A !important; }
html[data-theme="dark"] .home-page .feature-card, html[data-theme="dark"] .home-page .programme-card,
html[data-theme="dark"] .home-page .admission-step, html[data-theme="dark"] .home-page .purpose-card,
html[data-theme="dark"] .home-page .news-item, html[data-theme="dark"] .home-page .leader-card,
html[data-theme="dark"] .public-card, html[data-theme="dark"] .notify, html[data-theme="dark"] .prog-card {
  background: var(--d-s2) !important; border-color: var(--d-line) !important; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .8) !important; color: var(--d-text);
}
html[data-theme="dark"] .home-page .programme-card .programme-copy, html[data-theme="dark"] .home-page .programme-card .programme-body { background: transparent !important; }
html[data-theme="dark"] .home-page .programme-label { background: rgba(207, 176, 71, .14) !important; color: #E3C45A !important; }
html[data-theme="dark"] .home-page .pc-more { border-color: var(--d-line) !important; }
html[data-theme="dark"] .home-page .fact-icon, html[data-theme="dark"] .home-page .feature-card .fi { background: rgba(207, 176, 71, .14) !important; color: #E3C45A !important; }
html[data-theme="dark"] .home-page .home-facts .row { background: var(--d-s2) !important; border-color: var(--d-line) !important; }
html[data-theme="dark"] .home-page .fact-item { border-color: var(--d-line) !important; }
html[data-theme="dark"] .home-page .step-number { background: #E3C45A !important; color: #2A1019 !important; }
html[data-theme="dark"] .home-page .home-purpose .purpose-card:first-child { background: #3B1A27 !important; }
html[data-theme="dark"] .home-page .home-section .home-btn:not(.home-btn-outline):not(.is-closed),
html[data-theme="dark"] .home-page .programme-card .btn, html[data-theme="dark"] .home-page .pc-btn { background: #CFB047 !important; color: #2A1019 !important; border-color: #CFB047 !important; }
html[data-theme="dark"] .home-page .home-section .home-btn-outline { color: var(--d-head) !important; border-color: rgba(255, 255, 255, .45) !important; }
html[data-theme="dark"] .home-page .pc-count { background: #E3C45A !important; color: #2A1019 !important; }
html[data-theme="dark"] .ts-slide { background: var(--d-s2); border-color: var(--d-line); border-top-color: #CFB047; }
html[data-theme="dark"] .ts-slide blockquote, html[data-theme="dark"] .ts-slide figcaption strong { color: var(--d-head); }
html[data-theme="dark"] .ts-slide figcaption small { color: var(--d-mute); }
html[data-theme="dark"] .ts-btn { background: var(--d-s2); color: var(--d-head); border-color: var(--d-line); }
html[data-theme="dark"] .ts-btn:hover { background: #CFB047; color: #2A1019; border-color: #CFB047; }
html[data-theme="dark"] .ts-dot { background: #4A3541; }
html[data-theme="dark"] .prayer-strip { background: #0F070B; }
html[data-theme="dark"] .site-footer { background: #0F070B !important; }
html[data-theme="dark"] .hero-curve path { fill: var(--d-bg); }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--d-s1) !important; color: var(--d-head) !important; border-color: var(--d-line) !important; }
html[data-theme="dark"] .skip-link { background: #CFB047; color: #2A1019; }
html[data-theme="dark"] img.intro-photo { filter: brightness(.92); }
html[data-theme="dark"] .home-page .home-facts { background: var(--d-bg) !important; border-top-color: #CFB047; border-bottom-color: var(--d-line); }
html[data-theme="dark"] .home-page .home-facts .fact-icon { background: rgba(207, 176, 71, .16) !important; color: #E3C45A !important; }
html[data-theme="dark"] .home-page .home-cta-section { background: var(--d-bg) !important; }
html[data-theme="dark"] .home-page .home-description, html[data-theme="dark"] .home-page .home-section-heading p,
html[data-theme="dark"] .home-page .home-section p:not(.home-eyebrow) { color: var(--d-text) !important; opacity: .92; }
html[data-theme="dark"] .home-page .home-levels p, html[data-theme="dark"] .home-page .home-cta p { color: rgba(255, 255, 255, .88) !important; opacity: 1; }
html[data-theme="dark"] .home-page .purpose-card.vision-card { background: var(--d-s2) !important; border: 1px solid var(--d-line) !important; border-top: 4px solid #CFB047 !important; }
html[data-theme="dark"] .home-page .purpose-card.vision-card h3 { color: var(--d-head) !important; }
html[data-theme="dark"] .home-page .purpose-card.vision-card p { color: var(--d-text) !important; opacity: 1; }
html[data-theme="dark"] .home-page .pc-link { background: #CFB047 !important; color: #2A1019 !important; }
html[data-theme="dark"] .home-page .pc-more summary, html[data-theme="dark"] .home-page .pc-more summary span { color: var(--d-head) !important; }
html[data-theme="dark"] .home-page .contact-panel { background: var(--d-s2) !important; border: 1px solid var(--d-line) !important; }
html[data-theme="dark"] .home-page .contact-panel h3, html[data-theme="dark"] .home-page .contact-panel strong, html[data-theme="dark"] .home-page .contact-panel label,
html[data-theme="dark"] .home-page .contact-panel .contact-label { color: var(--d-head) !important; }
html[data-theme="dark"] .home-page .contact-panel a, html[data-theme="dark"] .home-page .contact-panel span { color: var(--d-text); }
html[data-theme="dark"] .home-page .contact-panel i, html[data-theme="dark"] .home-page .contact-icon { background: rgba(207, 176, 71, .16) !important; color: #E3C45A !important; }
html[data-theme="dark"] .home-notice-btn { color: var(--d-head) !important; border-color: rgba(255, 255, 255, .4) !important; background: transparent !important; }
html[data-theme="dark"] .home-page .home-btn.is-closed { background: rgba(255, 255, 255, .1) !important; color: var(--d-text) !important; }

/* ---------- lessons page: floating buttons rise above the audio player bar (height measured by polish.js) ---------- */
body:has(.lp.on) .wa-float { bottom: calc(var(--lp-h, 100px) + 12px) !important; }
body:has(.lp.on) .to-top { bottom: calc(var(--lp-h, 100px) + 76px) !important; }
body:has(.lp.on) .theme-toggle { bottom: calc(var(--lp-h, 100px) + 12px) !important; }
@media (max-width: 575px) { body:has(.lp.on) .to-top { bottom: calc(var(--lp-h, 100px) + 64px) !important; } }

/* ---------- phones: smaller floating buttons so they cover less of the page ---------- */
@media (max-width: 575px) {
  .wa-float { height: 44px !important; min-width: 44px !important; right: .8rem !important; bottom: .8rem !important; padding: 0 11px !important; }
  .wa-float i { font-size: 1.3rem !important; }
  .theme-toggle { width: 38px !important; height: 38px !important; left: .8rem !important; bottom: .8rem !important; }
  .to-top { width: 38px; height: 38px; right: .85rem; bottom: 4.1rem !important; }
}

/* ---------- phones: smaller leadership cards (all three) ---------- */
@media (max-width: 767.98px) {
  .home-page .home-leadership { padding-top: 2.2rem !important; padding-bottom: 2.2rem !important; }
  .home-page .home-leadership .home-section-heading { margin-bottom: 1.1rem !important; }
  .home-page .home-leadership .home-heading { font-size: 1.35rem !important; margin-bottom: .4rem !important; }
  .home-page .home-leadership .home-description { font-size: .88rem !important; line-height: 1.5 !important; margin-bottom: 0 !important; }
  .home-page .home-leadership .row { --bs-gutter-y: .7rem; --bs-gutter-x: .7rem; }
  .home-page .leader-card { padding: .9rem 1rem 1rem !important; border-radius: 14px !important; }
  .home-page .leader-card:hover { transform: none; }
  .home-page .leader-card .leader-symbol { width: 46px; height: 46px; font-size: 1.05rem; border-width: 3px; margin-bottom: .5rem; }
  .home-page .leader-card h3 { font-size: 1.1rem !important; margin-bottom: .3rem !important; }
  .home-page .leader-card .leader-role { font-size: .76rem !important; padding: .12rem .6rem !important; margin-bottom: .45rem !important; }
  .home-page .leader-card p { font-size: .84rem !important; line-height: 1.5 !important; }
}