/*
 * Global Header Styles
 */

/* Wrapper to position the header absolutely over the hero section */
.global-header-wrapper {
    position: absolute;
    top: 40px;
    /* Offset from Figma design */
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 1440px;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: 0 33px 0 98px;
    /* 98px left, 33px right to match caller box */
    box-sizing: border-box;
    /* Fixes overflow so padding is included in width */
    pointer-events: none;
    /* Let clicks pass through empty wrapper space */
}

/* The actual white rounded pill */
.global-header {
    width: 100%;
    max-width: 1309px;
    /* Expanded by 21px to match caller box edge */
    height: 80px;
    background: #FFFFFF;
    border-radius: 100px;
    border-bottom: 1px solid #EFEFEF;
    box-sizing: border-box;
    pointer-events: auto;
    /* Re-enable clicks for the header */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Premium subtle shadow */
    position: relative;
}

.header-logo {
    position: absolute;
    left: 24px;
    top: 25px;
    display: flex;
    align-items: center;
}

.header-logo-img {
    height: auto;
    max-height: 40px;
}

.header-logo-placeholder {
    width: 150px;
    height: 40px;
    background: #EFEFEF;
    border-radius: 4px;
}

.header-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.header-menu {
    display: inline-flex;
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-menu li {
    position: relative;
}

.header-menu li a {
    color: #121212;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-menu li a:hover {
    color: #FF4F00;
}

/* Dropdown Support */
.header-menu > li > a::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 6px;
    background: url('data:image/svg+xml;utf8,<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="%23121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
    transition: transform 0.2s ease;
}

.header-menu > li:hover > a::after {
    transform: rotate(180deg);
}

.header-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    list-style: none;
    margin-top: 20px;
}

.header-menu .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    margin-top: 10px;
}

.header-menu .sub-menu li a {
    padding: 8px 20px;
    font-size: 16px;
}

.header-actions {
    position: absolute;
    left: 1089px;
    /* Shifted right by 21px to maintain spacing */
    top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.header-btn-demo {
    background: #FF4F00;
    color: #FFFFFF;
    border-radius: 100px;
    padding: 0 20px;
    height: 48px;
    font-size: 18px;
    font-weight: 500;
    line-height: 21.6px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease;
    font-family: 'Jost', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-btn-demo:hover {
    background: #e04400;
    transform: translateY(-1px);
}

.header-btn-search {
    width: 48px;
    height: 48px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #121212;
    transition: transform 0.2s ease;
}

.header-btn-search:hover {
    transform: scale(1.1);
}

.header-mobile-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #121212;
    padding: 5px;
}

/* ── Responsive Tablet & Mobile ────────────────────────────────────────── */

@media (max-width: 1440px) {
    .global-header-wrapper {
        padding: 0 5%;
    }

    /* Fallback to flexbox for smaller desktop screens so things don't overlap */
    .global-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
    }

    .header-logo,
    .header-nav,
    .header-actions {
        position: static;
        left: auto;
        top: auto;
        transform: none;
    }
}

/* ── Tablet & Mobile (≤ 1024px) ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .global-header {
        padding: 0 20px 0 30px;
        justify-content: space-between;
    }

    .header-nav {
        display: none; /* Hide desktop menu — hamburger toggle reveals it */
    }

    .header-mobile-btn {
        display: block;
    }

    /* Hide CTA + search on mobile — Figma shows logo + hamburger only */
    .header-btn-demo,
    .header-btn-search {
        display: none;
    }

    /* Make the mobile menu appear on click (JavaScript toggle class) */
    .global-header.menu-open .header-nav {
        display: block;
        position: absolute;
        top: 90px;
        left: 5%;
        width: 90%;
        background: #FFFFFF;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 20px;
        z-index: 200;
        transform: none;
        box-sizing: border-box;
    }

    .global-header.menu-open .header-menu {
        flex-direction: column;
        gap: 15px;
    }

    .global-header.menu-open .header-menu .sub-menu {
        position: static;
        transform: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        margin-top: 10px;
        padding-left: 20px;
        display: none;
    }

    /* We won't try to move the desktop CTA into the mobile menu with CSS. 
       We will just leave it hidden on mobile or position it at the bottom of the nav using absolute positioning if needed. 
       Let's hide it completely for now, as they usually use the nav links. */
    .global-header.menu-open .header-btn-demo {
        display: none;
    }
}