/* ==========================================================================
   CASA FEIJUCA - ESTILOS RESPONSIVOS E MOBILE (mobile.css)
   ==========================================================================
   Este arquivo contém todas as adaptações de layout para diferentes
   tamanhos de tela, garantindo fluidez e usabilidade em dispositivos móveis.
   ========================================================================== */

/* ==========================================================================
   1. OTIMIZAÇÕES GLOBAIS PARA DISPOSITIVOS DE TOQUE (TOUCH)
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Remove o hover travado no mobile (efeito ghost hover) */
    .btn-principal:hover,
    .btn-secundario:hover,
    .feature-card:hover,
    .valores-box:hover,
    .pacote-card:hover,
    .menu-card:hover,
    .contato-card:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }

    /* Aumenta a área de toque (Touch Target) para usabilidade */
    .nav-link,
    .footer-link,
    .accordion-button,
    .menu-category-btn,
    .social-links a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Desativa destaque azul padrão do Android/iOS ao clicar */
    a, button, input, select, textarea {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ==========================================================================
   2. BREAKPOINT: LAPTOPS MENORES E TABLETS LANDSCAPE (max-width: 1199px)
   ========================================================================== */
@media (max-width: 1199px) {
    /* Ajustes Gerais de Tipografia */
    .hero-title {
        font-size: 3.8rem;
    }

    .display-4 {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    /* Ajuste no Hero Carrossel */
    .carousel-caption {
        left: 10%;
        right: 10%;
    }

    /* Cardápio - Hero */
    .hero-cardapio h1 {
        font-size: 3.5rem;
    }

    /* Ajuste de Margens Negativas */
    .features-wrapper {
        margin-top: -40px;
    }

    /* Sobreposição de Imagem (Index) */
    .img-overlap {
        width: 60%;
        border-width: 6px;
    }

    /* Rodapé */
    .footer-text {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   3. BREAKPOINT: TABLETS PORTRAIT (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
    /* Globais */
    section {
        padding: 60px 0 !important;
    }

    /* Top Bar Header */
    .top-bar {
        display: none !important; /* Esconde a barra preta do topo no mobile/tablet */
    }

    /* Navbar */
    .navbar-custom .navbar-brand {
        font-size: 1.5rem;
    }

    .navbar-custom .navbar-brand img {
        height: 50px;
    }

    .offcanvas-body .nav-link {
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .offcanvas-body .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    /* Heros Diversos */
    .hero-section,
    .hero-sobre,
    .hero-eventos,
    .contato-hero {
        padding: 100px 0 !important;
        min-height: 50vh;
    }

    .hero-title {
        font-size: 3.2rem;
    }

    .carousel-caption {
        top: 50%;
        transform: translateY(-50%);
    }

    /* Features / Benefícios */
    .features-wrapper {
        margin-top: 0; /* Remove a sobreposição do carrossel */
        padding-top: 40px;
    }

    .feature-box {
        margin-bottom: 20px;
        border-bottom: 2px solid var(--cor-primaria); /* Adiciona borda para não depender do hover */
    }

    /* Seção Sobre (Index) */
    .about-image-wrapper {
        margin-bottom: 30px;
    }

    .img-main {
        width: 100%; /* Ocupa 100% no tablet */
    }

    .img-overlap {
        display: none !important; /* Esconde a imagem sobreposta menor para não poluir */
    }

    .section-title {
        margin-bottom: 40px;
        font-size: 2rem;
    }

    /* Cardápio - Menu Tabs */
    .menu-tabs-section {
        padding: 60px 0;
    }

    .nav-pills-custom .nav-link {
        font-size: 1.1rem;
        padding: 10px 20px;
    }

    .menu-preview-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .menu-item-price {
        margin-top: 10px;
        align-self: flex-start;
    }

    /* Cardápio - Grid e Cards */
    .menu-card {
        flex-direction: column !important; /* Força os cards do buffet a ficarem verticais */
        height: auto;
    }

    .menu-card-img {
        width: 100% !important;
        height: 250px !important;
    }

    /* Aniversários e Pacotes */
    .pacote-card {
        margin-bottom: 30px;
    }

    .badge-top {
        right: -25px;
        padding: 5px 30px;
    }

    /* Contato */
    .cards-sobrepostos {
        margin-top: -40px;
    }

    .banner-whatsapp {
        padding: 30px 20px !important;
        text-align: center;
    }

    .banner-whatsapp .btn-whatsapp-lg {
        margin-top: 20px;
        width: 100%;
    }

    /* Rodapé */
    footer {
        padding: 50px 0 20px 0;
    }

    .footer-heading {
        margin-top: 30px;
        margin-bottom: 15px;
    }

    .copyright-area {
        text-align: center !important;
    }

    .copyright-area .text-md-end {
        text-align: center !important;
        margin-top: 10px;
    }
}

/* ==========================================================================
   4. BREAKPOINT: MOBILE LARGES / SMARTPHONES (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Ajustes Gerais */
    body {
        font-size: 15px;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    section {
        padding: 50px 0 !important;
    }

    .display-4 {
        font-size: 2.2rem;
    }

    .display-3 {
        font-size: 2.5rem;
    }

    .lead {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    /* Headers / Heros Fixos */
    .hero-carousel {
        height: 85vh;
        min-height: 600px;
    }

    .hero-title {
        font-size: 2.4rem;
        margin-bottom: 15px;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    .carousel-caption {
        top: auto;
        bottom: 120px;
        transform: none;
        left: 5%;
        right: 5%;
        text-align: center; /* Centraliza o texto no mobile */
    }

    .carousel-caption .d-flex {
        justify-content: center; /* Centraliza os botões */
        gap: 15px !important;
    }

    .carousel-caption .btn {
        width: 100%; /* Botões do hero em largura total no mobile */
        margin-bottom: 10px;
        padding: 12px 20px !important;
        font-size: 1rem !important;
    }

    .carousel-indicators {
        bottom: 20px;
    }

    /* Seção Nossa Essência (Sobre) */
    .valores-box {
        padding: 30px 20px;
        margin-bottom: 15px;
    }

    .valores-icon {
        font-size: 2rem;
    }

    /* Histórias e Textos */
    .historia-section {
        text-align: center; /* Centraliza texto da história no mobile */
    }

    .historia-section .badge {
        display: block; /* Badges em bloco no mobile */
        width: 100%;
        margin-right: 0 !important;
        text-align: left;
    }

    /* Navegação do Cardápio (Pílulas Sticky) */
    .menu-nav-wrapper {
        top: 5px; /* Sobe um pouco mais a navegação sticky no mobile */
    }

    .menu-nav-pill {
        width: 100%;
        max-width: 100%;
        border-radius: 0; /* Remove bordas arredondadas no mobile para ocupar a tela toda */
        border-left: none;
        border-right: none;
        padding: 8px 5px;
    }

    .menu-category-btn {
        padding: 8px 15px;
        font-size: 0.85rem;
    }

    /* Títulos do Cardápio */
    .hero-cardapio {
        padding: 100px 0 70px;
    }

    .hero-cardapio h1 {
        font-size: 2.2rem;
    }

    .menu-section-title {
        font-size: 2rem;
    }

    .menu-section-subtitle {
        font-size: 0.95rem;
        padding: 0 10px;
    }

    /* Ajustes dos Cards de Menu (Cardapio e Index) */
    .menu-card-body {
        padding: 20px 15px;
    }

    .menu-card-top {
        flex-direction: column; /* Preço vai para baixo do título */
        gap: 5px;
    }

    .menu-card-title {
        font-size: 1.2rem;
    }

    .menu-card-price {
        font-size: 1.3rem;
        color: var(--cor-secundaria);
    }

    .dark-menu-section .menu-card-price {
        color: var(--cor-primaria);
    }

    .menu-card-desc {
        font-size: 0.9rem;
    }

    /* Listas do Bar (Adega) */
    .menu-list-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 10px;
    }

    .menu-list-info {
        padding-right: 0;
        margin-bottom: 10px;
    }

    .menu-list-title {
        font-size: 1.1rem;
    }

    /* Banners Informativos (Cardápio) */
    .info-banner {
        padding: 30px 15px;
        margin: 40px 0;
        border-radius: 12px;
    }

    .info-banner h3 {
        font-size: 1.5rem;
    }

    /* Parallax Section */
    .parallax-section {
        background-attachment: scroll; /* Desativa o fixed do parallax no mobile para melhorar a performance de rolagem */
        padding: 80px 0;
    }

    /* FAQ Accordion */
    .accordion-button {
        font-size: 1rem;
        padding: 15px;
    }

    .accordion-body {
        font-size: 0.95rem;
        padding: 15px;
    }

    /* Contato */
    .contato-hero {
        min-height: 350px;
        height: auto;
        padding: 80px 0;
    }

    .icon-circle-lg {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .contato-card {
        padding: 30px 20px !important;
        margin-bottom: 15px;
    }

    /* Map Container */
    .map-container iframe {
        height: 350px; /* Mapa menor no mobile */
    }

    /* Botoões Globais no Mobile */
    .btn-principal,
    .btn-secundario {
        width: 100%; /* Botões ocupam 100% da largura na maioria dos containers mobile */
        padding: 12px 20px;
        font-size: 1rem;
    }

    .d-flex.justify-content-lg-end .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Cookie Banner */
    #cookie-banner {
        width: 95%;
        flex-direction: column;
        text-align: center;
        bottom: 10px;
        padding: 15px;
    }

    #cookie-banner .d-flex {
        width: 100%;
        justify-content: stretch;
    }

    #cookie-banner button {
        flex: 1;
        padding: 10px;
    }

    /* Botão Flutuante do WhatsApp e Back to Top */
    .floating-whatsapp {
        width: 50px;
        height: 50px;
        bottom: 20px;
        left: 20px;
        font-size: 26px;
    }

    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 20px;
        font-size: 16px;
    }
}

/* ==========================================================================
   5. BREAKPOINT: MOBILE SMALL (max-width: 576px)
   ========================================================================== */
@media (max-width: 576px) {
    /* Redução Extrema de Paddings */
    section {
        padding: 40px 0 !important;
    }

    /* Heros */
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .carousel-caption .badge {
        font-size: 0.7rem;
    }

    /* Imagens de Galeria */
    .gallery-item {
        margin-bottom: 15px;
        border-radius: 8px;
    }

    /* Depoimentos */
    .testimonial-card {
        padding: 25px 20px;
    }

    .quote-icon {
        font-size: 2rem;
        top: 15px;
        left: 15px;
    }

    /* Cards de Aniversário */
    .pacote-card {
        padding: 25px 20px;
        border-width: 1px;
    }

    .pacote-icon {
        font-size: 2.5rem;
    }

    /* Navbar Ajustes Finos */
    .navbar-custom .navbar-brand {
        font-size: 1.3rem;
    }

    .navbar-custom .navbar-brand img {
        height: 45px;
        margin-right: 10px;
    }

    .navbar-custom .navbar-brand small {
        font-size: 0.55rem !important;
        letter-spacing: 1px;
    }

    /* Topografia Adicional */
    h2.section-title {
        font-size: 1.6rem;
    }

    h3.fw-bold {
        font-size: 1.4rem;
    }

    /* Modais */
    .modal-body {
        padding: 20px !important;
    }

    .modal-header h5 {
        font-size: 1.1rem;
    }

    /* Menu Lista Bebidas (Margens e fontes menores) */
    .menu-list-title {
        font-size: 1rem;
    }

    .menu-list-price {
        font-size: 1.1rem;
    }

    .menu-section-title {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   6. BREAKPOINT: MOBILE EXTRA SMALL (max-width: 400px - iPhone SE, Galaxy Fold)
   ========================================================================== */
@media (max-width: 400px) {
    /* Container muito estreito */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-title {
        font-size: 1.7rem;
    }

    .hero-cardapio h1 {
        font-size: 1.8rem;
    }

    .menu-section-title {
        font-size: 1.5rem;
    }

    .menu-card-img {
        height: 200px !important;
    }

    /* Forçar a quebra do Preço se ficar muito grande */
    .menu-card-price {
        font-size: 1.2rem;
    }

    .badge-menu {
        font-size: 0.65rem;
        padding: 4px 8px;
    }

    /* Botões na Pílula de Navegação ainda menores */
    .menu-category-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Texto Base Menor */
    p.text-muted,
    p.text-light,
    .menu-card-desc,
    .menu-list-desc {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Otimização dos botões inferiores flutuantes */
    .floating-whatsapp {
        width: 45px;
        height: 45px;
        font-size: 22px;
        bottom: 15px;
        left: 15px;
    }

    .back-to-top {
        width: 35px;
        height: 35px;
        font-size: 14px;
        bottom: 15px;
        right: 15px;
    }

    /* Carousel Captions espremidos */
    .carousel-caption {
        bottom: 90px;
    }

    .carousel-caption .btn {
        padding: 10px 15px !important;
        font-size: 0.9rem !important;
    }
}

/* ==========================================================================
   7. BREAKPOINT: MOBILE LANDSCAPE (Orientação Paisagem)
   ==========================================================================
   Resolve o problema de heros gigantes ou carrosséis quando o usuário
   vira o celular de lado (altura muito curta).
   ========================================================================== */
@media (max-width: 991px) and (orientation: landscape) and (max-height: 600px) {
    /* Reduzir alturas baseadas em VH */
    .hero-carousel,
    .hero-section,
    .hero-sobre,
    .hero-eventos,
    .contato-hero {
        min-height: auto !important;
        height: auto !important;
        padding: 80px 0 !important;
    }

    .carousel-item {
        min-height: 100vh;
    }

    .carousel-caption {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 40px 20px;
        background: rgba(1, 2, 2, 0.7); /* Fundo escuro para garantir leitura na paisagem */
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .slide-bg::before {
        background: linear-gradient(to right, rgba(1,2,2,0.95) 0%, rgba(1,2,2,0.8) 100%);
    }

    .hero-title {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    /* Pílula de navegação fixa que toma muito espaço na altura */
    .menu-nav-wrapper {
        position: relative; /* Desativa o sticky para não esmagar a tela */
        top: 0;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Modais devem poder rolar confortavelmente */
    .modal-dialog {
        margin: 10px auto;
    }

    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ==========================================================================
   8. FIXES ESPECÍFICOS PARA IOS (Safari Mobile)
   ========================================================================== */
@supports (-webkit-touch-callout: none) {
    /* Corrige o salto da barra de endereço no iOS que quebra 100vh */
    body {
        min-height: -webkit-fill-available;
    }

    .hero-carousel {
        height: -webkit-fill-available;
    }

    /* Scroll suave nativo para as pílulas de categorias */
    .menu-nav-scroll {
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   9. ANIMAÇÕES OTIMIZADAS PARA MOBILE (Desempenho)
   ========================================================================== */
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
    /* No mobile, animações complexas podem causar stuttering.
       Mantemos fades, mas evitamos translações pesadas. */
    .animate__fadeInRight,
    .animate__fadeInLeft,
    .animate__fadeInUp,
    .animate__fadeInDown {
        animation-name: fadeIn !important; /* Troca movimento por fade simples */
    }

    /* Desabilita os delays no mobile para o conteúdo aparecer mais rápido */
    .animate__delay-1s,
    .animate__delay-2s {
        animation-delay: 0.2s !important;
    }

    /* Substitui a animação de spin do preloader por uma estática ou mais leve se preferir,
       mas aqui mantemos a duração mais curta para não irritar o usuário mobile */
    .spinner-feijuca {
        animation-duration: 0.8s;
    }
}

/* ==========================================================================
   10. OTIMIZAÇÃO DE ACESSIBILIDADE MOBILE (A11y)
   ========================================================================== */
@media (max-width: 768px) {
    /* Aumenta o contraste das pílulas e badges inativas para leitura no sol */
    .menu-category-btn {
        background: rgba(40, 40, 40, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Campos de formulário com fontes que não forçam o zoom no iOS (precisa ser >= 16px) */
    .form-control, .form-select {
        font-size: 16px !important;
    }

    /* Aumenta a espessura da linha do accordion */
    .accordion-button {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
}

/* ==========================================================================
   OVERRIDE EXTREMO MOBILE - CARDÁPIO COMPACTO E NAVBAR SÓ COM ÍCONES
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. NAVBAR DO CARDÁPIO (PÍLULAS SÓ COM ÍCONES) */
    .menu-nav-wrapper {
        top: 10px !important;
        margin-bottom: -20px !important;
    }

    .menu-nav-pill {
        padding: 5px 8px !important;
        border-radius: 40px !important;
        background: rgba(15, 15, 15, 0.95) !important;
    }

    .menu-nav-scroll {
        gap: 12px !important;
        padding: 5px !important;
    }

    .menu-category-btn {
        /* Oculta o texto magicamente e cria um círculo perfeito */
        font-size: 0 !important;
        padding: 0 !important;
        width: 45px !important;
        height: 45px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: none !important;
    }

    .menu-category-btn i {
        /* Traz o ícone de volta e remove as margens originais */
        font-size: 1.3rem !important;
        margin: 0 !important;
    }

    /* Cores personalizadas para cada ícone (ajuda a identificar sem o texto) */
    .menu-category-btn[href="#entradas"] i { color: #4ade80 !important; } /* Verde - Entradas */
    .menu-category-btn[href="#feijoada"] i { color: #facc15 !important; } /* Amarelo - Feijoada */
    .menu-category-btn[href="#pizzas"] i { color: #fb923c !important; }   /* Laranja - Pizzas */
    .menu-category-btn[href="#sobremesas"] i { color: #38bdf8 !important; } /* Azul - Sobremesas */
    .menu-category-btn[href="#bar-adega"] i { color: #f87171 !important; } /* Vermelho - Bar */

    /* Efeito de ativo */
    .menu-category-btn.active,
    .menu-category-btn:hover {
        background: var(--cor-primaria) !important;
        transform: scale(1.1) !important;
    }
    .menu-category-btn.active i,
    .menu-category-btn:hover i {
        color: #000 !important; /* Ícone fica preto quando selecionado */
    }


    /* 2. REDUÇÃO DRÁSTICA DE TAMANHOS (TUDO MAIS COMPACTO) */

    /* Heros e Títulos Menores */
    .hero-cardapio {
        padding: 80px 0 40px !important;
    }
    .hero-cardapio h1 {
        font-size: 1.8rem !important;
        margin-bottom: 10px !important;
    }
    .menu-section-title {
        font-size: 1.5rem !important;
        margin-bottom: 5px !important;
    }
    .menu-section-header {
        margin-bottom: 25px !important;
    }
    .menu-section-subtitle {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* Cards do Cardápio Miniaturizados */
    .menu-card {
        border-radius: 12px !important;
    }
    .menu-card-img {
        height: 140px !important; /* Reduz foto pela metade praticamente */
        width: 100% !important; /* Garante que os de feijoada não fiquem esticados */
    }
    .menu-card-body {
        padding: 15px !important;
    }
    .menu-card-title {
        font-size: 1.1rem !important;
    }
    .menu-card-price {
        font-size: 1.15rem !important;
    }
    .menu-card-desc {
        font-size: 0.8rem !important; /* Texto descritivo menor */
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
    }
    .badge-menu {
        font-size: 0.65rem !important;
        padding: 3px 6px !important;
    }

    /* Espaçamentos e Banners Informativos */
    section[id] {
        padding-top: 35px !important;
    }
    .info-banner {
        padding: 20px 15px !important;
        margin: 25px 0 !important;
        border-radius: 10px !important;
    }
    .info-banner h3 {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }
    .info-banner p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
    }

    /* Listas (Bar e Adega) Mais Próximas */
    .menu-list-item {
        padding: 10px 0 !important;
    }
    .menu-list-title {
        font-size: 0.95rem !important;
    }
    .menu-list-desc {
        font-size: 0.75rem !important;
    }
    .menu-list-price {
        font-size: 1rem !important;
    }
}