/* ============ FESTEJOS JUNINOS - VERSÃO CRIATIVA & CULTURAL ============ */

/* Faixa de Bandeirinhas no Topo - Estilo Varal */
.hero-bandeirinhas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><path d="M0 20 Q100 60 200 20" fill="none" stroke="%23555" stroke-width="2"/><polygon points="20,30 40,30 30,60" fill="%23FFD700"/><polygon points="50,40 70,40 60,75" fill="%23FF4500"/><polygon points="85,45 105,45 95,80" fill="%2332CD32"/><polygon points="120,45 140,45 130,80" fill="%231E90FF"/><polygon points="155,40 175,40 165,75" fill="%23FF69B4"/><polygon points="185,30 205,30 195,60" fill="%238A2BE2"/></svg>');
    background-repeat: repeat-x;
    background-size: 400px auto;
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Balão Junino Pendurado nos Cards */
.news-card, .service-card, .highlight-card, .online-service-card, .sidebar-card {
    position: relative;
}

.news-card::after, .service-card::after, .highlight-card::after, .online-service-card::after, .sidebar-card::after {
    content: '';
    position: absolute;
    top: -5px;
    right: 20px;
    width: 35px;
    height: 60px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150"><line x1="50" y1="0" x2="50" y2="30" stroke="%23666" stroke-width="2"/><path d="M50 30 L80 60 L80 90 L50 120 L20 90 L20 60 Z" fill="%23FFD700" stroke="%23B8860B" stroke-width="2"/><line x1="20" y1="60" x2="80" y2="60" stroke="%23B8860B" opacity="0.5"/><line x1="20" y1="90" x2="80" y2="90" stroke="%23B8860B" opacity="0.5"/><path d="M40 120 L40 140 M50 120 L50 150 M60 120 L60 140" stroke="%23FF4500" stroke-width="3" stroke-linecap="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
    transform-origin: top center;
    animation: sway 4s infinite ease-in-out;
    pointer-events: none;
}

@keyframes sway {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

/* Títulos das Seções com Sanfona e Estilo Cordel */
.section-label, .sidebar-card h3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.section-label::before, .sidebar-card h3::before {
    content: '🪗';
    font-size: 1.2rem;
}

.section-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="40"><path d="M0 10 Q50 30 100 10" fill="none" stroke="%23ccc" stroke-width="1"/><rect x="10" y="15" width="10" height="15" fill="%23FFD700" transform="rotate(15)"/><rect x="45" y="20" width="10" height="15" fill="%23FF4500" transform="rotate(-10)"/><rect x="80" y="15" width="10" height="15" fill="%2332CD32" transform="rotate(20)"/></svg>');
    background-repeat: repeat-x;
    background-size: 120px auto;
    opacity: 0.6;
}

/* Detalhe de "Chita" nas divisões */
.section-gray::before, .site-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: repeating-linear-gradient(
        45deg,
        #ff4500,
        #ff4500 10px,
        #ffd700 10px,
        #ffd700 20px,
        #32cd32 20px,
        #32cd32 30px
    );
    opacity: 0.6;
    z-index: 20;
}

/* ============ HEADER JUNINO ============ */
.site-header .brand {
    position: relative;
}

.site-header .brand::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -35px;
    width: 30px;
    height: 50px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150"><path d="M50 30 L80 60 L80 90 L50 120 L20 90 L20 60 Z" fill="%23FFD700" stroke="%23B8860B" stroke-width="2"/><path d="M40 120 L40 140 M50 120 L50 150 M60 120 L60 140" stroke="%23FF4500" stroke-width="3" stroke-linecap="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 100;
    transform-origin: top center;
    animation: sway 3s infinite ease-in-out;
}

.nav-link:hover {
    color: #ff4500 !important;
}

/* ============ FOOTER JUNINO ============ */
.site-footer {
    position: relative;
    padding-top: 80px !important;
}

.footer-bandeirinhas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><path d="M0 20 Q100 60 200 20" fill="none" stroke="%23888" stroke-width="1"/><polygon points="20,30 40,30 30,60" fill="%23FFD700"/><polygon points="50,40 70,40 60,75" fill="%23FF4500"/><polygon points="85,45 105,45 95,80" fill="%2332CD32"/><polygon points="120,45 140,45 130,80" fill="%231E90FF"/><polygon points="155,40 175,40 165,75" fill="%23FF69B4"/><polygon points="185,30 205,30 195,60" fill="%238A2BE2"/></svg>');
    background-repeat: repeat-x;
    background-size: 300px auto;
    z-index: 5;
    opacity: 0.8;
}

.footer-bottom p::after {
    content: ' 🔥 SÃO JOÃO CÂMARA 2026';
    font-weight: 800;
    color: #ff4500;
    margin-left: 15px;
    text-shadow: 0 0 5px rgba(255, 69, 0, 0.3);
}

.footer-col h4::after {
    content: ' 🌽';
    font-size: 1rem;
}