/*
 * 3-MinimalLayout default styles.
 *
 * Auto-loaded by ./header.php when this header style is selected in
 * Template Options. Ships with the Helix package so any site on this
 * header style gets the baseline layout + palette without per-site
 * custom CSS. Site-specific branding (footer colors, button colors,
 * body tint, etc.) stays in per-site params.custom_css.
 */

#sp-header {
    --hux-primary: #0345bf;
    --hux-primary-hover: #044cd0;
    --hux-primary-darker: #060f26;
    --hux-accent: #f59e0b;
    --hux-text: #1a1f2e;
    --hux-muted: #6a737d;
    --hux-surface: #ffffff;
    --hux-surface-header: #f4f7fc;
    --hux-surface-soft: #eef3fa;
    --hux-border: #d6ddea;
}

/* Top bar: brand-blue band above the main header */
#sp-top-bar,
#sp-header-topbar {
    background: var(--hux-primary);
    color: #ffffff;
}
#sp-top-bar a,
#sp-header-topbar a,
#sp-top-bar .social-icons a,
#sp-header-topbar .social-icons a {
    color: #ffffff;
    transition: color .15s ease;
}
#sp-top-bar a:hover,
#sp-header-topbar a:hover,
#sp-top-bar .social-icons a:hover,
#sp-header-topbar .social-icons a:hover {
    color: var(--hux-accent);
}

/* Main header: light blue-tinted cloud + 4px amber top strip */
#sp-header {
    background: var(--hux-surface-header);
    border-top: 4px solid var(--hux-accent);
    border-bottom: 1px solid var(--hux-border);
    box-shadow: 0 2px 14px rgba(3, 69, 191, 0.06);
}
#sp-header.header-sticky {
    background: rgba(244, 247, 252, 0.97);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(3, 69, 191, 0.1);
}

/* Sticky state: tight vertical padding + logo sized to fill the bar so
 * the compact sticky header actually reads as a proper header, not a
 * shrunken afterthought. Logo height is baked into style.css so sites
 * don't need to configure sticky_logo_height in Template Options;
 * admins can still override via Custom Code if they want a different
 * target. */
/* Sticky state: collapse the default container padding (10/14/18 top+bottom)
 * down to 2px so the logo really does fill the bar. Paired with the +4
 * sticky_header_min_height formula in features/logo.php, the final sticky
 * height is (container padding 2+2) + (logo wrapper = logo+4) = logo+8px
 * total — logo fills ~85-93% of the bar depending on sticky_logo_height. */
#sp-header.header-sticky > .container > .container-inner,
#sp-header.header-sticky > .container-inner {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Row: vertical centering + progressive column-gap between logo and menu */
#sp-header > .container > .container-inner > .row,
#sp-header > .container-inner > .row {
    align-items: center;
    column-gap: 16px;
}
@media (min-width: 768px) {
    #sp-header > .container > .container-inner > .row,
    #sp-header > .container-inner > .row {
        column-gap: 48px;
    }
}
@media (min-width: 992px) {
    #sp-header > .container > .container-inner > .row,
    #sp-header > .container-inner > .row {
        column-gap: 64px;
    }
}
@media (min-width: 1200px) {
    #sp-header > .container > .container-inner > .row,
    #sp-header > .container-inner > .row {
        column-gap: 80px;
    }
}

/* Default header padding: minimal vertical (just enough so the logo doesn't
 * touch the amber border + body edge), standard horizontal gutter that
 * scales with viewport. Logo fills ~85-90% of the bar. */
#sp-header > .container > .container-inner,
#sp-header > .container-inner {
    padding: 4px 12px;
}
@media (min-width: 576px) {
    #sp-header > .container > .container-inner,
    #sp-header > .container-inner {
        padding: 4px 16px;
    }
}
@media (min-width: 992px) {
    #sp-header > .container > .container-inner,
    #sp-header > .container-inner {
        padding: 6px 24px;
    }
}

/* Push menu column + megamenu to the right edge at md+ (when menu visible) */
@media (min-width: 768px) {
    #sp-header #sp-menu {
        margin-left: auto;
    }
    #sp-header #sp-menu .sp-column,
    #sp-header .sp-megamenu-wrapper {
        justify-content: flex-end;
    }
    #sp-header .sp-megamenu-parent {
        margin-left: auto;
    }
}

/* Megamenu colors — md+ only so d-none on mobile is respected */
@media (min-width: 768px) {
    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        color: var(--hux-text);
        font-weight: 500;
        transition: color .15s ease;
    }
    #sp-header .sp-megamenu-parent > li.current-item > a,
    #sp-header .sp-megamenu-parent > li.active > a,
    #sp-header .sp-megamenu-parent > li > a[aria-current="page"] {
        color: var(--hux-primary);
        font-weight: 700;
    }
    #sp-header .sp-megamenu-parent > li:hover > a {
        color: var(--hux-primary);
    }
}

/* Dropdowns (md+ only) */
@media (min-width: 768px) {
    #sp-header .sp-megamenu-parent .sp-dropdown,
    #sp-header .sp-megamenu-parent .sp-dropdown-main,
    #sp-header .sp-megamenu-parent .sp-dropdown-sub {
        background: var(--hux-surface);
        border: 1px solid var(--hux-border);
        box-shadow: 0 10px 28px rgba(3, 69, 191, 0.12);
        border-radius: 8px;
        padding: 0.4rem 0;
    }
    #sp-header .sp-megamenu-parent .sp-dropdown-items li a {
        color: var(--hux-text);
        padding: 0.55rem 1.1rem;
        border-left: 3px solid transparent;
        transition: background .12s ease, color .12s ease, border-color .12s ease;
    }
    #sp-header .sp-megamenu-parent .sp-dropdown-items li a:hover {
        background: var(--hux-surface-soft);
        color: var(--hux-primary);
        border-left-color: var(--hux-primary);
    }
    #sp-header .sp-megamenu-parent .sp-dropdown-items li .sp-menu-heading {
        color: var(--hux-muted);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 0.4rem 1.1rem 0.2rem;
    }
}

/* Hamburger: dark on light header */
#sp-header .offcanvas-toggler-right,
#sp-header .offcanvas-toggler,
#sp-header .burger-icon {
    color: var(--hux-text);
}
#sp-header .burger-icon > span {
    background: var(--hux-text);
}