/**
 * header-style-new.css
 * Redesigned homepage header (v2) matching the Figma "Home_HeroSection" design.
 * Scoped to .header-bar--v2 so it only affects the new homepage header.
 */

/* ---- Bar: white -> peach gradient, sits on top of hero ---- */
.header-bar.header-bar--v2 {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #FFFFFF;    box-shadow: none;
    padding: 17px 0;
}

.header-bar--v2 .header-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* ---- Logo ---- */
.header-bar--v2 .header-bar__logo img {
    max-height: 34px;
    width: auto;
}
/* Force the dark (light-mode) logo to show on the light bar */
.header-bar--v2 .header-bar__logo .dark-mode--inline-element { display: none; }
.header-bar--v2 .header-bar__logo .light-mode--inline-element { display: inline-block; }

/* ---- Navigation ---- */
.header-bar--v2 .header-bar__nav .menu--main {
    display: flex;
    align-items: center;
    gap: 44px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-bar--v2 .header-bar__nav .menu--main li.menu-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* High-specificity to beat the base "header .header-bar__nav .menu--main li a" rule */
.header-bar--v2 .header-bar__nav .menu--main > li.menu-item > a {
    color: rgba(25, 27, 31, 0.60);    font-family: Outfit, Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 13.2px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.header-bar--v2 .header-bar__nav .menu--main > li.menu-item > a:hover {
    color: #FF5A24;
}

/* Dropdown caret */
.header-bar--v2 .menu-toggle-svg {
    width: 10px;
    height: 7px;
    transition: transform 0.25s ease;
}
.header-bar--v2 .menu-toggle-svg path {
    fill: #191B1F;
    stroke: none;
    stroke-width: 0;
}

/* Rotate caret upward when its dropdown is expanded (hover or active) */
.header-bar--v2 .menu-item--v2:hover .menu-toggle-svg,
.header-bar--v2 .menu-item--v2:has(.active-MainMenuDropdown) .menu-toggle-svg {
        transform: rotate(180deg);
}

/* Blur the rest of the body while a dropdown is expanded */
body:has(.header-bar--v2 .menu-dropdown--DropheadDesktop.active-MainMenuDropdown)::before {
        content: "";
            position: fixed;
                inset: 0;
                    z-index: 999;
                        background: rgba(0, 0, 0, 0.08);
                            backdrop-filter: blur(6px);
                                -webkit-backdrop-filter: blur(6px);
                                    pointer-events: none;
}

}
}

/* ---- Contact Us button: btn--primary style (orange circle + dark text/arrow) ---- */
.header-bar--v2 .header-bar__cta {
    max-width: none;
    width: auto;
}

/* Let the base btn--primary styling show through: transparent bg, dark text, orange circle behind the left edge */
.header-bar--v2 .header-bar__cta .btn--primary a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    color: #191B1F !important;
    font-family: Outfit, Inter, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    padding: 8px 16px;
        height: 43px;
            box-sizing: border-box;border-radius: 50px;
    white-space: nowrap;
    overflow: visible;
}

/* the orange circle */
.header-bar--v2 .header-bar__cta .btn--primary a::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 43px;
    height: 100%;
    background: #FF5A24;
    border-radius: 50px;
    z-index: -1;
    transition: width 0.3s ease;
}

.header-bar--v2 .header-bar__cta .btn--primary a::after {
    display: none !important;
    content: none !important;
}

.header-bar--v2 .header-bar__cta .btn--primary a:hover::before {
    width: 100%;
}

.header-bar--v2 .header-bar__cta .btn--primary a span {
    color: #191B1F !important;
    position: relative;
    z-index: 1;
}

/* dark arrow icon (remove any white invert) */
.header-bar--v2 .header-bar__cta .btn--primary a img {
    filter: none !important;
    position: relative;
    z-index: 1;
}

@media (max-width: 1199px) {
    /* Mobile: keep the v2 gradient header; hamburger at the far right opens a
       full-width dropdown with collapsible nav groups + Contact Us button. */
    .header-bar.header-bar--v2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 16px 0;
        min-height: 0;
    }
    /* When the menu is OPEN: pin the header so it stays put, and lock the
       page behind from scrolling. The menu panel scrolls internally. */
    body:has(.header-bar--v2 .header-bar__toggle-cb:checked) .header-bar.header-bar--v2 {
        position: fixed;
        z-index: 1002;
    }
    body:has(.header-bar--v2 .header-bar__toggle-cb:checked),
    html:has(.header-bar--v2 .header-bar__toggle-cb:checked) {
        overflow: hidden !important;
        touch-action: none;
    }
    /* Hide the base theme's old dark mobile navbar. */
    .header-bar--v2 .navbar.mobile-view-block,
    .header-bar--v2 .navbar.header-mobile-view {
        display: none !important;
    }
    /* Full-width row: logo far left, hamburger far right. */
    .header-bar--v2 .header-bar__inner,
    .header-bar--v2 .desktop-view-block {
        display: flex !important;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: static;
    }
    /* Hide desktop nav links and the inline CTA on mobile (moved into dropdown). */
    .header-bar--v2 .header-bar__nav,
    .header-bar--v2 .header-bar__inner > .header-bar__cta {
        display: none !important;
    }
    .header-bar--v2 .header-bar__logo { margin-right: auto; }
    .header-bar--v2 .header-bar__logo img { height: 28px; width: auto; }

    .header-bar--v2 .header-bar__toggle-cb { display: none; }

    /* Hamburger pinned to the far right. */
    .header-bar--v2 .header-bar__burger {
        display: inline-flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 8px;
        margin-left: auto;
        background: transparent;
        border: none;
        cursor: pointer;
        flex: 0 0 auto;
    }
    .header-bar--v2 .header-bar__burger span {
        display: block;
        width: 24px;
        height: 2px;
        background: #191B1F;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .header-bar--v2 .header-bar__toggle-cb:checked ~ .header-bar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .header-bar--v2 .header-bar__toggle-cb:checked ~ .header-bar__burger span:nth-child(2) { opacity: 0; }
    .header-bar--v2 .header-bar__toggle-cb:checked ~ .header-bar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Dropdown panel: full viewport width, starts directly below the header bar. */
    .header-bar--v2 .header-bar__mobile-menu {
        display: block !important;
        position: fixed;
        top: var(--v2-header-h, 60px);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-height: 0;
        overflow: hidden;
        background: #FFFFFF;
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
        transition: max-height 0.3s ease;
        z-index: 1001;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* Open state: full-height overlay panel from below the header to the
       bottom of the screen. Content scrolls INSIDE the panel; the page
       behind is scroll-locked (see body:has rule above). */
    .header-bar--v2 .header-bar__toggle-cb:checked ~ .header-bar__mobile-menu {
        max-height: calc(100vh - var(--v2-header-h, 60px));
        overflow-y: auto;
    }
    .header-bar--v2 .header-bar__mobile-list {
        list-style: none;
        margin: 0;
        padding: 16px;
    }
    .header-bar--v2 .header-bar__mobile-list > .hbm-group {
        margin-bottom: 12px;
    }

    /* Accordion heading as a capsule (pill) button. */
    .header-bar--v2 .hbm-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 14px 0;
        background: transparent;
        border-radius: 0;
        border-bottom: 1px solid #EDEDED;
        font-family: Inter, sans-serif;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #191B1F;
        margin: 0;
        user-select: none;
    }
    /* Caret indicator */
    .header-bar--v2 .hbm-caret {
        width: 9px;
        height: 9px;
        border-right: 2px solid #191B1F;
        border-bottom: 2px solid #191B1F;
        transform: rotate(45deg);
        transition: transform 0.25s ease;
        margin-right: 4px;
        flex: 0 0 auto;
    }
    .header-bar--v2 .hbm-cb:checked ~ .hbm-heading .hbm-caret {
        transform: rotate(-135deg);
    }

    /* Sub-list: hidden by default, revealed when its group checkbox is checked */
    .header-bar--v2 .hbm-sub {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .header-bar--v2 .hbm-cb:checked ~ .hbm-sub {
        max-height: 500px;
    }
    .header-bar--v2 .hbm-sub li a {
        display: block;
        padding: 12px 22px;
        font-family: Inter, sans-serif;
            font-size: 16px;
        font-weight: 500;
            line-height: 24px;
            letter-spacing: -0.78px;
        text-transform: none;
        color: #6C6C6C;
        text-decoration: none;
    }
    .header-bar--v2 .hbm-sub li a:hover { color: #FF5A24; }
    .header-bar--v2 .hbm-sub li a { border-radius: 6px; transition: background .15s, color .15s; }
    .header-bar--v2 .hbm-sub li a:hover, .header-bar--v2 .hbm-sub li.current-menu-item > a, .header-bar--v2 .hbm-sub li.current_page_item > a, .header-bar--v2 .hbm-sub li a.active { background: rgba(255, 90, 36, 0.07); color: #FF5A24; }

    /* Contact Us inside dropdown (capsule button) */
    .header-bar--v2 .header-bar__mobile-cta { padding: 8px 16px 24px; }
    .header-bar--v2 .header-bar__mobile-cta .btn--primary a {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        color: #191B1F;
        font-family: Outfit, Inter, sans-serif;
        font-size: 15px;
        font-weight: 600;
        text-transform: none;
        text-decoration: none;
        padding: 13px 22px;
    }
    .header-bar--v2 .header-bar__mobile-cta .btn--primary a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        height: 100%;
        background: #FF5A24;
        border-radius: 30px;
        z-index: -1;
    }
}


/* ============================================================
   WHAT WE DO dropdown (v2) - compact light popover
   Matches Figma: white card, ~245px, gray items, active peach row
   ============================================================ */

/* Anchor the dropdown to its menu item */
.header-bar--v2 .menu--main > li.menu-item--v2 {
    position: relative;
}

.header-bar--v2 .menu-item--v2 .menu-dropdown--DropheadDesktop.dropdown-v2 {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    width: auto;
    max-width: 320px;
    margin-top: 20px;
    min-width: 240px;
    padding: 12px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E8E8E8;
    box-shadow: 0 4px 12.8px 2PX  rgba(0, 0, 0, 0.05);
    z-index: 1200;
}

.header-bar--v2 .dropdown-v2__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-bar--v2 .dropdown-v2__item {
    display: block;
    border-radius: 8px;
}

.header-bar--v2 .menu-item--v2 .dropdown-v2 .dropdown-v2__item a {
    display: block;
    padding: 6px 10px;
    color: #6C6C6C;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: -0.78px;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.header-bar--v2 .menu-item--v2 .dropdown-v2 .dropdown-v2__item--active a {
    background: rgba(255, 90, 36, 0.07);
}
.header-bar--v2 .menu-item--v2 .dropdown-v2 .dropdown-v2__item a:hover {
    background: rgba(255, 90, 36, 0.07);
    color: #FF5A24;
}

/* fix: shrink dropdown to content (override base header-style.css min-height:615px) */
.header-bar--v2 .menu-dropdown--DropheadDesktop.dropdown-v2 {
    min-height: 0 !important;
    height: auto !important;
}


/* ---- v2 mobile hamburger + dropdown (hidden on desktop) ---- */
.header-bar--v2 .header-bar__burger,
.header-bar--v2 .header-bar__mobile-menu { display: none; }
.header-bar--v2 .header-bar__toggle-cb { display: none; }


/* ---- FIX: guarantee AI/Automation hero clears the absolute (overlay) v2 header ---- */
.hero-section--globalHeroTyp1 { padding-top: max(160px, calc(72px + 40px)); }
@media (max-width: 767px) {
    .hero-section--globalHeroTyp1 { padding-top: max(112px, calc(72px + 40px)); }
    
}