/* ============================================================
   LSH — Header / Navbar styles
   Porting da wordpress/navbar.php (CSS inline → file dedicato).
   ============================================================ */

.lsh-site-header {
    position: relative;
    overflow: hidden;
    max-height: 350px;
}

.lsh-header-bg {
    position: absolute;
    inset: 0;
    background-image: url("https://italianlifestyleblog.fra1.cdn.digitaloceanspaces.com/assets/images/sfondo_header.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.lsh-header-inner {
    position: relative;
    z-index: 2;
}

/* Container centrato */
.lsh-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ---------- TOP NAV ---------- */
.lsh-top {
    min-height: 44px;
    display: flex;
    align-items: center;
    background-color: rgba(10, 85, 54, 0.95);
    position: relative;
    width: 100%;
}

.lsh-top-inner {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
}

.lsh-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.lsh-menu a {
    color: #fff;
    text-decoration: none;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    padding: 10px 0;
    opacity: .95;
}

.lsh-menu a:hover {
    opacity: 1;
}

/* Voce allineata a destra (lingua) */
.lsh-menu-right {
    margin-left: auto;
}

/* ---------- HAMBURGER MOBILE ---------- */
.lsh-nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    width: 44px;
    height: 44px;
    cursor: pointer;
    padding: 0;
}

.lsh-nav-toggle-icon {
    display: inline-block;
    width: 22px;
    height: 2px;
    background: #fff;
    position: relative;
    opacity: .95;
}

.lsh-nav-toggle-icon::before,
.lsh-nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #fff;
}

.lsh-nav-toggle-icon::before {
    top: -7px;
}

.lsh-nav-toggle-icon::after {
    top: 7px;
}

.lsh-nav-panel {
    flex: 1;
}

@media (min-width: 901px) {
    .lsh-nav-panel {
        display: block !important;
    }

    /* Lingue con etichette lunghe (es/de/fr): il menu orizzontale rischia di
       sforare la barra. Riduco font e gap per tenerlo su UNA riga. Se anche
       così non basta (desktop stretti ~900-1050px), il min-height su .lsh-top
       fa crescere la barra invece di sovrapporre il brand. */
    .lang-es .lsh-menu,
    .lang-fr .lsh-menu,
    .lang-de .lsh-menu { gap: 8px; }

    /* Sia i link foglia (<a>) sia i trigger dei dropdown (<button>). */
    .lang-es .lsh-menu a, .lang-es .lsh-menu .nav-trigger,
    .lang-fr .lsh-menu a, .lang-fr .lsh-menu .nav-trigger,
    .lang-de .lsh-menu a, .lang-de .lsh-menu .nav-trigger { font-size: 11px; }
}

/* ---------- MID (logo + social) ---------- */
.lsh-mid {
    padding-top: 20px;
    padding-bottom: 8px;
}

.lsh-mid-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.lsh-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #fff;
    text-decoration: none;
}

.lsh-logo-mark {
    width: 120px;
    height: 120px;
    flex: 0 0 120px;
    display: grid;
    place-items: center;
}

.lsh-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.lsh-logo-text .lsh-title {
    display: block;
    font: 54px/1.02 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
}

.lsh-logo-text .lsh-subtitle {
    display: block;
    margin-top: 4px;
    font: 700 20px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    opacity: .95;
}

/* ---------- SOCIAL ICONS ---------- */
.lsh-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.lsh-social a {
    display: grid;
    place-items: center;
}

.lsh-social a img {
    width: 40px;
}

/* Icone social tonde con sfondo verde-pdf (#2D6A4F) e SVG bianco al centro.
   Pattern editoriale (cf. https://lifesciencetube.e-quipe.app/...). */
.lsh-social-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: #2D6A4F;
    color: #fff;
    text-decoration: none;
    transition: background-color .18s ease, transform .18s ease;
}

.lsh-social-icon:hover,
.lsh-social-icon:focus-visible {
    background: #1f5238;
    transform: translateY(-1px);
    outline: none;
}

.lsh-social-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Carattere 𝕏 (mathematical script X) usato per Twitter/X */
.lsh-social-icon>span {
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
}

/* ---------- SEARCH BAR ---------- */
.lsh-bot {
    margin-top: 10px;
    margin-bottom: 22px;
}

.lsh-search {
    display: flex;
    align-items: stretch;
    width: min(1280px, 100%);
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.50);
    opacity: 0.8;
}

.lsh-search input {
    width: 100%;
    border: 0;
    outline: none;
    padding: 16px 18px;
    font-size: 20px;
}

.lsh-search .lsh-clear {
    border: 0;
    background: transparent;
    width: 56px;
    cursor: pointer;
    border-left: 1px solid rgba(0, 0, 0, .10);
    font-size: 18px;
    opacity: .65;
}

.lsh-search .lsh-clear:disabled {
    visibility: hidden;
}

.lsh-search .lsh-submit {
    border: 0;
    cursor: pointer;
    padding: 0 18px;
    background: #207359;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    margin: 4px;
    border-radius: 6px;
    /* Allineamento icona lente + testo "Articoli" su desktop */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lsh-search .lsh-submit svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: currentColor;
}

.lsh-search .lsh-submit:last-child {

    margin-left: 0;
}

.lsh-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- NAV OVERLAY (mobile drawer) ---------- */
.lsh-nav-overlay {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 4;
}

.lsh-nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

body.lsh-no-scroll {
    overflow: hidden;
    touch-action: none;
}

/* ---------- DROPDOWN SUBMENU ---------- */
.lsh-menu>li {
    position: relative;
}

.lsh-menu-item-has-children {
    position: relative;
}

.nav-trigger {
    border: 0;
    background: transparent;
    color: #fff;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    padding: 10px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: .95;
}

.nav-trigger:hover {
    opacity: 1;
}

.lsh-menu-item-has-children .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-40.6%);
    min-width: 240px;
    background: #fff;
    border-radius: 0 10px 10px 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    padding: 8px 0;
    z-index: 30;
}

.lsh-menu-item-has-children:hover .dropdown {
    display: block;
}

.lsh-menu-item-has-children .dropdown a {
    display: block;
    padding: 12px 16px;
    color: #17352c;
    text-decoration: none;
    font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    white-space: nowrap;
}

.lsh-menu-item-has-children .dropdown a:hover {
    background: rgba(10, 85, 54, 0.08);
    text-decoration: none;
}

.chev {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
}

/* Bandierina nel switch lingua: emoji un filo più grande e con spazio */
.lsh-flag {
    display: inline-block;
    font-size: 1.1em;
    margin-right: 6px;
    line-height: 1;
    vertical-align: -1px;
}

/* Nella dropdown rendiamo l'allineamento più pulito */
.lsh-menu-item-has-children .dropdown a .lsh-flag {
    width: 1.6em;
    text-align: center;
}
.lsh-nav-panel button{color:#FFF !important;}
/* ---------- SEARCH SUBMIT (override) ---------- */
.lsh-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    background: #0f6b46;
    color: #fff;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    z-index: 0;
}

.lsh-submit span {
    position: relative;
    z-index: 2;
}

.lsh-submit:hover {
    box-shadow: 0 8px 18px rgba(15, 107, 70, 0.25);
    background: #0c5a3b;
}

/* ---------- MOBILE BREAKPOINT ---------- */
@media (max-width: 990px) {
    .lsh-site-header {
        overflow: visible;
    }

    .lsh-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .lsh-nav-panel {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 52px;
        background: rgba(10, 85, 54, 0.98);
        border-radius: 14px;
        z-index: 5;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
        overflow: hidden;
    }

    .lsh-nav-panel.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        transition: transform .28s cubic-bezier(.2, .9, .2, 1), opacity .18s ease;
    }

    .lsh-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px;
    }

    .lsh-menu a {
        width: 100%;
        padding: 20px 14px;
        font-size: 16px;
    }

    .lsh-mid-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .lsh-logo-mark {
        width: 88px;
        height: 88px;
    }

    .lsh-logo-text .lsh-title {
        font-size: 34px;
    }

    .lsh-logo-text .lsh-subtitle {
        font-size: 16px;
    }

    .lsh-search {
        width: 100%;
        border-radius: 10px;
    }

    .lsh-search input {
        padding: 14px;
        font-size: 18px;
    }

    .lsh-search .lsh-submit {
        padding: 0 16px;
        font-size: 18px;
    }
}

/* ---------- TABLET / MOBILE (≤ 768px) ----------
   Mostra le icone social anche su mobile, ma le porto su una riga
   propria sotto al brand (no spazio per stare in linea). Override
   sull'utility Tailwind `hidden` applicata al wrapper. */
@media (max-width: 768px) {
    .lsh-mid-inner > div:has(.lsh-social) {
        display: flex !important;
        order: 2;                /* dopo il brand nella column-stack */
        justify-content: center;
        width: 100%;
        margin-top: 6px;
    }
    .lsh-mid-inner {
        flex-wrap: wrap;         /* brand su riga 1, social su riga 2 */
    }
}

/* ---------- MOBILE STRETTO (≤ 600px) ----------
   Upper part compatto:
   - padding ridotto, niente extra-respiro
   - logo a sinistra in row, allineato col title
   - title font-weight più leggero (700 invece di 900) per non gridare
   - subtitle allineato a sinistra, wrap libero (entra tutto il testo
     "Informazione scientifica e divulgazione…") */
@media (max-width: 600px) {
    .lsh-mid {
        padding: 16px 0 8px;     /* più aria sopra + più spazio prima della search */
    }
header {height:290px;}
    .lsh-mid-inner {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
    }

    .lsh-brand {
        gap: 10px;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: auto;
        max-width: 100%;
    }

    .lsh-logo-mark {
        width: 88px;               /* +44 → 88: come da richiesta */
        height: 88px;
        flex: 0 0 88px;
    }

    .lsh-logo-text {
        display: flex;
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
        flex: 0 1 auto;
        min-width: 0;
    }

    .lsh-logo-text .lsh-title {
        font-size: 31px;           /* +20 → 31 */
        line-height: 1.05;
        font-weight: 800;
        white-space: nowrap;
    }

    .lsh-logo-text .lsh-subtitle {
        font-size: 11px;           /* +11 → 14 */
        font-weight: 600;
        margin-top: 4px;
        opacity: 0.95;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
        line-height: 1.25;
    }

    /* ---------- Pulsante "Cerca" su mobile ----------
       Visibile solo la lente d'ingrandimento, niente etichetta "Articoli". */
    .lsh-search .lsh-submit {
        padding: 0 14px;
        min-width: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .lsh-search .lsh-submit span {
        display: none;
    }
    .lsh-search .lsh-submit svg {
        width: 20px;
        height: 20px;
    }
}

/* Rimosso blocco mobile che forzava .lsh-logo-mark img a 66×66
   (overflowava il container del logo facendo sovrapporre logo e testo)
   e header a 290px (altezza fissa che strozzava il layout su mobile).
   L'immagine ora segue il container (.lsh-logo-mark: 44×44 ≤600px,
   88×88 fino a 990px) grazie a width:100%/height:100%/object-fit:contain
   definiti sulla regola .lsh-logo-mark img base (linea 159). */