/* excire.com — site header
 * Values measured from the live site (2026-07-11):
 * transparent over the hero at page top, turns white when scrolled (sticky);
 * nav is UPPERCASE Maven Pro 15px/500 black; logo (dark/blue) ~36px tall;
 */

/* Measured on live: the header bar sits in normal flow at the top of the
   page (white body behind it), BLACK uppercase nav and the dark/blue logo on
   ALL pages — it does not overlay the hero. Sticky white bar with a subtle
   shadow when scrolling. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--header-bg-sticky);   /* white */
    transition: box-shadow .3s ease;
}
.site-header[data-scrolled] {
    box-shadow: var(--header-shadow-sticky);
}

.site-header__inner {
    max-width: var(--container-max);       /* 1356px */
    margin-inline: auto;
    padding-inline: var(--container-pad);
    min-height: var(--header-height);      /* 66px */
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { width: auto; height: 36px; }   /* measured */

.site-nav { margin-left: auto; }

.site-nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-base);         /* Maven Pro */
    font-size: var(--fs-nav);              /* 15px */
    font-weight: var(--fw-medium);         /* 500 */
    text-transform: uppercase;             /* measured */
    color: var(--color-black);
    padding: var(--nav-link-pad);          /* 13px 20px */
    white-space: nowrap;
}
.site-nav__link:hover { color: var(--color-primary); }

/* Dropdown caret — filled down-triangle (matches Font Awesome fa-caret-down) */
.site-nav__item.has-children > .site-nav__link::after {
    content: "";
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 2px;
}

/* ---- Submenus (desktop: hover) ---- */
.site-nav__item.has-children { position: relative; }
.site-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0;                                  /* live: no vertical padding */
    position: absolute;
    min-width: max-content;
    background: rgba(255, 255, 255, .88);         /* live: semi-transparent white */
    box-shadow: none;                            /* live: no shadow */
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s .15s;
}
.site-nav__item.has-children:hover > .site-nav__submenu,
.site-nav__item.has-children:focus-within > .site-nav__submenu,
.site-nav__item.has-children.is-open > .site-nav__submenu {   /* touch: JS toggles is-open */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .15s ease, transform .15s ease;
}
.site-nav__sublink {
    display: block;
    padding: 10px 20px;                 /* measured */
    font-family: var(--font-button);    /* live: Roboto (not Maven Pro) */
    font-size: var(--fs-nav);           /* 15px */
    font-weight: var(--fw-medium);      /* 500 */
    text-transform: none;               /* submenu items are normal case */
    color: #33373d;                     /* measured */
    white-space: nowrap;
}
.site-nav__sublink:hover { color: var(--color-primary); }

/* Header actions: language switcher only (live shows no search, no CTA) */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
/* (no header CTA — the live "excire business" button is hidden on live) */

/* Language switcher — text dropdown like live (Deutsch/English), reuses the
   nav dropdown styles via site-nav__* classes. */
.site-header__lang { list-style: none; }
.site-header__lang > .site-nav__link { text-transform: none; }

/* ---- Hamburger toggle (hidden on desktop) ---- */
.site-header__toggle {
    display: none;
    margin-left: auto;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer;
}
.site-header__toggle-bar {
    display: block;
    width: 26px; height: 2px;
    background: var(--color-black);
    transition: transform .2s ease, opacity .2s ease;
}

/* ======================================================================
   Mobile (<= 1024px): off-canvas nav, hamburger visible
   ====================================================================== */
@media (max-width: 1024px) {
    .site-header { background: var(--header-bg-sticky); box-shadow: var(--header-shadow-sticky); }
    .site-header__toggle { display: flex; order: 3; margin-left: 0; }
    .site-header__actions { margin-left: auto; }

    /* Off-canvas drawer. Closed = display:none so its box never extends the
       page's scroll width (a translated-off-screen fixed element would add
       horizontal scroll on every mobile page). Open slides in from the right. */
    .site-nav {
        display: none;
        position: fixed;
        inset: var(--header-height) 0 0 auto;
        width: min(340px, 85vw);
        margin: 0;
        background: var(--color-white);
        box-shadow: var(--shadow);
        overflow-y: auto;
        padding: var(--space-3) 0;
        animation: site-nav-in .25s ease;
    }
    .site-header[data-open] .site-nav { display: block; }
    @keyframes site-nav-in {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }
    .site-header[data-open] .site-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header[data-open] .site-header__toggle-bar:nth-child(2) { opacity: 0; }
    .site-header[data-open] .site-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-nav__list { flex-direction: column; align-items: stretch; }
    .site-nav__link { padding: 14px var(--space-4); justify-content: space-between; }

    /* Drawer submenus stay collapsed and expand only when their parent is tapped
       (header.js toggles .is-open). Scoped to .site-nav so the header-bar language
       switcher keeps its own dropdown. */
    .site-nav .site-nav__submenu {
        position: static;
        transform: none; box-shadow: none;
        background: var(--color-bg-alt);
        overflow: hidden;
        max-height: 0; opacity: 0; visibility: hidden;
        padding: 0;
        transition: max-height .25s ease, opacity .2s ease;
    }
    .site-nav .site-nav__item.is-open > .site-nav__submenu {
        max-height: 60vh; opacity: 1; visibility: visible;
        padding: 0 0 var(--space-2);
    }
    .site-nav__sublink { padding: 12px var(--space-6); }

    /* Language switcher: no globe icon, only the current language is visible.
       Tapping it opens the Deutsch/English list (header.js toggles .is-open). */
    .site-header__lang > .site-nav__link > svg { display: none; }
    .site-header__lang > .site-nav__link { padding-inline: 0; gap: 4px; }
    .site-header__lang > .site-nav__submenu {
        right: 0;                        /* anchor to the right edge, stays on screen */
        background: var(--color-white);
        box-shadow: var(--shadow);
    }
}

/* Narrow phones: tighten header so logo + language switch + toggle fit (no h-scroll) */
@media (max-width: 560px) {
    .site-header__inner { padding-inline: 14px; gap: 14px; }
}