/*
 * BNI Perugia — Pulsanti Legend
 * Versione v13
 *
 * Due stili distinti:
 * 1) p.legend = pulsante arrotondato
 * 2) #bni_btn_container = tre pulsanti rettangolari con hover dedicato
 */

/* =========================================================
   1. PULSANTI LEGEND — ARROTONDATI
   ========================================================= */

body .page p.legend {
    text-align: center !important;
    margin: 24px 0 !important;
}

body .page p.legend > a {
    display: inline-block !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 90% !important;

    padding: 14px 28px !important;
    margin: 0 auto !important;

    background: #cf2030 !important;
    background-color: #cf2030 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 2px solid #cf2030 !important;
    border-radius: 40px !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    text-decoration: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease !important;
}

body .page p.legend > a *,
body .page p.legend > a:link,
body .page p.legend > a:visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
}

body .page p.legend > a:hover,
body .page p.legend > a:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #cf2030 !important;
    -webkit-text-fill-color: #cf2030 !important;
    border-color: #cf2030 !important;
    text-decoration: none !important;
    outline: none !important;
}

body .page p.legend > a:hover *,
body .page p.legend > a:focus * {
    color: #cf2030 !important;
    -webkit-text-fill-color: #cf2030 !important;
}


/* =========================================================
   2. TRE PULSANTI CAPITOLI — RETTANGOLARI
   ========================================================= */

body .page #bni_btn_container {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 30px auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

body .page #bni_btn_container > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 86px !important;
    padding: 18px 24px !important;
    margin: 0 !important;

    background: #cf2030 !important;
    background-color: #cf2030 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 3px solid #cf2030 !important;
    border-radius: 0 !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    text-decoration: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease !important;
}

body .page #bni_btn_container > a *,
body .page #bni_btn_container > a:link,
body .page #bni_btn_container > a:visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
}

/* Hover: fondo bianco, testo rosso, effetto rettangolare netto */
body .page #bni_btn_container > a:hover,
body .page #bni_btn_container > a:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;

    color: #cf2030 !important;
    -webkit-text-fill-color: #cf2030 !important;

    border-top-color: #cf2030 !important;
    border-right-color: #ffffff !important;
    border-bottom-color: #cf2030 !important;
    border-left-color: #ffffff !important;

    text-decoration: none !important;
    outline: none !important;
    transform: translateY(-2px) !important;
}

body .page #bni_btn_container > a:hover *,
body .page #bni_btn_container > a:focus * {
    color: #cf2030 !important;
    -webkit-text-fill-color: #cf2030 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    body .page p.legend {
        margin: 18px 0 !important;
    }

    body .page p.legend > a {
        max-width: 94% !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }

    body .page #bni_btn_container {
        display: block !important;
        width: 100% !important;
        margin: 22px auto !important;
        padding: 0 12px !important;
    }

    body .page #bni_btn_container > a {
        display: flex !important;
        width: 100% !important;
        max-width: 520px !important;
        min-height: 68px !important;
        margin: 10px auto !important;
        padding: 15px 18px !important;
        font-size: 16px !important;
    }
}


/* =========================================================
   V9 — CTA "FILE E STRUMENTI PER I COMITATI"
   Più compatta e meno invasiva
   ========================================================= */

body .page .main-red-button-hover{
    width: 100% !important;
    max-width: 760px !important;
    margin: 30px auto !important;
    text-align: center !important;
}

body .page .main-red-button-hover > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 58px !important;

    padding: 16px 30px !important;
    margin: 0 auto !important;

    background: #cf2030 !important;
    background-color: #cf2030 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 2px solid #cf2030 !important;
    border-radius: 0 !important;

    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;

    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease !important;
}

body .page .main-red-button-hover > a:link,
body .page .main-red-button-hover > a:visited,
body .page .main-red-button-hover > a *{
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
}

body .page .main-red-button-hover > a:hover,
body .page .main-red-button-hover > a:focus{
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #cf2030 !important;
    -webkit-text-fill-color: #cf2030 !important;
    border-color: #cf2030 !important;
    text-decoration: none !important;
    outline: none !important;
}

body .page .main-red-button-hover > a:hover *,
body .page .main-red-button-hover > a:focus *{
    color: #cf2030 !important;
    -webkit-text-fill-color: #cf2030 !important;
}

@media (max-width: 767px){
    body .page .main-red-button-hover{
        max-width: 92% !important;
        margin: 22px auto !important;
    }

    body .page .main-red-button-hover > a{
        min-height: 54px !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }
}


/* =========================================================
   V10 — CTA COMITATI ULTRA-COMPATTA
   Override finale della V9
   ========================================================= */

body .page .main-red-button-hover{
    width: auto !important;
    max-width: 520px !important;
    margin: 26px auto !important;
}

body .page .main-red-button-hover > a{
    width: auto !important;
    min-width: 420px !important;
    max-width: 520px !important;
    min-height: 0 !important;

    padding: 12px 28px !important;

    font-size: 16px !important;
    line-height: 1.2 !important;
}

@media (max-width: 767px){
    body .page .main-red-button-hover{
        width: 90% !important;
        max-width: 420px !important;
    }

    body .page .main-red-button-hover > a{
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 12px 18px !important;
        font-size: 15px !important;
    }
}


/* =========================================================
   V11 — CHIRURGICA SU #bni_btn_container
   Riduce SOLO i tre pulsanti Capitoli.
   ========================================================= */

body .page #bni_btn_container{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:16px !important;
    flex-wrap:wrap !important;
    width:100% !important;
    margin:28px auto !important;
    padding:0 !important;
}

body .page #bni_btn_container > a{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    min-height:0 !important;
    padding:14px 24px !important;
    margin:0 !important;

    background:#cf2030 !important;
    background-color:#cf2030 !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    border:2px solid #cf2030 !important;
    border-radius:0 !important;

    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.2 !important;

    text-align:center !important;
    text-decoration:none !important;
    white-space:normal !important;
    box-sizing:border-box !important;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease !important;
}

body .page #bni_btn_container > a:hover,
body .page #bni_btn_container > a:focus{
    background:#ffffff !important;
    background-color:#ffffff !important;

    color:#cf2030 !important;
    -webkit-text-fill-color:#cf2030 !important;

    border-top-color:#cf2030 !important;
    border-right-color:#ffffff !important;
    border-bottom-color:#cf2030 !important;
    border-left-color:#ffffff !important;

    text-decoration:none !important;
    outline:none !important;
}

@media (max-width:767px){
    body .page #bni_btn_container{
        display:block !important;
        width:100% !important;
        margin:22px auto !important;
        padding:0 12px !important;
    }

    body .page #bni_btn_container > a{
        display:block !important;
        width:100% !important;
        max-width:520px !important;
        margin:10px auto !important;
        padding:13px 18px !important;
        font-size:15px !important;
    }
}


/* =========================================================
   V12 — HOVER ANIMATO STORICO
   Solo per i 3 pulsanti rettangolari #bni_btn_container.
   Linea superiore e inferiore scorrono in hover.
   ========================================================= */

body .page #bni_btn_container > a{
    position:relative !important;
    overflow:hidden !important;

    border:0 !important;
    border-radius:0 !important;

    background:#cf2030 !important;
    background-color:#cf2030 !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    transform:none !important;

    transition:
        background-color .30s ease,
        color .30s ease !important;
}

/* Linea superiore */
body .page #bni_btn_container > a::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;

    width:0 !important;
    height:3px !important;

    background:#cf2030 !important;

    transition:width .38s ease !important;
    z-index:3 !important;
}

/* Linea inferiore: entra dal lato opposto */
body .page #bni_btn_container > a::after{
    content:"" !important;
    position:absolute !important;
    right:0 !important;
    bottom:0 !important;

    width:0 !important;
    height:3px !important;

    background:#cf2030 !important;

    transition:width .38s ease .04s !important;
    z-index:3 !important;
}

body .page #bni_btn_container > a:hover,
body .page #bni_btn_container > a:focus{
    background:#f8d9dd !important;
    background-color:#f8d9dd !important;

    color:#cf2030 !important;
    -webkit-text-fill-color:#cf2030 !important;

    border:0 !important;
    outline:none !important;
    transform:none !important;
}

/* Le due linee completano la corsa */
body .page #bni_btn_container > a:hover::before,
body .page #bni_btn_container > a:focus::before,
body .page #bni_btn_container > a:hover::after,
body .page #bni_btn_container > a:focus::after{
    width:100% !important;
}

body .page #bni_btn_container > a:hover *,
body .page #bni_btn_container > a:focus *{
    color:#cf2030 !important;
    -webkit-text-fill-color:#cf2030 !important;
}


/* =========================================================
   V13 — HOVER BIANCO + LINEE PIÙ LENTE
   Solo per i 3 pulsanti rettangolari #bni_btn_container.
   ========================================================= */

body .page #bni_btn_container > a{
    background:#cf2030 !important;
    background-color:#cf2030 !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    transition:
        background-color .35s ease,
        color .35s ease !important;
}

/* Linea superiore più lenta */
body .page #bni_btn_container > a::before{
    transition:width .75s ease !important;
}

/* Linea inferiore più lenta e leggermente sfalsata */
body .page #bni_btn_container > a::after{
    transition:width .75s ease .08s !important;
}

body .page #bni_btn_container > a:hover,
body .page #bni_btn_container > a:focus{
    background:#ffffff !important;
    background-color:#ffffff !important;

    color:#cf2030 !important;
    -webkit-text-fill-color:#cf2030 !important;

    border:0 !important;
    outline:none !important;
    transform:none !important;
}