/*
 * ORGANISMS - HEADERS
 * Purposeful Media Design System
 * BannerHeader Component Styles
 *
 * Based on Figma specifications:
 * - Header height: 125px (desktop/tablet), 100px (mobile)
 * - Gold bottom border: 4px
 * - Menu text: 30px font, 45px line height, 800 weight
 *
 * Breakpoints:
 * - Mobile: 380-767px
 * - Tablet: 768-1149px
 * - Desktop: 1150-1919px
 * - DesktopPlus: 1920px+
 *
 * NOTE: Google Fonts should be loaded in HTML head, not through CSS imports
 */

@import url('variables-v4.0-20251027.css');

/* ============================================
   BANNER HEADER COMPONENT
   ============================================ */

/* Base Container */
.banner-header {
    position: relative;
    width: 100%;
    background-color: var(--color-primary-700);
    height: 128px; /* 124px body + 4px border */
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: var(--space-1) solid var(--color-accent-500);
    z-index: 1000;
}

/* Inner Container */
.banner-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0; /* Ensure no margin */
    position: relative;
}

/* Logo Container */
.banner-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.banner-header__logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.banner-header__logo-image {
    display: none;
    max-width: none;
    height: auto;
}

/* Show appropriate logo variant per breakpoint */
.banner-header__logo-image--mobile {
    display: none;
}

.banner-header__logo-image--tablet {
    display: none;
}

.banner-header__logo-image--desktop {
    display: none;
}

/* Menu Wrapper */
.banner-header__menu-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
    overflow: visible;
}

/* Menu Container */
.banner-header__menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-primary-700);
    overflow: visible;
    gap: 30px; /* Reduced from 40px to prevent overflow at narrower desktop widths */
}

/* Menu Items */
.banner-header__menu-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    flex-shrink: 0;
    position: relative;
}

/* Menu Links - H2/30 Navigation Typography */
.banner-header__menu-link {
    font-family: var(--nav-font-family);
    font-weight: var(--nav-font-weight);
    font-size: var(--nav-h2-font-size);
    line-height: var(--nav-h2-line-height);
    text-transform: var(--nav-h2-text-transform);
    color: var(--color-white, #ffffff); /* Default: white (matches footer) */
    text-decoration: none;
    text-shadow: var(--shadow-strong);
    white-space: var(--nav-h2-white-space);
    transition: color 0.3s ease; /* Matches footer transition */
}

.banner-header__menu-link:hover {
    color: var(--color-accent-500, #d4af37); /* Hover: accent gold (matches footer) */
}

.banner-header__menu-link--active,
.banner-header__menu-link:active {
    color: var(--color-accent-600, #b39226); /* Active: darker accent (matches footer) */
}

/* Dropdown Container */
.banner-header__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background-color: var(--dropdown-bg-default);
    min-width: 200px;
    box-shadow: var(--dropdown-box-shadow);
    border-radius: var(--dropdown-border-radius);
    padding: var(--dropdown-padding-block) var(--dropdown-padding-inline-end) var(--dropdown-padding-block) var(--dropdown-padding-inline-start);
    display: none;
    overflow: var(--dropdown-overflow);
    z-index: var(--z-dropdown);
}

/* Dropdown Container on Hover */
.banner-header__dropdown:hover {
    background-color: var(--dropdown-bg-hover);
}

/* Dropdown Container with Active Link */
.banner-header__dropdown:has(.banner-header__dropdown-link--active) {
    background-color: var(--dropdown-bg-active);
}

.banner-header__dropdown-link {
    display: block;
    margin-bottom: var(--dropdown-link-gap);
    font-family: var(--dropdown-font-family);
    font-weight: var(--dropdown-font-weight);
    font-size: var(--dropdown-font-size);
    line-height: var(--dropdown-line-height);
    text-transform: var(--dropdown-text-transform);
    white-space: var(--dropdown-white-space);
    color: var(--dropdown-link-default);
    text-decoration: none;
    transition: all 0.2s ease;
}

.banner-header__dropdown-link:last-child {
    margin-bottom: 0;
}

.banner-header__dropdown-link:hover {
    color: var(--dropdown-link-hover);
    text-decoration: var(--dropdown-link-hover-decoration);
    text-decoration-style: var(--dropdown-link-hover-decoration-style);
}

/* Active dropdown link */
.banner-header__dropdown-link--active {
    color: var(--dropdown-link-active);
}

/* Disabled sibling links when one is active */
.banner-header__dropdown:has(.banner-header__dropdown-link--active) .banner-header__dropdown-link:not(.banner-header__dropdown-link--active) {
    color: var(--dropdown-link-sibling-disabled);
}

/* Hamburger Menu Button */
.banner-header__hamburger {
    display: none;
    width: 54px;
    height: 54px;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.banner-header__hamburger-icon {
    width: 54px; /* Match button width */
    height: 54px; /* Match button height */
    background-image: url('../assets/svg/ui-icons/purposeful-sprite-ui.svg');
    background-size: calc(1536px * 0.21) calc(512px * 0.21); /* Scale sprite to ~323px x 107px */
    background-position: calc(-1024px * 0.21) 0px; /* Hamburger position scaled: (1024,0) */
    background-repeat: no-repeat;
    filter: brightness(0) saturate(100%) invert(100%); /* Makes it white */
}

/* Close icon state */
.banner-header__hamburger--active .banner-header__hamburger-icon {
    background-position: calc(-1280px * 0.21) 0px; /* Close icon position scaled: (1280,0) */
}

/* Mobile Menu Dropdown */
.banner-header__mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    box-shadow: var(--shadow-standard);
    display: none;
    z-index: var(--z-dropdown);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dropdown-transition-duration) var(--dropdown-transition-timing),
                opacity var(--dropdown-transition-duration) var(--dropdown-transition-timing);
    opacity: 0;
}

.banner-header__mobile-menu--active {
    display: block;
    max-height: 800px;
    opacity: 1;
}

/* Mobile Menu Styles */
.mobile-menu {
    padding: 0;
}

.mobile-menu__link {
    display: block;
    padding: 16px 24px;
    font-family: var(--nav-font-family);
    font-weight: var(--nav-font-weight);
    font-size: var(--nav-h4-font-size);
    line-height: var(--nav-h4-line-height);
    text-transform: var(--nav-h4-text-transform);
    color: var(--nav-h4-dropdown-default);
    text-decoration: none;
    border-bottom: 1px solid var(--color-light);
    transition: all 0.2s ease;
}

.mobile-menu__link:hover {
    background-color: var(--color-off-white);
    color: var(--nav-h4-dropdown-hover);
}

.mobile-menu__link--active {
    color: var(--nav-h4-dropdown-active);
    font-weight: var(--nav-font-weight);
    border-left: var(--space-1) solid var(--color-accent-500);
}

.mobile-menu__submenu {
    position: relative;
}

.mobile-menu__submenu-items {
    background-color: var(--color-off-white);
    display: none;
}

.mobile-menu__submenu--expanded .mobile-menu__submenu-items {
    display: block;
}

.mobile-menu__sublink {
    display: block;
    padding: 12px 24px 12px 48px;
    font-family: var(--nav-font-family);
    font-weight: var(--nav-font-weight);
    font-size: var(--nav-h5-font-size);
    line-height: var(--nav-h5-line-height);
    text-transform: var(--nav-h5-text-transform);
    color: var(--nav-h5-simple-default);
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-menu__sublink:hover {
    color: var(--nav-h5-simple-hover);
    background-color: var(--color-neutral-100);
}

/* CTA Container for Landing Page Variants */
.banner-header__cta {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Phone Link Styling */
.banner-header__phone {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--color-accent-500);
    text-decoration: none;
    transition: opacity 0.3s ease;
    font-size: 36px;
    line-height: 1.2;
}

.banner-header__phone:hover {
    opacity: 0.85;
}

/* Button Styling for CTA Headers */
.banner-header__button {
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid transparent;
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

/* Button Size - Medium */
.banner-header__button--medium {
    font-size: 16px;
    padding: var(--padding-button);
    min-width: 120px;
}

/* Button Type - Secondary (Gold) */
.banner-header__button--secondary {
    background-color: var(--button-secondary-bg);
    color: var(--color-primary-700);
    border-color: var(--button-secondary-bg);
}

.banner-header__button--secondary:hover {
    background-color: var(--button-secondary-hover);
    border-color: var(--button-secondary-hover);
}

.banner-header__button--secondary:active {
    background-color: var(--button-secondary-active);
    border-color: var(--button-secondary-active);
}

/* ============================================
   DESKTOP PLUS BREAKPOINT (1920px+)
   ============================================ */
@media (min-width: 1920px) {
    .banner-header__container {
        max-width: 1900px;
        padding: 0 24px; /* Updated to 24px left/right */
    }

    .banner-header__logo {
        width: 481px;
        height: 93px;
    }

    /* Show desktop logo only (larger size for DesktopPlus) */
    .banner-header__logo-image--desktop {
        display: block;
        width: 481px;
        height: 93px;
    }

    .banner-header__menu-wrapper {
        padding: 0 32px;
    }

    .banner-header__menu {
        width: 894px;
    }
}

/* ============================================
   DESKTOP BREAKPOINT (1150-1919px)
   ============================================ */
@media (min-width: 1150px) and (max-width: 1919px) {
    .banner-header__container {
        padding: 0 24px; /* Updated to 24px left/right */
    }

    .banner-header__logo {
        width: 460px;
        height: 89px;
    }

    /* Show desktop logo only */
    .banner-header__logo-image--desktop {
        display: block;
        width: 460px;
        height: 89px;
    }

    /* Phone number responsive sizing */
    .banner-header__phone {
        font-size: 32px;
    }

    .banner-header__menu {
        min-width: 615px;
        max-width: 886px;
        flex-grow: 1; /* Restored to allow menu to expand, now with 30px gap */
    }
}

/* ============================================
   TABLET BREAKPOINT (768-1149px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1149px) {
    .banner-header__container {
        padding: 0 24px; /* Already correct at 24px left/right */
    }

    .banner-header__logo {
        width: 289px;
        height: 62px;
    }

    /* Show tablet logo only */
    .banner-header__logo-image--tablet {
        display: block;
        width: 417.26px;
        height: 89px;
    }

    /* Phone number responsive sizing */
    .banner-header__phone {
        font-size: 24px;
    }

    /* Hide desktop menu, show hamburger */
    .banner-header__menu {
        display: none;
    }

    .banner-header__hamburger {
        display: flex;
    }

    /* Tablet Mobile Menu - Card Style Dropdown */
    .banner-header__mobile-menu {
        width: var(--dropdown-tablet-card-width);
        left: auto;
        right: var(--dropdown-tablet-position-right);
        background-color: var(--dropdown-tablet-card-bg-default);
        border-radius: var(--dropdown-tablet-card-border-radius);
        box-shadow: var(--dropdown-tablet-card-box-shadow);
        overflow: var(--dropdown-tablet-card-overflow);
    }

    .banner-header__mobile-menu:hover {
        background-color: var(--dropdown-tablet-card-bg-hover);
    }

    .mobile-menu {
        padding: var(--dropdown-tablet-card-padding-block) var(--dropdown-tablet-card-padding-inline-end) var(--dropdown-tablet-card-padding-block) var(--dropdown-tablet-card-padding-inline-start);
    }

    .mobile-menu__link {
        font-size: var(--dropdown-tablet-item-font-size);
        line-height: var(--dropdown-tablet-item-line-height);
        text-transform: var(--dropdown-tablet-item-text-transform);
        min-height: var(--dropdown-tablet-item-min-height);
        margin-bottom: var(--dropdown-tablet-card-gap-items);
        padding: 0;
        border-bottom: none;
        /* Keep mobile menu link color states */
        color: var(--nav-h4-dropdown-default);
        background-color: transparent;
    }

    .mobile-menu__link:hover {
        color: var(--nav-h4-dropdown-hover);
        background-color: transparent;
    }

    .mobile-menu__link--active {
        color: var(--nav-h4-dropdown-active);
        background-color: transparent;
    }

    /* Submenu items inherit container background */
    .mobile-menu__submenu-items {
        background-color: transparent; /* Inherits from container hover */
    }

    .mobile-menu__sublink {
        font-size: var(--dropdown-tablet-item-font-size);
        line-height: var(--dropdown-tablet-item-line-height);
        min-height: var(--dropdown-tablet-item-min-height);
        margin-bottom: var(--dropdown-tablet-card-gap-items);
        padding-left: 24px;
        /* Keep mobile menu link color states */
        color: var(--nav-h4-dropdown-default);
        background-color: transparent;
    }

    .mobile-menu__sublink:hover {
        color: var(--nav-h4-dropdown-hover);
        background-color: transparent;
    }
}

/* ============================================
   MOBILE BREAKPOINT (380-767px)
   ============================================ */
@media (max-width: 767px) {
    .banner-header {
        height: 128px; /* Updated to 128px (124px + 4px border) */
    }

    .banner-header__container {
        padding: 0 24px; /* Updated to 24px left/right */
    }

    .banner-header__logo {
        width: 200px;
        height: 43px;
    }

    /* Show mobile logo only */
    .banner-header__logo-image--mobile {
        display: block;
        width: 179.23px;
        height: 89px;
    }

    /* Phone number responsive sizing */
    .banner-header__phone {
        font-size: 18px;
    }

    /* Button responsive sizing */
    .banner-header__button--medium {
        font-size: 14px;
        padding: var(--padding-button-small);
        min-width: 100px;
    }

    /* Hide desktop menu, show hamburger */
    .banner-header__menu {
        display: none;
    }

    .banner-header__hamburger {
        display: flex;
    }

    .banner-header__hamburger-icon {
        /* Smaller size for mobile: match close icon scaling */
        background-size: calc(1536px * 0.21) calc(512px * 0.21);
        background-position: calc(-1024px * 0.21) 0px;
    }

    .banner-header__hamburger--active .banner-header__hamburger-icon {
        background-position: calc(-1280px * 0.21) 0px;
    }

    /* Mobile Menu - Accordion Variant Styling */
    .banner-header__mobile-menu {
        background-color: var(--dropdown-tablet-accordion-bg-default, #eceeef);
        border-radius: var(--dropdown-tablet-accordion-border-radius, 8px);
    }

    .banner-header__mobile-menu--active {
        background-color: var(--dropdown-tablet-accordion-bg-default, #eceeef);
    }

    .banner-header__mobile-menu:hover {
        background-color: var(--dropdown-tablet-accordion-bg-hover, #f4ebcd);
    }

    .mobile-menu {
        padding: var(--dropdown-tablet-accordion-padding-block, 20px) var(--dropdown-tablet-accordion-padding-inline-end, 16px) var(--dropdown-tablet-accordion-padding-block, 20px) var(--dropdown-tablet-accordion-padding-inline-start, 24px);
    }

    .mobile-menu__link {
        font-size: var(--dropdown-tablet-item-font-size, 21px);
        line-height: var(--dropdown-tablet-item-line-height, 30.5px);
        text-transform: var(--dropdown-tablet-item-text-transform, none);
        min-height: var(--dropdown-tablet-item-min-height, 44px);
        margin-bottom: var(--dropdown-tablet-accordion-gap-items, 10px);
        color: var(--dropdown-tablet-item-color-default, #1b1464);
        background-color: transparent;
        border-bottom: none;
    }

    .mobile-menu__link:hover {
        color: var(--dropdown-tablet-item-color-hover, #1d50de);
        background-color: transparent;
    }

    .mobile-menu__link--active {
        color: var(--nav-h4-dropdown-active);
        background-color: transparent;
    }

    .mobile-menu__submenu-items {
        background-color: transparent;
    }

    .mobile-menu__sublink {
        font-size: var(--dropdown-tablet-item-font-size, 21px);
        line-height: var(--dropdown-tablet-item-line-height, 30.5px);
        min-height: var(--dropdown-tablet-item-min-height, 44px);
        margin-bottom: var(--dropdown-tablet-accordion-gap-items, 10px);
        padding-left: 24px;
        color: var(--nav-h4-dropdown-default);
        background-color: transparent;
    }

    .mobile-menu__sublink:hover {
        color: var(--nav-h4-dropdown-hover);
        background-color: transparent;
    }

    .mobile-menu__trigger {
        cursor: pointer;
    }
}

/* ============================================
   HEADER TYPE VARIANTS
   ============================================ */

/* LP-Clean: Logo only */
.banner-header--lp-clean .banner-header__menu-wrapper,
.banner-header--lp-clean .banner-header__hamburger,
.banner-header--lp-clean .banner-header__cta {
    display: none;
}

/* LP-CTA: Logo + CTA Button */
.banner-header--lp-cta .banner-header__menu-wrapper,
.banner-header--lp-cta .banner-header__hamburger {
    display: none;
}

.banner-header--lp-cta .banner-header__cta {
    display: flex;
}

/* LP-Contact: Logo + Phone */
.banner-header--lp-contact .banner-header__menu-wrapper,
.banner-header--lp-contact .banner-header__hamburger {
    display: none;
}

.banner-header--lp-contact .banner-header__cta {
    display: flex;
}

/* ============================================
   STICKY HEADER BEHAVIOR
   ============================================ */
.banner-header--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Add padding to body when header is sticky */
body.has-sticky-header {
    padding-top: 128px; /* Updated to match new header height */
}

@media (max-width: 767px) {
    body.has-sticky-header {
        padding-top: 128px; /* Updated to match new mobile header height */
    }
}