/**
 * Estilos do layout principal do site (menu mobile, mapa do site, parallax, footer).
 * Extraídos das páginas para centralizar e manter consistência.
 */

/* ========== Menu mobile (offcanvas) ========== */
.mobile-link {
    display: block;
    padding: 12px 10px;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-link:hover {
    background: rgba(255,255,255,0.1);
}

.mobile-accordion-btn {
    background: transparent !important;
    color: #fff !important;
    font-size: 1.1rem;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.mobile-sublink {
    display: block;
    padding: 10px 20px;
    font-size: 1rem;
    color: #eaeaea;
    text-decoration: none;
    background: rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mobile-sublink:hover {
    background: rgba(255,255,255,0.12);
}

.accordion-button::after {
    filter: invert(1);
}

/* ========== Mapa do site (links gerais) ========== */
.mapa-site {
    color: white;
}

.mapa-title {
    color: #f8c03e;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.mapa-link {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: .2s;
}

.mapa-link:hover {
    color: #fff;
    padding-left: 4px;
}

/* ========== Parallax ========== */
.parallax-section {
    background-image: url('/images/parallax.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 550px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

@media (max-width: 991.98px) {
    .parallax-section {
        height: 350px;
        background-attachment: scroll;
    }
}

@media (max-width: 575.98px) {
    .parallax-section {
        height: 250px;
    }
}

/* ========== Header – Logo ========== */
.header-logo-link {
    display: inline-block;
    line-height: 0;
}

.header-logo {
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ========== Header – Transmissão ao vivo (ícone pulsante) ========== */
.header-live-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.header-live-badge:hover {
    color: #fff !important;
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.5);
}

.header-live-badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    background: #fff;
    border-radius: 50%;
    animation: header-live-pulse 1.2s ease-in-out infinite;
}

@keyframes header-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.15); }
}

@media (max-width: 991.98px) {
    .header-logo {
        max-height: 160px;
    }
}

@media (max-width: 575.98px) {
    .header-logo {
        max-height: 180px;
    }
}

/* ========== Footer ========== */
.footer-site {
    background-color: #0b3979;
}

.footer-logo {
    max-height: 110px;
}

.footer-info p {
    color: rgba(255,255,255,0.9);
}

.footer-info a {
    color: #ffffff;
    text-decoration: underline;
}

.footer-maps-btn {
    border-color: rgba(255,255,255,0.7);
    color: #fff;
    transition: all 0.2s ease;
}

.footer-maps-btn:hover {
    background-color: #ffffff;
    color: #0b3979;
    border-color: #ffffff;
}

.footer-social a {
    color: #ffffff;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-social a:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

.mapa-site {
    font-size: 0.9rem;
}

.mapa-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #ffffff;
}

.mapa-links li {
    margin-bottom: 4px;
}

.mapa-links a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

.mapa-links a:hover {
    text-decoration: underline;
    color: #ffffff;
}

.footer-divider {
    border-color: rgba(255,255,255,0.15);
}

/* ========== Responsividade geral do layout ========== */
@media (max-width: 991.98px) {
    /* Apenas header: área do logo/clima/redes empilha em coluna */
    header .container-xxl .row.align-items-center {
        gap: 1rem;
    }
    header .container-xxl .col-md-4.d-flex.justify-content-center {
        order: 2;
    }
    header .container-xxl .col-md-4:first-child {
        order: 1;
        align-items: center !important;
    }
    header .container-xxl .col-md-4:last-child {
        order: 3;
        align-items: center !important;
    }
    header .container-xxl .col-md-4 .input-group {
        max-width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .footer-logo {
        max-height: 80px;
    }
    .mapa-site .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}