/**
 * SAP Child Theme - Combined Overrides
 * ============================================================================
 * Single child-theme override sheet, loaded once AFTER the parent bundle
 * (depends on 'ssa-main'). Merges what used to be two separate render-blocking
 * requests — global-header-overrides.css and staff-panel-overrides.css — into
 * one file to cut a request. Both former files were enqueued unconditionally
 * and loaded after the parent bundle, so combining them is cascade-equivalent.
 * (ABAU-1434 follow-up)
 *
 * Sections:
 *   A. Global Header overrides (was global-header-overrides.css)
 *   B. Staff Panel overrides   (was staff-panel-overrides.css)
 * ============================================================================
 */

/* ============================================================================
   SECTION A — 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 handled by CSS tokens
   in 00-tokens-brand-sap.css. This section only contains non-tokenizable
   overrides: contact-link underline, solid turquoise nav, dark breadcrumbs,
   gray header fade, yellow hero highlight.
   ============================================================================ */

/* --------------------------------------------------------------------------
   A1. 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;
}

/* --------------------------------------------------------------------------
   A2. 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);
}

/* --------------------------------------------------------------------------
   A3. Breadcrumbs
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   A4. 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%);
}

/* --------------------------------------------------------------------------
   A5. 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);
}

/* --------------------------------------------------------------------------
   A6. 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);
}

/* --------------------------------------------------------------------------
   A7. 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;
}

/* --------------------------------------------------------------------------
   A8. 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;
}

/* --------------------------------------------------------------------------
   A9. 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);
    }
}

/* ============================================================================
   SECTION B — STAFF PANEL OVERRIDES
   ============================================================================
   Overrides parent theme's CSS Grid staff-panel with v1's float-based layout.
   Load AFTER parent's styles.css (ssa-main).

   Why floats instead of grid?
   - SAP v1 theme used floats, and this restores that exact behavior
   - Parent's CSS Grid not rendering correctly for SAP
   - Float-based layout is simpler and matches LIVE site
   ============================================================================ */

/* --------------------------------------------------------------------------
   B1. Override Parent's Grid Layout with Floats
   -------------------------------------------------------------------------- */

/* Reset parent's grid layout - use block (floats) instead */
.staff-panel .content {
    display: block;
}

/* Clearfix via pseudo-element (template lacks clearfix class) */
.staff-panel .content::after {
    content: "";
    display: table;
    clear: both;
}

/* --------------------------------------------------------------------------
   B2. Main Heading Color
   -------------------------------------------------------------------------- */

/* SAP: Main "Meet the Team" heading needs black for contrast on cream background.
   Turquoise (#1AE2C8) has poor readability on cream. Uses semantic token. */
.staff-panel > .content > h3 {
    color: var(--heading-on-light);
}

/* --------------------------------------------------------------------------
   B3. Float-Based Two-Column Layout (v1 style)
   -------------------------------------------------------------------------- */

/* Left column: team images (70% width) */
.staff-panel .image-team {
    float: left;
    width: 70%;
}

.staff-panel .image-team::after {
    content: "";
    display: table;
    clear: both;
}

/* Individual team person boxes */
.staff-panel .image-team .team-person {
    float: left;
    width: 40%;
    margin-right: 10%;
    margin-bottom: 30px;
    align-items: flex-start;  /* Override parent's center alignment */
}

/* Right column: second and third team (25% width) */
.staff-panel .second-team,
.staff-panel .third-team {
    float: left;
    width: 25%;
    margin-left: 5%;
}

/* Clearfix for team containers */
.staff-panel .second-team-container::after,
.staff-panel .third-team-container::after {
    content: "";
    display: table;
    clear: both;
}

/* --------------------------------------------------------------------------
   B4. Team Person Image Sizing
   -------------------------------------------------------------------------- */

/* SAP: Explicit image sizing from v1 theme.
   Without this, images may collapse or expand unpredictably. */
.staff-panel .image-team .team-person img {
    width: 150px;
    max-width: 150px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   B5. Responsive Overrides (v1 breakpoints)
   -------------------------------------------------------------------------- */

/* Tablet: 950px - SAP uses v1 breakpoint instead of parent's 768px */
@media only screen and (max-width: 950px) {
    .staff-panel .image-team {
        float: none;
        width: 100%;
    }
    .staff-panel .second-team,
    .staff-panel .third-team {
        float: left;
        margin-left: 0;
        margin-right: 10%;
        width: 45%;
    }
    .staff-panel .third-team {
        margin-right: 0;
    }
}

/* Mobile: 720px */
@media only screen and (max-width: 720px) {
    .staff-panel .image-team .team-person {
        float: none;
        margin-right: 0;
        width: 100%;
    }
}

/* Small Mobile: 535px */
@media only screen and (max-width: 535px) {
    .staff-panel .second-team,
    .staff-panel .third-team {
        float: none;
        margin-bottom: 30px;
        margin-right: 0;
        width: 100%;
    }
}