@charset "utf-8";
/* =============================================================================
   responsive-fix.css - correzioni UX/UI mobile e tablet
   Origine: CLAUDE/UX-Audit-mobile-tablet-2026-09-05.html (task T01..T22)
   Applicato: 06/09/2026

   NOTE DI MANUTENZIONE
   - Questo file va caricato DOPO responsive-layouts.css: a parita' di
     specificita' vince lui. Gli !important sono usati SOLO dove la regola
     originale ne ha gia' uno.
   - Breakpoint allineati a Bootstrap gia' caricato (T21): 576 / 768 / 992.
     I breakpoint storici 502/880/991/1200 di responsive-layouts.css restano
     invariati: qui non si riscrive nulla di esistente, si corregge soltanto.
   - Per annullare tutte le correzioni basta rimuovere il <link> in
     MasterPage.master. Backup dei file originali in CLAUDE_BACKUP_20260906/.
   ============================================================================= */


/* =============================================================================
   T01 - L'header fisso da 260px non deve piu' intercettare i tap
   Prima: .top-header (position:fixed, height:260px, z-index:1001) copriva il
   31% dello schermo di un telefono e catturava ogni tap.
   .menu_overlay e .top-header::before hanno gia' pointer-events:none in
   style.css; .menu_ul.show imposta gia' pointer-events:auto da se'.
   ============================================================================= */
.top-header {
    pointer-events: none;
}

    .top-header .menu_btn,
    .top-header .logo_content {
        pointer-events: auto;
    }


/* =============================================================================
   T03 - Toast notifiche: non deve coprire i contenuti ne' finire sotto il
   badge iubenda (38x38 a destra, z-index 2147483647).
   ============================================================================= */

/* Il menu aperto e' modale: il toast (z-index 1040) non deve galleggiarci sopra */
body.open .push-toast {
    display: none !important;
}

@media (max-width: 575.98px) {
    .push-toast {
        left: 12px;
        right: 12px;
        bottom: 64px; /* sopra il badge iubenda */
        padding-right: 6px;
    }
}


/* =============================================================================
   T04 - Scala tipografica responsive.
   In style.css h1/h2/h3 hanno line-height:1 !important e font-size fissi
   (90/60/36px): su desktop stanno su una riga, su mobile vanno a 3-8 righe
   attaccate. Qui si ripristina un'interlinea leggibile e una scala coerente.
   ============================================================================= */
@media (max-width: 767.98px) {
    h1 {
        font-size: 40px !important;
        line-height: 1.10 !important;
    }

    h2 {
        font-size: 30px !important;
        line-height: 1.16 !important;
    }

    h3 {
        font-size: 24px !important;
        line-height: 1.34 !important;
    }

    h4 {
        font-size: 19px !important;
        line-height: 1.40 !important;
    }

    h5 {
        line-height: 1.4 !important;
    }

    /* Titoli hero: responsive-layouts.css li imposta con selettore piu'
       specifico (.header-style1/2 .display-tc h1, !important), quindi qui
       serve la stessa specificita' per poterli correggere. */
    .header-style1 .display-tc h1,
    .header-style2 .display-tc h1 {
        font-size: 40px !important;
        line-height: 1.10 !important;
    }

    /* h1.big / h2.big hanno override propri a <=502px in responsive-layouts.css */
    h1.big {
        font-size: 42px !important;
        line-height: 1.08 !important;
    }

    h2.big {
        font-size: 30px !important;
        line-height: 1.16 !important;
        margin-top: 20px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    h1 {
        font-size: 56px !important;
        line-height: 1.08 !important;
    }

    .header-style1 .display-tc h1,
    .header-style2 .display-tc h1 {
        font-size: 54px !important;
        line-height: 1.08 !important;
    }

    h2 {
        font-size: 40px !important;
        line-height: 1.14 !important;
    }

    h3 {
        font-size: 30px !important;
        line-height: 1.24 !important;
    }

    h4 {
        line-height: 1.35 !important;
    }
}


/* =============================================================================
   T05 - p.big / ul.big: 28px !important e #999999, mai ridotti in nessuna
   media query. Sono il corpo della carta dei vini (134 voci) e delle
   recensioni. #999 su bianco = 2.85:1, sotto il minimo AA.
   ============================================================================= */
p.big,
ul.big {
    color: #4a4a4a;
}

@media (max-width: 767.98px) {
    p.big,
    ul.big {
        font-size: 19px !important;
        line-height: 1.55 !important;
        padding: 16px 0;
    }

    ul.big li {
        line-height: 1.5 !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    p.big,
    ul.big {
        font-size: 22px !important;
        line-height: 1.5 !important;
    }
}


/* =============================================================================
   T06 - Oro su fondo chiaro illeggibile.
   --gold-color #d99c54 su bianco = 2.38:1; .expTitle usa #D9B860 = 1.85:1.
   Si introduce una variante scura SOLO nei contesti su fondo chiaro del sito
   pubblico: le landing page (App_LandingPage) usano .color_oro su fondo scuro
   e non vengono toccate.
   ============================================================================= */
:root {
    --gold-on-light: #8a5a1e; /* 6.3:1 su bianco */
}

/* Titoli di sezione della carta dei vini e dei menu */
.expTitle {
    color: var(--gold-on-light) !important;
}

    .expTitle:before,
    .expDecalOnly:before,
    .expTitle:after,
    .expDecalOnly:after {
        background: var(--gold-on-light);
    }

/* Messaggio "menu in fase di aggiornamento" e descrizioni di sezione:
   generati in NostriMenu_*.aspx.cs dentro #HtmlContentMenu / .parag_list */
.parag_list .color_oro,
#HtmlContentMenu .color_oro {
    color: var(--gold-on-light) !important;
}

/* Voci di lista dei menu e della cantina */
.list_voci_menu li,
.parag_list ul.big li {
    color: #3f3f3f;
}


/* =============================================================================
   T07 - Rosso #b93322 su blu #111728 = 3.02:1 (footer e h4 su fondo scuro).
   ============================================================================= */
:root {
    --red-on-dark: #e06a55; /* 5.6:1 su #111728 */
}

footer h4,
footer .color_red,
.bg_blu h4,
.bg_blu .color_red {
    color: var(--red-on-dark) !important;
}


/* =============================================================================
   T08 - Card recensioni: min-height 410px fisso (style.css:2535) + padding
   orizzontale 120px da <=880px (responsive-layouts.css). Su 390px restavano
   238px di testo e circa 250px di bianco.
   ============================================================================= */
@media (max-width: 767.98px) {
    /* padding-top 60px: .quote-svg e' in absolute a top:15px ed e' alta 54px,
       con meno spazio il testo ci finisce sotto (style.css:1890). */
    .cont-recensione {
        min-height: 0;
        padding: 60px 20px 24px 20px !important;
    }

        .cont-recensione p.big {
            font-size: 18px !important;
            line-height: 1.5 !important;
            padding: 8px 0;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* stesso motivo del blocco mobile: .quote-svg occupa i primi 70px.
       Qui servono 78px e non 60: nel blocco mobile p.big ha un suo
       padding di 16px che spinge gia' il testo piu' in basso. */
    .cont-recensione {
        min-height: 0;
        padding: 78px 36px 32px 36px !important;
    }
}

/* T08 - Con autoHeight la card si adatta al testo: i pallini, che erano
   posizionati nel vuoto in fondo alla card da 410px, finivano sopra il nome
   del recensore. Si riserva loro una fascia sotto al carosello. */
@media (max-width: 991.98px) {
    .swiper-recensioni {
        padding-bottom: 48px;
    }

        .swiper-recensioni .swiper-pagination {
            bottom: 0;
        }
}

/* T08 - Pallini di paginazione 8x8 e frecce 27x44: area di tocco reale 44px
   senza cambiarne l'aspetto (il pallino resta della stessa dimensione). */
/* Il pallino resta piccolo com'e' nel progetto: l'area di tocco viene estesa
   con uno pseudo-elemento invisibile, senza cambiarne l'aspetto. */
.swiper-pagination-bullet {
    position: relative;
}

    .swiper-pagination-bullet::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

.swiper-pagination {
    line-height: 44px;
}



/* =============================================================================
   T09 - Breadcrumb e titoli di pagina finivano sotto l'hamburger (86x86 a
   sinistra, top 20px) e sotto il logo.
   ============================================================================= */
@media (max-width: 991.98px) {
    /* NIENTE padding-top qui: .breadcrumb-section ha lo sfondo rosso
       (style.css:2844), quindi ogni padding aggiunto diventa banda rossa.
       Il breadcrumb non finisce piu' sotto l'hamburger perche' dopo 200px di
       scroll l'header diventa la barra opaca da 76px. */
    .breadcrumb-section .breadcrumb {
        margin-bottom: 0;
    }

    /* Titolo H1/H2 delle pagine interne: lascia libera la fascia del logo */
    .header-style2 .display-tc h1,
    .header-style2 .display-tc h2 {
        padding-top: 24px;
    }

    /* Titolo di sezione subito sotto la barra: nel menu pranzo/cena il
       "Menu a pranzo" finiva sotto il cerchio dell'hamburger */
    .padding-section-top100 > .container-screen > h2:first-child,
    .padding-section-top100 > .container-small-screen > h2:first-child {
        padding-top: 16px;
    }
}


/* =============================================================================
   T10 - .masked-image: la maschera PNG e' 2000x1140 (rapporto 1.754) ma il box
   e' fisso a height:440px. A 390px di larghezza la maschera veniva stirata in
   verticale di 2x e i pannelli risultavano tagliati.
   Qui il box mantiene le proporzioni native della maschera: stessa resa
   grafica, solo alla scala giusta.
   ============================================================================= */
@media (max-width: 991.98px) {
    .masked-image {
        height: auto;
        aspect-ratio: 2000 / 1140;
        min-height: 200px;
    }
}


/* =============================================================================
   T11 - Overlay del menu mobile.
   .menu_overlay.open usa filter: blur(30px) opacity(0.95): filter agisce
   sull'elemento stesso, non sullo sfondo, quindi il blur non sfoca nulla e
   l'opacity lascia passare il 5% della pagina (la hero si leggeva dietro le
   voci). La proprieta' corretta per l'effetto vetro e' backdrop-filter.
   ============================================================================= */
.menu_overlay.open {
    filter: none;
    background-color: rgba(15, 23, 40, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}


/* =============================================================================
   T12 - Voci del menu mobile: 42px di altezza, 6px di distanza e area
   cliccabile larga solo quanto il testo (i link sono inline dentro <li> con
   line-height:16px !important).
   ============================================================================= */


/* =============================================================================
   T13 - Upload curriculum: l'input file nativo (245x20, font di sistema 12px)
   sostituito da un bottone coerente col resto del form.
   Il markup e' in App_Page/LavoraConNoi.aspx.
   ============================================================================= */
.visually-hidden-file {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.btn-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    margin: 0;
    border: 1px solid var(--gold-on-light);
    border-radius: 2px;
    background: #fff;
    color: var(--gold-on-light);
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

    .btn-upload:hover,
    .btn-upload:focus,
    .visually-hidden-file:focus + .btn-upload {
        background: var(--gold-on-light);
        color: #fff;
    }

.upload-hint {
    display: block;
    margin-top: 8px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #4a4a4a;
}

    .upload-hint.has-file {
        color: #1d5b2a;
        font-weight: 600;
    }


/* =============================================================================
   T02 + T14 - Campi form.
   font-size 14px faceva zoomare Safari iOS al focus; altezza 40px sotto i 44
   minimi; label 12px; checkbox 18px; campi con la sola riga inferiore.
   ============================================================================= */
/* La regola di style.css:1619 usa selettori attributo+classe (specificita' 0,2,1):
   qui serve la stessa forma per poterla correggere, senza !important. */

@media (max-width: 991.98px) {
    .padding-form label,
    .padding-form .mini {
        font-size: 14px;
        letter-spacing: .04em;
    }

        /* il bottone di upload e' un <label>: non deve ereditare la misura
           delle etichette di campo */
        .padding-form label.btn-upload {
            font-size: 15px;
        }

    .form-control {
        min-height: 48px;
        font-size: 16px;
    }

    textarea.form-control {
        min-height: 140px;
    }

    .checkbox-label input[type="checkbox"],
    input[type="checkbox"].privacy_contatti_ckb,
    input[type="checkbox"].privacy_ckb_newsletter {
        width: 24px;
        height: 24px;
        vertical-align: middle;
    }

    /* la checkbox e' in position:absolute;left:0 dentro un padding-left di 25px
       (style.css:2224): portandola a 24px serve la gronda piu' larga, altrimenti
       finisce sopra la prima parola del testo di consenso. */
    .checkbox-label {
        display: block;
        min-height: 44px;
        padding: 8px 0 8px 36px;
        font-size: 14px;
        line-height: 1.5;
        color: #4a4a4a;
    }

        .checkbox-label input[type=checkbox] {
            top: 10px;
        }

    /* CTA primario a piena larghezza: su mobile il bottone era 99x54 centrato */
    .btn_contact,
    .btn_candidatura {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


/* =============================================================================
   T15 - Prevenzione layout shift: spazio riservato alle immagini che non
   dichiarano width/height (le miniature della gallery sono generate da
   gridGallery.js e non hanno attributi).
   ============================================================================= */
img {
    max-width: 100%;
}

.gridGallery [data-thumbnail] img,
.gridGallery .gg-thumb img,
.thumbnails img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}


/* =============================================================================
   T16 - Carta dei vini: 134 voci in una pagina da 21.532px a 390px.
   Su telefono le sezioni partono chiuse (JS in common.js, comportamento
   attivo solo dove il markup espone data-accordion-mobile);
   da 768px in su la lista va su due colonne e la pagina si dimezza.
   Senza JS il contenuto resta comunque visibile.
   ============================================================================= */
@media (max-width: 767.98px) {
    .parag_list {
        padding-left: 34px;
    }

    /* riga e rombo decorativi di .expTitle rientrano nel padding ridotto */
    .expTitle:before {
        left: -18px;
        top: 12px;
    }

    .expTitle:after {
        width: 12px;
        left: -34px;
        top: 16px;
    }

    /* stato chiuso/aperto gestito da common.js */
    .acc-group[hidden] {
        display: none !important;
    }

    .expTitle.acc-head {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 56px;
        margin-bottom: 0;
        padding: 10px 0;
        border-bottom: 1px solid #e6e2d8;
    }

        .expTitle.acc-head .acc-ico {
            /* style.css nasconde gli span dentro .list_voci_menu li (sono i
               prezzi, vuoti su questa lista): l'icona va riesposta. */
            display: block;
            flex: 0 0 auto;
            width: 24px;
            height: 24px;
            position: relative;
            transition: transform .25s ease;
        }

            .expTitle.acc-head .acc-ico:before,
            .expTitle.acc-head .acc-ico:after {
                content: "";
                position: absolute;
                background: var(--gold-on-light);
                left: 50%;
                top: 50%;
            }

            .expTitle.acc-head .acc-ico:before {
                width: 14px;
                height: 2px;
                transform: translate(-50%, -50%);
            }

            .expTitle.acc-head .acc-ico:after {
                width: 2px;
                height: 14px;
                transform: translate(-50%, -50%);
                transition: transform .25s ease, opacity .25s ease;
            }

        .expTitle.acc-head[aria-expanded="true"] .acc-ico:after {
            transform: translate(-50%, -50%) rotate(90deg);
            opacity: 0;
        }
}

@media (min-width: 768px) {
    .parag_list ul.big {
        columns: 2;
        column-gap: 48px;
    }

        .parag_list ul.big li {
            break-inside: avoid;
            -webkit-column-break-inside: avoid;
        }

        /* i titoli di sezione occupano tutta la larghezza */
        .parag_list ul.big li.nolistpoint {
            column-span: all;
        }
}


/* =============================================================================
   T17 - Paragrafi lunghi centrati su mobile: la centratura resta ai titoli.
   ============================================================================= */
@media (max-width: 767.98px) {
    .text-center p,
    .text-center p.big,
    .container-small-screen.text-center p {
        text-align: left;
    }

    .text-center h1,
    .text-center h2,
    .text-center h3,
    .text-center h4 {
        text-align: center;
    }

    /* le card recensione restano centrate: sono citazioni brevi */
    .cont-recensione p,
    .cont-recensione p.big,
    .cont-recensione h5 {
        text-align: center;
    }
}


/* =============================================================================
   T18 - Target sotto i 44px: numero di telefono (163x31), voci del footer.
   ============================================================================= */

@media (max-width: 991.98px) {
    footer .footer-list a,
    footer ul li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 3px 0;
    }
}


/* =============================================================================
   T19 - Copyright 12px e riga da 128 caratteri su tablet.
   ============================================================================= */


/* =============================================================================
   T20 - Vuoti verticali sproporzionati su mobile (padding di sezione pensati
   per desktop, ridotti solo a 70px nel blocco <=880px).
   ============================================================================= */
@media (max-width: 575.98px) {
    .padding-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .padding-section-bottom {
        padding-bottom: 48px !important;
    }

    .padding-section-top200 {
        padding-top: 64px !important;
    }

    .padding-section-top100 {
        padding-top: 48px !important;
    }

    .padding-section-top90 {
        padding-top: 44px !important;
    }

    .padding-section-top80 {
        padding-top: 40px !important;
    }

    .padding-section-top70 {
        padding-top: 36px !important;
    }

    .padding-section-top60 {
        padding-top: 32px !important;
    }

    .padding-section-top50 {
        padding-top: 28px !important;
    }

    .padding-section-top40 {
        padding-top: 24px !important;
    }

    .padding-section-top30 {
        padding-top: 20px !important;
    }

    .padding-section-bottom300 {
        padding-bottom: 80px !important;
    }

    .padding-section-bottom200 {
        padding-bottom: 64px !important;
    }

    .padding-section-bottom100 {
        padding-bottom: 48px !important;
    }

    .padding-section-bottom90 {
        padding-bottom: 44px !important;
    }

    .padding-section-bottom80 {
        padding-bottom: 36px !important;
    }

    .padding-section-bottom70 {
        padding-bottom: 36px !important;
    }

    .padding-section-bottom60 {
        padding-bottom: 32px !important;
    }

    .padding-section-bottom50 {
        padding-bottom: 28px !important;
    }

    .padding-section-bottom40 {
        padding-bottom: 24px !important;
    }

    .padding-section-bottom30 {
        padding-bottom: 20px !important;
    }

}

/* Fascia tablet: i padding da 100-200px restano sproporzionati anche a 768px
   (es. i 200px sotto il carosello recensioni prima di "Due Menu"). */
@media (min-width: 576px) and (max-width: 991.98px) {
    .padding-section {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .padding-section-top200 {
        padding-top: 90px !important;
    }

    .padding-section-top100 {
        padding-top: 64px !important;
    }

    .padding-section-bottom200 {
        padding-bottom: 90px !important;
    }

    .padding-section-bottom100 {
        padding-bottom: 64px !important;
    }

    .padding-section-bottom80 {
        padding-bottom: 56px !important;
    }

    .padding-section-bottom70 {
        padding-bottom: 48px !important;
    }
}


/* =============================================================================
   T22 - Modale mappa: il pulsante di chiusura era ancorato a (165,714), fuori
   dallo schermo sui telefoni piu' bassi di 844px (iPhone SE: 667px).
   ============================================================================= */


/* =============================================================================
   Rispetto delle preferenze di sistema per il movimento ridotto.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .menu_overlay,
    .menu_ul,
    .top-header,
    .top-header::before {
        transition-duration: .01ms !important;
    }
}


/* =============================================================================
   Riscontri emersi in verifica (06/09/2026) - stessi difetti dei task T03/T14
   su elementi che non erano stati misurati nell'audit perche' fuori dal form
   principale.
   ============================================================================= */

/* T03/T06 - "Attiva le notifiche": testo bianco su oro #d99c54 = 2.38:1.
   Si mantiene il bottone oro (colore di marca) e si scurisce il testo:
   #111728 su #d99c54 = 7.7:1. */
.push-cta-btn,
.push-cta-btn:active,
.push-cta-btn:focus {
    color: var(--blu-color);
}

    .push-cta-btn i,
    .push-cta-btn span {
        color: inherit;
    }

/* T14 - testi di servizio sotto i 14px */
.push-cta-hint,
.push-toast-txt {
    font-size: 14px;
    line-height: 1.45;
}

/* T14 - consenso privacy della newsletter nel footer:
   13px e checkbox 18x18 (il selettore usa name=, non class=). */

@media (max-width: 991.98px) {
    .privacy-check {
        margin-right: 0;
        padding: 8px 0;
        min-height: 44px;
    }
}


/* =============================================================================
   T09 (secondo intervento) - Barra compatta e opaca dopo lo scroll, su mobile
   e tablet.
   PERCHE': l'header e' fisso e trasparente, ma logo e hamburger sono opachi.
   Con il solo padding di T09 si sistemano il breadcrumb e il titolo in cima
   alla pagina, ma qualsiasi testo che scorre sotto il logo durante la lettura
   resta illeggibile (es. "Contattaci", "Menu a pranzo", i testi introduttivi).
   La classe .shrink esiste gia' e viene applicata da common.js oltre i 200px
   di scroll: qui le si da' un fondo pieno e si rimpiccioliscono logo e
   hamburger, cosi' sopra i contenuti c'e' una barra vera e non due elementi
   che galleggiano.
   SE NON PIACE: basta togliere questo blocco, il resto delle correzioni non
   dipende da qui.
   ============================================================================= */
@media (max-width: 991.98px) {

    .top-header {

        height: 90px;
    }


    .top-header.shrink {
        height: 76px;
        background-color: rgba(15, 23, 40, 0.94);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 14px rgba(15, 23, 40, 0.18);
    }

        .top-header.shrink::before {
            display: none;
        }

        .top-header.shrink .menu_btn {
            top: 6px;
            left: 8px;
            width: 64px;
            height: 64px;
        }

            .top-header.shrink .menu_btn span {
                width: 26px;
            }



    /* col menu aperto l'header torna a tutto schermo e trasparente:
       lo sfondo lo fa .menu_overlay */
    body.open .top-header.shrink {
        height: 100vh;
        background-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }

        body.open .top-header.shrink .menu_btn {
            top: 20px;
            left: 10px;
            width: 86px;
            height: 86px;
        }

            body.open .top-header.shrink .menu_btn span {
                width: 35px;
            }

        body.open .top-header.shrink .logo_content {
            top: 20px;
            right: 10px;
        }

            body.open .top-header.shrink .logo_content .logo {
                width: 160px;
            }
}


/* =============================================================================
   T09/T18 (riscontro in verifica) - Breadcrumb: i link erano alti 20px e
   l'oro #d99c54 sul rosso #8e0202 dava 4.09:1, sotto il minimo di 4.5:1.
   ============================================================================= */

    .breadcrumb li a:hover,
    .breadcrumb li a:focus {
        color: #fff;
    }



/* =============================================================================
   T08 (completamento) - Recensioni lunghe: prima venivano troncate a 160
   caratteri con "..." e il resto non era raggiungibile. Ora il testo completo
   e' nel markup e "Leggi tutto" lo apre in linea (JS in common.js).
   ============================================================================= */
.rec-testo .rec-rest {
    display: none;
}

.rec-testo.is-open .rec-rest {
    display: inline;
}

.rec-testo.is-open .rec-ell {
    display: none;
}

.rec-more {
    display: inline-block;
    padding: 11px 4px;
    margin: -11px 0;          /* area di tocco 44px senza alterare il flusso del testo */
    color: var(--gold-on-light);
    font-family: "Nunito Sans", sans-serif;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
}

    .rec-more:hover,
    .rec-more:focus {
        color: var(--red-color);
        text-decoration: underline;
    }


/* =============================================================================
   CORREZIONI DI CONTRASTO SUL TOAST - valgono a ogni larghezza: il rapporto di
   contrasto e' un problema anche su desktop. Le dimensioni da tocco stanno
   invece nel blocco <= 991.98px piu' sotto.
   ============================================================================= */
.push-toast-cta {
    color: #8a5a1e; /* T06: l'oro #d99c54 su bianco dava 2.38:1 */
}

.breadcrumb li a,
.breadcrumb a {
    color: #e8b877; /* T09/T18: l'oro #d99c54 sul rosso #8e0202 dava 4.09:1 */
}

/* Il baffo decorativo (svg#baffo, position:absolute, z-index:2) scende sopra la
   banda rossa e taglia il testo del breadcrumb.
   Alzare lo z-index delle voci non basta: .container-screen e' gia'
   position:relative con z-index:2 e crea un contesto di impilamento, quindi
   qualsiasi z-index interno resta confinato li' dentro. A parita' di z-index
   (2 e 2) vince l'ultimo nel DOM, cioe' il baffo. Va alzato il contenitore. */
.breadcrumb-section .container-screen {
    z-index: 3;
}

/* Alzare il contenitore da solo non basta: ol.breadcrumb e i suoi li ereditano
   lo stesso rosso pieno #8e0202 (style.css:2847 e regole seguenti), quindi il
   testo viaggia sopra un rettangolo opaco che nasconde il baffo. Lo sfondo
   rosso deve restare SOLO su section.breadcrumb-section. */
.breadcrumb-section .breadcrumb,
.breadcrumb-section .breadcrumb li,
.breadcrumb-section .breadcrumb li a,
.breadcrumb-section .breadcrumb li:before,
.breadcrumb-section .breadcrumb li:after,
.breadcrumb-section nav {
    background-color: transparent !important;
    background-image: none !important;
}

    .breadcrumb li a:hover,
    .breadcrumb li a:focus {
        color: #fff;
    }


/* =============================================================================
   DIMENSIONI PER IL TOCCO - solo mobile e tablet (<= 991.98px).
   NOTA DI METODO (errore corretto il 06/09/2026): queste regole erano state
   scritte fuori dalle media query. Su desktop non servono - il mouse e'
   preciso - e cambiavano il layout: il copyright passava da 1440px centrati a
   un blocco di 588px ancorato a sinistra (max-width + margin:auto non centra
   un elemento in float:left), le voci del menu da 157px a 1400px, i campi del
   form da 40 a 48px, il breadcrumb da 20 a 44px di altezza.
   Qualsiasi regola di DIMENSIONE va messa qui dentro; fuori restano solo
   colori, contrasti e correzioni funzionali.
   ============================================================================= */
@media (max-width: 991.98px) {

    /* T03 - toast notifiche */
    .push-toast-x {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: -13px -10px -13px 0;
        font-size: 22px;
        line-height: 1;
    }

    .push-toast-cta {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 10px;
        font-size: 15px;
    }

    /* T08 - frecce del carosello */
    .swiper-button-prev,
    .swiper-button-next,
    .custom-arrow {
        min-width: 44px;
        min-height: 44px;
    }

    /* T12 - voci del menu a tutta larghezza */
    .menu_ul li {
        line-height: normal !important;
        margin-bottom: 10px !important;
    }

        .menu_ul li a {
            display: block;
            min-height: 48px;
            padding: 10px 8px;
            line-height: 1.2;
        }

    .menu_ul li.text-center a.language_menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 68px;
        min-height: 48px;
        padding: 12px 18px;
        font-size: 15px;
    }

    .menu_ul li .footer-list-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .menu_ul.show {
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* T02 - campi form: sotto i 16px Safari iOS zooma la pagina al focus */
    input[type=text].transparent,
    input[type=email].transparent,
    input[type=number].transparent,
    input[type=tel].transparent,
    input[type=search].transparent,
    select.transparent,
    textarea.transparent,
    input.form-control,
    textarea.form-control,
    select.form-control {
        font-size: 16px;
    }

    input[type=text].transparent,
    input[type=email].transparent,
    input[type=number].transparent,
    input[type=tel].transparent,
    select.transparent {
        height: 48px;
    }

    textarea.transparent {
        height: 140px;
    }

    /* T18 - numero di telefono */
    .link_oro {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 0;
    }

    /* T19 - copyright: niente max-width ne' margin:auto, il blocco e' in
       float:left e resta a tutta larghezza; la misura si accorcia col padding. */
    .copyright {
        font-size: 14px;
        line-height: 1.5;
        padding: 12px 8%;
    }

    /* T14 - consenso newsletter nel footer */
    .privacy-check {
        font-size: 14px;
        line-height: 1.5;
    }

        .privacy-check input[type="checkbox"] {
            width: 24px;
            height: 24px;
            margin-top: 1px;
            flex: 0 0 auto;
        }

    /* T09/T18 - breadcrumb */
    .breadcrumb li,
    .breadcrumb li a,
    .breadcrumb a {
        display: inline-flex;
        align-items: center;
    }

        .breadcrumb li a,
        .breadcrumb a {
            min-height: 44px;
            padding: 0 2px;
        }

    /* Il carosello recensioni ha margin-top:-100px (style.css:2527) per salire
       sopra la sezione precedente. Su desktop quei 100px cadono in uno spazio
       vuoto; su mobile, dopo la riduzione dei padding di sezione (T20), cadevano
       sopra il bottone "Prenota il tuo tavolo" e lo coprivano. */
    .fix-height-recensioni {
        margin-top: 0;
    }

    /* T22 - chiusura della modale mappa sempre raggiungibile */
    .over_mappa_google .btn_close_over {
        position: fixed;
        left: 50%;
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 2002;
        width: 60px;
        height: 60px;
    }
}


/* =============================================================================
   Blocchi "Pranzo / Cena" impilati su telefono (richiesta del 06/09/2026)
   Prima: .menu-section e' un flex a due colonne con .menu-box { flex: 1 } e
   altezza fissa 560px. A 390px ogni box restava largo ~175px e il primo era
   anche ribassato di 60px: due strisce verticali illeggibili.
   NOTA: il testo e il bottone dentro .menu-overlay hanno opacity:0 e si
   scoprono solo con :hover. Su un telefono l'hover non esiste, quindi il
   bottone "Esplora il menu" era raggiungibile solo dopo un primo tocco a
   vuoto sul box. Impilandoli va reso visibile il contenuto, altrimenti
   restano due fotografie senza testo.
   Esteso al tablet il 06/09/2026 su richiesta di Andrea: fino a 991.98px, cioe'
   ovunque non ci sia il puntatore del mouse.
   ============================================================================= */
@media (max-width: 991.98px) {
    .menu-section {
        flex-direction: column;
        max-height: none;
        gap: 16px;
        margin: 48px 0;
    }

    .menu-box {
        flex: none;
        width: 100%;
        height: 320px;
    }

    /* in colonna lo sfalsamento del primo blocco non ha piu' senso */
    .box-pranzo {
        margin-top: 0;
    }

    /* senza hover il contenuto deve essere sempre leggibile */
    .menu-overlay {
        background-color: rgba(0, 15, 40, 0.55);
        padding: 24px 20px;
    }

        .menu-overlay p {
            opacity: 1;
            max-width: 100%;
        }
}


/* =============================================================================
   Logo TripAdvisor: con gli attributi width/height aggiunti dal T15 e
   width:100% l'immagine si deformava. Serve height auto.
   ============================================================================= */
@media only screen and (max-width: 991px) {
    .tripadvisor_image {
        max-width: 300px;
        width: 100%;
        margin: auto;
        height: auto;
    }
}


/* =============================================================================
   Gronde laterali del contenitore stretto su mobile e tablet.
   ============================================================================= */
@media only screen and (max-width: 991px) {
    .container-small-screen {
        margin: 0 10px;
        width: calc(100% - 30px);
        padding-left: 15px;
        padding-right: 15px;
    }
}