/* ================================================================
   orphan-care.css
   Colour & theme overrides for Family-Based Orphan Care page.
   Builds on top of styles.css + street-children.css.
   Theme: Warm amber · soft gold · ivory
================================================================ */

/* ── Amber/gold palette tokens ── */
:root {
    --opc-amber-deep: #7a4a00;
    --opc-amber-mid: #b06a00;
    --opc-amber-warm: #d4850a;
    --opc-amber-light: #f0a830;
    --opc-amber-pale: #fdf3d7;
    --opc-gold: #e8c84a;
    --opc-ivory: #fdfaf4;
}

/* ── Nav scrolled-state overrides ── */
.site-header.scrolled .nav__logo-text strong {
    color: var(--opc-amber-deep);
}

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

/* ── Page header background: warm ivory ── */
.opc-page-header__bg {
    background:
        radial-gradient(ellipse 80% 100% at 0% 50%, rgba(122, 74, 0, .12) 0%, transparent 65%),
        linear-gradient(160deg, #fdfaf4 0%, #fdf3d7 40%, #faf5ec 100%) !important;
}

/* ── Program badge ── */
.opc-badge {
    background: var(--opc-amber-pale) !important;
    border-color: rgba(176, 106, 0, .25) !important;
    color: var(--opc-amber-mid) !important;
}

.opc-badge i {
    color: var(--opc-amber-mid);
}

/* ── Page title italic subtitle ── */
.opc-page-header .sc-page-header__title span {
    color: var(--opc-amber-mid) !important;
}

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

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

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

/* ── Eyebrow labels site-wide on this page ── */
.eyebrow {
    color: var(--opc-amber-mid);
}

.eyebrow--light {
    color: var(--opc-amber-light);
}

/* ── btn--outline border colour ── */
.opc-page-header .btn--outline,
.sc-cta .btn--outline {
    color: var(--opc-amber-mid);
    border-color: var(--opc-amber-mid);
}

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

/* ── Risk/context tags ── */
.opc-tag {
    background: rgba(176, 106, 0, .08) !important;
    border-color: rgba(176, 106, 0, .2) !important;
    color: var(--opc-amber-mid) !important;
}

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

/* ── Image placeholders: warm amber tones ── */
.opc-placeholder--1 {
    background: linear-gradient(145deg, #3d2000 0%, #7a4a00 40%, #b06a00 100%) !important;
}

.opc-placeholder--gallery1 {
    background: linear-gradient(145deg, #5a3400 0%, #9a5c00 50%, #3d2000 100%) !important;
}

.opc-placeholder--gallery2 {
    background: linear-gradient(145deg, #4a2a00 0%, #7a4a00 50%, #b06a00 100%) !important;
}

.opc-ph-icon {
    background: rgba(240, 168, 48, .2) !important;
    color: var(--opc-amber-light) !important;
    border-color: rgba(240, 168, 48, .3) !important;
}

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

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

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

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

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

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

/* ── Training card highlight (5th) ── */
.opc-card--training {
    background: linear-gradient(135deg, var(--opc-amber-pale) 0%, var(--white) 100%) !important;
    border-color: rgba(176, 106, 0, .25) !important;
}

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

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

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

/* Home support bullet list */
.opc-needs-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: var(--sp-md);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--border);
}

.opc-needs-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-mid);
}

.opc-needs-list i {
    color: var(--opc-amber-mid);
    font-size: 1rem;
}

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

/* ── Why strip background: deep warm brown ── */
.opc-why__bg {
    background: linear-gradient(160deg, #1e0e00 0%, #3d2000 45%, #150a00 100%) !important;
}

/* ── Scripture card: warm amber tones ── */
.opc-scripture {
    background: linear-gradient(135deg, var(--opc-amber-deep) 0%, #5a3400 100%) !important;
}

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

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

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

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

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

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