/* =============================================================================
   SIGNATURE — Pastor Nkone's brand palette.
   Dramatic "Plug In" sunset aesthetic: deep navy + vibrant orange + glow.
   Inspired directly by the Sauti ya Muruma logo + Plug In cover art.
   ============================================================================= */

/* ---- tokens ---- */
:root {
    --c-primary:        #163E4D;
    --c-primary-700:    #0A2530;
    --c-primary-500:    #2A5C72;
    --c-primary-400:    #4A7F94;
    --c-primary-300:    #87A9B8;
    --c-primary-100:    #DCE6EC;

    --c-accent:         #F58220;
    --c-accent-700:     #C9601A;
    --c-accent-800:     #9A4711;
    --c-accent-300:     #FCB369;
    --c-accent-100:     #FFE4CC;
    --c-accent-glow:    rgba(245,130,32,.45);

    --c-surface:        #FFF6EC;   /* warm cream — the whole site lives in sunset ambient */
    --c-surface-2:      #FFFFFF;
    --c-surface-alt:    #FFE6CC;
    --c-surface-warm:   #FFD9A3;

    --c-ink:            #0A2530;
    --c-ink-2:          #1F3D4D;
    --c-muted:          #5B7080;
    --c-line:           #F0D9BD;
    --c-line-soft:      #F8E8D2;

    --c-danger:         #B91C1C;
    --c-success:        #15803D;

    /* The Plug In sunset — central to the brand feel */
    --g-hero:    linear-gradient(135deg, #0A2530 0%, #163E4D 25%, #9A4711 55%, #F58220 85%, #FFD9A3 100%);
    --g-sunset:  linear-gradient(180deg, #FFD9A3 0%, #F58220 35%, #C9601A 65%, #163E4D 100%);
    --g-accent:  linear-gradient(135deg, #FCB369 0%, #F58220 50%, #C9601A 100%);
    --g-flame:   linear-gradient(180deg, #F58220 0%, #C9601A 100%);
    --g-warm:    linear-gradient(180deg, #FFF6EC 0%, #FFE6CC 100%);
    --g-soft:    var(--g-warm);

    --f-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    --sh-1: 0 2px 6px rgba(22,62,77,.08), 0 1px 2px rgba(22,62,77,.04);
    --sh-2: 0 12px 30px -8px rgba(22,62,77,.22), 0 4px 10px -4px rgba(245,130,32,.18);
    --sh-3: 0 28px 65px -12px rgba(22,62,77,.32), 0 12px 28px -6px rgba(245,130,32,.30);
    --sh-glow: 0 16px 44px -6px var(--c-accent-glow);
}

/* ============================================================================
   GLOBAL ATMOSPHERE — warm sunset throughout
   ============================================================================ */

body {
    background:
        radial-gradient(60% 40% at 100% 0%, rgba(245,130,32,.10), transparent 60%),
        radial-gradient(50% 40% at 0% 100%, rgba(22,62,77,.08), transparent 60%),
        var(--c-surface);
}

h1, h2, h3 { color: var(--c-primary); letter-spacing: -.022em; }

/* eyebrow chip — orange */
.eyebrow {
    background: rgba(245,130,32,.18);
    color: var(--c-accent-800);
    border: 1px solid rgba(245,130,32,.30);
    font-weight: 800;
    letter-spacing: .2em;
}

/* ============================================================================
   HEADER — warm frosted glass
   ============================================================================ */
.site-header {
    background: rgba(255,246,236,.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--c-line);
}
.brand { color: var(--c-primary); }
.brand-mark {
    background: var(--c-primary);
    color: var(--c-accent);
    border-radius: 14px;
    border: 1.5px solid var(--c-accent);
    box-shadow: 0 8px 20px -6px rgba(245,130,32,.45);
}
.nav-links a { color: var(--c-ink); font-weight: 600; }
.nav-links a.is-active { color: var(--c-accent-700); }
.nav-links a.is-active::after { background: var(--c-accent); width: 24px; height: 3px; border-radius: 2px; box-shadow: 0 0 8px var(--c-accent-glow); }

/* ============================================================================
   BUTTONS — strong orange CTAs with glow
   ============================================================================ */
.btn { font-weight: 700; }
.btn-primary {
    background: var(--g-accent);
    color: #fff;
    box-shadow: 0 12px 30px -8px var(--c-accent-glow);
}
.btn-primary:hover { color: #fff; box-shadow: 0 18px 44px -8px rgba(245,130,32,.6); }

.btn-accent {
    background: var(--c-primary);
    color: var(--c-accent);
    border: 2px solid var(--c-accent);
    box-shadow: 0 10px 24px -10px rgba(22,62,77,.5);
}
.btn-accent:hover { background: var(--c-primary-700); color: var(--c-accent-300); }

.btn-ghost {
    background: rgba(255,255,255,.6);
    color: var(--c-primary);
    border-color: var(--c-line);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-accent-700); border-color: var(--c-accent-300); box-shadow: var(--sh-2); }

/* ============================================================================
   HERO — uses the actual "Plug In" cover as the background image
   ============================================================================ */
.hero {
    position: relative;
    background:
        /* navy on the left for text legibility, much softer on the right
           so the pastor cutout integrates with the Plug In scene */
        linear-gradient(100deg,
            rgba(10,37,48,.92) 0%,
            rgba(22,62,77,.78) 35%,
            rgba(22,62,77,.45) 55%,
            rgba(154,71,17,.18) 80%,
            rgba(245,130,32,.05) 100%),
        url('/assets/img/brand/plug-in-cover.jpg') center center / cover no-repeat,
        var(--c-primary);
    color: var(--c-surface-2);
    /* visible so the cutout can bleed into the next section */
    overflow: visible;
    isolation: isolate;
    padding: var(--s-9) 0 var(--s-7);
    position: relative;
    z-index: 2;
}
/* Keep the hero's own background contained — only the cutout should bleed out */
.hero > .container { position: relative; z-index: 3; }
@media (min-width: 768px) { .hero { padding: var(--s-10) 0; } }
.hero::before { display: none; }

/* Subtle vignette to deepen the corners (replaces the conic sunburst — the image has its own rays) */
.hero::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(10,37,48,.45) 100%);
    z-index: -1;
    pointer-events: none;
}

.hero .eyebrow {
    background: rgba(245,130,32,.25);
    color: var(--c-accent-300);
    border-color: rgba(245,130,32,.4);
}
.hero h1 {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 700;
    line-height: 1.02;
    color: #fff;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFE4CC 35%, #FCB369 70%, #F58220 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 8px 40px rgba(245,130,32,.4);
    filter: drop-shadow(0 4px 18px rgba(245,130,32,.3));
    letter-spacing: -.03em;
}
.hero .lead { color: #FDE4CB; font-size: 1.25rem; font-weight: 500; }

/* hero portrait — kept as fallback if someone uploads a non-cutout photo */
.hero-portrait {
    background: var(--c-primary);
    box-shadow:
        0 0 0 6px rgba(245,130,32,.18),
        0 30px 80px -12px rgba(245,130,32,.45),
        0 20px 50px -16px rgba(0,0,0,.5);
    transform: rotate(-1.5deg);
    border-radius: var(--r-2xl);
    position: relative;
}
.hero-portrait::before {
    background: linear-gradient(180deg, transparent 40%, rgba(10,37,48,.55) 100%);
    z-index: 2;
}
.hero-portrait::after { display: none; }

/* NEW: hero cutout — pastor "rises from below" into the hero from the next
   section. Top of head sits roughly at the hero's bottom edge; most of the
   body lives in the section below, overlapping it.
   - DESKTOP: side-by-side; cutout aligned to bottom of hero, bleeding ~35% down
   - MOBILE: stacked under the headline; cutout much smaller, pushed down */
.hero-cutout {
    position: relative;
    aspect-ratio: 4 / 5;
    max-width: 480px;
    margin-inline: auto;
    display: flex; align-items: flex-end; justify-content: center;
    isolation: isolate;
    z-index: 3;
    align-self: end;
    margin-top: 40%;
    margin-bottom: -38%;
}

@media (max-width: 899px) {
    .hero-cutout {
        max-width: 320px;
        margin-top: var(--s-6);
        margin-bottom: -32%;
    }
}
/* warm halo glow behind the pastor — radiating from his torso area */
.hero-cutout::before {
    content: '';
    position: absolute;
    left: 50%; top: 38%;
    transform: translate(-50%, -50%);
    width: 88%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(252,179,105,.55) 0%, rgba(245,130,32,.30) 35%, transparent 70%);
    filter: blur(24px);
    z-index: -1;
    animation: cutout-pulse 6s ease-in-out infinite;
}
@keyframes cutout-pulse {
    0%, 100% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}
/* soft contact shadow at the pastor's feet — grounds him in the scene */
.hero-cutout::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 4%;
    transform: translateX(-50%);
    width: 70%; height: 28px;
    background: radial-gradient(ellipse at center, rgba(10,37,48,.45) 0%, transparent 70%);
    filter: blur(8px);
    z-index: -1;
}
.hero-cutout img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center bottom;
    /* slight orange-warm rim light to match the sunset scene */
    filter:
        drop-shadow(-6px 4px 0 rgba(245,130,32,.06))
        drop-shadow(0 18px 28px rgba(10,37,48,.45))
        drop-shadow(0 4px 6px rgba(10,37,48,.3));
}
@media (max-width: 899px) {
    .hero-cutout { max-width: 360px; aspect-ratio: 4 / 5; }
    .hero-cutout::before { width: 80%; }
}

.gold-rule {
    width: 64px; height: 4px;
    background: var(--g-accent);
    border-radius: 999px;
    box-shadow: 0 4px 16px var(--c-accent-glow);
}

/* ============================================================================
   MISSION BANNER — uses the actual Plug In image
   ============================================================================ */
.mission-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-2xl);
    min-height: 320px;
    background:
        linear-gradient(135deg, rgba(10,37,48,.85) 0%, rgba(22,62,77,.4) 50%, rgba(201,96,26,.4) 100%),
        url('/assets/img/brand/plug-in-cover.jpg') center / cover no-repeat;
    color: #fff;
    box-shadow: var(--sh-3);
    margin: var(--s-7) 0;
}
.mission-banner-body {
    padding: var(--s-7) var(--s-5);
    max-width: 56ch;
}
@media (min-width: 768px) { .mission-banner-body { padding: var(--s-8) var(--s-7); } }
.mission-banner h2 {
    color: #fff;
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(180deg, #FFFFFF 0%, #FCB369 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 20px rgba(245,130,32,.3);
}
.mission-banner p { color: rgba(255,255,255,.92); font-size: 1.1rem; }

/* ============================================================================
   SECTIONS — warm cream backgrounds with subtle sunset accents
   ============================================================================ */
.section + .section { position: relative; }

/* Cards stay clean on warm background */
.card {
    border: 1px solid var(--c-line-soft);
    background: var(--c-surface-2);
}
.card:hover { box-shadow: var(--sh-3); }
.card-title { color: var(--c-primary); }

/* Platform tiles */
.platform-card {
    border: 1px solid var(--c-line-soft);
    background: var(--c-surface-2);
}
.platform-card:hover { color: var(--c-accent-700); border-color: var(--c-accent-300); }
.platform-icon {
    background: var(--c-primary);
    color: var(--c-accent);
    border-radius: 14px;
    border: 1.5px solid var(--c-accent);
    box-shadow: 0 6px 16px -6px rgba(22,62,77,.3);
}

/* Chips */
.chip { background: var(--c-surface-2); border: 1.5px solid var(--c-line); }
.chip.is-active { background: var(--g-accent); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); }
.chip:hover:not(.is-active) { border-color: var(--c-accent-300); color: var(--c-accent-700); }

/* ============================================================================
   FOOTER — deep sunset
   ============================================================================ */
.site-footer {
    background:
        radial-gradient(40% 60% at 80% 10%, rgba(245,130,32,.25), transparent 60%),
        linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-700) 70%, #0A2530 100%);
    color: #D4DFE5;
    border-top: 4px solid var(--c-accent);
    box-shadow: 0 -4px 30px -10px rgba(245,130,32,.4);
}
.site-footer a { color: var(--c-accent-300); }
.site-footer a:hover { color: #fff; }
.footer-grid h4 { color: var(--c-accent); font-weight: 800; letter-spacing: -.005em; }
.socials a { background: rgba(245,130,32,.10); border-color: rgba(245,130,32,.25); }
.socials a:hover { background: var(--c-accent); color: var(--c-primary-700); border-color: var(--c-accent); }

/* ============================================================================
   MOBILE BOTTOM NAV — brand orange active
   ============================================================================ */
.bottom-nav a.is-active { color: var(--c-accent-700); }
.bottom-nav a.is-active svg { color: var(--c-accent); }
.bottom-nav a.is-active::before {
    background: var(--c-accent);
    width: 32px; height: 4px;
    box-shadow: 0 0 12px var(--c-accent-glow);
}

/* ============================================================================
   RADIO — the sunset is most visible here
   ============================================================================ */
.radio-card {
    background:
        radial-gradient(50% 50% at 80% 30%, rgba(252,179,105,.35), transparent 65%),
        var(--g-hero);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
}
.radio-card::before {
    content: '';
    position: absolute;
    inset: -10% -10% 30% 40%;
    background: conic-gradient(from 200deg at 70% 30%,
        transparent 0deg, rgba(255,217,163,.15) 15deg, transparent 30deg,
        transparent 80deg, rgba(255,217,163,.1) 95deg, transparent 110deg);
    pointer-events: none;
}
.radio-card .lead, .radio-card h2 { color: #fff; }
.radio-card h2 { font-style: italic; }
.radio-card .eyebrow { background: rgba(245,130,32,.22); color: var(--c-accent-300); border-color: rgba(245,130,32,.4); }
.radio-live-dot { background: var(--c-accent); box-shadow: 0 0 14px var(--c-accent); }
.radio-waves span { background: var(--g-flame); }

/* Floating radio mini-player */
.radio-float-pill { background: var(--g-accent); box-shadow: 0 14px 36px -8px var(--c-accent-glow); }
.radio-float-pill .radio-float-text small { color: #fff; opacity: .85; }
.radio-float-head { background: var(--g-hero); }

/* ============================================================================
   FORMS — orange focus
   ============================================================================ */
input:focus, textarea:focus, select:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px rgba(245,130,32,.15);
}