/* ==========================================================================
   header-desktop.css
   Desktop header and navigation, including the transparent homepage
   header, sticky states, dropdown menus and early mobile nav per language.

   01. Logos
   02. Transparent Header Background
   03. Transparent Header Hover Styles
   04. Standard Header (scrolled or internal pages)
   05. Standard Header Hover Styles
   06. Desktop Menu Items
   07. Dropdown Menus
   08. Mobile Sticky Transition
   09. Language-Specific Early Mobile Nav (Weglot)
   ========================================================================== */

/* ==== 01. Logos ==== */
/* Both logos start hidden; the header state decides which one shows. */
.logo-white {
    display: none;
}
.logo-black {
    display: block;
}

/* ==== 02. Transparent Header Background ==== */
body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) {
    background-color: transparent !important;
}

body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .logo-white {
    display: block;
}

body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .logo-black {
    display: none;
}

body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .elementor-item {
    color: white !important;
}

body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .sub-arrow svg path {
    fill: var(--color-white-a100);
}

/* ==== 03. Transparent Header Hover Styles ==== */
body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .elementor-item:hover {
    background-color: var(--color-white-a20);
    border-radius: 100px;
    transition:
        background-color 0.3s ease,
        border-radius 0.3s ease;
}

/* Divider (Transparent) */
body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .header-nav {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Buttons (Transparent) */
body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .btn-primary.inverse .elementor-button {
    background: transparent;
    color: white;
    border: 1px solid white;
}

body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .btn-primary.inverse .elementor-button:hover {
    background: transparent;
    color: var(--color-white-a70) !important;
    border: 1px solid var(--color-white-a70) !important;
}

body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .btn-tertiary .elementor-button {
    background: transparent;
    color: var(--color-white-a100) !important;
    font-weight: var(--font-weight-500);
}

body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .link-signin .elementor-heading-title {
    color: var(--content-primary-inverse);
}

body.has-transparent-header .custom-sticky-header:not(.elementor-sticky--effects) .btn-tertiary .elementor-button:hover {
    color: var(--color-white-a70) !important;
}

/* ==== 04. Standard Header (scrolled or internal pages) ==== */
.custom-sticky-header.elementor-sticky--effects,
body:not(.has-transparent-header) .custom-sticky-header {
    background-color: var(--color-white-a90) !important;
    transition: background-color 0.3s ease;
    backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.custom-sticky-header.elementor-sticky--effects .elementor-item,
body:not(.has-transparent-header) .custom-sticky-header .elementor-item {
    color: var(--content-primary);
}

.custom-sticky-header.elementor-sticky--effects .sub-arrow svg path,
body:not(.has-transparent-header) .custom-sticky-header .sub-arrow svg path {
    fill: var(--content-primary);
}

/* ==== 05. Standard Header Hover Styles ==== */
.custom-sticky-header.elementor-sticky--effects .elementor-item:hover,
body:not(.has-transparent-header) .custom-sticky-header .elementor-item:hover {
    background-color: var(--background-tertiary);
    border-radius: 100px;
}

/* Divider (Scrolled/Internal) */
.custom-sticky-header.elementor-sticky--effects .header-nav,
body:not(.has-transparent-header) .custom-sticky-header .header-nav {
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

/* Buttons (Scrolled/Internal) */
.custom-sticky-header.elementor-sticky--effects .btn-primary.inverse .elementor-button,
body:not(.has-transparent-header) .custom-sticky-header .btn-primary.inverse .elementor-button {
    background-color: transparent;
    color: var(--color-gray-90) !important;
    border: 1px solid var(--color-gray-90);
}

/* Active menu item */
.elementor-item-active {
    color: #fff !important;
}

.elementor-location-header .custom-sticky-header {
    background: transparent;
}

/* ==== 06. Desktop Menu Items ==== */
.header-nav a.elementor-item {
    color: var(--content-primary);
    font-family: var(--typography-font-primary);
    text-decoration: none !important;
    font-weight: var(--weight-bold) !important;
    font-size: var(--font-size-14);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-28);
}

@media (max-width: 1366px) {
    .header-nav a.elementor-item {
        /* keep padding removed at this breakpoint too */
    }
}

/* Hover State */
.header-nav a.elementor-item:hover {
    background-color: var(--color-black-a08);
    border-radius: 100px;
}

/* Active (Current) State  */
.header-nav .current-menu-item > a.elementor-item {
    color: var(--content-primary) !important;
}

/* Hover/Focus Parent Item or Dropdown */
.header-nav .topnav-blackout:hover > a,
.header-nav .topnav-blackout:focus-within > a {
    background-color: var(--color-black-a08);
    border-radius: 100px;
}

/* ==== 07. Dropdown Menus ==== */

/* Parent anchors submenu and exposes hover bridge */
.header-nav li.menu-item-has-children {
    position: relative;
    z-index: 1000;
    overflow: visible; /* ensure bridge/dropdown are hoverable */
}

/* Hover bridge on the parent li (fills the 20px outside gap) */
.header-nav li.menu-item-has-children::before {
    content: "";
    position: absolute;
    top: 100%; /* immediately below the li */
    left: 0;
    width: 100%;
    height: 20px; /* the gap distance */
    background: transparent;
    pointer-events: auto; /* keeps :hover while crossing the gap */
    z-index: 2; /* sit above backgrounds, below the dropdown */
}

/* Reset submenu list items */
.header-nav .sub-menu li {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.header-nav .sub-menu .elementor-sub-item {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Submenu container — placed 20px below the parent, no transform */
.header-nav ul.sub-menu,
.header-nav .elementor-nav-menu--dropdown {
    position: absolute !important;
    top: calc(100% + 20px) !important; /* exact visual gap below parent */
    left: 0 !important;
    transform: none !important; /* no translate */
    margin: 0 !important;
    /* Visibility model */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Box styling */
    z-index: 9999 !important;
    display: block !important;
    width: max-content !important;
    min-width: 250px !important;
    padding: 8px !important;
    background-color: var(--color-white-a100) !important;
    border: 1px solid var(--color-black-a12) !important;
    border-radius: var(--image-border-radius) !important;
    box-sizing: border-box !important;
    /* No animations that could reflow */
    transition: none !important;
    animation: none !important;
}

/* Show submenu on hover/focus (geometry stays identical) */
.header-nav li.menu-item-has-children:hover > ul.sub-menu,
.header-nav li.menu-item-has-children:focus-within > ul.sub-menu,
.header-nav li.menu-item-has-children:hover > .elementor-nav-menu--dropdown,
.header-nav li.menu-item-has-children:focus-within > .elementor-nav-menu--dropdown {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    top: calc(100% + 20px) !important; /* lock position in shown state */
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
}

/* Submenu links */
.header-nav .sub-menu .elementor-sub-item {
    display: block;
    color: var(--content-primary);
    font-family: var(--typography-font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-016);
    text-decoration: none;
    border-radius: var(--image-border-radius);
    padding-left: 12px !important;
    padding-right: 12px !important;
    transition: none !important;
}

/* Submenu link hover */
.header-nav .sub-menu .elementor-sub-item:hover {
    background-color: var(--background-tertiary);
    border-radius: var(--image-border-radius);
    color: var(--color-black-a100);
    transition: none !important;
}

/* Active submenu item */
.header-nav .sub-menu .current-menu-item .elementor-sub-item {
    background-color: var(--color-black-a100);
    color: var(--color-white-a100) !important;
    border-radius: var(--image-border-radius);
    transition: none !important;
}

/* ==== 08. Mobile Sticky Transition ==== */
@media (max-width: 768px) {
    .custom-sticky-header.elementor-sticky--effects,
    body:not(.has-transparent-header) .custom-sticky-header {
        transition: none !important;
    }
}

/* Duplicate of the rule above (kept for now; safe to remove later) */
@media (max-width: 768px) {
    .custom-sticky-header.elementor-sticky--effects,
    body:not(.has-transparent-header) .custom-sticky-header {
        transition: none !important;
    }
}

/* ==== 09. Language-Specific Early Mobile Nav (Weglot) ====
   Elementor's own breakpoint switches to mobile nav at 1024px.
   Translated nav labels can run longer than the English originals
   the layout was built around, so some languages need extra room
   before that switch happens. Weglot sets the html lang attribute
   per language, so each override below only fires for its own
   language, at its own tested width. English and Chinese already
   fit inside the default 1024px, so neither needs an entry here.

   The site uses a custom off-canvas menu (triggered via
   .hamburger-menu) rather than Elementor's default toggle, so
   Elementor's own .elementor-menu-toggle is hidden everywhere,
   and .hamburger-menu is what gets force-shown in each language
   range below. */

/* Elementor's own menu toggle is not used anywhere, so it is always hidden */
.elementor-location-header .elementor-menu-toggle {
    display: none !important;
}

@media (max-width: 1152px) {
    html[lang="de"] .elementor-location-header .elementor-nav-menu--main {
        display: none !important;
    }
    html[lang="de"] .elementor-location-header .hamburger-menu {
        display: inline-flex !important;
    }
}

@media (max-width: 1191px) {
    html[lang="es"] .elementor-location-header .elementor-nav-menu--main {
        display: none !important;
    }
    html[lang="es"] .elementor-location-header .hamburger-menu {
        display: inline-flex !important;
    }
}

@media (max-width: 1238px) {
    html[lang="fr"] .elementor-location-header .elementor-nav-menu--main {
        display: none !important;
    }
    html[lang="fr"] .elementor-location-header .hamburger-menu {
        display: inline-flex !important;
    }
}

@media (max-width: 1271px) {
    html[lang="ja"] .elementor-location-header .elementor-nav-menu--main {
        display: none !important;
    }
    html[lang="ja"] .elementor-location-header .hamburger-menu {
        display: inline-flex !important;
    }
}

@media (max-width: 1059px) {
    html[lang="en-US"] .elementor-location-header .elementor-nav-menu--main {
        display: none !important;
    }
    html[lang="en-US"] .elementor-location-header .hamburger-menu {
        display: inline-flex !important;
    }
}