/* ================================================================
   child-health.css
   Colour & theme overrides for Children Under Poor Health page.
   Builds on top of styles.css + street-children.css.
   Theme: Medical teal · cool blue · clean white
================================================================ */

:root {
    --chc-teal-deep: #0a4a52;
    --chc-teal-mid: #0e7490;
    --chc-teal-light: #22b8d4;
    --chc-teal-pale: #e0f5f9;
    --chc-blue: #1e5fa8;
    --chc-blue-pale: #dbeafe;
}

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

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

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

/* ── Page header background: cool pale teal ── */
.chc-page-header__bg {
    background:
        radial-gradient(ellipse 80% 100% at 0% 50%, rgba(14, 116, 144, .14) 0%, transparent 65%),
        linear-gradient(160deg, #f0fbfd 0%, #e0f5f9 40%, #f4faff 100%) !important;
}

/* ── Program badge ── */
.chc-badge {
    background: var(--chc-teal-pale) !important;
    border-color: rgba(14, 116, 144, .25) !important;
    color: var(--chc-teal-mid) !important;
}

.chc-badge i {
    color: var(--chc-teal-mid);
}

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

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

/* ── Panel heading & cite ── */
.chc-page-header .sc-panel__heading {
    color: var(--chc-teal-mid);
}

.chc-page-header .sc-panel__verse cite {
    color: var(--chc-teal-mid);
}

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

.eyebrow--light {
    color: var(--chc-teal-light);
}

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

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

/* ── Risk tags ── */
.chc-tag {
    background: rgba(14, 116, 144, .08) !important;
    border-color: rgba(14, 116, 144, .2) !important;
    color: var(--chc-teal-mid) !important;
}

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

/* ── Image placeholders: teal ── */
.chc-placeholder--1 {
    background: linear-gradient(145deg, #042830 0%, #0a4a52 40%, #0e7490 100%) !important;
}

.chc-placeholder--gallery1 {
    background: linear-gradient(145deg, #0a4a52 0%, #0e7490 50%, #042830 100%) !important;
}

.chc-placeholder--gallery2 {
    background: linear-gradient(145deg, #042030 0%, #0a3a58 50%, #0e5a80 100%) !important;
}

.chc-ph-icon {
    background: rgba(34, 184, 212, .2) !important;
    color: var(--chc-teal-light) !important;
    border-color: rgba(34, 184, 212, .3) !important;
}

/* ── Primary CTA button: teal ── */
.btn--chc {
    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(--chc-teal-mid);
    background: var(--chc-teal-mid);
    color: var(--white);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(14, 116, 144, .35);
    transition: all var(--t);
}

.btn--chc:hover {
    background: var(--chc-teal-deep);
    border-color: var(--chc-teal-deep);
    box-shadow: 0 6px 28px rgba(14, 116, 144, .5);
    transform: translateY(-2px);
}

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

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

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

/* Accent top bar */
.sc-obj-card::before {
    background: linear-gradient(90deg, var(--chc-teal-mid), var(--chc-teal-light)) !important;
}

/* ── Collaboration card highlight (4th) ── */
.chc-card--collab {
    background: linear-gradient(135deg, var(--chc-teal-pale) 0%, var(--white) 100%) !important;
    border-color: rgba(14, 116, 144, .25) !important;
}

/* ── 4-card grid: 2×2 centred ── */
.chc-obj-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 860px;
    margin: 0 auto;
}

.chc-obj-grid .sc-obj-card:nth-child(7) {
    grid-column: auto !important;
}

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

/* ── Widget label ── */
.sc-cta__widget-label {
    color: var(--chc-teal-mid) !important;
}

/* ── Challenges strip ── */
.chc-challenges__bg {
    background: linear-gradient(160deg, #041c24 0%, #0a3844 45%, #020f14 100%) !important;
}

/* ── Scripture card ── */
.chc-scripture {
    background: linear-gradient(135deg, var(--chc-teal-deep) 0%, #0a3858 100%) !important;
}

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

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

/* Responsive */
@media (max-width: 640px) {
    .chc-obj-grid {
        grid-template-columns: 1fr !important;
    }
}