/* ---------------------------------------------
   agendamento.css
   Propósito: estilos da página de agendamento / layout geral
   Observações: comentários explicativos adicionados por bloco
----------------------------------------------*/

/* === Bloco: Reset / Estilos globais ===
   - Remove margens/paddings padrão e aplica box-sizing consistente
   - Define o fundo, fonte base e estrutura do layout (flex column)
   - `main` recebe `flex-grow` para empurrar o rodapé para baixo
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Fundo escuro com gradiente radial para profundidade visual */
    background: radial-gradient(circle, hsla(0, 0%, 20%, 1) 0%, hsla(0, 0%, 0%, 1) 100%);
    font-family: 'Roboto', sans-serif; /* fonte legível para conteúdo */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Garante que o conteúdo principal ocupe o espaço disponível
   e que haja espaço superior para header fixo */
main {
    flex-grow: 1; /* Garante que o rodapé fique no final da página */
    padding-top: 70px; /* Espaço para o header fixo */
}

/* Utilitários tipográficos usados na página */
.font-bungee {
    font-family: 'Bungee', cursive;
}

.text-shadow {
    text-shadow: 2px 2px 4px #000000;
}

/* === Bloco: Cabeçalho / Menu principal ===
   - `.topo`: header fixo no topo com z-index alto para sobrepor conteúdo
   - Layout flex para alinhar logo à esquerda e menu à direita
   - `.menu`: lista horizontal de links; gap e margin ajustam espaçamento
   - Links recebem hover para indicar interatividade
   - `.dropdown` / `.submenu`: submenu absoluto mostrado ao passar o mouse
     (no mobile, essa lógica é substituída pelo menu mobile em media queries)
*/
.topo {
    width: 100%;
    height: 50px;
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Alinha logo e menu nas pontas */
    padding: 0 20px;
    font-family: 'ABeeZee', sans-serif;
}

.logo-link .logo-img {
    height: 80px;
    width: 80px;
}

.menu {
    list-style: none;
    display: flex;
    gap: 145px; /* Espaçamento do menu no layout desktop */
    height: 100%;
    align-items: center;
    margin-right: 400px;
}

.menu a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    transition: 0.2s;
    opacity: 0.80;
}

.menu a:hover {
    color: #BD2109; /* cor de destaque usada em hover */
}

.dropdown {
    position: relative; /* necessário para posicionar o submenu absoluto */
}

.submenu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgb(66, 66, 66);
    display: none; /* esconde por padrão (aparece em hover) */
    flex-direction: column;
    min-width: 150px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.dropdown:hover .submenu {
    display: flex; /* mostra submenu no desktop */
}

.submenu li a {
    padding: 15px;
    display: block;
}

.menu .separator {
    height: 30px;
    margin-bottom: 10px;
}

/* === Bloco: Botão hambúrguer (mobile) ===
   - `.hamburger` é escondido no desktop e exibido em media queries (mobile)
   - `.bar` estiliza as três linhas do ícone; esta estrutura facilita
     animações/transformações caso queira transformar em 'X' ao abrir
*/
.hamburger {
    display: none; /* Escondido no desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
}

.hamburger .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

/* === Bloco: Estilos da tabela de agenda ===
   - Borda simples para células; na versão mobile a tabela se transforma
     em 'cards' usando as media queries mais abaixo.
*/
.custom-table th, .custom-table td {
    border: 1px solid #4a4a4a;
}

/* === Bloco: Rodapé ===
   - Container principal com fundo escuro e cor de destaque
   - `.footer-content` usa flex wrap para ficar responsivo; cada coluna
     tem largura mínima para evitar colapso
   - Links e parágrafos herdam tipografia e recebem hover amarelo
*/
.footer-container {
    background-color:#000000;
    color: #FFBD1B;
    padding: 40px 20px;
    width: 100%;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.footer-column {
    flex: 1;
    min-width: 250px;
    margin: 20px;
}

.footer-title {
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 1px;
    font-family: ABeeZee, sans-serif;
}

.footer-column p,
.footer-column a {
    color: #ccc;
    text-decoration: none;
    line-height: 1.6;
    font-size: 20px;
    display: block;
    font-family: Alumni Sans SC, sans-serif;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-column a:hover {
    color: #FFBD1B; /* Muda a cor para amarelo */
}
/* FIM CCS DA PAGINA --------


/* === Bloco: Regras para tablets e telas menores (<= 992px) ===
   - Simplifica o header/margin para melhorar legibilidade em telas médias
   - Esconde elementos decorativos (capacete, separadores)
*/
@media (max-width: 992px) {
    .capacete {
        display: none; /* Esconde o capacete para não atrapalhar */
    }

    .menu .separator {
        display: none; /* Esconde os separadores para ganhar espaço */
    }

    .menu {
        gap: 15px; /* Diminui ainda mais o espaçamento */
    }

    .menu a {
        font-size: 16px;
    }
}


/* === Bloco: Regras para celulares (<= 768px) ===
   - Substitui o menu desktop por um menu mobile (oculto por padrão).
   - Ao abrir, `.menu.active` transforma o menu em coluna e cobre a largura.
   - Submenus se tornam parte do fluxo normal do menu (posição estática)
   - Ajustes adicionais:
     * Carrinho: reduzir padding e esconder cabeçalho da tabela
     * Estratégia da tabela: transformar linhas em cards para melhor leitura
       em telas pequenas; usa `data-label` em cada `td` para mostrar rótulos
*/
@media (max-width: 768px) {
    /* --- AJUSTES NO MENU --- */
    .menu {
        display: none; /* Esconde o menu desktop */
        position: absolute;
        top: 50px; /* Aparece abaixo do cabeçalho */
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.95);
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
        gap: 0;
    }

    .menu.active {
        display: flex; /* Mostra o menu quando o JS adicionar a classe 'active' */
        background-color: #333;
    }

    .menu li {
        width: 100%;
        text-align: center;
        background-color: #333;
    }

    .menu a {
        padding: 15px 0;
        width: 100%;
        display: block; /* Garante que o link ocupe todo o espaço */
    }
    
    .submenu {
        position: static; /* Submenu vira parte do fluxo normal do menu mobile */
        width: 100%;
        background-color: #333;
        box-shadow: none;
    }
    
    .submenu li a {
        padding-left: 40px; /* Adiciona um recuo para indicar que é um sub-item */
    }

    .hamburger {
        display: flex; /* Mostra o botão hambúrguer */
    }

    /* --- AJUSTES NO CARRINHO DE COMPRAS --- */
    .cart-container {
        padding: 1rem; /* Diminui o padding em telas pequenas */
    }

    .cart-table-header {
        display: none; /* Esconde o cabeçalho da tabela, pois não funciona no mobile */
    }

    .cart-body {
        border: none;
    }

    /* --- AJUSTES DA TABELA --- */
    /* Estratégia: Esconder o cabeçalho e transformar cada linha em um "card" */
    .custom-table thead {
        display: none; /* Esconde o cabeçalho da tabela */
    }
    .custom-table, .custom-table tbody, .custom-table tr, .custom-table td {
        display: block; /* Faz cada elemento ocupar uma linha */
        width: 100%;
    }
    .custom-table tr {
        margin-bottom: 1rem; /* Espaço entre os "cards" de cada dia */
        border: 1px solid #4a4a4a;
        border-radius: 8px;
        overflow: hidden;
    }
    .custom-table td {
        text-align: right; /* Alinha o conteúdo à direita */
        padding-left: 50%; /* Deixa espaço para o rótulo */
        position: relative; /* Necessário para posicionar o rótulo */
        border-bottom: 1px solid #4a4a4a;
    }
    .custom-table td:last-child {
        border-bottom: 0;
    }
    /* Adiciona os rótulos (Dia, Horários, etc.) usando CSS */
    .custom-table td::before {
        content: attr(data-label); /* Pega o texto do atributo 'data-label' */
        position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        padding-right: 10px;
        text-align: left;
        font-weight: bold;
        color: white;
    }

    /* --- AJUSTES DO RODAPÉ --- */
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}