/* mobile.css
   Regole per forzare l'allineamento logo - ricerca - hamburger su mobile portrait
   + corregge stacking del menu a tendina (z-index)
*/

/* =========================
   Regole generali mobile (<=767px)
   ========================= */
@media (max-width: 767px) {
    /* Trasformiamo la navbar in un flex container orizzontale */
    .main-header .navbar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;       /* impedisce il ritorno a capo */
        gap: 8px;
        position: relative;      /* per posizionare la .navbar-collapse assoluta rispetto a questo elemento */
        width: 100%;
    }

    /* Logo: compatto e non-grow */
    .main-header .navbar-brand {
        flex: 0 0 auto;
        max-width: 50px;
        padding: 0;
        margin-right: 8px;
    }
    .main-header .navbar-brand img.nav-logo {
        max-width: 120px;
        width: auto;
        height: auto;
        display: block;
    }

    /* Form di ricerca: non si espande, larghezza forzata */
    .main-header .quick-search {
        flex: 0 0 auto !important;
        width: 140px;      /* valore forzato: riduci qui (es. 120px o 100px) se serve */
        margin: 0 6px;
        padding: 0;
        min-width: 0;      /* importante per evitare overflow */
    }

    /* Assicuriamoci che il contenuto interno sia centrato */
    .main-header .quick-search .d-flex {
        display: flex;
        align-items: center;
    }

    /* Evitiamo che il wrapper interno cresca */
    .main-header .quick-search .field-search {
        flex: 0 0 auto !important;
        width: 100%;
        min-width: 0;
    }

    .main-header .quick-search .form-group {
        margin: 0;
    }

    /* Input: forzato a occupare la larghezza del wrapper */
    .main-header .quick-search input.form-control {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        font-size: 13px;
        padding: 6px 8px;
        height: auto;
    }

    /* Toggler (hamburger) compatto */
    .main-header .navbar-toggler {
        flex: 0 0 auto;
        margin-left: 8px;
        border: 0;
        padding: 6px;
    }

    /* =========================
       Gestione del menu collapse (quando si apre l'hamburger)
       ========================= */
    /* Posizioniamo il menu espanso in overlay sotto la navbar,
       con z-index maggiore rispetto all'header fisso */
    .main-header .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 2000;                /* superiore allo z-index dell'header */
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        display: none;                /* bootstrap aggiunge .show quando è aperto */
    }

    /* Quando è aperto */
    .main-header .navbar-collapse.show {
        display: block;
    }

    /* Layout interno del menu collapse */
    .main-header .navbar-collapse .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 8px 12px;
    }

    .main-header .navbar-collapse .navbar-nav .nav-item {
        padding: 8px 6px;
    }
	
	
	
    /* Rende lo slider molto più compatto su mobile */
    #slider {
        height: 300px !important;   /* riduci a piacere (200–350px) */
    }

    /* Le immagini dentro lo slider devono adattarsi */
    #slider img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover;   /* riempie senza deformare */
    }

    /* Eventuale testo interno centrato meglio */
    #slider .banner-search {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }	
}

/* Variante proporzionale se vuoi adattarlo meglio agli schermi larghi in landscape */
@media (max-width: 767px) and (orientation: landscape) {
    #slider {
        height: 50vh !important;   /* occupa metà altezza dello schermo */
    }

    #slider .banner-search {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}





/* =========================
   Regole specifiche portrait (ulteriore compattezza + nascondi lente)
   ========================= */
@media (max-width: 767px) and (orientation: portrait) {
    /* Restringiamo ulteriormente l'input su portrait */
    .main-header .quick-search {
        width: 120px !important; /* valore più compatto per garantire spazio ad logo + hamburger */
    }

    .main-header .quick-search input.form-control {
        font-size: 13px;
        padding: 5px 6px;
    }

    /* Nascondi la lente di ricerca solo in portrait */
    .main-header .quick-search i.fa-solid.fa-magnifying-glass,
    .main-header .quick-search i.fa-magnifying-glass,
    .main-header .quick-search .field-icon .fa-magnifying-glass {
        display: none !important;
    }

    /* Riduciamo leggermente il logo su portrait se serve */
    .main-header .navbar-brand img.nav-logo {
        max-width: 80px;
    }

    /* Riaffermiamo di non far andare a capo la navbar */
    .main-header .navbar {
        flex-wrap: nowrap !important;
    }
}





@media (max-width: 767px) and (orientation: portrait) {
    .tagline, .isax-h6 {
        text-align: center !important;
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}






/* =========================
   NOTE UTILI
   =========================
   - Se il campo è ancora troppo largo su qualche dispositivo, riduci
     la proprietà `width` in .main-header .quick-search (es. 100px).
   - Questo file fornisce overlay per il menu collapsed: la .navbar-collapse
     è posizionata assoluta rispetto alla .navbar (position:relative).
   - Ricordati di svuotare la cache del browser (o usare Ctrl+F5) dopo
     aver caricato il nuovo CSS per vedere subito le modifiche.
*/