/* =========================================================================
   BARRA IN ALTO — su tutto il sito
   Markup: header.php   ·   Comportamento: assets/js/menu.js

   Il disegno viene dalla home, dove era nato. Qui i valori sono scritti per
   esteso invece che con le variabili `--hm-*`: quelle esistono solo dentro
   `.hm`, cioè solo sulla home, e fuori da lì non varrebbero niente.

   Tutto è agganciato alla classe `.site-nav`. La versione precedente di questo
   file usava il selettore `header` nudo, che colpiva ogni elemento <header>
   della pagina — compreso l'hero della home, che è un <header> e si sarebbe
   ritrovato fisso in cima.

   I due modi della barra sono spiegati in header.php.
   ========================================================================= */

:root {
    /* quanto è alta la barra: serve a spostare in giù il corpo delle pagine
       che non hanno la barra trasparente, o il primo pezzo finirebbe sotto */
    --site-nav-h: 82px;
}

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 26px 48px;
    background: #16100f;
    border-bottom: 1px solid rgba(244, 239, 233, 0);
    font-family: var(--fd);
    transition: background .55s cubic-bezier(.4, 0, .2, 1),
                padding .55s cubic-bezier(.4, 0, .2, 1),
                -webkit-backdrop-filter .55s ease,
                backdrop-filter .55s ease,
                box-shadow .55s ease,
                border-color .55s ease;
}

/* Barra trasparente: la pagina si apre con una foto a tutto schermo e la barra
   ci galleggia sopra. Fondo, sfocatura e ombra li scrive il JS scorrendo. */
body.transparent-menu .site-nav {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Barra piena: il contenuto parte sotto di lei invece che sotto di essa.
   Se la barra è nascosta del tutto ("Nascondi header") lo scarto non serve. */
body:not(.transparent-menu):not(.hide-header) { padding-top: var(--site-nav-h); }

/* con la barra di amministrazione di WordPress la pagina scende di 32px */
body.admin-bar .site-nav { top: 32px; }


/* ---------- il marchio ---------- */

.site-nav-marchio {
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1;
    text-decoration: none;
}
.site-nav-nome {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: #f4efe9;
}
.site-nav-ruolo {
    font-family: var(--fs);
    font-style: italic;
    font-size: 11.5px;
    letter-spacing: .1em;
    color: #d69a95;
}


/* ---------- le voci ---------- */

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
}
/* Le voci arrivano da wp_nav_menu, che le impacchetta in <ul><li><a>: gli
   stili vanno sull'<a>, e alla lista si tolgono pallini e rientri. */
.site-nav-elenco {
    display: flex;
    align-items: center;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav-elenco a {
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(244, 239, 233, .62);
    text-decoration: none;
    transition: color .4s ease, letter-spacing .4s ease;
}
.site-nav-elenco a:hover,
.site-nav-elenco a:focus-visible {
    color: #f4efe9;
    letter-spacing: .24em;
}
/* la voce della pagina in cui ci si trova resta accesa */
.site-nav-elenco .current-menu-item > a,
.site-nav-elenco .current_page_item > a,
.site-nav-elenco .current-menu-ancestor > a { color: #f4efe9; }
.site-nav-cta {
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #d69a95;
    padding: 11px 20px;
    border: 1px solid rgba(214, 154, 149, .45);
    text-decoration: none;
    transition: background .5s ease, color .5s ease, border-color .5s ease;
}
.site-nav-cta:hover,
.site-nav-cta:focus-visible {
    background: rgba(214, 154, 149, .12);
    border-color: #d69a95;
    color: #f4efe9;
}


/* ---------- sottomenu ----------
   Li disegna Hornoi_Mega_Menu_Walker, che dà tre classi diverse:
     .dropdown-panel    pannello stretto sotto la voce
     .mega-menu-panel   fascia a tutta larghezza, in colonne
     .sub-menu          i livelli più in basso, dentro il mega

   Si aprono in CSS, con `:hover` e `:focus-within`: il secondo li fa aprire
   anche a chi naviga con il tabulatore, e insieme non serve una riga di
   JavaScript. Si usano `opacity` e `visibility` invece di `display`, perché
   `display` non si può animare e il pannello comparirebbe di scatto.
   ------------------------------------------------------------------------ */

.site-nav-elenco > li { position: relative; }

.site-nav-elenco .sub-menu {
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}

/* Il pannello sta 26px sotto la voce, quanto la spaziatura della barra. In
   mezzo ci sarebbe il vuoto, e passandoci sopra col mouse il pannello si
   richiuderebbe: questo ponte invisibile tiene unito il percorso. */
.site-nav-elenco .sub-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 30px;
}

.site-nav-elenco > li:hover > .sub-menu,
.site-nav-elenco > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.site-nav-elenco .sub-menu a {
    display: block;
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(244, 239, 233, .62);
    text-decoration: none;
    transition: color .35s ease;
}
.site-nav-elenco .sub-menu a:hover,
.site-nav-elenco .sub-menu a:focus-visible { color: #f4efe9; }

/* ---- pannello stretto ---- */
.site-nav-elenco .dropdown-panel {
    top: calc(100% + 26px);
    left: -22px;
    min-width: 230px;
    padding: 20px 22px;
    background: rgba(22, 16, 15, .92);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    border: 1px solid rgba(244, 239, 233, .12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}
.site-nav-elenco .dropdown-panel a { padding: 9px 0; }

/* ---- fascia a tutta larghezza ----
   La voce che la contiene torna `static`, così il pannello non si misura più
   su di lei ma sulla barra: è l'unico modo perché possa andare da bordo a
   bordo dello schermo. */
.site-nav-elenco > li.mega-menu { position: static; }
.site-nav-elenco .mega-menu-panel {
    top: calc(100% + 26px);
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 4px 44px;
    padding: 38px 48px 42px;
    background: rgba(22, 16, 15, .94);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    border-top: 1px solid rgba(244, 239, 233, .12);
    border-bottom: 1px solid rgba(244, 239, 233, .12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}
.site-nav-elenco .mega-menu-panel > li > a {
    padding: 10px 0;
    color: #f4efe9;
    letter-spacing: .2em;
}
/* dentro il mega, il terzo livello è un elenco sotto la sua voce */
.site-nav-elenco .mega-menu-panel .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    padding: 0 0 12px;
}
.site-nav-elenco .mega-menu-panel .sub-menu::before { content: none; }
.site-nav-elenco .mega-menu-panel .sub-menu a {
    padding: 7px 0;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: none;
    color: rgba(244, 239, 233, .5);
}


/* ---------- pulsante e pannello del telefono ---------- */

.site-nav-burger {
    display: none;           /* compare sotto i 900px */
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(244, 239, 233, .28);
    cursor: pointer;
}
.site-nav-barre {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}
.site-nav-barre span {
    position: absolute;
    left: 0;
    width: 20px;
    height: 1px;
    background: #f4efe9;
}
.site-nav-barre span:nth-child(1) { top: 0;     transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.site-nav-barre span:nth-child(2) { top: 6.5px; transition: opacity .3s ease; }
.site-nav-barre span:nth-child(3) { top: 13px;  transition: transform .4s cubic-bezier(.4, 0, .2, 1); }

/* aperto: le due barre esterne diventano una X, quella di mezzo sparisce */
.site-nav-burger[aria-expanded="true"] .site-nav-barre span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-nav-burger[aria-expanded="true"] .site-nav-barre span:nth-child(2) { opacity: 0; }
.site-nav-burger[aria-expanded="true"] .site-nav-barre span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.site-menu {
    position: fixed;
    inset: 0;
    z-index: 49;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0 32px;
    background: rgba(22, 16, 15, .86);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s ease;
}
.site-menu.is-open {
    opacity: 1;
    visibility: visible;
}
.site-menu-elenco {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-menu-cta { text-decoration: none; }
.site-menu-elenco a {
    display: block;
    text-decoration: none;
    padding: 20px 0;
    border-bottom: 1px solid rgba(244, 239, 233, .12);
    font-family: var(--fs);
    font-size: 30px;
    color: #f4efe9;
}
.site-menu-elenco .current-menu-item > a,
.site-menu-elenco .current_page_item > a { color: #d69a95; }

/* Sul telefono i sottomenu sono pannelli che entrano da destra, non un elenco
   rientrato: si vede una voce per volta, e non si perde il segno.

   Ogni `.sub-menu` copre tutto il pannello del menu e sta fuori schermo finché
   il JS non gli mette `.is-open`. I livelli più in basso si impilano sopra il
   loro, uno dentro l'altro, senza bisogno di contarli. */

.site-menu-elenco .sub-menu {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0 32px;
    list-style: none;
    background: #16100f;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.site-menu-elenco .sub-menu.is-open { transform: none; }

.site-menu-elenco .sub-menu a {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid rgba(244, 239, 233, .12);
    font-family: var(--fs);
    font-size: 26px;
    letter-spacing: 0;
    text-transform: none;
    color: #f4efe9;
}

/* La voce che ha figli non porta alla sua pagina: apre il pannello. La freccia
   lo dice, ed è l'unico segnale che chi guarda ha per capirlo. */
.site-menu-elenco .has-sub > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.site-menu-elenco .has-sub > a::after {
    content: '→';
    font-family: var(--fd);
    font-size: 18px;
    color: #d69a95;
}

/* la riga in cima al pannello: indietro a sinistra, la voce padre accanto */
.site-menu-indietro {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(244, 239, 233, .12);
}
.site-menu-indietro button {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(244, 239, 233, .28);
    color: #f4efe9;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.site-menu-indietro > a,
.site-menu-indietro > span {
    padding: 0;
    border-bottom: 0;
    font-family: var(--fd);
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(244, 239, 233, .55);
}
.site-menu-cta {
    margin-top: 26px;
    padding: 18px 0;
    text-align: center;
    border: 1px solid rgba(214, 154, 149, .5);
    font-size: 11.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #d69a95;
}


/* ---------- schermi stretti ---------- */

@media (max-width: 900px) {
    :root { --site-nav-h: 66px; }

    .site-nav-links  { display: none; }
    .site-nav-burger { display: flex; }
    .site-nav        { padding: 18px 22px; }
}

/* la barra di amministrazione sul telefono è più alta e non è fissa */
@media (max-width: 782px) {
    body.admin-bar .site-nav { top: 46px; }
}