/*
 * Barra superiore su due righe (Components/Vertical/header.php, <nav class="... hdr-two-rows">).
 *   Riga 1: menu (sotto 1200px), cliente (da 1200px), totale, carrello, avatar, lingua.
 *   Riga 2: ricerca + "Ricerca per modello" (sotto 1200px solo icona).
 * Sotto i 1200px (mobile e tablet) il layout e' quello compatto, come il menu laterale Vuexy.
 * NON generato da Gulp: si edita direttamente.
 *
 * La barra Vuexy e' position: fixed e il contenuto parte con un padding-top fisso calcolato
 * per UNA riga (app-assets/css/components.css). Qui lo si allunga dell'altezza della riga 2.
 * Se cambia l'altezza della barra, aggiornare --hdr-row2-height.
 */
:root {
    /* riga 2 = input (2.714rem) + padding inferiore (0.8rem) */
    --hdr-row2-height: 3.514rem;
}

.header-navbar.hdr-two-rows {
    flex-wrap: wrap;
}

/* ---------- Riga 1 ---------- */
.hdr-two-rows > .navbar-container {
    flex: 1 1 100%;
    align-items: center;
    min-width: 0;
}

.hdr-two-rows .hdr-company {
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    margin: 0 1rem 0 0.5rem;
    line-height: 1.3;
}

.hdr-two-rows .hdr-company-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-two-rows .hdr-company-code {
    font-size: smaller;
}

/* Vuexy sotto i 992px manda a capo le voci di menu: qui devono restare su una riga */
.hdr-two-rows > .navbar-container > ul.ms-auto {
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* ---------- Riga 2 ---------- */
.hdr-two-rows > .hdr-search-row {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0 1rem 0.8rem;
}

.hdr-two-rows .hdr-search-form {
    flex: 1 1 auto;
    min-width: 0;
}

.hdr-two-rows .hdr-model-btn {
    flex: none;
    align-self: stretch; /* alto quanto il campo di ricerca */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    padding: 0.786rem 1rem;
}

@media (min-width: 576px) {
    .hdr-two-rows > .hdr-search-row {
        padding: 0 1.4rem 0.8rem;
    }
}

/* ---------- Spazio sotto la barra ---------- */
/* Due regole separate: un browser senza :has() scarterebbe l'intera lista di selettori. */
html .hdr-two-rows ~ .content.app-content {
    padding-top: calc(2rem + 4.45rem + 1.3rem + var(--hdr-row2-height));
}
html body:has(.hdr-two-rows) .content.app-content {
    padding-top: calc(2rem + 4.45rem + 1.3rem + var(--hdr-row2-height));
}

/* Mobile e tablet: pulsante solo icona */
@media (max-width: 1199.98px) {
    .hdr-two-rows .hdr-model-txt {
        display: none;
    }

    .hdr-two-rows .hdr-model-btn {
        padding: 0.786rem 0.9rem;
    }
}

/* Il padding Vuexy cambia a 768px, indipendentemente dal layout della barra */
@media (max-width: 767.98px) {
    /* Vuexy usa !important sotto i 768px */
    html .hdr-two-rows ~ .content.app-content {
        padding-top: calc(2rem - 0.8rem + 4.45rem + 1.3rem + var(--hdr-row2-height)) !important;
    }
    html body:has(.hdr-two-rows) .content.app-content {
        padding-top: calc(2rem - 0.8rem + 4.45rem + 1.3rem + var(--hdr-row2-height)) !important;
    }
}