/* ================================================================
   moral-development.css
   Colour & theme overrides for Child Moral & Character Development page.
   Builds on top of styles.css + street-children.css.
   Theme: Deep indigo · sacred gold · warm ivory
================================================================ */

:root {
    --mdc-indigo-deep: #1e1060;
    --mdc-indigo-mid: #3a24a0;
    --mdc-indigo-warm: #5840c8;
    --mdc-indigo-light: #8b76e8;
    --mdc-indigo-pale: #ece9ff;
    --mdc-gold: #d4a820;
    --mdc-gold-light: #f0cc60;
    --mdc-gold-pale: #fdf8e0;
}

/* ── Nav scrolled-state overrides ── */
.site-header.scrolled {
    background: rgba(255, 255, 255, .98) !important;
}

.site-header.scrolled .nav__logo-text strong {
    color: var(--mdc-indigo-deep);
}

.site-header.scrolled .nav__link:hover {
    color: var(--mdc-indigo-deep);
}

/* ── Page header background ── */
.mdc-page-header__bg {
    background:
        radial-gradient(ellipse 80% 100% at 0% 50%, rgba(58, 36, 160, .13) 0%, transparent 65%),
        linear-gradient(160deg, #f5f4ff 0%, #ece9ff 40%, #fdf8e0 100%) !important;
}

/* ── Program badge ── */
.mdc-badge {
    background: var(--mdc-indigo-pale) !important;
    border-color: rgba(58, 36, 160, .22) !important;
    color: var(--mdc-indigo-mid) !important;
}

.mdc-badge i {
    color: var(--mdc-indigo-mid);
}

/* ── Title subtitle ── */
.mdc-page-header .sc-page-header__title span {
    color: var(--mdc-indigo-mid) !important;
}

/* ── Glance panel icons ── */
.mdc-icon {
    background: var(--mdc-indigo-pale) !important;
    color: var(--mdc-indigo-mid) !important;
}

/* ── Panel heading & cite ── */
.mdc-page-header .sc-panel__heading {
    color: var(--mdc-gold) !important;
}

.mdc-page-header .sc-panel__verse {
    color: var(--mdc-indigo-mid);
}

.mdc-page-header .sc-panel__verse cite {
    color: var(--mdc-gold) !important;
}

/* ── Eyebrow ── */
.eyebrow {
    color: var(--mdc-indigo-mid);
}

.eyebrow--light {
    color: var(--mdc-gold-light);
}

/* ── Outline button ── */
.mdc-page-header .btn--outline,
.sc-cta .btn--outline {
    color: var(--mdc-indigo-mid);
    border-color: var(--mdc-indigo-mid);
}

.mdc-page-header .btn--outline:hover,
.sc-cta .btn--outline:hover {
    background: var(--mdc-indigo-mid);
    color: var(--white);
}

/* ── Risk tags ── */
.mdc-tag {
    background: rgba(58, 36, 160, .07) !important;
    border-color: rgba(58, 36, 160, .2) !important;
    color: var(--mdc-indigo-mid) !important;
}

.mdc-tag i {
    color: #b45309 !important;
}

/* ── Image placeholders ── */
.mdc-placeholder--1 {
    background: linear-gradient(145deg, #0a0620 0%, #1e1060 40%, #3a24a0 100%) !important;
}

.mdc-placeholder--gallery1 {
    background: linear-gradient(145deg, #1e1060 0%, #3a24a0 50%, #5840c8 100%) !important;
}

.mdc-placeholder--gallery2 {
    background: linear-gradient(145deg, #140c40 0%, #2a1880 50%, #1e1060 100%) !important;
}

.mdc-ph-icon {
    background: rgba(139, 118, 232, .2) !important;
    color: var(--mdc-indigo-light) !important;
    border-color: rgba(139, 118, 232, .3) !important;
}

/* ── Primary CTA button ── */
.btn--mdc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.78rem 1.8rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: var(--radius-pill);
    border: 2px solid var(--mdc-indigo-mid);
    background: var(--mdc-indigo-mid);
    color: var(--white);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(58, 36, 160, .4);
    transition: all var(--t);
}

.btn--mdc:hover {
    background: var(--mdc-indigo-deep);
    border-color: var(--mdc-indigo-deep);
    box-shadow: 0 6px 28px rgba(58, 36, 160, .55);
    transform: translateY(-2px);
}

.btn--mdc.btn--large {
    padding: 1rem 2.4rem;
    font-size: 0.98rem;
}

/* ── Objective card icon wraps ── */
.mdc-icon-wrap {
    background: var(--mdc-indigo-pale) !important;
    color: var(--mdc-indigo-mid) !important;
}

.sc-obj-card:hover .mdc-icon-wrap {
    background: var(--mdc-indigo-mid) !important;
    color: var(--white) !important;
}

/* Accent top bar: indigo → gold shimmer */
.sc-obj-card::before {
    background: linear-gradient(90deg, var(--mdc-indigo-mid), var(--mdc-gold)) !important;
}

/* ── Gospel card highlight (5th — most important) ── */
.mdc-card--gospel {
    background: linear-gradient(135deg, var(--mdc-indigo-pale) 0%, var(--mdc-gold-pale) 100%) !important;
    border-color: rgba(58, 36, 160, .22) !important;
}

.mdc-card--gospel .sc-obj-card__num {
    color: rgba(212, 168, 32, .15) !important;
}

/* ── 5-card grid: 3 top + 2 centred bottom ── */
.mdc-obj-grid {
    grid-template-columns: repeat(3, 1fr);
}

.mdc-obj-grid .sc-obj-card:nth-child(4) {
    grid-column: 1 / 2;
}

.mdc-obj-grid .sc-obj-card:nth-child(5) {
    grid-column: 2 / 3;
}

/* ── CTA list icons ── */
.sc-cta__list i {
    color: var(--mdc-indigo-mid) !important;
}

/* ── Widget label ── */
.sc-cta__widget-label {
    color: var(--mdc-gold) !important;
}

/* ── Challenges strip: deep sacred dark ── */
.mdc-challenges__bg {
    background: linear-gradient(160deg, #06031a 0%, #1e1060 45%, #030112 100%) !important;
}

/* ── Scripture card: indigo + gold accent ── */
.mdc-scripture {
    background: linear-gradient(135deg, var(--mdc-indigo-deep) 0%, #2d1880 100%) !important;
}

.mdc-scripture cite {
    color: var(--mdc-gold-light) !important;
}

/* ── verse band gold accent ── */
.impact__verse-band blockquote cite {
    color: var(--mdc-gold-light);
}

/* ── Related card hover ── */
.sc-related-card:hover {
    border-color: var(--mdc-indigo-mid) !important;
}

.sc-related-card:hover .sc-related-card__icon {
    background: var(--mdc-indigo-mid) !important;
    color: var(--white) !important;
}

/* Responsive */
@media (max-width: 900px) {
    .mdc-obj-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .mdc-obj-grid .sc-obj-card:nth-child(4),
    .mdc-obj-grid .sc-obj-card:nth-child(5) {
        grid-column: auto !important;
    }
}

@media (max-width: 600px) {
    .mdc-obj-grid {
        grid-template-columns: 1fr !important;
    }
}