/**
 * 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: 50px;
    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: rgba(25, 27, 31, 0.60);
    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: 0px;
    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: sticky;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: #FFFFFF; 
        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;
        padding-right: 0px;
    }
    /* 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: 18px 32px;
    }
    .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;

        color: rgba(25, 27, 31, 0.60);
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 13.2px; /* 94.286% */
letter-spacing: 1.2px;
text-transform: uppercase;



        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 14px 0;
        background: transparent;
        border-radius: 0;
        border-bottom: 1px solid #EDEDED;
      
        
        margin: 0;
        user-select: none;
    }
    /* Caret indicator */
    .header-bar--v2 .hbm-caret {
        width: 9px;
        height: 9px;
        border-right: 2px solid #757679;
        border-bottom: 2px solid #757679;
        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:first-child{
        margin-top: 14px;;
    }
    .header-bar--v2 .hbm-sub li a {
        display: block;
        padding: 6px;
        margin-bottom: 8px;
        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:2px 32px 36px; }
    .header-bar--v2 .header-bar__mobile-cta .btn--primary a {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0px;
        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: 14px;
    border-radius: 12px;
    border: 1px solid #E8E8E8;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8.899999618530273px);
    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;
    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;
   
}

.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 {
   border-radius: 6px;
    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;
}

/* fix: fast hover across the menu left the previous dropdown still open on top
   of the new one. While the pointer is inside the nav, only the hovered item's
   dropdown may show — any other one hides instantly (no close transition). */
@media (min-width: 1200px) {
    .header-bar--v2 .header-bar__nav:hover
    .menu--main > li.menu-item--v2:not(:hover)
    .menu-dropdown--DropheadDesktop.dropdown-v2 {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: none !important;
    }

    /* keep the caret in sync with the dropdown that is actually visible */
    .header-bar--v2 .header-bar__nav:hover
    .menu--main > li.menu-item--v2:not(:hover) .menu-toggle-svg {
        transform: none;
    }
}


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