/* ================================================================
   urban-children.css
   Colour & theme overrides for Underprivileged Urban Children page.
   Builds on top of styles.css + street-children.css.
   Theme: Rose coral · warm red · soft blush
================================================================ */

:root {
    --upc-rose-deep: #7a1e30;
    --upc-rose-mid: #b02848;
    --upc-rose-warm: #d44060;
    --upc-rose-light: #f07090;
    --upc-rose-pale: #fde8ed;
    --upc-blush: #fff0f3;
}

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

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

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

/* ── Page header background: soft blush ── */
.upc-page-header__bg {
    background:
        radial-gradient(ellipse 80% 100% at 0% 50%, rgba(176, 40, 72, .12) 0%, transparent 65%),
        linear-gradient(160deg, #fff6f8 0%, #fde8ed 40%, #fff4f0 100%) !important;
}

/* ── Program badge ── */
.upc-badge {
    background: var(--upc-rose-pale) !important;
    border-color: rgba(176, 40, 72, .22) !important;
    color: var(--upc-rose-mid) !important;
}

.upc-badge i {
    color: var(--upc-rose-mid);
}

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

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

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

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

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

.eyebrow--light {
    color: var(--upc-rose-light);
}

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

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

/* ── Risk tags ── */
.upc-tag {
    background: rgba(176, 40, 72, .07) !important;
    border-color: rgba(176, 40, 72, .2) !important;
    color: var(--upc-rose-mid) !important;
}

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

/* ── Image placeholders ── */
.upc-placeholder--1 {
    background: linear-gradient(145deg, #2e0a12 0%, #7a1e30 40%, #b02848 100%) !important;
}

.upc-placeholder--gallery1 {
    background: linear-gradient(145deg, #7a1e30 0%, #b02848 50%, #2e0a12 100%) !important;
}

.upc-placeholder--gallery2 {
    background: linear-gradient(145deg, #4a1020 0%, #7a2038 50%, #b03050 100%) !important;
}

.upc-ph-icon {
    background: rgba(240, 112, 144, .2) !important;
    color: var(--upc-rose-light) !important;
    border-color: rgba(240, 112, 144, .3) !important;
}

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

.btn--upc:hover {
    background: var(--upc-rose-deep);
    border-color: var(--upc-rose-deep);
    box-shadow: 0 6px 28px rgba(176, 40, 72, .5);
    transform: translateY(-2px);
}

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

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

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

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

/* ── Awareness card highlight (5th) ── */
.upc-card--awareness {
    background: linear-gradient(135deg, var(--upc-rose-pale) 0%, var(--white) 100%) !important;
    border-color: rgba(176, 40, 72, .22) !important;
}

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

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

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

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

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

/* ── Challenges strip background ── */
.upc-challenges__bg {
    background: linear-gradient(160deg, #1a0508 0%, #3a1018 45%, #100205 100%) !important;
}

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

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

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

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

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

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