/* Griglia "about-section" (scheda annuncio): 6 box su un'unica riga da
   desktop in su, 3 per riga sotto i 768px (2 righe), per non allungare
   troppo la pagina su mobile. Usa flexbox al posto del float del tema
   padre così non serve gestire i "clear" per righe multiple. */
.about-section .block-bordered.cb-box-grid {
    display: flex;
    flex-wrap: wrap;
}

.about-section .block-bordered.cb-box-grid .block-col {
    box-sizing: border-box;
    float: none;
    width: 16.666%;
    border-right: 1px dotted #d8dce1;
    /* Altezza minima uniforme: se un valore va a capo su 2 righe (es.
       "Baita o Chalet" nel box Tipo) quel box diventava più alto degli
       altri, con la linea tratteggiata più lunga solo lì. */
    min-height: 175px;
}

.about-section .block-bordered.cb-box-grid .block-col:nth-child(6n) {
    border-right: 0;
}

/* Icona "Altitudine": stesso grigio chiaro delle icone Font Awesome
   del tema (.block-icon .fa), applicato qui a mano perché è un SVG. */
.block-icon .cb-altitude-icon {
    color: #d8dce1;
}

@media (max-width: 768px) {
    .about-section .block-bordered.cb-box-grid .block-col {
        width: 33.333%;
        padding: 15px 6px;
        min-height: 120px;
        border-right: 1px dotted #d8dce1;
    }

    .about-section .block-bordered.cb-box-grid .block-col:nth-child(6n) {
        border-right: 1px dotted #d8dce1;
    }

    .about-section .block-bordered.cb-box-grid .block-col:nth-child(3n) {
        border-right: 0;
    }

    .about-section .block-bordered.cb-box-grid .block-icon {
        font-size: 22px;
        line-height: 22px;
        margin-bottom: 8px;
    }

    .about-section .block-bordered.cb-box-grid .block-icon .cb-altitude-icon {
        width: 22px;
        height: 22px;
    }
}

/* ---------------------------------------------------------------------------
   Pulsante dei filtri nella pagina risultati di ricerca (/affitti/, vista con
   mappa). Il tema lo rende quasi invisibile in due modi diversi:

   - su desktop è un pulsante con la sola icona, senza nessuna etichetta;
   - su mobile il pulsante filtri previsto dal tema sta dentro un contenitore
     che a quella larghezza è display:none, quindi non è raggiungibile: resta
     solo quello dentro il pannello di ricerca, in grigio chiaro, che sembra
     disattivato.

   Qui si aggiunge l'etichetta mancante su desktop e si dà peso visivo a
   entrambi, così si leggono come un'azione e non come un elemento spento.
   --------------------------------------------------------------------------- */

/* Il tema dà l'altezza ai pulsanti con line-height (40px), non con il padding
   verticale: NON va messo display:flex qui, perché toglierebbe effetto al
   line-height e il pulsante si schiaccerebbe a un terzo dell'altezza di
   "Search" che gli sta accanto. Si aggiunge solo il padding orizzontale, che
   sul pulsante a sola icona il tema non prevede. */
button.btn-grey-outlined[data-target="#half-map-search-collapse"],
.overlay-search-module .search-filter-mobile-btn {
    border-color: #96c11e;
    color: #96c11e;
    font-weight: 600;
}

/* Larghezza e padding vanno richiesti ripetendo i contenitori: main.css tratta
   questo pulsante come "sola icona" e gli impone `width: 65px; padding: 0` con
   `.half-map-search .half-map-search-buttons .btn-grey-outlined` — tre classi,
   che batterebbero un selettore più corto. Senza `width: auto` l'etichetta
   aggiunta finisce tagliata e va a finire sotto il pulsante "Search". */
.half-map-search .half-map-search-buttons button.btn-grey-outlined[data-target="#half-map-search-collapse"] {
    width: auto;
    padding: 0 18px;
}

/* Desktop: l'etichetta che il tema non stampa affatto. */
button.btn-grey-outlined[data-target="#half-map-search-collapse"]:not(.visible-xs)::after {
    content: "Filtri";
    margin-left: 8px;
}

/* Il tema, al passaggio del mouse, riporta questo pulsante ai suoi grigi:
   il verde sparirebbe proprio nel momento in cui si sta per cliccare.
   Qui invece si riempie di verde, come fa il pulsante "Search" accanto.
   Vale anche a pannello aperto (aria-expanded), così resta evidente che i
   filtri sono quelli. */
button.btn-grey-outlined[data-target="#half-map-search-collapse"]:hover,
button.btn-grey-outlined[data-target="#half-map-search-collapse"]:focus,
button.btn-grey-outlined[data-target="#half-map-search-collapse"][aria-expanded="true"],
.overlay-search-module .search-filter-mobile-btn:hover,
.overlay-search-module .search-filter-mobile-btn:focus,
.overlay-search-module .search-filter-mobile-btn.active {
    border-color: #96c11e;
    background-color: #96c11e;
    color: #fff;
}

/* Pannello di ricerca su mobile (/affitti/): aprendo i filtri, il pulsante
   "Search" veniva spinto sotto il bordo dello schermo dai 517px del pannello.
   Restava raggiungibile solo scorrendo fino in fondo, e all'utente sembrava
   sparito: per rivederlo bisognava richiudere i filtri.

   Ora resta ancorato in basso, come "Applica filtri" nel pannello delle pagine
   regione. Lo z-index deve superare il 6 dichiarato dal tema su
   `.search-filter`, altrimenti il pannello gli passa sopra e il pulsante
   resta invisibile pur essendo in posizione. */
@media (max-width: 991px) {
    .overlay-search-module .search-button > .btn-primary {
        position: sticky;
        bottom: 0;
        z-index: 10;
        box-shadow: 0 -8px 16px rgba(255, 255, 255, .9);
    }
}

/* NOTA per chi ci mette mano in futuro: il pannello filtri del tema su mobile
   dispone GIÀ Servizi e Vicinanze su due colonne. Non serve aggiungerne uno
   proprio, e conviene non provarci: main.css fissa `.filters { height: 40px }`,
   quindi cambiando il tipo di layout (grid/flex) il contenuto trabocca dal
   contenitore e finisce sopra le voci successive e sui pulsanti. Provato e
   scartato. */

/* ---------------------------------------------------------------------------
   Pulsante "Area riservata" / "Login" nell'intestazione (desktop).

   Il tema lo stampa come semplice testo grigio in fondo alla barra, dove non
   si legge come un'azione, e al passaggio del mouse lo porta al rosa (#f15e75)
   che sul sito non compare da nessun'altra parte. Qui diventa un pulsante
   contornato di verde che al passaggio del mouse si riempie: stesso
   comportamento del pulsante "Filtri" qui sopra.

   L'etichetta è diversa fra i due siti ("Area riservata" in produzione,
   "Login" su new.cercobaita.com): il selettore non guarda il testo, quindi la
   stessa regola vale per entrambi.
   --------------------------------------------------------------------------- */

/* ATTENZIONE: la barra alta 80px la tiene su proprio questo link, con la
   `line-height: 80px` che arriva dal pannello (opzioni tema > tipografia del
   menu). Quella misura va ridotta, altrimenti il bordo disegnerebbe un
   rettangolo alto quanto tutta l'intestazione; ma riducendola e basta,
   l'intera barra si accorcia da 81px a 39px e il logo si stringe in mezzo.
   L'altezza viene quindi rimessa qui sulla lista che contiene il link.
   Se un giorno si cambia l'altezza del menu dal pannello, aggiornare
   anche questo valore. */
.account-login .login-register {
    line-height: 80px;
}

.account-login .login-register > li {
    vertical-align: middle;
}

/* I due nomi di classe nel selettore servono a battere le regole del pannello
   (`.login-register a`), che vengono stampate dopo questo foglio di stile. */
.account-login .login-register a {
    display: inline-block;
    padding: 0 12px;
    border: 1px solid #96c11e;
    border-radius: 4px;
    line-height: 30px;
    color: #96c11e;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease;
}

.account-login .login-register a:hover,
.account-login .login-register a:focus,
.account-login .login-register a:active {
    border-color: #96c11e;
    background-color: #96c11e;
    color: #fff;
}

/* Sul telefono lo stesso comando esiste (vedi l'override
   `template-parts/header/header-mobile.php`, che aggiunge l'etichetta accanto
   all'icona e apre direttamente la finestra di accesso), ma qui è testo verde
   e basta: NIENTE bordo.

   Il bordo c'era, ed è stato tolto di proposito. Su desktop il riquadro sta
   accanto a un logo alto 45px e a un menù, e ci sta; sul telefono il logo è
   alto 30px e la barra è larga 320-375px, quindi lo stesso riquadro diventa
   l'elemento più pesante dello schermo e schiaccia il marchio. Se si è tentati
   di rimetterlo, guardare prima la barra intera su uno schermo da 320px.

   `float: right` invece NON è sostituibile con il `text-align: right` che il
   tema usa già su `.user-menu`: il comando con l'etichetta è più largo della
   colonna che lo contiene (col-xs-3, cioè 80px su uno schermo da 320px), e in
   quel caso il testo allineato a destra non sposta niente — parte dal bordo
   sinistro della colonna e finisce fuori dallo schermo, dove
   `.header-mobile-wrap { overflow: hidden }` lo taglia. Con il float il bordo
   destro resta ancorato alla colonna e l'eccedenza va a sinistra, nello
   spazio vuoto accanto al logo.

   Misure verificate sulla pagina vera: dal logo dista 37px su uno schermo da
   375px e 9px su uno da 320px (il caso peggiore, tipo iPhone SE). Ingrandendo
   il corpo del testo o allungando l'etichetta si finisce addosso al logo. */
.header-mobile .user-menu .cb-mobile-login {
    display: inline-flex;
    float: right;
    align-items: center;
    /* Stessa altezza della barra: il float esce dal flusso e non eredita
       nessun centramento verticale, così invece si centra da sé. */
    height: 60px;
    padding: 0 12px;
    color: #96c11e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.header-mobile .user-menu .cb-mobile-login .homey-icon {
    margin-right: 6px;
    font-size: 16px;
}

/* Sul telefono non esiste il passaggio del mouse: il verde più scuro serve da
   riscontro al tocco, mentre il dito è ancora sullo schermo. */
.header-mobile .user-menu .cb-mobile-login:hover,
.header-mobile .user-menu .cb-mobile-login:focus,
.header-mobile .user-menu .cb-mobile-login:active {
    background-color: transparent;
    color: #7ba319;
}

/* ---------------------------------------------------------------------------
   Pulsante "Filtri" fisso in basso nella pagina risultati (/affitti/).

   Volutamente SOLO sotto i 768px. Da lì in su il pulsante "Filtri" della barra
   di ricerca è già visibile e non scorre via (gli annunci scorrono dentro il
   proprio contenitore, la barra resta ferma in alto), quindi una pillola
   flottante sarebbe un secondo comando identico a pochi centimetri dal primo.

   Lo stile ripete quello della pillola delle pagine regione invece di
   riusarne la classe: quel CSS sta in filters.css, che viene caricato solo
   nelle pagine di tassonomia. Se si cambia l'aspetto di una, cambiare anche
   l'altra (cerca `.cercobaita-filters-trigger` in filters/filters.css).
   --------------------------------------------------------------------------- */
.cercobaita-search-filters-trigger {
    display: none;
}

@media (max-width: 767px) {
    .cercobaita-search-filters-trigger {
        display: flex;
        position: fixed;
        z-index: 1030;
        right: 15px;
        bottom: 20px;
        left: 15px;
        align-items: center;
        justify-content: center;
        padding: 14px 20px;
        border: 0;
        border-radius: 40px;
        background-color: #96c11e;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
    }

    .cercobaita-search-filters-trigger .homey-icon {
        margin-right: 8px;
    }

    /* Aperto il pannello di ricerca la pillola non serve più: la classe la
       mette lo script osservando il pannello (vedi search-filters-trigger.js),
       perché dipendere dall'annidamento dei due elementi sarebbe fragile. */
    .cercobaita-search-filters-trigger.is-hidden {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Testo delle pagine di categoria (regioni e tipologie)

   Il markup arriva da template-parts/common-taxonomy.php, che divide la
   descrizione del termine in due: il primo paragrafo sopra la griglia
   (.cb-taxonomy-intro) e il resto sotto (.cb-taxonomy-testo). Il perché della
   divisione sta nel commento di quel file, in breve: misurando la pagina, sopra
   la griglia ci stanno circa 300 caratteri prima di spingere la prima scheda
   fuori dallo schermo del telefono.

   Al posto dell'intro il tema padre ripeteva il nome del termine in un <p>
   senza classe, che ereditava il corpo del testo a 14px. Troppo piccolo per un
   paragrafo che ora si legge davvero, quindi qui si sale a 15. Niente colori
   nuovi, solo respiro e una misura di riga leggibile.
   --------------------------------------------------------------------------- */
/* Larghezza in px e non in ch: l'unita' ch misura lo zero, che in questo font e'
   piu' largo della lettera media, quindi "70ch" dava in realta' 85 caratteri per
   riga e il nome dell'unita' ingannava chi legge il codice. A 640px siamo sui 97
   caratteri: sopra i 75-80 la lettura peggiora un po', ma il blocco resta troppo
   piccolo rispetto all'H1 e alla griglia se si sta piu' stretti. Misura scelta
   guardando la pagina il 16/08/2026, vedi M.7 di MIGRAZIONE-SITO-UFFICIALE.md. */
.cb-taxonomy-intro,
.cb-taxonomy-testo {
    max-width: 640px;
}

.cb-taxonomy-intro p,
.cb-taxonomy-testo p {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.65;
}

.cb-taxonomy-intro p:last-child,
.cb-taxonomy-testo p:last-child {
    margin-bottom: 0;
}

.cb-taxonomy-intro {
    margin-bottom: 22px;
}

/* Sotto la griglia il testo ha bisogno di staccarsi dall'ultima fila di schede,
   altrimenti sembra la didascalia dell'annuncio che gli sta sopra. */
.cb-taxonomy-testo {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid #e6e8ea;
}

/* I sottotitoli del testo in fondo. Il margine sopra e' piu' grande di quello
   sotto apposta: così ogni titolo sta attaccato al paragrafo che introduce e
   staccato da quello che chiude il blocco precedente. */
.cb-taxonomy-testo h2,
.cb-taxonomy-testo h3 {
    margin-top: 26px;
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.35;
}

.cb-taxonomy-testo > :first-child {
    margin-top: 0;
}