/* =====================================================================
   SeiserAlm Custom Header — header.css  v1.9.0
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
/* Layout1: no top padding (header is transparent overlay) */
/* Layout2: padding set by JS (setBodyPadding) on load/resize */
body:not(.sah-page-layout2) { padding-top: 0; }

/* ── HEADER BASE ─────────────────────────────────────────────────── */
#sah-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9990;
    font-family: 'Overpass', sans-serif;
    transition:
        background   0.5s ease,
        box-shadow   0.5s ease,
        height       0.5s ease;
}

/* Admin bar offset */
.admin-bar #sah-header       { top: 32px; }
.admin-bar #sah-menu-overlay { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar #sah-header       { top: 46px; }
    .admin-bar #sah-menu-overlay { top: 46px; }
}

/* ── MENU OVERLAY ────────────────────────────────────────────────── */
#sah-menu-overlay {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 9991;
    pointer-events: none;
}
#sah-header.menu-open #sah-menu-overlay {
    opacity: 1;
    visibility: visible;
}
.sah-overlay-tint { position: absolute; inset: 0; }

/* ── HEADER INNER ────────────────────────────────────────────────── */
.sah-header-inner {
    position: relative;
    z-index: 9993;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 28px;
    height: 90px; /* overridden by inline CSS */
    transition: height 0.5s ease;
}

/* ── LAYOUT 1 — transparent → sticky ────────────────────────────── */
#sah-header.sah-layout1 { background: transparent; }
/* Bar background + shadow + link colours appear AFTER logo swap (both triggered by sah-sticky-active) */
#sah-header.sah-layout1.sah-sticky-active {
    background: #fff;
    box-shadow: 0 2px 18px rgba(0,0,0,0.10);
}
/* ── LAYOUT 2 — always white ─────────────────────────────────────── */
#sah-header.sah-layout2 {
    background: #fff;
    box-shadow: 0 2px 18px rgba(0,0,0,0.10);
}

/* ── LOGOS ───────────────────────────────────────────────────────── */
.sah-logo-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    transition: top 0.5s ease;
}
.sah-logo-wrap a   { display: block; line-height: 0; }
.sah-logo-wrap img { width: auto; transition: max-height 0.5s ease, opacity 0.4s ease; }

/* which logo per state */
#sah-header.sah-layout1:not(.sah-sticky-active):not(.menu-open) .sah-logo-main   { display: block; }
#sah-header.sah-layout1:not(.sah-sticky-active):not(.menu-open) .sah-logo-sticky { display: none;  }
#sah-header.sah-layout1:not(.sah-sticky-active):not(.menu-open) .sah-logo-menu   { display: none;  }

#sah-header.sah-layout1.sah-sticky-active:not(.menu-open) .sah-logo-main   { display: none;  }
#sah-header.sah-layout1.sah-sticky-active:not(.menu-open) .sah-logo-sticky { display: block; }
#sah-header.sah-layout1.sah-sticky-active:not(.menu-open) .sah-logo-menu   { display: none;  }

#sah-header.sah-layout2:not(.menu-open) .sah-logo-main   { display: none;  }
#sah-header.sah-layout2:not(.menu-open) .sah-logo-sticky { display: block; }
#sah-header.sah-layout2:not(.menu-open) .sah-logo-menu   { display: none;  }

#sah-header.menu-open .sah-logo-main   { display: none  !important; }
#sah-header.menu-open .sah-logo-sticky { display: none  !important; }
#sah-header.menu-open .sah-logo-menu   { display: block !important; }

/* colour transitions for elements inside header */
.sah-hamburger,
.sah-sep,
.sah-lang-current,
.sah-search-btn { transition: color 0.5s ease; }

/* ── LEFT: hamburger + WPML ─────────────────────────────────────── */
.sah-left {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 9994;
}

/* HAMBURGER */
.sah-hamburger {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    color: #fff;
    font-family: 'Overpass', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.sah-hamburger:hover,
.sah-hamburger:focus,
.sah-hamburger:active {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ddd;
}
#sah-header.sah-sticky-active .sah-hamburger,
#sah-header.sah-layout2 .sah-hamburger       { color: #222; }
#sah-header.sah-sticky-active .sah-hamburger:hover,
#sah-header.sah-layout2 .sah-hamburger:hover { color: #777; }
#sah-header.menu-open .sah-hamburger          { color: #fff !important; }
#sah-header.menu-open .sah-hamburger:hover    { color: #ddd !important; }

.sah-ham-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}
.sah-ham-lines span {
    display: block; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: all 0.3s ease;
}
.sah-ham-close { display: none; font-size: 20px; line-height: 1; }
#sah-header.menu-open .sah-ham-lines { display: none; }
#sah-header.menu-open .sah-ham-close { display: inline; }

/* SEPARATOR */
.sah-sep { color: #fff; opacity: 0.5; font-size: 13px; }
#sah-header.sah-sticky-active .sah-sep,
#sah-header.sah-layout2 .sah-sep    { color: #555; opacity: 1; }
#sah-header.menu-open .sah-sep      { color: #fff !important; opacity: 0.5 !important; }

/* WPML */
.sah-wpml { position: relative; cursor: pointer; }
.sah-lang-current {
    font-family: 'Overpass', sans-serif;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #fff;
}
#sah-header.sah-sticky-active .sah-lang-current,
#sah-header.sah-layout2 .sah-lang-current { color: #222; }
#sah-header.menu-open .sah-lang-current   { color: #fff !important; }

.sah-lang-list {
    display: none;
    position: absolute;
    top: calc(100% + 8px); left: 0;
    background: #fff;
    list-style: none; margin: 0; padding: 6px 0;
    min-width: 70px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    border-radius: 3px;
    z-index: 9999;
}
.sah-wpml:hover .sah-lang-list { display: block; }
.sah-lang-list li a {
    display: block; padding: 7px 14px;
    font-size: 13px; font-weight: 600;
    color: #333; text-decoration: none;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.sah-lang-list li a:hover,
.sah-lang-list li.active a { background: #f5f5f5; }

/* ── RIGHT: CTA BUTTONS ─────────────────────────────────────────── */
.sah-right {
    display: flex;
    align-items: center;
    gap: clamp(2px, 1.2vw, 20px);
    position: relative;
    z-index: 9994;
}

.sah-btn {
    display: inline-block;
    padding: 13px clamp(12px, 1.6vw, 24px);
    font-family: 'Overpass', sans-serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase;
    text-decoration: none; line-height: 1; white-space: nowrap;
    transition: opacity 0.2s ease;
}
.sah-btn:hover { opacity: 0.88; color: #fff; }
.sah-btn--red  { background: #8B1E1E; color: #fff; }
.sah-btn--gold { background: #A8872C; color: #fff; }

/* ── FLYOUT NAV ─────────────────────────────────────────────────── */
.sah-nav {
    position: fixed;
    inset: 0;
    z-index: 9992;
    display: flex;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#sah-header.menu-open .sah-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* inner: two-column layout on desktop */
.sah-nav-inner {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 120px 60px 60px;
    overflow-y: auto;
    max-height: 100vh;
}

/* PRIMARY LIST */
.sah-nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.sah-nav-item { position: relative; }

/* ── CTA nella nav (visibile solo su tablet/mobile con menu aperto) ─ */
.sah-nav-cta {
    display: none; /* hidden on desktop — shown via responsive CSS */
}

.sah-nav-link {
    font-family: 'Overpass', sans-serif;
    font-size: 50px;
    font-weight: 300;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    line-height: 1.08;          /* 1.2 × 0.9 = 1.08  (-10%) */
    display: block;
    padding: 4px 0 0;
    transition: color 0.2s ease, font-weight 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

/* hover/active state */
.sah-nav-item.sah-hover > .sah-nav-link,
.sah-nav-item:hover > .sah-nav-link,
.sah-nav-item.is-current > .sah-nav-link {
    color: #fff;
    font-weight: 600;
}

/* ── HORIZONTAL LINE ─────────────────────────────────────────────
   The line is placed BELOW the primary nav link text (as a
   separate block-level element), not inline beside it.
   It connects visually from the nav item toward the submenu.
   We use a pseudo-element on a wrapper div approach:
   — ::after on the nav-link itself (display:block) draws the line
     below the text.
   Only for items that have a submenu (controlled by parent hover).
─────────────────────────────────────────────────────────────────── */
.sah-nav-item.sah-hover > .sah-nav-link::after,
.sah-nav-item.is-current > .sah-nav-link::after {
    content: '';
    display: block;
    width: 80px;
    height: 2px;
    background: rgba(255,255,255,0.5);
    margin-top: 6px;
}
.sah-nav-item.is-current > .sah-nav-link::after {
    background: rgba(255,255,255,0.7);
}
/* Only show line on items that have a submenu — .has-submenu class added by JS */
.sah-nav-item:not(.has-submenu) > .sah-nav-link::after {
    display: none !important;
}

/* ── SUBMENU (desktop) ───────────────────────────────────────────
   Positioned absolutely to the right of the primary list.
   The hover bridge (JS grace delay) keeps it open while cursor
   travels from parent item across the gap.
─────────────────────────────────────────────────────────────────── */
.sah-submenu {
    position: absolute;
    left: calc(100% + 80px);
    top: 50%;
    transform: translateY(-50%);
    list-style: none;
    margin: 0; padding: 0;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    /* invisible bridge: fills the gap on the left */
    padding-left: 80px;
    margin-left: -80px;
}
/* show via JS class (sah-hover) — desktop */
.sah-nav-item.sah-hover > .sah-submenu { display: flex; }

.sah-submenu .sah-nav-link {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 32px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    padding: 2px 0;
    white-space: normal;
}
.sah-submenu .sah-nav-link::after { display: none !important; }
.sah-submenu .sah-nav-item:hover > .sah-nav-link,
.sah-submenu .sah-nav-item.is-current > .sah-nav-link { color: #fff; font-weight: 400; }