/* ============================================================
   HEADER — layout Academy
   Barra unica: logo · menu · azioni. Trasparente sopra la hero della home,
   bianca con blur appena si scrolla (.scrolled, da assets/js/menu.js).
   Markup: header.php + template-parts/headers/actions.php
   ============================================================ */
:root {
    --header-bg: #fff;
    --header-text: #0e0e0e;
    --header-muted: #5a564f;
    --header-border: rgba(14, 14, 14, .08);
    --header-disp: 'Space Grotesk', sans-serif;
    --header-body: 'Jost', sans-serif;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    /* Sopra qualsiasi contenuto (incl. header/banner di WooCommerce), ma sotto
       la admin bar di WordPress (99999). */
    z-index: 9999;
    box-sizing: border-box;
    font-family: var(--header-body);
    /* Niente transition su `top`: con la top bar attiva il valore cambia a ogni
       frame dello scroll, e una transizione lo farebbe arrancare indietro. */
}

body.admin-bar header {
    top: 30px;
}

/* Gli offcanvas (menu + carrello) devono stare SOPRA l'header fisso: col
   default di Bootstrap (1045) finirebbero dietro l'header alzato a 9999. */
.offcanvas { z-index: 10050; }
.offcanvas-backdrop { z-index: 10040; }

/* ── La barra ────────────────────────────────────────────── */
.header-layer--main {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}

/* In home la barra galleggia sulla hero finché non si scrolla; il metabox
   "Header" (body.transparent-menu) fa lo stesso su qualsiasi pagina. */
body.home .hornoi-core-header:not(.scrolled) .header-layer--main,
body.transparent-menu .hornoi-core-header:not(.scrolled) .header-layer--main {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

.hornoi-core-header.scrolled .header-layer--main {
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.header-inner {
    margin: 0 auto;
    max-width: 1320px;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* ── Logo ────────────────────────────────────────────────── */
.site-logo {
    flex: 0 0 auto;
    /* Il logo del tema è lungo e basso (rapporto 7:1): a 300px verrebbe
       tagliato proprio sulla «O» finale di CAPITANIO. */
    max-width: 340px;
}

.site-logo a {
    display: flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none;
}

.site-logo img,
.site-logo .custom-logo {
    height: 38px;
    width: auto;
    display: block;
}

/* Il logo del tema (`logo-orizzontale.png`): a 44px il nome «MERY CAPITANIO»
   sta a 13px e si legge, sotto i 36px comincia a chiudersi. È il numero da cui
   si regola la barra — `header-spacer.js` la rimisura da sé e aggiorna
   `--header-height`, quindi il resto delle pagine si riallinea da solo. */
.site-logo__img { height: 44px; }

/* ── Menu principale ─────────────────────────────────────── */
/* menu.css disegna il menu per un header scuro (link bianchi, hover arancio):
   qui va riportato al nero editoriale del layout. */
.main-nav {
    margin-left: auto;
}

.main-nav .menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav .menu > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-family: var(--header-body);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--header-text);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 100px;
    transition: color .25s ease, background .25s ease;
}

.main-nav .menu > li > a:hover,
.main-nav .menu > li > a:focus-visible,
.main-nav .menu > li:hover > a {
    color: var(--header-muted);
    background: rgba(14, 14, 14, .05);
}

/* Voce attiva: menu.css la colora di arancio con !important, a ogni livello. */
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.menu-offcanvas .current-menu-item > a,
.menu-offcanvas .current-menu-ancestor > a {
    color: var(--header-text) !important;
}

.main-nav .menu > li.current-menu-item > a,
.main-nav .menu > li.current-menu-ancestor > a {
    font-weight: 500;
}

/* Sottolineatura che cresce sotto la voce corrente/hover. */
.main-nav .menu > li > a::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.19, 1, .22, 1);
}

.main-nav .menu > li { position: relative; }

.main-nav .menu > li:hover > a::before,
.main-nav .menu > li.current-menu-item > a::before,
.main-nav .menu > li.current-menu-ancestor > a::before {
    transform: scaleX(1);
}

/* Freccia dei dropdown: menu.css la disegna bianca. */
.main-nav .menu > li.menu-item-has-children > a::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e0e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    width: 12px;
    height: 12px;
    opacity: .55;
}

/* ── Dropdown ────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .main-nav .menu > li > .dropdown-panel {
        top: calc(100% + 10px);
        min-width: 240px;
        padding: 10px;
        border: 1px solid var(--header-border);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 24px 60px rgba(14, 14, 14, .14);
    }

    .dropdown-panel > li > a {
        padding: 11px 14px;
        border-radius: 12px;
        font-family: var(--header-body);
        font-size: 14px;
        font-weight: 400;
        color: var(--header-text);
        transition: background .2s ease, padding-left .2s ease;
    }

    .dropdown-panel > li > a:hover {
        background: #f5f4f2;
        padding-left: 20px;
    }

    /* ── Mega menu ───────────────────────────────────────── */
    .menu > li.mega-menu > .mega-menu-panel {
        padding: 46px 0 44px;
        border-top: 1px solid var(--header-border);
        border-bottom: none;
        background: #fff;
        box-shadow: 0 30px 60px rgba(14, 14, 14, .14);
        /* Le colonne restano dentro la stessa griglia dell'header. */
        justify-content: center;
    }

    .mega-menu-panel > li {
        max-width: 300px;
        padding: 0 40px 0 0;
        margin: 0 40px 0 0;
        border-right: 1px solid var(--header-border);
    }

    /* Titolo di colonna */
    .mega-menu-panel > li > a {
        font-family: var(--header-disp);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: #8a8580;
        padding: 0 0 12px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--header-border);
    }

    .mega-menu-panel > li > a[href]:not([href=""]):not([href="#"]) {
        color: #8a8580;
    }
    .mega-menu-panel > li > a[href]:not([href=""]):not([href="#"]):hover {
        color: var(--header-text);
    }

    .mega-menu-panel > li > .sub-menu > li > a {
        position: relative;
        padding: 9px 0 9px 0;
        font-family: var(--header-body);
        font-size: 15px;
        font-weight: 400;
        color: var(--header-text);
        transition: color .2s ease, padding-left .25s cubic-bezier(.19, 1, .22, 1);
    }

    /* Trattino che entra da sinistra all'hover: il "figo" senza fronzoli. */
    .mega-menu-panel > li > .sub-menu > li > a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 10px;
        height: 1px;
        background: var(--header-text);
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity .25s ease, transform .25s ease;
    }

    .mega-menu-panel > li > .sub-menu > li > a:hover {
        color: #000;
        padding-left: 18px;
    }

    .mega-menu-panel > li > .sub-menu > li > a:hover::before {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Azioni ──────────────────────────────────────────────── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px;
    background: none;
    border: 0;
    color: var(--header-text);
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s ease;
}

.header-action:hover {
    opacity: .55;
    color: var(--header-text);
}

.header-link {
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--header-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}

.header-link:hover {
    color: var(--header-text);
}

/* Account: icona + etichetta dentro un unico link. */
.header-account {
    gap: 8px;
    color: var(--header-muted);
}

.header-account:hover {
    opacity: 1;
    color: var(--header-text);
}

.header-account .header-link {
    color: inherit;
}

/* Pastiglia del carrello: nel layout è sempre visibile, anche a zero. */
.header-cart {
    gap: 8px;
    padding: 8px 4px;
}

.header-cart__count,
.header-cart__count.is-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 100px;
    background: #0e0e0e;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    font-family: var(--header-disp);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 100px;
    background: #0e0e0e;
    white-space: nowrap;
    transition: background .3s ease;
}

.header-cta:hover {
    background: #333;
    color: #fff;
}

/* ── Hamburger: solo mobile ──────────────────────────────── */
.header-hamburger {
    display: none;
}

/* Fra 1025 e 1199px la barra è piena: voci più strette, niente "Accedi" a testo
   (l'icona account resta) e padding allineato a quello della top bar. */
@media (max-width: 1199.98px) and (min-width: 1025px) {
    .header-inner { padding: 16px 32px; }
    .main-nav .menu > li > a { padding: 10px 8px; font-size: 11.5px; letter-spacing: .08em; }
    .header-actions .header-link--account { display: none; }
    .header-cta { padding: 11px 18px; font-size: 11.5px; }
}

/* Breakpoint allineato a menu.css (desktop da 1025px in su): sotto questa
   soglia il menu passa nell'offcanvas. */
@media (max-width: 1024px) {
    .main-nav {
        display: none;
    }

    .header-hamburger {
        display: inline-flex;
    }

    .header-inner {
        padding: 14px 32px;
        gap: 12px;
    }

    .site-logo__img { height: 40px; }
}

@media (max-width: 767.98px) {
    .header-inner { padding: 12px 20px; }
    /* Solo nella barra: nell'offcanvas gli stessi pulsanti devono restare. */
    .header-actions .header-link,
    .header-actions .header-cta { display: none; }
    .site-logo img,
    .site-logo .custom-logo { height: 30px; }
    /* Sul telefono il logo dev'essere largo meno di metà schermo: accanto
       restano il carrello e l'hamburger. */
    .site-logo { max-width: 232px; }
    .site-logo__img { height: 32px; }
}

/* ============================================================
   OVERLAY: modale ricerca · offcanvas carrello · offcanvas menu
   ============================================================ */
.btn-close-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: none;
    border: 0;
    color: var(--header-text);
    cursor: pointer;
    transition: opacity .2s ease;
}

.btn-close-custom:hover {
    opacity: .6;
}

/* Il carrello non è qui: ha la sua testata in minicart.css. */
.search-modal .modal-header,
.menu-offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--header-border);
}

.menu-offcanvas .offcanvas-title {
    font-family: var(--header-disp);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    margin: 0;
}

.search-modal__body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.search-modal__placeholder {
    color: #777;
    font-size: 18px;
    text-align: center;
}

/* ── Menu dentro l'offcanvas: drill-down a pannelli ──────── */
/* Si vede un livello per volta. Toccando una voce con figli, il sotto-livello
   entra da sinistra e copre il padre; il pulsante "indietro" lo richiude.
   Ogni .sub-menu è absolute rispetto al pannello che lo contiene, quindi
   l'annidamento funziona a qualsiasi profondità (mega menu compreso). */
.menu-offcanvas .offcanvas-body {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.menu-offcanvas .menu--mobile,
.menu-offcanvas .menu--mobile .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 24px;
}

.menu-offcanvas .menu--mobile {
    height: 100%;
    overflow-y: auto;
}

.menu-offcanvas .menu--mobile .sub-menu {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--header-bg);
    overflow-y: auto;
    transform: translateX(-100%);
    /* visibility evita che le voci fuori schermo restino raggiungibili da tastiera */
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
}

.menu-offcanvas .menu--mobile .sub-menu.is-open {
    transform: translateX(0);
    visibility: visible;
}

.menu-offcanvas .menu--mobile li {
    border-bottom: 1px solid var(--header-border);
}

.menu-offcanvas .menu--mobile a {
    display: block;
    padding: 16px 0;
    font-family: var(--header-body);
    font-size: 17px;
    color: var(--header-text);
    text-decoration: none;
}

/* Freccia "avanti" per le voci con figli, a ogni livello: menu.css ne disegna
   una rivolta in basso (accordion) solo al primo livello. */
.menu-offcanvas .menu--mobile .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.menu-offcanvas .menu--mobile .menu-item-has-children > a::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transform: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e0e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ── Pulsante "indietro" (iniettato da menu-drill.js) ────── */
.menu-offcanvas .menu-back {
    border-bottom: 1px solid var(--header-border);
}

.menu-offcanvas .menu-back__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: 0;
    color: #8a8580;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.menu-offcanvas .menu-back__btn::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ── Azioni in coda al menu mobile ───────────────────────── */
.menu-offcanvas .offcanvas-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 24px 28px;
    border-top: 1px solid var(--header-border);
}

.menu-offcanvas .offcanvas-actions .header-cta,
.menu-offcanvas .offcanvas-actions .header-link {
    display: inline-flex;
    justify-content: center;
    text-align: center;
}

.menu-offcanvas .offcanvas-actions .header-link {
    padding: 12px 22px;
    border: 1px solid rgba(14, 14, 14, .22);
    border-radius: 100px;
}