/* ============================================================
   NEPB shared design-system styles
   Extracted 2026-06-12 from / (index.php) inline styles so that
   pages using includes/secondary-header.php (e.g. /green,
   /service-areas) render the same section headers, buttons, and
   gradient bars as the homepage. Keep in sync with index.php.
   ============================================================ */

:root {
    --nepb-grad: linear-gradient(to right, #000000, #000000);
    --nepb-grad-hover: linear-gradient(to right, #1a7a99, #c030d0);
    --nepb-pink: #EC40FC;
    --nepb-blue: #2096BA;
    --nepb-mid: #8C5CDB;
}

/* --- Unified Section Header System --- */
.nepb-section-header { text-align: center; margin-bottom: 40px; }
.nepb-section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2096ba;
    margin-bottom: 14px;
}
.nepb-section-label::before,
.nepb-section-label::after {
    content: '';
    width: 40px;
    height: 1px;
    background: rgba(32,150,186,0.4);
}
.nepb-section-title { font-family: 'Lato', sans-serif !important; font-weight: 800 !important; font-size: 38px !important; color: #1a1a1a; margin: 0 0 10px; line-height: 1.2 !important; }
.nepb-section-sub { color: #777; font-size: 16px; margin: 0; line-height: 1.5; }
/* Dark background variants */
.black-background .nepb-section-title,
.black-background .nepb-section-header .nepb-section-title { color: #fff !important; }
.black-background .nepb-section-label::before,
.black-background .nepb-section-label::after { background: rgba(32,150,186,0.5); }
.black-background .nepb-section-sub { color: rgba(255,255,255,0.6) !important; }
/* Grey background */
.grey-background .nepb-section-title { color: #1a1a1a !important; }
@media(max-width:768px) {
    .nepb-section-title { font-size: 28px !important; }
    .nepb-section-label { font-size: 11px; letter-spacing: 2px; }
}

/* Gradient-clip label treatment (matches homepage override block) */
.nepb-section-label {
    background: var(--nepb-grad) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
.nepb-section-label::before, .nepb-section-label::after {
    background: rgba(140,92,219,0.4) !important;
    -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: unset !important;
}
.black-background .nepb-section-label::before, .black-background .nepb-section-label::after {
    background: rgba(140,92,219,0.5) !important;
    -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: unset !important;
}

/* --- NEPB Buttons --- */
.nepb-btn { display: inline-block; padding: 14px 36px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; border-radius: 50px; text-decoration: none; transition: all .3s; cursor: pointer; border: 2px solid transparent; }
.nepb-btn-primary { background: #2096ba; color: #fff; border-color: #2096ba; }
.nepb-btn-primary:hover { background: #1a7a99; border-color: #1a7a99; color: #fff; }
.nepb-btn-outline { background: transparent; color: #2096ba; border-color: #2096ba; }
.nepb-btn-outline:hover { background: #2096ba; color: #fff; }
/* Dark background outline variant */
.black-background .nepb-btn-outline { color: #fff; border-color: rgba(255,255,255,.5); }
.black-background .nepb-btn-outline:hover { background: #fff; color: #1a1a1a; border-color: #fff; }
/* Button pair — side by side on desktop, stacked on mobile */
.nepb-btn-pair { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.nepb-btn-pair .nepb-btn { min-width: 200px; text-align: center; }
@media(max-width:480px) { .nepb-btn-pair .nepb-btn { min-width: 0; width: 100%; } }
.nepb-btn-white { background: #fff; color: #1a1a1a; border-color: #fff; }
.nepb-btn-white:hover { background: rgba(255,255,255,.85); color: #1a1a1a; }

/* Gradient button treatment (matches homepage override block) */
.nepb-btn-primary {
    background: var(--nepb-grad) !important; border-color: transparent !important;
}
.nepb-btn-primary:hover {
    background: var(--nepb-grad-hover) !important; border-color: transparent !important;
}
.nepb-btn-outline { border: 2px solid var(--nepb-mid) !important; color: var(--nepb-mid) !important; }
.nepb-btn-outline:hover { background: var(--nepb-grad) !important; border-color: transparent !important; color: #fff !important; }
.black-background .nepb-btn-outline { border-color: rgba(255,255,255,.5) !important; color: #fff !important; }
.black-background .nepb-btn-outline:hover { background: var(--nepb-grad) !important; border-color: transparent !important; }

/* CTA Banners */
.nepb-cta-banner { background: var(--nepb-grad) !important; }
.nepb-cta-banner .nepb-btn-white { color: #7b2f9e !important; }
.nepb-cta-banner .nepb-btn-white:hover { color: #7b2f9e !important; }

/* Gradient accent bar */
.nepb-grad-bar { height: 4px; background: linear-gradient(to right, #EC40FC, #2096BA); }