/**
 * Il sito si adatta alla larghezza dello schermo.
 *
 * PERCHE'. body aveva min-width: 1264px e overflow: scroll, la griglia era
 * fissa a 940/960px e lo slider a 1264px: sotto quella larghezza comparivano
 * le barre di scorrimento orizzontali e la pagina andava letta trascinandola.
 * Da telefono era inservibile - ed e' dal telefono che l'area personale verra'
 * consultata, in scuderia.
 *
 * COME. Questo foglio si sovrappone agli altri e cambia SOLO le misure fisse.
 * Sopra i 980px non tocca niente: le regole o sono identiche a prima
 * ( width fissa -> max-width dello stesso valore ) o stanno dentro una media
 * query. A desktop il confronto prima/dopo deve essere indistinguibile, ed e'
 * il criterio con cui va verificato.
 *
 * Si toglie rimuovendo il suo <link> in shell.php: nessun altro file dipende
 * da qui.
 */


/* ============================================================
   1. Il corpo non impone piu' una larghezza minima
   ============================================================ */

body {
    min-width: 0 ;
    overflow-x: hidden ;
    overflow-y: auto ;
}

img {
    max-width: 100% ;
    height: auto ;
}


/* ============================================================
   2. I contenitori: stessa misura di prima, ma cedevole
   ============================================================ */

/* NB: NIENTE padding qui dentro.
   Le dodici colonne della griglia ( site.css ) hanno larghezze fisse che sommano a 960px
   esatti, margini compresi: bastano sei pixel di padding perche' l'ultima non
   ci stia piu' e vada a capo. E' successo al primo tentativo - «Eventi
   recenti» spariva dalla home. Lo spazio ai lati si aggiunge solo sotto il
   breakpoint, dove le colonne non sono piu' affiancate. */
.main,
footer {
    width: auto ;
    max-width: 940px ;
}

.container_12 {
    width: auto ;
    max-width: 960px ;
}


/* ============================================================
   3. Lo slider: proporzione invece di misure fisse
   ============================================================ */

/* height: auto toglierebbe lo spazio sotto l'immagine dove sta il banner
   ( 585 - 465 = 120px ): si restituisce come padding, cosi' resta anche
   quando l'altezza dell'immagine diventa proporzionale. */
#slide {
    width: auto ;
    max-width: 1264px ;
    height: auto ;
    padding-bottom: 120px ;
}

.slider {
    width: auto ;
    max-width: 1264px ;
    height: auto ;
    aspect-ratio: 1264 / 465 ;
}

.items {
    height: 100% ;
}

.items > li {
    height: 100% ;
}

.items > li img {
    width: 100% ;
    height: 100% ;
    object-fit: cover ;
    display: block ;
}

/* Il banner stava a top:465px, cioe' subito sotto l'immagine: adesso che
   l'immagine e' proporzionale, «subito sotto» si dice top: 100%. */
.banner {
    top: 100% ;
    left: 0 ;
    right: 0 ;
    width: auto ;
    max-width: 940px ;
    margin: 0 auto ;
    box-sizing: border-box ;
    padding-left: 16px ;
    padding-right: 16px ;
}


/* ============================================================
   4. Sotto i 980px: le colonne si impilano
   ============================================================ */

@media ( max-width: 980px ) {

    .main, footer, .container_12 {
        padding-left: 16px ;
        padding-right: 16px ;
        box-sizing: border-box ;
    }

    .container_12 .grid_1,  .container_12 .grid_2,  .container_12 .grid_3,
    .container_12 .grid_4,  .container_12 .grid_5,  .container_12 .grid_6,
    .container_12 .grid_7,  .container_12 .grid_8,  .container_12 .grid_9,
    .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 {
        float: none ;
        display: block ;
        width: auto ;
        margin: 0 0 22px 0 ;
    }

    /* I rientri della griglia non hanno senso in colonna unica. */
    .container_12 .prefix_1, .container_12 .prefix_2, .container_12 .prefix_3,
    .container_12 .prefix_4, .container_12 .prefix_5, .container_12 .prefix_6 {
        margin-left: 0 ;
    }

    .container_12 .suffix_1, .container_12 .suffix_2, .container_12 .suffix_3,
    .container_12 .suffix_4, .container_12 .suffix_5, .container_12 .suffix_6 {
        margin-right: 0 ;
    }

    /* Il piede: le tre colonne una sotto l'altra. */
    .footer-col-1, .footer-col-2, .footer-col-3 {
        float: none ;
        width: auto ;
        margin: 0 0 18px 0 ;
    }

    /* Lo slider perde il testo grande: sotto resterebbe una parola per riga. */
    .banner p strong { font-size: 30px ; line-height: 36px ; letter-spacing: -1px ; }
    .banner p span   { font-size: 15px ; line-height: 20px ; letter-spacing: 0 ; }
    .banner p        { width: auto ; float: none ; }
    .banner a        { float: none ; display: inline-block ; margin-top: 10px ;
                       font-size: 18px ; padding: 8px 18px 12px 18px ; }

    /* Le frecce sopra l'immagine, non piu' nella fascia nera sotto. */
    .prev { left: 10px ; }
    .next { right: 10px ; }
}


/* ============================================================
   5. Sotto i 768px: menu a bottone ( lo apre script.js )
   ============================================================ */

@media ( max-width: 768px ) {

    header .main { text-align: center ; }
    .social-icons { float: none ; display: inline-block ; margin-top: 10px ; }

    /* La fascia del banner mangia troppo spazio su schermo piccolo. */
    .banner { position: static ; margin-top: 0 ; }
    #slide  { padding-bottom: 0 ; }
    .prev, .next { top: 40% ; }

    /* Il blocco utente resta leggibile: solo l'avatar, senza il nome. */
    #cssmenu .utesti { display: none ; }
}


/* ============================================================
   6. L'area riservata
   ============================================================ */

@media ( max-width: 980px ) {

    .accesso { width: auto ; max-width: 380px ; }

    /* La tabella dei cavalli scorre da sola invece di allargare la pagina. */
    .cavalli { display: block ; overflow-x: auto ; white-space: nowrap ; }

    .dato { display: block ; margin-right: 0 ; margin-bottom: 12px ; }
}


/* ============================================================
   7. Il menu sotto i 768px: colori per fondo scuro
   ============================================================

   Le regole per il menu a bottone ci sono da sempre nello stile del sito ( site.css ), ma
   sono scritte per un fondo chiaro - testo #000000, barrette dell'hamburger
   #000000 - mentre la barra del menu e' verde scuro. Risultato: nero su
   verde scuro, cioe' niente.

   Prima non si vedeva perche' non si arrivava mai a farle scattare: senza
   <meta viewport> il telefono fingeva una finestra da 980px e mostrava il
   menu da scrivania, rimpicciolito al punto da non potersi leggere. Adesso
   che la pagina si adatta davvero, quelle regole entrano in funzione e vanno
   vestite.
   ============================================================ */

@media ( max-width: 768px ) {

    /* Il bottone: scritta e hamburger chiari. */
    #cssmenu #menu-button {
        color: #fff ;
        padding: 18px 20px ;
        font-size: 14px ;
        border-bottom: 1px solid rgba( 126, 201, 126, .25 ) ;
    }

    #cssmenu #menu-button::after,
    #cssmenu #menu-button::before { background: #fff ; border-color: #fff ; }

    #cssmenu #menu-button::after  { top: 24px ; }
    #cssmenu #menu-button::before { top: 31px ; }

    /* L'elenco si apre col bottone: lo script aggiunge .open. */
    #cssmenu > ul         { display: none ; }
    #cssmenu > ul.open    { display: block ; }
    #cssmenu ul ul        { display: none ; }
    #cssmenu ul ul.open   { display: block ; }

    /* Le voci: una per riga, leggibili, con un bersaglio grande per il dito. */
    #cssmenu ul li,
    #cssmenu ul ul li,
    #cssmenu ul li:hover > ul > li { width: 100% ; height: auto ; float: none ; }

    #cssmenu ul li a,
    #cssmenu ul ul li a {
        display: block ; width: 100% ;
        padding: 15px 20px ; font-size: 14px ;
        color: #fff ; background: transparent ;
        border-bottom: 1px solid rgba( 126, 201, 126, .18 ) ;
        text-align: left ;
    }

    #cssmenu > ul > li.active > a { color: #7ec97e ; }

    /* I sottomenu rientrati, cosi' si capisce che dipendono dalla voce sopra. */
    #cssmenu ul ul li a     { padding-left: 38px ; background: rgba( 0, 0, 0, .18 ) ; }
    #cssmenu ul ul ul li a  { padding-left: 56px ; }

    /* Il tasto che apre il sottomenu: barrette chiare, non nere. */
    #cssmenu .submenu-button        { height: 52px ; width: 52px ; }
    #cssmenu .submenu-button::after,
    #cssmenu .submenu-button::before { background: #7ec97e ; }

    /* Il blocco utente torna in riga, dentro l'elenco. */
    #cssmenu ul.kozuka > li.uvoce { width: 100% ; }
    #cssmenu .ublocco   { width: 100% ; padding: 12px 20px ;
                          border-bottom: 1px solid rgba( 126, 201, 126, .18 ) ; }
    /* Qui il blocco ha una riga tutta sua: niente tetto, niente troncatura.
       Il taglio serve solo nella barra orizzontale, dove il nome contende lo
       spazio alle altre voci. */
    #cssmenu .utesti    { display: block ; max-width: none ; }
    #cssmenu .umenu     { position: static ; width: 100% ; box-shadow: none ; }
}