/**
 * SAP Child Theme - Global Header Overrides
 * ============================================================================
 * Overrides parent theme's SSA-specific header styles with SAP values.
 * Load AFTER parent's global-header.css
 *
 * IMPORTANT: Dimensions (heights, widths, margins) are now handled by CSS tokens
 * in 00-tokens-brand-sap.css. This file only contains non-tokenizable overrides:
 * - Header bar contact links: thick turquoise underline
 * - Nav background: solid turquoise (not gradient)
 * - Breadcrumbs: dark text (not white)
 * - Header fade: gray gradient (not blue)
 * - Hero highlight: yellow text
 * ============================================================================
 */

/* ==========================================================================
   1. Header Bar Contact Links
   ========================================================================== */

/* SAP: Email/phone links have thick turquoise underline (4px border-bottom)
   and larger, bolder text than SSA */
.header-bar .content > a.email,
.header-bar .content > a.phone {
    border-bottom: var(--header-link-underline-width) solid var(--header-link-underline-color);
    text-decoration: none;
    font-size: var(--header-bar-font-size);
    font-weight: var(--header-bar-font-weight);
    padding-bottom: 2px;
}

/* ==========================================================================
   2. Nav Container Background
   ========================================================================== */

/* SAP: solid turquoise background instead of SSA blue gradient */
.nav-container {
    background-color: var(--brand-main);
    background-image: none;
    /* Position below header bar using token */
    top: var(--header-bar-height);
}

/* SAP: Prevent logo from being compressed by flex container
   and ensure it's not clipped by parent overflow */
.nav-container .content {
    overflow: visible;
}

.nav-container .logo {
    flex-shrink: 0;
    min-width: var(--logo-width);
}

.nav-container.scrolling {
    /* Keep nav below header-bar when scrolling (matches production behavior)
       Both header elements remain visible and stacked */
    top: var(--header-bar-height);
}

/* SAP: Allow logo to shrink when scrolling by reducing min-width constraint */
.nav-container.scrolling .logo {
    min-width: var(--logo-width-scrolling);
}

/* ==========================================================================
   3. Breadcrumbs
   ========================================================================== */

/* SAP: dark text on light turquoise background (not white text) */
.breadcrumb {
    color: var(--text-primary);
}

/* ==========================================================================
   4. Header Image Fade Overlay
   ========================================================================== */

/* SAP: dark gray transparent gradient instead of SSA blue gradient */
header .image-container .header-fade {
    background-image: linear-gradient(to left, rgba(76, 78, 78, 0) 22%, rgba(0, 0, 0, 0.46) 54.62%);
}

/* ==========================================================================
   5. Hero Title - Highlight Accent Color
   ========================================================================== */

/* SAP: Yellow highlight for emphasized text in hero title (e.g., "Explore") */
header .image-container .content h1 span {
    color: var(--highlight-yellow);
}

/* ==========================================================================
   6. Stats Promo Section Colors
   ========================================================================== */

/* SAP: Uses semantic token for headings on light backgrounds
   The --heading-on-light token is defined in 00-tokens-brand-sap.css
   as var(--black) because turquoise has poor contrast on cream */
.three-column-stats-promo h3,
.three-column-stats-promo h4 {
    color: var(--heading-on-light);
}

/* ==========================================================================
   7. Navigation Menu Overrides
   ========================================================================== */

/* SAP: Larger nav menu text than SSA (18px vs 16px)
   Max Mega Menu plugin may inject inline styles, hence !important */
nav#mega-menu-wrap-staff-skills-academy-menu.mega-menu-wrap {
    font-size: var(--nav-menu-font-size) !important;
}

nav#mega-menu-wrap-staff-skills-academy-menu.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link {
    font-size: var(--nav-menu-font-size) !important;
    padding: var(--nav-menu-item-padding);
}

/* SAP: Override parent's 1000px fixed width which pushes menu too far right
   SAP header is simpler (no sign-in/free-trial buttons) so needs narrower menu */
#mega-menu-wrap-staff-skills-academy-menu #mega-menu-staff-skills-academy-menu {
    width: auto;
    max-width: fit-content;
}

/* ==========================================================================
   8. Header Image Container Heights
   ========================================================================== */

/* SAP: Remove parent's max-height constraint for wellbeing page header
   Parent sets max-height: 320px on all .image-container, but v1 theme
   didn't have this constraint. Wellbeing page needs taller hero image. */
header .image-container.wellbeing-image {
    max-height: none;
}

/* ==========================================================================
   9. Responsive Overrides (UNIFIED at 768px)
   ============================================================================
   All mobile/tablet header behavior consolidated to ONE breakpoint (768px)
   to match tokens in 00-tokens-brand-sap.css and avoid mix-and-match issues.
   ========================================================================== */

/* SAP Desktop: Hide nav email icon (contact info visible in header-bar) */
.nav-container .email {
    display: none;
}

.nav-container .email img {
    height: 24px;
    width: 24px;
}

/* SAP Desktop: Homepage clear-header height (no breadcrumb) */
body:has(.homepage-image) .clear-header {
    height: 230px;
}

/* ==========================================================================
   Mobile/Tablet (≤768px) - UNIFIED BREAKPOINT
   ============================================================================
   All mobile header changes happen at 768px to stay in sync with tokens.
   This includes: header-bar hiding, nav positioning, logo sizing, email icon.
   ========================================================================== */

@media (max-width: 768px) {
    /* Hide header-bar - nav becomes the only header element */
    .header-bar {
        display: none;
    }

    /* Nav at top of viewport (header-bar hidden) */
    .nav-container {
        top: 0 !important;
    }

    /* Nav stays at top even when scrolling (no header-bar to sit below) */
    .nav-container.scrolling {
        top: 0 !important;
    }

    /* Show email icon in nav (header-bar contact info now hidden) */
    .nav-container .email {
        display: block !important;
        position: absolute;
        right: 100px;
    }

    /* Homepage clear-header reduced (smaller nav on mobile) */
    body:has(.homepage-image) .clear-header {
        height: 90px !important;
    }

    /* Logo uses token values for both scroll states
       Tokens set identical values so logo doesn't change size on scroll */
    .nav-container a.logo {
        height: var(--logo-height);
        width: var(--logo-width);
        margin: var(--logo-margin);
    }

    .nav-container.scrolling a.logo {
        height: var(--logo-height-scrolling);
        width: var(--logo-width-scrolling);
        margin: var(--logo-margin-scrolling);
        background-size: var(--logo-background-size);
    }
}