/**
 * EMC Membership page.
 *
 * The dark green and gold palette is scoped to .emc-membership so the rest of
 * the site keeps its existing branding.
 */

.emc-membership {
    --mem-green-dark: #1a3c2a;
    --mem-green-mid: #2d7a6e;
    --mem-green-light: #5a9e8e;
    --mem-gold: #c9a227;
    --mem-gold-soft: #e5c766;
    --mem-cream: #f8f6f0;
    --mem-ink: #22322a;
    --mem-muted: #5c6b63;
    --mem-rust: #a8442a;
    --mem-line: #e2ded1;

    background: var(--mem-cream);
    color: var(--mem-ink);
    font-size: 1rem;
    line-height: 1.75;
}

.emc-membership *,
.emc-membership *::before,
.emc-membership *::after {
    box-sizing: border-box;
}

.mem-container {
    width: min(1140px, 100% - 3rem);
    margin-inline: auto;
}

.mem-narrow {
    max-width: 820px;
}

.mem-section {
    padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.mem-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Headings ─────────────────────────────────────────────────────────── */

.mem-heading {
    margin: 0 0 1.25rem;
    color: var(--mem-gold);
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.15;
    text-transform: uppercase;
}

.mem-heading-sm {
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.mem-subheading {
    margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
    color: var(--mem-green-dark);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 800;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

.mem-section-head {
    max-width: 760px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.mem-section-head p {
    margin: 0;
    color: var(--mem-muted);
}

.emc-membership p {
    margin: 0 0 1.1rem;
}

/* ── 1. Qur'anic banner ───────────────────────────────────────────────── */

/*
 * This is the first section on the page and the header stack (prayer bar +
 * main header) is fixed, so a plain padding-top leaves the Arabic line sitting
 * underneath it. --header-stack-h is measured and set by script.js; the
 * fallback matches what the theme uses elsewhere for the same reason.
 */
.mem-ayah {
    position: relative;
    overflow: hidden;
    padding: calc(var(--header-stack-h, 170px) + clamp(2rem, 4vw, 3.5rem)) 0 clamp(3.5rem, 8vw, 6rem);
    background: var(--mem-green-dark);
    color: #fff;
    text-align: center;
}

/* Repeating geometric lattice, drawn with gradients rather than an image. */
.mem-ayah-pattern {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        repeating-linear-gradient(45deg, var(--mem-gold) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, var(--mem-gold) 0 1px, transparent 1px 22px);
}

.mem-ayah-inner {
    position: relative;
}

/*
 * One centred column for all three lines. Flex rather than relying on each
 * paragraph's own auto margins, which the broader ".emc-membership p" rule
 * (specificity 0,1,1) was overriding — that left the translation flush left
 * while the reference stayed centred.
 */
.mem-ayah-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}

.mem-ayah-stack > p {
    width: 100%;
}

/**
 * The body font (Inter) carries no Arabic glyphs, so the ayah must name its own
 * stack or the browser falls back unpredictably and the verse renders faint,
 * mis-shaped, or not at all. Ordered: webfonts if ever enqueued, then the
 * Arabic faces shipped by macOS/iOS, Windows and Android/Linux, then serif.
 */
.mem-ayah-arabic {
    margin: 0 0 1.75rem;
    color: var(--mem-gold-soft);
    font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic',
                 'Geeza Pro', 'Al Bayan', 'Baghdad',
                 'Traditional Arabic', 'Arabic Typesetting', 'Segoe UI',
                 serif;
    font-size: clamp(1.65rem, 4vw, 2.6rem);
    font-weight: 400;
    line-height: 1.95;
    /* Arabic is already bold-looking; synthetic bolding smears the joins. */
    -webkit-font-smoothing: antialiased;
}

.mem-ayah-english {
    max-width: 780px;
    /* Width is capped here; the flex parent does the centring. */
    margin: 0 0 1.25rem;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    font-style: italic;
}

.mem-ayah-ref {
    margin: 0;
    color: var(--mem-gold);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ── 2. Introduction ──────────────────────────────────────────────────── */

/*
 * The intro and the levels grid are one continuous thought, but each carried a
 * full .mem-section pad, stacking ~176px of blank cream between the intro copy
 * and the "Membership Levels" heading. Halve it at the junction only.
 */
.mem-intro {
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.mem-intro + .mem-levels {
    padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.mem-intro .mem-note {
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--mem-gold);
    background: #fff;
    color: var(--mem-muted);
    font-style: italic;
}

/* ── 3. Membership levels ─────────────────────────────────────────────── */

.mem-domes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    align-items: stretch;
}

.mem-dome-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.6rem 2.2rem;
    border: 1px solid var(--mem-line);
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

/*
 * One tier is given visual weight so the trio has an anchor instead of reading
 * as three equal options. Chosen by position in the template, not by name.
 */
.mem-dome-card.is-featured {
    border: 2px solid var(--mem-gold);
    box-shadow: 0 14px 34px rgba(26, 60, 42, .13);
}

.mem-dome-flag {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0;
    padding: .34rem 1rem;
    border-radius: 0 0 8px 8px;
    background: var(--mem-gold);
    color: var(--mem-green-dark);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.mem-dome-card.is-featured .mem-dome-art svg {
    margin-top: .75rem;
}

.mem-dome-art svg {
    display: block;
    width: 130px;
    height: auto;
    margin: 0 auto 1.25rem;
}

.mem-dome-name {
    margin: 0 0 .5rem;
    color: var(--mem-green-dark);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mem-dome-price {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0 0 1.25rem;
}

.mem-dome-price strong {
    color: var(--mem-gold);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
}

.mem-dome-price span {
    color: var(--mem-muted);
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mem-dome-desc {
    flex: 1;
    margin: 0 0 1.5rem;
    color: var(--mem-muted);
    font-size: .95rem;
    text-align: left;
}

/* The join button is the page's primary action, so give it real presence. */
.mem-dome-cta {
    padding: .95rem 1.4rem;
    font-size: 1.02rem;
}

.mem-dome-cta-note {
    margin: .7rem 0 0;
    color: var(--mem-muted);
    font-size: .78rem;
    letter-spacing: .02em;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.mem-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.4rem;
    border: 2px solid var(--mem-green-dark);
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.mem-btn-outline {
    width: 100%;
    background: transparent;
    color: var(--mem-green-dark);
}

.mem-btn-outline:hover,
.mem-btn-outline:focus-visible {
    background: var(--mem-green-dark);
    color: #fff;
}

.mem-btn-primary {
    width: 100%;
    border-color: var(--mem-gold);
    background: var(--mem-gold);
    color: var(--mem-green-dark);
    text-transform: uppercase;
}

.mem-btn-primary:hover:not([disabled]),
.mem-btn-primary:focus-visible {
    border-color: var(--mem-green-dark);
    background: var(--mem-green-dark);
    color: #fff;
}

.mem-btn[disabled] {
    opacity: .6;
    cursor: progress;
}

/* ── Benefits matrix ──────────────────────────────────────────────────── */

.mem-table-scroll {
    overflow-x: auto;
    border-radius: 12px;
    background: #fff;
}

.mem-benefits-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: .95rem;
}

.mem-benefits-table thead th {
    padding: 1rem .9rem;
    background: var(--mem-green-dark);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

.mem-benefits-table thead th:first-child {
    text-align: left;
}

.mem-benefits-table tbody th {
    padding: .85rem .9rem;
    border-bottom: 1px solid var(--mem-line);
    color: var(--mem-ink);
    font-weight: 500;
    text-align: left;
}

.mem-benefits-table tbody td {
    padding: .85rem .9rem;
    border-bottom: 1px solid var(--mem-line);
    font-size: 1.1rem;
    text-align: center;
}

.mem-benefits-table tbody tr:nth-child(even) th,
.mem-benefits-table tbody tr:nth-child(even) td {
    background: #fbfaf6;
}

.mem-benefits-table .is-included {
    color: var(--mem-gold);
    font-weight: 700;
}

.mem-benefits-table .is-excluded {
    color: #b9c2bc;
}

/*
 * Below 700px the four-column matrix stops being readable, so each row becomes
 * its own card: the benefit as a heading, then one labelled line per level.
 * The labels come from each cell's data-label attribute, so the markup stays a
 * single accessible table on every screen size.
 */
@media (max-width: 700px) {
    .mem-table-scroll {
        overflow-x: visible;
        background: transparent;
    }

    .mem-benefits-table {
        min-width: 0;
    }

    .mem-benefits-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .mem-benefits-table,
    .mem-benefits-table tbody,
    .mem-benefits-table tbody tr,
    .mem-benefits-table tbody th,
    .mem-benefits-table tbody td {
        display: block;
    }

    .mem-benefits-table tbody tr {
        margin-bottom: 1rem;
        border: 1px solid var(--mem-line);
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }

    .mem-benefits-table tbody tr:nth-child(even) th,
    .mem-benefits-table tbody tr:nth-child(even) td {
        background: transparent;
    }

    .mem-benefits-table tbody th {
        padding: .9rem 1rem;
        border-bottom: 1px solid var(--mem-line);
        background: var(--mem-cream);
        color: var(--mem-green-dark);
        font-weight: 700;
    }

    .mem-benefits-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .7rem 1rem;
        border-bottom: 1px solid var(--mem-line);
        font-size: 1rem;
        text-align: right;
    }

    .mem-benefits-table tbody td:last-child {
        border-bottom: 0;
    }

    .mem-benefits-table tbody td::before {
        content: attr(data-label);
        color: var(--mem-muted);
        font-size: .82rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-align: left;
        text-transform: uppercase;
    }
}

/* ── 4. What your mosque delivers ─────────────────────────────────────── */

.mem-delivers {
    background: #fff;
}

.mem-delivers-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .4rem 2rem;
    max-width: 940px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.mem-delivers-list li {
    position: relative;
    padding: .55rem 0 .55rem 1.8rem;
}

.mem-delivers-list li::before {
    position: absolute;
    top: 1.15rem;
    left: 0;
    width: 9px;
    height: 9px;
    background: var(--mem-gold);
    content: "";
    transform: rotate(45deg);
}

/* ── 6. Allocation chart ──────────────────────────────────────────────── */

.mem-chart-section {
    background: #fff;
}

.mem-chart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    max-width: 940px;
    margin: 0 auto;
}

.mem-chart-legend {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mem-chart-legend li {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: .9rem;
    align-items: center;
    padding: .7rem 0;
    border-bottom: 1px solid var(--mem-line);
}

.mem-chart-legend li:last-child {
    border-bottom: 0;
}

.mem-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.mem-legend-label {
    color: var(--mem-ink);
    font-size: .95rem;
}

.mem-legend-value {
    color: var(--mem-green-dark);
    font-weight: 800;
}

.mem-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ── 7. Progress bar ──────────────────────────────────────────────────── */

.mem-progress-section {
    text-align: center;
}

.mem-progress {
    margin-top: 2rem;
}

.mem-progress-track {
    position: relative;
    height: 20px;
    border-radius: 999px;
    /* Paler than the fill so an empty track still reads as a track, not a bug. */
    background: #dfe6e1;
    box-shadow: inset 0 1px 3px rgba(26, 60, 42, .18);
}

.mem-progress-fill {
    width: calc(var(--mem-pct, 0) * 1%);
    height: 100%;
    border-radius: 999px;
    background: var(--mem-gold);
    transition: width .6s ease;
}

/*
 * The dome is 40px wide and centred on its own position, so an unclamped 0%
 * or 100% leaves half of it hanging outside the track. Clamping the centre to
 * 20px from either end keeps it flush at both extremes.
 */
.mem-progress-dome {
    position: absolute;
    top: 50%;
    left: clamp(20px, calc(var(--mem-pct, 0) * 1%), calc(100% - 20px));
    width: 40px;
    transform: translate(-50%, -58%);
    transition: left .6s ease;
}

.mem-progress-dome svg {
    display: block;
    width: 100%;
    height: auto;
}

.mem-progress-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: .6rem;
    padding: 0 1px;
}

.mem-progress-ticks span {
    width: 1px;
    height: 8px;
    background: #cfd6d1;
}

.mem-progress-figures {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 1.25rem 0 0;
}

.mem-progress-figures strong {
    color: var(--mem-green-dark);
    font-size: 1.8rem;
    font-weight: 800;
}

.mem-progress-figures span {
    color: var(--mem-muted);
    font-size: .9rem;
}

/* Nothing raised yet: soften the 0% so it reads as a starting line. */
.mem-progress.is-empty .mem-progress-figures strong {
    color: var(--mem-green-mid);
}

@media (prefers-reduced-motion: reduce) {
    .mem-progress-fill,
    .mem-progress-dome {
        transition: none;
    }
}

/* ── 8. Waqf ──────────────────────────────────────────────────────────── */

.mem-waqf {
    background: #fff;
}

.mem-closing {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--mem-gold);
    color: var(--mem-green-dark);
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 600;
}

/* ── 9. Application form ──────────────────────────────────────────────── */

.mem-form-card {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 3rem);
    border-top: 4px solid var(--mem-gold);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(26, 60, 42, .1);
}

/*
 * Compact variant: shown when card payments are off and the form collapses to a
 * single call to action. Without this the full card padding plus the section's
 * own padding leaves a tall empty band between the last section and the footer.
 */
.mem-form-section.is-compact {
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.mem-form-card.is-compact {
    max-width: 640px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    text-align: center;
}

.mem-form-card.is-compact .mem-form-head {
    margin-bottom: 1.5rem;
}

.mem-compact-cta {
    width: auto;
    min-width: 260px;
}

.mem-form-head {
    margin-bottom: 2rem;
    text-align: center;
}

.mem-form-head p {
    margin: 0;
    color: var(--mem-muted);
}

.mem-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0 1.1rem;
}

.mem-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1.1rem;
}

.mem-field-wide {
    grid-column: 1 / -1;
}

.mem-field label,
.mem-payment label {
    color: var(--mem-green-dark);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.mem-field input,
.mem-field select,
.mem-field textarea {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid #d5d9d3;
    border-radius: 8px;
    background: #fdfdfb;
    color: var(--mem-ink);
    font: inherit;
}

.mem-field input:focus,
.mem-field select:focus,
.mem-field textarea:focus {
    border-color: var(--mem-green-mid);
    outline: 2px solid rgba(45, 122, 110, .25);
    outline-offset: 1px;
}

.mem-checkboxes {
    display: grid;
    gap: .75rem;
    margin: .5rem 0 1.75rem;
}

.mem-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: var(--mem-muted);
    font-size: .92rem;
    line-height: 1.55;
}

.mem-checkbox input {
    flex: 0 0 auto;
    margin-top: .35rem;
}

.mem-payment {
    margin-bottom: 1.75rem;
    padding: 1.3rem;
    border: 1px solid var(--mem-line);
    border-radius: 10px;
    background: var(--mem-cream);
}

.mem-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding-bottom: .8rem;
    border-bottom: 1px dashed #cfd6d1;
}

.mem-total span {
    color: var(--mem-muted);
    font-weight: 600;
}

.mem-total strong {
    color: var(--mem-green-dark);
    font-size: 1.35rem;
    font-weight: 800;
}

.mem-payment-note {
    margin: 0;
    color: var(--mem-muted);
    font-size: .88rem;
}

.mem-secure-note {
    margin: 1rem 0 0;
    color: var(--mem-muted);
    font-size: .85rem;
    text-align: center;
}

.mem-form-status {
    margin: 1rem 0 0;
    font-weight: 600;
}

.mem-form-status:empty {
    display: none;
}

.mem-form-status.is-success {
    padding: .95rem 1.1rem;
    border-radius: 8px;
    background: rgba(45, 122, 110, .12);
    color: #1d5f56;
}

.mem-form-status.is-error {
    padding: .95rem 1.1rem;
    border-radius: 8px;
    background: rgba(168, 68, 42, .1);
    color: var(--mem-rust);
}

.mem-form-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mem-line);
    color: var(--mem-muted);
    font-size: .87rem;
}

.mem-form-footer p:last-child {
    margin-bottom: 0;
}

/* WhatsApp green, not the page palette, so the channel is recognisable. */
.mem-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: .7rem 1.25rem;
    border-radius: 8px;
    background: #25d366;
    color: #06301a;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.mem-whatsapp:hover,
.mem-whatsapp:focus-visible {
    background: #1da851;
    color: #fff;
}

.mem-whatsapp-icon {
    flex-shrink: 0;
}

.mem-notice {
    padding: 1.1rem 1.3rem;
    border-radius: 10px;
    background: rgba(201, 162, 39, .14);
    color: #7a6110;
}

.mem-notice a {
    color: var(--mem-green-dark);
    font-weight: 700;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .mem-domes {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-inline: auto;
    }

    .mem-chart-layout {
        grid-template-columns: 1fr;
    }

    .mem-chart {
        order: -1;
        max-width: 300px;
        margin-inline: auto;
    }
}

/* The prayer bar is hidden below 768px, so the header stack is much shorter. */
@media (max-width: 768px) {
    .mem-ayah {
        padding-top: calc(var(--header-stack-h, 80px) + clamp(1.5rem, 4vw, 2.5rem));
    }
}

@media (max-width: 560px) {
    .mem-container {
        width: min(1140px, 100% - 2rem);
    }

    .mem-dome-desc {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .emc-membership * {
        transition: none !important;
    }
}