/**
 * WiseLife Design System v1.0 — Sprint 2, Phase 1
 *
 * Scope: typography tokens, color palette, shared components.
 * Loaded BEFORE fancybox/owl/superfish so theme.min.css wins the cascade
 * only where we haven't explicitly overridden.
 *
 * Phase 0 audit notes:
 *  - Sintony came from: Google Fonts CDN (header.php:125), CSS vars (:79-81),
 *    inline <style> h1-h6 rule (:134). All three replaced below / in header.php.
 *  - Body was Georgia (header.php:131). Replaced by var(--wl-font-body).
 *  - Header element: <header class="site-header">
 *  - Nav: hardcoded <li> elements — add Calendar after Gallery in both nav blocks.
 */

/* ─── Self-hosted typefaces ───────────────────────────────────────────────── */

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/cormorant-garamond-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/cormorant-garamond-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/cormorant-garamond-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/cormorant-garamond-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ─── Design tokens v2 ────────────────────────────────────────────────────────
 *  --imam-* tokens are the canonical values (imam-us.org Global Design System v2).
 *  --wl-*   tokens are backward-compat aliases — do NOT add new --wl- tokens.
 * ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Canonical color palette ─────────────────────────────────────────── */
    --imam-void:          #0c1810;   /* near-black, green cast — dark hero/footer */
    --imam-forest:        #0d2e18;   /* deep Islamic green — alt dark sections    */
    --imam-navy:          #0d1f3c;   /* header/nav — matches DarkBlue pattern     */
    --imam-gold:          #c9933e;   /* antique amber — primary accent            */
    --imam-gold-bright:   #e6b86a;   /* illuminated gold — headings on dark       */
    --imam-parchment:     #f8f4ec;   /* manuscript warm white — primary light bg  */
    --imam-cream:         #f0e9d8;   /* alt light section background              */
    --imam-text:          #1c1610;   /* warm near-black body text                 */
    --imam-muted:         #7e7264;   /* warm gray — captions/metadata             */
    --imam-green:         #1e5c34;   /* logo green — links & badges ONLY          */

    /* ── Typography ─────────────────────────────────────────────────────── */
    --imam-font-display:  'Cormorant Garamond', Georgia, serif;
    --imam-font-body:     'Inter', system-ui, -apple-system, sans-serif;

    /* ── Fluid type scale (375px → 1440px) ──────────────────────────────── */
    --imam-text-base: clamp(1rem, 0.9rem + 0.25vw, 1.0625rem);
    --imam-text-h1:   clamp(2.8rem, 2rem + 3vw, 5.5rem);
    --imam-text-h2:   clamp(2rem, 1.5rem + 2vw, 3.5rem);
    --imam-text-h3:   clamp(1.5rem, 1.25rem + 1vw, 1.9rem);

    /* ── Spacing (8px grid) ──────────────────────────────────────────────── */
    --imam-space-xs:   4px;
    --imam-space-sm:   8px;
    --imam-space-md:  16px;
    --imam-space-lg:  32px;
    --imam-space-xl:  48px;
    --imam-space-2xl: 96px;

    /* ── Border radius ───────────────────────────────────────────────────── */
    --imam-radius-sm:   4px;    /* components                       */
    --imam-radius-md:   8px;    /* cards                            */
    --imam-radius-pill: 999px;  /* badges only — no pill elsewhere  */

    /* ── Backward-compat aliases (do NOT add new --wl-* tokens) ─────────── */
    --wl-navy:        var(--imam-navy);
    --wl-gold:        var(--imam-gold);
    --wl-gold-light:  var(--imam-gold-bright);
    --wl-cream:       var(--imam-parchment);
    --wl-charcoal:    var(--imam-text);
    --wl-muted:       var(--imam-muted);
    --wl-font-display: var(--imam-font-display);
    --wl-font-body:   var(--imam-font-body);
    --wl-space-xs:    var(--imam-space-xs);
    --wl-space-sm:    var(--imam-space-sm);
    --wl-space-md:    var(--imam-space-md);
    --wl-space-lg:    var(--imam-space-lg);
    --wl-space-xl:    var(--imam-space-xl);
    --wl-space-2xl:   var(--imam-space-2xl);
    --wl-radius-sm:   var(--imam-radius-sm);
    --wl-radius-md:   var(--imam-radius-md);
    --wl-radius-lg:   var(--imam-radius-md);
}

/* ─── Global font overrides (replaces Georgia body + Sintony headings) ─────── */

body {
    font-family: var(--imam-font-body) !important;
    font-size: var(--imam-text-base);
    color: var(--imam-text);
    line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
.wl-display {
    font-family: var(--imam-font-display) !important;
}

/* ─── Geometric diamond divider ───────────────────────────────────────────── */

.wl-divider-geo {
    position: relative;
    text-align: center;
    margin: var(--wl-space-lg) 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--wl-gold) 30%,
        var(--wl-gold) 70%,
        transparent
    );
}
.wl-divider-geo::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--wl-gold);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -5px 0 0 -5px;
}

/* ─── Section title ───────────────────────────────────────────────────────── */

.wl-section-title {
    font-family: var(--imam-font-display) !important;
    font-size: var(--imam-text-h2);
    font-weight: 600;
    color: var(--imam-navy);
    text-align: center;
    position: relative;
    padding-bottom: .75rem;
    margin-bottom: var(--imam-space-lg);
}
.wl-section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 2px;
    background: var(--imam-gold);
    margin: .5rem auto 0;
}
.wl-section-title--left          { text-align: left; }
.wl-section-title--left::after   { margin-left: 0; }
/* Section titles on dark backgrounds */
.wl-section-title--dark {
    color: var(--imam-gold-bright);
    font-style: italic;
}

/* ─── Centre badge (programs + events) ───────────────────────────────────── */

.wl-centre-badge {
    display: inline-block;
    background: var(--imam-green);
    color: var(--imam-parchment);
    padding: .2rem .8rem;
    border-radius: var(--imam-radius-pill);
    font-family: var(--imam-font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

/* ─── Empty state ─────────────────────────────────────────────────────────── */

.wl-empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--imam-muted);
}
.wl-empty-state i   { font-size: 3rem; opacity: .4; }
.wl-empty-state p   { margin-top: 1rem; font-size: 1.1rem; }

/* ─── Sticky site header ──────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
    background: rgba(13, 31, 60, 0.97) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

/* ─── Page fade-in (html starts invisible; imam-animations.js fades it in) ─── */

html {
    opacity: 0;
    transition: opacity 400ms ease-out;
}

/* ─── Scroll-reveal classes (targets for imam-animations.js) ─────────────── */

/*
 * Add class="imam-reveal" to any element you want to fade-up on viewport entry.
 * Add class="imam-stagger" to a grid/list parent — JS sets --i on each child.
 */
.imam-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity  700ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.imam-reveal.imam-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger: each child's delay is calc(--i * 80ms); JS sets --i per child */
.imam-stagger > * {
    transition-delay: calc(var(--i, 0) * 80ms);
}

/* Stats counter — hide raw number until JS kicks in */
.imam-stat-number[data-target] {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ─── Pattern overlay system ─────────────────────────────────────────────────
 * tile-1.jpg (Islamic geometric star) overlaid at low opacity on dark sections.
 * Rule: this pattern must appear above the fold on every page.
 *
 * .imam-hero          — void dark bg, tile via existing .cover at 8% opacity
 * .imam-section--dark — void dark bg, tile via ::before at 7%
 * .imam-section--forest — forest green bg, tile via ::before at 6%
 * .imam-stats-bar     — navy bg, tile via ::before at 4%
 * .imam-section--light / --cream — parchment/cream light sections, no overlay
 * ─────────────────────────────────────────────────────────────────────────── */

/* Shared positioning context for ::before overlays */
.imam-section--dark,
.imam-section--forest,
.imam-stats-bar {
    position: relative;
    overflow: hidden;
}

/* Shared tile ::before rule */
.imam-section--dark::before,
.imam-section--forest::before,
.imam-stats-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/tile-1.jpg');
    background-size: 400px auto;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
}

/* Lift direct children above the overlay */
.imam-section--dark > .container,
.imam-section--dark > .container-extended,
.imam-section--forest > .container,
.imam-section--forest > .container-extended,
.imam-stats-bar > .container {
    position: relative;
    z-index: 1;
}

/* ── Void dark — generic dark section ───────────────────────────────────── */
.imam-section--dark {
    background-color: var(--imam-void);
    color: var(--imam-parchment);
    padding: clamp(4rem, 3rem + 3vw, 7rem) 0;
}
.imam-section--dark::before { opacity: 0.07; }

/* ── Forest green — CTA strip ───────────────────────────────────────────── */
.imam-section--forest {
    background-color: var(--imam-forest);
    color: var(--imam-parchment);
    padding: clamp(4rem, 3rem + 3vw, 7rem) 0;
}
.imam-section--forest::before { opacity: 0.06; }

/* ── Stats bar — navy with subtle tile ──────────────────────────────────── */
.imam-stats-bar {
    background-color: var(--imam-navy) !important;
    padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0;
}
.imam-stats-bar::before { opacity: 0.04; }

/* Stat number + label tokens (applied in HTML as .imam-stat-val / .imam-stat-lbl) */
.imam-stat-val {
    font-family: var(--imam-font-display) !important;
    font-size: clamp(2.4rem, 2rem + 1vw, 3rem);
    font-weight: 700;
    color: var(--imam-gold-bright) !important;
    line-height: 1;
}
.imam-stat-lbl {
    font-family: var(--imam-font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65) !important;
    margin-top: .35rem;
}

/* ── Hero section — tile via existing .cover, not ::before ──────────────── */
/*
 * The hero already contains .section__background > .background-image > .cover
 * with tile-1.jpg. We just darken the section and drop .cover to 8% opacity
 * so the tile reads as "light through mashrabiya" on the void background.
 */
.imam-hero {
    background-color: var(--imam-void);
}
/* Reduce tile to subtle overlay */
.imam-hero .cover {
    opacity: 0.08;
}
/* Lock text/content above the background layer */
.imam-hero .container-extended,
.imam-hero .container {
    position: relative;
    z-index: 1;
}
/* Hero headline: illuminated gold on dark */
.imam-hero h1 {
    color: var(--imam-gold-bright) !important;
    font-size: var(--imam-text-h1);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
/* Hero sub-body */
.imam-hero .hero-body {
    color: rgba(248, 244, 236, 0.85) !important;
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1rem);
}

/* ── Light sections ─────────────────────────────────────────────────────── */
.imam-section--light {
    background-color: var(--imam-parchment);
    color: var(--imam-text);
    padding: clamp(4rem, 3rem + 3vw, 7rem) 0;
}
.imam-section--cream {
    background-color: var(--imam-cream);
    color: var(--imam-text);
    padding: clamp(4rem, 3rem + 3vw, 7rem) 0;
}