/**
 * Widget: header|v01
 * Header del tema: barra scura translucida, logo centrale, menu con dropdown,
 * selettore lingua. Fedele alle bozze figma01/figma02.
 */

.header-v01 {
    --hd-bg: rgba(12, 10, 9, 0.80);
    --hd-bg-solid: rgba(12, 10, 9, 0.95);
    --hd-cream: var(--website-third, #FFF5E2);
    --hd-cream-soft: rgba(255, 245, 226, 0.82);
    --hd-on-fg: #2A2A2A;                       /* testo sulla pill lingua attiva */
    --hd-border: rgba(255, 245, 226, 0.12);
    --hd-panel: #E7E5E4;
    --hd-item: #FFF7ED;
    --hd-item-hover: var(--website-fourth, #FFE9BD);
    --hd-ink: #2A2A2A;                          /* testo del dropdown (sempre scuro) */
    --hd-radius: 10px;
    --hd-max: var(--website-container-max-width, 1440px);
    display: block;
}

/* Skip link */
.header-v01 .header-v01-skip {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 1100;
    background: var(--hd-cream);
    color: var(--hd-ink);
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: top .2s ease;
}
.header-v01 .header-v01-skip:focus { top: 8px; }

/* Barra */
.header-v01 .header-v01-bar {
    width: 100%;
    background: var(--hd-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hd-border);
    transition: background .25s ease;
}

/* Variante header chiaro (classe aggiunta da header-class|v01 su #website-header) */
.header-v01 .header-v01-bar.bkgLight {
    --hd-bg: var(--website-color-light, #FFFAF0);
    --hd-bg-solid: var(--website-color-light, #FFFAF0);
    --hd-cream: #2A2A2A;                        /* foreground scuro */
    --hd-cream-soft: rgba(42, 42, 42, 0.82);
    --hd-on-fg: var(--website-color-light, #FFFAF0); /* testo chiaro sulla pill attiva (fondo scuro) */
    --hd-border: rgba(42, 42, 42, 0.14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Variante header trasparente (sopra hero/immagine; testo cream come il dark) */
.header-v01 .header-v01-bar.bkgTransparent {
    --hd-bg: transparent;
    --hd-bg-solid: transparent;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}
.header-v01 .header-v01-bar.is-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
}
/* Quando la admin bar di WP è presente, sticky non deve finirci sotto */
body.admin-bar .header-v01-bar.is-sticky { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .header-v01-bar.is-sticky{ top: 46px; }
}
.header-v01 .header-v01-bar.is-scrolled { background: var(--hd-bg-solid); }

.header-v01 .header-v01-inner {
    max-width: var(--hd-max);
    margin: 0 auto;
    padding: 16px 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}

/* Navigazione (liste) */
.header-v01 .header-v01-nav { min-width: 0; }
.header-v01 .header-v01-nav--left { justify-self: start; }
.header-v01 .header-v01-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 32px;
}
.header-v01 .header-v01-li { position: relative; display: flex; }

/* Link e toggle (stesso stile) */
.header-v01 .header-v01-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 6px 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    line-height: 1.1;
    color: var(--hd-cream-soft);
    text-decoration: none;
    transition: color .18s ease;
}
.header-v01 .header-v01-link:hover, .header-v01 .header-v01-link:focus-visible, .header-v01 .header-v01-toggle[aria-expanded="true"] { color: var(--hd-cream); }
.header-v01 .header-v01-link[aria-current="page"] { color: var(--hd-cream); font-weight: 600; }

.header-v01 .header-v01-chevron { transition: transform .2s ease; }
.header-v01 .header-v01-toggle[aria-expanded="true"] .header-v01-chevron { transform: rotate(180deg); }

/* Logo centrale */
.header-v01 .header-v01-logo {
    justify-self: center;
    display: inline-flex;
    align-items: center;
}
.header-v01 .header-v01-logo img { height: 48px; width: auto; }
/* Due loghi: cream su header scuro, scuro su header chiaro */
.header-v01 .header-v01-logo-dark { display: none; }
.header-v01 .header-v01-logo-cream { display: block; }
.header-v01 .header-v01-bar.bkgLight .header-v01-logo-cream { display: none; }
.header-v01 .header-v01-bar.bkgLight .header-v01-logo-dark { display: block; }
.header-v01 .header-v01-bar.bkgDark .header-v01-logo-cream { display: block; }
.header-v01 .header-v01-bar.bkgDark .header-v01-logo-dark { display: none; }

/* Zona destra */
.header-v01 .header-v01-end {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Selettore lingua (pills) */
.header-v01 .header-v01-langs { display: inline-flex; align-items: center; gap: 6px; }
.header-v01 .header-v01-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--hd-cream-soft);
    border: 1px solid var(--hd-cream);
    background: transparent;
    transition: background .18s ease, color .18s ease;
}
.header-v01 .header-v01-lang:hover { color: var(--hd-cream); }
.header-v01 .header-v01-lang.is-active {
    background: var(--hd-cream);
    color: var(--hd-on-fg);
    border-color: var(--hd-cream);
}

/* Dropdown (pannello chiaro, stile figma02) */
.header-v01 .header-v01-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    min-width: 260px;
    padding: 4px;
    background: var(--hd-panel);
    border-radius: var(--hd-radius);
    box-shadow: 0 24px 60px -28px rgba(13, 52, 36, 0.55);
    z-index: 1001;
}
.header-v01 .header-v01-dropdown[hidden] { display: none; }
.header-v01 .header-v01-dropdown::before {
    content: "";
    position: absolute;
    top: -16px; left: 0; right: 0;
    height: 16px;
}
.header-v01 .header-v01-dropdown-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.header-v01 .header-v01-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--hd-item);
    border-radius: 6px;
    color: var(--hd-ink);
    text-decoration: none;
    font-size: 1.0625rem;
    line-height: 1.2;
    transition: background .16s ease;
}
.header-v01 .header-v01-dropdown-link:hover, .header-v01 .header-v01-dropdown-link:focus-visible { background: var(--hd-item-hover); }
.header-v01 .header-v01-dropdown-arrow { opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; flex: none; }
.header-v01 .header-v01-dropdown-link:hover .header-v01-dropdown-arrow, .header-v01 .header-v01-dropdown-link:focus-visible .header-v01-dropdown-arrow { opacity: 1; transform: translateX(0); }
.header-v01 .header-v01-dropdown-link[aria-current="page"] { background: var(--hd-item-hover); font-weight: 600; }

/* Hamburger */
.header-v01 .header-v01-burger {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
    justify-self: start;
}
.header-v01 .header-v01-burger-box { display: block; width: 26px; height: 18px; position: relative; }
.header-v01 .header-v01-burger-box span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--hd-cream);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.header-v01 .header-v01-burger-box span:nth-child(1) { top: 0; }
.header-v01 .header-v01-burger-box span:nth-child(2) { top: 8px; }
.header-v01 .header-v01-burger-box span:nth-child(3) { top: 16px; }
.header-v01 .header-v01-burger[aria-expanded="true"] .header-v01-burger-box span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.header-v01 .header-v01-burger[aria-expanded="true"] .header-v01-burger-box span:nth-child(2) { opacity: 0; }
.header-v01 .header-v01-burger[aria-expanded="true"] .header-v01-burger-box span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* Panel mobile */
.header-v01 .header-v01-mobile {
    background: var(--hd-bg-solid);
    border-bottom: 1px solid rgba(255, 245, 226, 0.12);
    padding: 12px 28px 24px;
}
.header-v01 .header-v01-mobile[hidden] { display: none; }
.header-v01 .header-v01-mobile-list { list-style: none; margin: 0; padding: 0; }
.header-v01 .header-v01-mobile-item { border-bottom: 1px solid rgba(255, 245, 226, 0.10); }
.header-v01 .header-v01-mobile-item > a, .header-v01 .header-v01-mobile-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 2px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 1.0625rem;
    color: var(--hd-cream);
    text-decoration: none;
}
.header-v01 .header-v01-mobile-toggle[aria-expanded="true"] .header-v01-chevron { transform: rotate(180deg); }
.header-v01 .header-v01-mobile-sub { list-style: none; margin: 0; padding: 0 0 10px 14px; }
.header-v01 .header-v01-mobile-sub[hidden] { display: none; }
.header-v01 .header-v01-mobile-sub a {
    display: block;
    padding: 9px 2px;
    color: var(--hd-cream-soft);
    text-decoration: none;
    font-size: 1rem;
}
.header-v01 .header-v01-mobile-sub a:hover { color: var(--hd-cream); }
.header-v01 .header-v01-mobile-langs { display: flex; gap: 8px; margin-top: 18px; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .header-v01 .header-v01-nav, .header-v01 .header-v01-end .header-v01-langs{ display: none; }
    .header-v01 .header-v01-end{ display: none; }
    .header-v01 .header-v01-burger{ display: inline-flex; }
    .header-v01 .header-v01-inner{
        grid-template-columns: 1fr auto 1fr;
        padding: 12px 20px;
    }
    .header-v01 .header-v01-logo{ justify-self: center; }
}

@media (max-width: 575.98px) {
    .header-v01 .header-v01-logo img{ height: 40px; }
    .header-v01 .header-v01-mobile{ padding: 12px 20px 22px; }
}

@media (min-width: 992px) {
    .header-v01 .header-v01-mobile{ display: none !important; }
}