/* ============================================================
   INSTITUTO SUASSUNA — suassuna-otimizacoes.css
   Otimizações de responsividade, SEO visual, menu mobile
   e Core Web Vitals SEM alterar o style.css original
   ============================================================ */

/* ============================================================
   1. CORREÇÃO CRÍTICA: Viewport e box-model base
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Impede overflow horizontal em mobile */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================================
   2. MENU DESKTOP — Itens lado a lado (problema relatado)
   Telas entre 992px e 1199px: menu colapsava em duas linhas
   ============================================================ */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-style-1 .header-mainnav .mainmenu-nav .mainmenu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .header-style-1 .header-mainnav .mainmenu-nav .mainmenu > li > a {
        font-size: 12px !important;
        padding: 28px 10px !important;
        white-space: nowrap;
    }
}

/* Telas 1200px–1350px: evitar quebra de linha */
@media only screen and (min-width: 1200px) and (max-width: 1350px) {
    .header-style-1 .header-mainnav .mainmenu-nav .mainmenu {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center;
    }
    .header-style-1 .header-mainnav .mainmenu-nav .mainmenu > li > a {
        font-size: 13px;
        padding: 28px 12px;
    }
}

/* ============================================================
   3. MENU MOBILE — Correção do popup + acessibilidade
   ============================================================ */

/* Força o popup mobile a usar scroll interno em telas pequenas */
.popup-mobile-menu .inner {
    overflow-y: auto;
    max-height: 100vh;
    -webkit-overflow-scrolling: touch;
}

/* Itens do menu mobile: padding adequado para toque */
.popup-mobile-menu .mainmenu li a {
    padding: 10px 16px;
    font-size: 15px;
    display: block;
    line-height: 1.5;
    touch-action: manipulation;
}

/* Submenu mobile: indentação clara */
.popup-mobile-menu .mainmenu .submenu li a {
    padding-left: 28px;
    font-size: 14px;
}

/* ============================================================
   4. HEADER TOP BAR — Responsivo em mobile
   ============================================================ */
@media only screen and (max-width: 767px) {
    .header-top-bar .header-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header-top-bar .header-info.mainmenu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 8px 0;
    }

    .header-top-bar .header-info.mainmenu li {
        font-size: 11px;
    }

    .header-top-bar .header-top-right {
        margin-top: 4px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-top-bar .header-info.mainmenu {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .header-top-bar .header-info.mainmenu li {
        font-size: 12px;
    }
}

/* ============================================================
   5. IMAGENS — Lazy loading visual + CLS prevention
   ============================================================ */
img {
    /* Reserva espaço antes de carregar (evita CLS) */
    height: auto;
    max-width: 100%;
}

/* Skeleton loader visual enquanto carrega */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: suassuna-skeleton 1.5s infinite;
}

@keyframes suassuna-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

img[loading="lazy"].loaded {
    animation: none;
    background: none;
}

/* ============================================================
   6. LOGO — Dimensões fixas para evitar CLS
   ============================================================ */
.header-brand .logo img,
.edu-header .header-brand .logo img {
    width: auto;
    max-height: 50px;
    aspect-ratio: auto;
}

/* ============================================================
   7. ACESSIBILIDADE — Focus visível para navegação por teclado
   ============================================================ */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
}

/* Skip to content (acessibilidade) */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: #1f2432;
    color: #fff;
    padding: 10px 20px;
    z-index: 999999;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
}

/* ============================================================
   8. CORE WEB VITALS — Reduz CLS no footer e seções
   ============================================================ */

/* Reserva altura mínima para evitar layout shift */
.edu-footer .footer-top {
    min-height: 200px;
}

/* Evita FOUC em fontes de ícone */
[class^="icon-"],
[class*=" icon-"],
.ri-whatsapp-fill,
.icon-facebook,
.icon-instagram,
.icon-linkedin2,
.icon-youtube {
    font-display: swap;
}

/* ============================================================
   9. LGPD BANNER — Otimizações visuais
   ============================================================ */
#lgpd-banner {
    font-family: inherit;
}

#lgpd-banner a:hover {
    color: #90caf9;
}

#lgpd-banner button:hover {
    opacity: 0.85;
}

/* Mobile: banner LGPD compacto */
@media only screen and (max-width: 600px) {
    #lgpd-banner {
        padding: 12px 14px;
        font-size: 12px !important;
    }
    #lgpd-banner div[style] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ============================================================
   10. PRINT — Oculta elementos irrelevantes na impressão
   ============================================================ */
@media print {
    .header-top-bar,
    .popup-mobile-menu,
    .rn-progress-parent,
    #lgpd-banner,
    .hamberger-button {
        display: none !important;
    }
    body {
        font-size: 12pt;
        color: #000;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #555;
    }
}

/* ============================================================
   11. FEATURED SNIPPETS — Formatação para extração por IA
   Garante que listas, tabelas e respostas sejam claramente
   estruturadas para AEO (Answer Engine Optimization)
   ============================================================ */
.entry-content h2,
.entry-content h3,
.page-content h2,
.page-content h3 {
    scroll-margin-top: 80px; /* Compensa header sticky */
}

/* Destaca a primeira frase de cada seção (provável resposta direta) */
.entry-content h2 + p:first-of-type,
.entry-content h3 + p:first-of-type {
    font-weight: 500;
}

/* Tabelas responsivas */
.entry-content table,
.page-content table {
    width: 100%;
    overflow-x: auto;
    display: block;
    border-collapse: collapse;
}

.entry-content table th,
.entry-content table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

/* ============================================================
   12. BOTÃO CTA — Área mínima de toque para mobile (48px)
   Recomendação WCAG 2.5.5
   ============================================================ */
.edu-btn,
.btn-primary,
a[href*="whatsapp"],
a[href*="matricula"] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   13. CONTAINER FLUIDO — Padding correto em todos os tamanhos
   ============================================================ */
@media only screen and (max-width: 575px) {
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ============================================================
   14. ANIMAÇÕES — Respeita preferência do usuário
   (Acessibilidade: sistema operacional "Reduzir movimento")
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}