/*
 * header.css — mediaset-distribution-new
 * CSS ricavato esattamente dal Figma (CSS copiato da Figma + mockup header.png)
 *
 * Struttura:
 *   .site-header                  → wrapper sticky
 *   .site-header__topbar          → nav bar bianca 100px
 *   .site-header__inner           → fullwidth (no cap), padding 25px 100px
 *   .site-header__logo            → logo sx, 327x50px
 *   .site-header__nav             → navigazione centrata, 298px, gap 20px
 *   .nav-main li a                → Geologica 300 16px #323E48
 *   .nav-main li.current a        → Geologica 700 16px underline #323E48
 *   .site-header__subnav          → sotto-barra gradiente 70px
 *   .subnav-list li a             → Geologica 300 16px #FFFFFF
 */

/* ─── HEADER WRAPPER ─────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 9000;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ─── TOPBAR (nav bar bianca) ────────────────────────────────────────────── */
/* Dal Figma: background #FFFFFF, border-bottom 0.5px solid #323E48, height 100px */
.site-header__topbar {
    width: 100%;
    height: 100px;
    background: #FFFFFF;
    border-bottom: 0.5px solid #323E48;
    box-sizing: border-box;
}

/* Dal Figma: padding 25px 100px, gap 288px
   Nav centrata in assoluto rispetto alla barra */
.site-header__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 25px 100px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Nav centrata in assoluto — indipendente dalla larghezza del logo */
.site-header__nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* ─── LOGO ───────────────────────────────────────────────────────────────── */
/* Dal Figma: width 327px, height 50px */
.site-header__logo {
    width: 327px;
    height: 50px;
    flex-shrink: 0;
    flex: none;
    order: 0;
}

.site-header__logo a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.site-header__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

/* ─── NAVIGAZIONE ────────────────────────────────────────────────────────── */
/*
  Dal Figma — .navigazione:
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  padding: 0px 3px; gap: 20px; width: 298px; height: 50px;
  Centrata in assoluto rispetto alla barra header (vedi regola sopra)
*/

.nav-main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 3px;
    gap: 20px;
    width: 298px;
    height: 50px;
    list-style: none;
    margin: 0;
    padding: 0 3px;
}

.nav-main li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

/*
  Dal Figma — stato normale (testo medio):
  font-family: 'Geologica'; font-weight: 300; font-size: 16px; line-height: 20px;
  display: flex; align-items: center; text-align: center;
  font-feature-settings: 'ss01' on; color: #323E48;
*/
.nav-main li a {
    font-family: 'Geologica', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    font-feature-settings: 'ss01' on;
    color: #323E48;
    text-decoration: none;
    white-space: nowrap;
}

/*
  Dal Figma — stato attivo/hover (underline while hover):
  font-weight: 700; font-size: 16px; line-height: 18px;
  text-decoration-line: underline; color: #323E48;
*/
/* Hover — solo hover, NO classi WordPress current-menu
   La sottolineatura sulla voce attiva è gestita solo via JS (.is-active) */
.nav-main li a:hover {
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    text-decoration-line: underline;
    color: #323E48;
}

/* ─── HAMBURGER (solo mobile) ────────────────────────────────────────────── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    margin-left: auto;
}

.nav-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #323E48;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ─── SOTTO-BARRA GRADIENTE ──────────────────────────────────────────────── */
/*
  Dal Figma — Frame 20:
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  padding: 10px 20px; gap: 20px; width: 1728px; height: 70px;
  background: linear-gradient(90deg, #2B75F5 0%, #B900FF 50%, #323E48 100%);
  border-radius: 0px 0px 20px 20px;
*/
.site-header__subnav {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(90deg, #2B75F5 0%, #B900FF 50%, #323E48 100%);
    border-radius: 0px 0px 20px 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 8500;
}

.site-header__subnav .site-header__inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    gap: 20px;
    height: 70px;
}

/*
  Dal Figma — voci sotto-barra (testo medio su sfondo scuro):
  font-family: 'Geologica'; font-weight: 300; font-size: 16px; line-height: 20px;
  display: flex; align-items: center; text-align: center;
  font-feature-settings: 'ss01' on; color: #FFFFFF;
*/
.subnav-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.subnav-list li {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 50px;
    display: flex;
    align-items: center;
}

.subnav-list li a {
    font-family: 'Geologica', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    font-feature-settings: 'ss01' on;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
}

.subnav-list li a:hover,
.subnav-list li.current-menu-item a {
    font-weight: 700;
    text-decoration: underline;
}

/* ─── MENU MOBILE OVERLAY ────────────────────────────────────────────────── */
.mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #323E48;
    z-index: 9999;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    padding: 0 0 60px;
    box-sizing: border-box;
}

.mobile-nav.is-open {
    transform: translateX(0);
}

.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 28px 20px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
}

.mobile-nav__logo {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
}

.mobile-nav__close {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 8px;
}

.mobile-nav__nav {
    padding: 20px 0;
}

.mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu li {
    list-style: none;
    margin: 0;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu li a {
    display: block;
    font-family: 'Geologica', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    font-feature-settings: 'ss01' on;
    color: #FFFFFF;
    text-decoration: none;
    padding: 16px 28px;
}

.mobile-menu li a:hover {
    background: rgba(255, 255, 255, 0.07);
}

/* current-menu-item rimosso dal mobile menu — nessuna sottolineatura automatica
   come nel desktop, la voce attiva non resta evidenziata dopo la navigazione */

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    display: none;
}

.mobile-menu ul.is-open {
    display: block;
}

.mobile-menu ul li a {
    padding: 12px 28px 12px 44px;
    font-size: 14px;
    opacity: 0.85;
}

.mobile-menu li.menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu li.menu-item-has-children > a::after {
    content: '›';
    font-size: 20px;
    font-weight: 300;
    transition: transform 0.25s ease;
}

.mobile-menu li.menu-item-has-children.is-open > a::after {
    transform: rotate(90deg);
}

.mobile-nav__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.mobile-nav__overlay.is-visible {
    display: block;
}

/* ─── MEDIA QUERIES ──────────────────────────────────────────────────────── */

/* Tablet: ≤1280px — riduci gap e padding */
@media screen and (max-width: 1280px) {
    .site-header__inner {
        padding: 25px 40px;
        gap: 60px;
    }

    .site-header__logo {
        width: 220px;
    }

    .nav-main {
        width: auto;
        gap: 24px;
    }
}

/* Mobile: ≤1024px — passa a hamburger */
@media screen and (max-width: 1024px) {
    .site-header__topbar {
        height: 80px;
    }

    .site-header__inner {
        padding: 0 24px;
        gap: 0;
        justify-content: space-between;
    }

    .site-header__logo {
        width: 180px;
        height: 40px;
    }

    /* Nascondi nav desktop */
    .site-header__nav {
        display: none;
    }

    /* Mostra hamburger */
    .nav-toggle {
        display: flex;
    }

    /* Nascondi sotto-barra su mobile — è nel menu overlay */
    .site-header__subnav {
        display: none;
    }
}

/* Mobile piccolo: ≤768px */
@media screen and (max-width: 768px) {
    .site-header__topbar {
        height: 64px;
    }

    .site-header__inner {
        padding: 0 16px;
    }

    .site-header__logo {
        width: 150px;
        height: 34px;
    }
}

/* ─── SOTTO-BARRA: nascosta di default, visibile al click via JS ─────────── */
.site-header__subnav {
    display: none;
}

.site-header__subnav.is-open {
    display: flex;
}

/* Voce nav attiva (quella cliccata che ha aperto la sotto-barra) */
.nav-main > li.is-active > a {
    font-weight: 700;
    line-height: 18px;
    text-decoration-line: underline;
    color: #323E48;
}

/* ─── NASCONDE I SOTTOMENU DEL MENU DESKTOP ─────────────────────────────────
   I <ul> figli sono nel DOM (depth:2) per essere letti da JS,
   ma non devono mai essere visibili nella barra desktop */
.site-header__nav .nav-main ul,
.site-header__nav .nav-main li ul {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}