/*
 * Personalizzazioni del Portale Elezioni.
 * Tenere al minimo: lo stile è dato da Bootstrap Italia (modello Comuni di Designers Italia).
 * Verificare sempre il contrasto dei colori (WCAG 2.1 AA, rapporto almeno 4.5:1).
 */

/*
 * Scala tipografica dei titoli, più compatta di quella standard di Bootstrap Italia
 * (H1 standard: 40px su mobile, 48px da 576px). Per ritoccare le dimensioni
 * modificare solo le variabili qui sotto. Il testo normale resta a 16px (accessibilità).
 */
:root {
    --portale-h1: 1.875rem;   /* 30px */
    --portale-h2: 1.5rem;     /* 24px */
    --portale-h3: 1.25rem;    /* 20px */
    --portale-h4: 1.125rem;   /* 18px */
    --portale-h5: 1.0625rem;  /* 17px */
    --portale-lead: 1.0625rem;
    --portale-hero-title: 2rem;
}

@media (min-width: 992px) {
    :root {
        --portale-h1: 2.25rem;    /* 36px */
        --portale-h2: 1.75rem;    /* 28px */
        --portale-h3: 1.375rem;   /* 22px */
        --portale-h4: 1.25rem;    /* 20px */
        --portale-h5: 1.125rem;   /* 18px */
        --portale-lead: 1.125rem;
        --portale-hero-title: 2.5rem;
    }
}

#main-container h1, #main-container .h1 { font-size: var(--portale-h1); line-height: 1.2; }
#main-container h2, #main-container .h2 { font-size: var(--portale-h2); line-height: 1.25; }
#main-container h3, #main-container .h3 { font-size: var(--portale-h3); line-height: 1.3; }
#main-container h4, #main-container .h4 { font-size: var(--portale-h4); line-height: 1.35; }
#main-container h5, #main-container .h5 { font-size: var(--portale-h5); line-height: 1.4; }
#main-container .lead { font-size: var(--portale-lead); }

/* Foto dei candidati */
.portale-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.portale-avatar-lg {
    width: 160px;
    height: 160px;
}

.portale-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e6ecf2;
}

/* Contrassegni di lista */
.portale-logo-lista {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.portale-logo-lista-sm {
    width: 40px;
    height: 40px;
}

.portale-logo-lista-lg {
    width: 160px;
    height: 160px;
}

/* Testi inseriti dal backoffice (editor) */
.portale-richtext img {
    max-width: 100%;
    height: auto;
}

.portale-richtext h2 {
    margin-top: 2rem;
}

.portale-richtext h3 {
    margin-top: 1.5rem;
}

.portale-richtext table {
    width: 100%;
    margin-bottom: 1.5rem;
}

.portale-richtext table td,
.portale-richtext table th {
    border: 1px solid #c5c7c9;
    padding: .5rem;
}

/* Risultati */
.portale-avatar-sm {
    width: 48px;
    height: 48px;
}

.portale-result-percent {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.portale-progress {
    height: .75rem;
    border-radius: .375rem;
    background-color: #e6ecf2;
}

.portale-results-table {
    font-size: .9375rem;
}

.portale-results-table th,
.portale-results-table td {
    white-space: nowrap;
}

.portale-results-table thead th {
    vertical-align: bottom;
    white-space: normal;
    min-width: 6rem;
}

.portale-results-table caption {
    caption-side: top;
}

.portale-result-percent-sm {
    font-size: 1.25rem;
}

.portale-results-table thead th[scope="colgroup"] {
    min-width: 0;
    font-weight: 600;
}


/* =========================================================================
   Identità del portale: la finestra ad arco sulla valle e il profilo delle montagne.
   Colori: blu AGID #0066cc, blu notte #003f7e, celeste #ebf3fb, ambra #f2a900 (solo accenti).
   ========================================================================= */

.portale-ridge {
    display: block;
    width: 100%;
    height: 3rem;
}

@media (min-width: 992px) {
    .portale-ridge {
        height: 4rem;
    }
}

/* Home: apertura */
.portale-home-hero {
    background-color: #0066cc;
    color: #ffffff;
    padding-top: 2rem;
}

.portale-home-hero-ente {
    font-weight: 600;
    margin-bottom: .5rem;
    color: #ebf3fb;
}

#main-container .portale-home-hero-title {
    color: #ffffff;
    font-size: clamp(2rem, 7vw, 2.75rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}

/* Da tablet orizzontale in su il titolo sta su una riga: la dimensione segue la larghezza della colonna */
@media (min-width: 992px) {
    #main-container .portale-home-hero-title {
        font-size: 2.5rem;
    }
}

@media (min-width: 1200px) {
    #main-container .portale-home-hero-title {
        font-size: 3rem;
    }
}

@media (min-width: 1400px) {
    #main-container .portale-home-hero-title {
        font-size: 3.5rem;
    }
}

.portale-home-hero-date {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

.portale-home-hero-text {
    margin-top: 1rem;
    max-width: 36rem;
    color: #ebf3fb;
}

.portale-home-hero-img {
    display: block;
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-bottom: -1.5rem;
}

.portale-home-hero .btn-light {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #004c99;
    font-weight: 600;
}

.portale-home-hero .btn-light:hover,
.portale-home-hero .btn-light:focus-visible {
    background-color: #ebf3fb;
    border-color: #ebf3fb;
    color: #003f7e;
}

/* Stemma (PNG trasparente): proporzioni originali dentro il riquadro di header e footer */
.it-brand-wrapper img.icon {
    object-fit: contain;
    background: none;
}

/* Risultati: comandi a sinistra, "Scarica in Excel" a destra */
.portale-export-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1.5rem;
}

.portale-export-bar-start {
    flex: 1 1 auto;
}

.portale-export {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    white-space: nowrap;
}

.portale-export .icon {
    fill: currentColor;
}

/* Pagina "Sito in manutenzione" */
.portale-maintenance {
    max-width: 44rem;
    padding: 1.5rem 0 1rem;
}

.portale-maintenance-until {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

/* Home: risultati */
.portale-home-results {
    padding: 2.5rem 0 3rem;
}

#main-container .portale-home-results-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

/* Home: comunicazione in evidenza */
.portale-featured {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid #f2a900;
    background-color: #fffaf0;
    border-radius: 0 .5rem .5rem 0;
}

.portale-featured-label {
    margin-bottom: .25rem;
    font-weight: 600;
    color: #8a5a00;
}

/* Home: le tre sezioni */
.portale-section-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid #d6e7f7;
    border-radius: 1rem 1rem .5rem .5rem;
    background-color: #ffffff;
    color: #1a1a1a;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.portale-section-card:hover,
.portale-section-card:focus-visible {
    border-color: #0066cc;
    box-shadow: 0 .5rem 1.5rem rgba(0, 63, 126, .12);
    color: #1a1a1a;
}

.portale-section-card-img {
    width: 100%;
    max-width: 200px;
    margin-bottom: 1rem;
}

#main-container .portale-section-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0066cc;
    margin-bottom: .5rem;
}

.portale-section-card:hover .portale-section-card-title {
    text-decoration: underline;
}

.portale-section-card-text {
    color: #3d4955;
}

.portale-home-news {
    background-color: #f5f7fa;
}

/* Intestazione delle pagine interne */
.portale-page-header {
    background-color: #ebf3fb;
}

#main-container .portale-page-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.portale-page-header-img {
    width: 220px;
    margin-bottom: -1.75rem;
}

/* Footer con il profilo delle montagne */
.portale-footer {
    background-color: transparent;
}

.portale-footer .it-footer-main,
.portale-footer .it-footer-small-prints {
    background-color: #003f7e;
}

.portale-ridge-footer {
    margin-top: 3rem;
    margin-bottom: -1px;
}

/* Risultati: righe dei candidati */
.portale-result-row {
    padding: 1rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.portale-result-row:last-child {
    border-bottom: 0;
}

.portale-result-winner {
    padding: 1rem;
    border: 0;
    border-radius: .75rem;
    background-color: #e6f4ee;
}

#main-container .portale-result-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .125rem;
}

.portale-result-percent {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.portale-result-winner .portale-result-percent {
    color: #00663f;
}

.portale-progress {
    height: .875rem;
    border-radius: 1rem;
}

.portale-progress .progress-bar {
    border-radius: 1rem;
    background-color: #0066cc;
}

.portale-progress .portale-progress-winner {
    background-color: #008055;
}

.portale-badge-winner {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background-color: #008055;
    color: #ffffff;
}

/* Iniziali al posto della foto */
.portale-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .02em;
}

.portale-avatar-sm.portale-initials {
    font-size: 1.125rem;
}

.portale-avatar-md.portale-initials {
    font-size: 2rem;
}

.portale-avatar-lg.portale-initials {
    font-size: 3.25rem;
}

/* Stati vuoti e pagina non trovata */
.portale-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2rem;
    padding: 1.5rem 0;
}

.portale-empty-img {
    width: 200px;
    max-width: 50%;
}

.portale-empty > div {
    flex: 1 1 18rem;
    max-width: 40rem;
}

@media (prefers-reduced-motion: reduce) {
    .portale-section-card {
        transition: none;
    }
}

/* Card delle sezioni su schermi piccoli: illustrazione piccola accanto al testo */
@media (max-width: 767.98px) {
    .portale-section-card {
        display: grid;
        grid-template-columns: 96px 1fr;
        column-gap: 1rem;
        align-items: start;
        padding: 1rem;
    }

    .portale-section-card-img {
        grid-row: span 2;
        margin-bottom: 0;
    }

    #main-container .portale-section-card-title {
        font-size: 1.25rem;
        margin-bottom: .25rem;
    }
}