/*
 * Override delle variabili colore di brand definite in bootstrap-italia.min.css
 * (file del parent, sovrascritto ad ogni aggiornamento del tema ufficiale).
 * Tenere questo file separato evita di dover ripetere le sostituzioni colore
 * ogni volta che bootstrap-italia.min.css viene aggiornato/risincronizzato.
 */
:root {
    --bs-link-color: #cc858a;
}

/*
 * Il framework Bootstrap Italia (v2.5.1, usato da v1.7.0 in poi) ha ridotto
 * .icon da una dimensione fissa (32px, versione precedentemente in uso in
 * produzione) a una dimensione relativa (1.2em), rimpicciolendo il logo nello
 * header (svg.icon dentro .it-brand-wrapper). Il logo (414x127px) e'
 * rettangolare, non quadrato: il viewBox su logo.php mantiene le proporzioni,
 * qui si forza solo l'altezza e si lascia la larghezza scalare di conseguenza.
 */
.it-brand-wrapper .it-brand-text svg.icon {
    width: 235px !important;
    height: 72px !important;
}

/*
 * Il framework definisce ".it-header-wrapper .it-brand-wrapper .icon image"
 * con dimensioni fisse (48px, 82px su desktop) pensate per uno stemma
 * quadrato - vince per specificita'/ordine sull'attributo width="100%"
 * height="100%" dell'<image> dentro il nostro logo (rettangolare, non
 * quadrato), impedendole di riempire il viewBox dell'SVG contenitore.
 * Sovrascritta qui con lo stesso identico selettore del framework.
 */
.it-header-wrapper .it-brand-wrapper .icon image {
    width: 100% !important;
    height: 100% !important;
}

/*
 * .card.card-bg-warning usa di default il colore "warning" del framework
 * (#995c00, ocra scuro). Il cliente usa questa classe per le card dei siti
 * tematici (template-parts/sito-tematico/card.php ha $bg_color = 'warning'
 * fisso, non una rotazione tra piu' colori) volendo pero' il colore
 * primario del brand, non il vero warning - coerente con quanto gia' in
 * produzione (verificato: la stessa regola con lo stesso colore esiste nel
 * bootstrap-italia.min.css del tema storico).
 */
.card.card-bg-warning {
    background-color: #cc858a !important;
}

.card.card-bg-warning .card-body .card-title,
.card.card-bg-warning .card-body .card-text {
    color: #fff !important;
}

/*
 * Il pannello del menu mobile (.menu-wrapper) e' pensato come pannello
 * laterale stretto (comuni.css posiziona .close-div a left:360px/330px in
 * base alla larghezza gia' presunta del pannello), ma senza una larghezza
 * esplicita il pannello collassa alla larghezza del contenuto (shrink-to-fit
 * di un position:absolute), lasciando la X di chiusura fuori dal pannello
 * stesso. Si forza qui una larghezza esplicita e si riposiziona la X in
 * base a "right" (ancorata la bordo del pannello) invece di "left" (valore
 * fisso scollegato dalla reale larghezza).
 */
@media (max-width: 991.8px) {
    .it-header-wrapper .navbar-collapsable .menu-wrapper {
        width: 400px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
    }

    .it-header-wrapper .navbar-collapsable .close-div {
        left: auto !important;
        right: calc(100% - 400px + 8px) !important;
    }
}

@media (max-width: 575.8px) {
    .it-header-wrapper .navbar-collapsable .menu-wrapper {
        width: 85vw;
    }

    .it-header-wrapper .navbar-collapsable .close-div {
        right: calc(15vw + 8px) !important;
    }
}

/*
 * X di chiusura del menu mobile a fill:#fff nel bundle, pensata per lo
 * sfondo scuro dell'header slim - qui la riportiamo al colore primario di
 * brand cosi' resta coerente col resto della UI.
 */
.close-div .close-menu .icon {
    fill: #cc858a !important;
}

/*
 * .navbar ha sfondo rosa fisso (pensato per la barra orizzontale desktop),
 * che su mobile resta visibile come un quadrato dietro al burger. Va tolto
 * solo su mobile: il rosa deve restare solo sul bottone tondo sotto.
 */
@media (max-width: 991.8px) {
    .it-header-navbar-wrapper .navbar {
        background: transparent !important;
    }
}

/*
 * Bottone hamburger senza contenitore visibile nel bundle (solo icona
 * cliccabile) - qui si aggiunge uno sfondo tondo per renderlo un vero
 * bottone circolare, coerente con altri bottoni rotondi del tema
 * (es. .rounded-icon della ricerca). Limitato a mobile (stesso breakpoint
 * del bundle, che nasconde il burger su desktop con display:none) per non
 * forzarlo visibile anche quando il menu orizzontale desktop e' attivo.
 */
@media (max-width: 991.8px) {
    button.custom-navbar-toggler[data-bs-toggle="navbarcollapsible"] {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        border-radius: 50% !important;
        background-color: #cc858a !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        transform: none !important;
    }

    button.custom-navbar-toggler[data-bs-toggle="navbarcollapsible"] svg.icon {
        fill: #fff !important;
        width: 22px !important;
        height: 22px !important;
    }
}