@charset "UTF-8";
/* =============================================================================
   elm-menu-desktop.css
   MENU PRINCIPALE DESKTOP (header del tema hotale, da 992px in su)
   11/10/2026 - richiesta di Andrea (audit, versione tablet): "il menu principale
   va su due righe e si sovrappone al logo; deve essere sempre visibile
   correttamente in qualunque risoluzione".

   PROBLEMA (misurato in Chrome sul menu reale, 4 lingue)
   - Il logo e' position:absolute: il menu non ne teneva conto e, quando non
     stava a destra del logo, andava a capo e ci passava sopra.
   - Larghezza del menu a dimensione piena: EN 1.075px, IT 1.035, DE 1.024,
     FR 988 -> andava su due righe sotto i ~1.300px (in inglese anche a 1280).
   - Tra 992 e 999px non c'era NESSUN menu: il tema nasconde l'header desktop
     sotto i 1000px e l'header mobile compare solo sotto i 992px.

   SOLUZIONE
   1) Lo spazio del menu parte a destra del logo e il menu sta su UNA riga.
   2) Fasce calcolate sull'inglese (la lingua piu' lunga) con margine:
        da 1340px      dimensione piena del tema (nessuna modifica)
        1200-1339px    compatto: testo 12px, spazi tra le voci ridotti
        1100-1199px    stretto: spaziatura lettere e freccine ridotte
        992-1099px     stretto + bottone del preventivo solo icona (il nome
                       resta per lettori di schermo e tooltip)
      Testo mai sotto i 12px (regola del sito).
   3) App_Script/elm-menu-desktop.js misura il menu vero e su
      #hotale-main-menu mette:
        .menu-cta-testo  tra 992 e 1099px rimette il testo nel bottone del
                         preventivo quando c'e' spazio (es. FR a 1024px)
        .menu-stretto-1  bottone solo icona anche sopra i 1100px, se un nome
                         di macro piu' lungo (dal CMS) non ci sta piu'
        .menu-stretto-2  in piu' spazi e spaziatura lettere minimi
        .menu-misura     solo durante la misura: niente transizioni
      Senza JS valgono le fasce qui sotto (gia' corrette per le 4 lingue).
   NON tocca l'header mobile (sotto 992px, elm-mobile-nav.css, CONGELATO).
   ============================================================================= */


/* ---- 1) 992-999px: riattivo l'header desktop (prima la pagina restava senza menu) ---- */
@media (min-width: 992px) and (max-width: 999.98px) {
    .hotale-top-bar { display: block !important; }
    .hotale-header-boxed-wrap,
    .hotale-header-wrap.hotale-sticky-navigation { display: block !important; }
}


/* ---- 2) Da 992px: spazio del menu a destra del logo, una sola riga ---- */
@media (min-width: 992px) {
    /* Logo: 103px + 20px di padding per lato = 143px; + 12px di aria */
    .hotale-header-wrap .hotale-navigation { padding-left: 155px; }

    /* Il contenitore del menu (float:right) non puo' superare lo spazio
       disponibile: se il menu non ci sta trabocca dentro (e lo vede il JS),
       non va a capo sopra il logo */
    .hotale-header-wrap .hotale-navigation .hotale-main-menu {
        margin-left: 0;
        max-width: 100%;
    }

    .hotale-header-wrap #hotale-main-menu > ul.sf-menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        white-space: nowrap;
    }

    .hotale-header-wrap #hotale-main-menu > ul.sf-menu > li {
        float: none;
        flex: 0 0 auto;
    }

    /* Tendine delle ultime voci: con il menu allineato a destra su schermi
       stretti (es. 1024px) uscivano dal bordo destro dello schermo. Il tema
       (script-core.js, sf_menu_position) marca gia' .sub-menu-right le tendine
       che escono, ma aveva lo stile solo per il terzo livello: qui la tendina
       si apre verso sinistra, allineata alla voce. */
    .hotale-header-wrap #hotale-main-menu > ul.sf-menu > li.hotale-normal-menu { position: relative; }

    .hotale-header-wrap #hotale-main-menu > ul.sf-menu > li.hotale-normal-menu > ul.sub-menu.sub-menu-right {
        left: auto;
        right: -15px;
        margin-left: 0;
    }
}


/* ---- 3) Sotto i 1340px: compatto (la fascia 4 restringe ancora sotto i 1200) ----
   A dimensione piena l'inglese chiede 1.075px + 225px di logo e margini: ci sta
   da circa 1.315px (con barra di scorrimento). Da 1340px resta il menu originale
   (anche sui portatili a 1366px). */
@media (min-width: 992px) and (max-width: 1339.98px) {
    .hotale-header-wrap .hotale-navigation .sf-menu > li > a {
        font-size: 12px;
        letter-spacing: .05em;
    }

    .hotale-header-wrap .hotale-navigation .sf-menu > li {
        padding-left: 11px;
        padding-right: 11px;
    }

    .hotale-header-wrap .hotale-navigation .sf-menu > li:first-child { padding-left: 0; }
    .hotale-header-wrap .hotale-navigation .sf-menu > li:last-child { padding-right: 0; padding-left: 10px; }

    .hotale-header-wrap .hotale-navigation-submenu-indicator .sf-menu > li > a.sf-with-ul-pre:after { margin-left: 7px; }

    .hotale-header-wrap .sf-menu > li > a.btn-inside-red > span { padding: 10px 16px; }
}


/* ---- 4) 992-1199px: stretto ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hotale-header-wrap .hotale-navigation .sf-menu > li > a { letter-spacing: .02em; }

    .hotale-header-wrap .hotale-navigation .sf-menu > li {
        padding-left: 7px;
        padding-right: 7px;
    }

    .hotale-header-wrap .hotale-navigation .sf-menu > li:first-child { padding-left: 0; }
    .hotale-header-wrap .hotale-navigation .sf-menu > li:last-child { padding-right: 0; padding-left: 6px; }

    .hotale-header-wrap .hotale-navigation-submenu-indicator .sf-menu > li > a.sf-with-ul-pre:after { margin-left: 5px; }

    .hotale-header-wrap .sf-menu > li > a.btn-inside-red > span { padding: 10px 12px; }
}


/* ---- 5) Bottone preventivo solo icona: 992-1099px, oppure se il JS lo chiede ---- */
@media (min-width: 992px) and (max-width: 1099.98px) {
    .hotale-header-wrap .sf-menu > li > a.btn-inside-red > span {
        font-size: 0;
        letter-spacing: 0;
        width: 42px;
        height: 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hotale-header-wrap .sf-menu > li > a.btn-inside-red > span > i {
        font-size: 20px;
        line-height: 1;
        margin: 0;
    }
}

@media (min-width: 992px) {
    .hotale-header-wrap #hotale-main-menu.menu-stretto-1 .sf-menu > li > a.btn-inside-red > span {
        font-size: 0;
        letter-spacing: 0;
        width: 42px;
        height: 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hotale-header-wrap #hotale-main-menu.menu-stretto-1 .sf-menu > li > a.btn-inside-red > span > i {
        font-size: 20px;
        line-height: 1;
        margin: 0;
    }

    /* Testo del bottone rimesso dal JS (992-1099px, quando c'e' spazio) */
    .hotale-header-wrap #hotale-main-menu.menu-cta-testo .sf-menu > li > a.btn-inside-red > span {
        font-size: inherit;
        letter-spacing: inherit;
        width: auto;
        height: auto;
        padding: 10px 12px;
        display: inline-block;
    }

    .hotale-header-wrap #hotale-main-menu.menu-cta-testo .sf-menu > li > a.btn-inside-red > span > i {
        font-size: inherit;
        line-height: inherit;
        margin: 0 10px 0 0;
    }

    /* Durante la misura il bottone non deve animarsi (transition: all 1s nel MasterPage) */
    .hotale-header-wrap #hotale-main-menu.menu-misura .sf-menu > li > a.btn-inside-red > span { transition: none !important; }

    /* Ultimo gradino: spazi minimi e freccine attaccate al testo */
    .hotale-header-wrap #hotale-main-menu.menu-stretto-2 .sf-menu > li > a { letter-spacing: 0; }
    .hotale-header-wrap #hotale-main-menu.menu-stretto-2 .sf-menu > li { padding-left: 5px; padding-right: 5px; }
    .hotale-header-wrap #hotale-main-menu.menu-stretto-2 .sf-menu > li:first-child { padding-left: 0; }
    .hotale-header-wrap #hotale-main-menu.menu-stretto-2 .sf-menu > li:last-child { padding-right: 0; padding-left: 4px; }
    .hotale-header-wrap #hotale-main-menu.menu-stretto-2 .sf-menu > li > a.sf-with-ul-pre:after { margin-left: 3px; }
}


/* ---- 6) 16/10/2026 - voce "Offerte" nel dropdown Dormire (richiesta di Andrea) ----
   La categoria Offerte e' un intento (prezzo), non un tipo di struttura: in una
   lista di 7 voci identiche si confondeva. Markup da Xml_Extract.GeneraMenuDinamico
   (li.elm-menu-offerte, icona tag, numero delle offerte attive solo se > 0).
   Gerarchia e URL invariati; niente rosso: quello resta al bottone Preventivo. */
.sf-menu > li > .sub-menu > li.elm-menu-offerte {
    border-top: 1px solid var(--line);   /* solo la riga: niente margine, il li sopra ha gia' 12px di padding sotto */
    padding-top: 9px;
}
.sf-menu > li > .sub-menu > li.elm-menu-offerte > a {
    display: flex;
    align-items: center;
    gap: 8px;
}
.elm-menu-offerte .elm-menu-ic { font-size: .85em; line-height: 1; color: var(--gold-dk); }
.elm-menu-offerte .elm-menu-count {
    margin-left: auto;
    font-size: .75rem;          /* 12px: minimo del sito */
    line-height: 18px;
    font-weight: 600;
    color: var(--grey);
    background: #fff;
    border: 1px solid var(--line);
    padding: 0 7px;
    border-radius: var(--r-pill);
}
.sf-menu > li > .sub-menu > li.elm-menu-offerte > a:hover .elm-menu-count { color: var(--ink); }