/* =============================================
   TEMA: Tasca do Marreta
   Cliente: Tasca do Marreta
   Ficheiros do cliente: assets/clientes/marreta/

   COMO USAR no index.html:
   <link rel="stylesheet" href="css/temas/tema-marreta.css">

   IMPORTANTE:
   Este ficheiro só altera cores e fontes.
   Nenhuma funcionalidade (vídeo, idiomas, etc.) é afetada.
   ============================================= */


/* =============================================
   VARIÁVEIS DE COR
   Redefinem as cores base do menu.css.
   Como este ficheiro vem DEPOIS do menu.css,
   estas cores têm prioridade automaticamente.
   ============================================= */
:root {
    /* --- Fundo da página --- */
    --color-bg: #0E0E0E;

    /* --- Cabeçalho --- */
    --color-header: #111111;

    /* --- Dourado (preços, tabs ativas, links) --- */
    --color-accent: #f7d776;
    --color-accent-light: rgba(196, 135, 59, 0.18);

    /* --- Textos --- */
    --color-text: #f4e7c0;
    --color-text-light: #f4e7c0;

    /* --- Cards dos pratos --- */
    --color-card: #1C1C1C;

    /* --- Bordas --- */
    --color-border: #d2c5a9;

    /* --- Itens indisponíveis --- */
    --color-unavailable: #2A2A2A;
}


/* =============================================
   FUNDO DA PÁGINA INTEIRA
   Garante que as margens laterais (desktop)
   também ficam com fundo escuro.
   ============================================= */
html {
    background: #0A0A0A;
}


/* =============================================
   BOTÃO DE IDIOMA
   Cor dourada para combinar com o tema.
   (FORA do :root — regra de selector CSS)
   ============================================= */
.lang-hamburger {
    color: #d8c6a7;
    border: 1px solid #d8c6a7;
}


/* =============================================
   BADGE "360°"
   Gradiente dourado em vez do vidro escuro padrão.
   ============================================= */
.badge-360 {
    background: linear-gradient(
        90deg,
        #e2b759 0%,
        #decfae 50%,
        #e2b759 100%
    );
    color: #212121;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* =============================================
   TAGLINE DO CABEÇALHO
   Tom dourado subtil.
   ============================================= */
.header p {
    color: rgba(220, 190, 140, 0.65);
    letter-spacing: 2px;
}


/* =============================================
   TÍTULO DAS SECÇÕES (ex: "Entradas", "Pratos")
   Linha separadora dourada abaixo do título.
   ============================================= */
.section-title {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
    margin-bottom: 4px;
}


/* =============================================
   TAGS DE ALERGÉNIOS — MODO ESCURO
   Versões escuras de cada cor para fundos pretos.
   ============================================= */
.allergen-tag.gluten   { background: #3A2E10; color: #F0B84D; }
.allergen-tag.leite    { background: #0D2B10; color: #4CAF50; }
.allergen-tag.ovo      { background: #3A1E08; color: #FF8C42; }
.allergen-tag.peixe    { background: #0A1E3A; color: #5BA3F5; }
.allergen-tag.marisco  { background: #2E0A1A; color: #F06292; }
.allergen-tag.soja     { background: #1E0A2E; color: #CE93D8; }
.allergen-tag.frutos   { background: #1E160E; color: #A1887F; }
.allergen-tag.aipo     { background: #061A18; color: #4DB6AC; }
.allergen-tag.mostarda { background: #2E2A06; color: #D4E157; }
.allergen-tag.sesamo   { background: #2E0E06; color: #FF7043; }


/* =============================================
   BARRA DE CATEGORIAS (TABS)
   Texto inativo em branco-creme subtil,
   ativo em dourado.
   ============================================= */
.cat-tab {
    color: rgba(240, 232, 232, 0.5);
}

.cat-tab.active {
    color: var(--color-accent);
}


/* =============================================
   SOMBRA DOS CARDS
   Brilho dourado muito subtil ao fazer hover.
   ============================================= */
.menu-card {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.menu-card:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(196, 135, 59, 0.15);
}


/* =============================================
   HEADER — IMAGEM DE FUNDO DO CLIENTE
   A imagem já contém o logo, nome e slogan.
   Os campos automáticos são escondidos.

   FICHEIRO: assets/clientes/marreta/Marreta_Logo_01.webp
   background-size: contain — mostra a imagem inteira sem cortar
   background-size: cover   — preenche tudo cortando o que sobra (para fotos)
   ============================================= */
.header {
    background-image: url('../../assets/clientes/marreta/Marreta_Logo_01.webp');
    background-size: contain;       /* Mostra a imagem inteira sem cortar */
    background-repeat: no-repeat;   /* Não repete a imagem */
    background-position: center;    /* Centra a imagem */
    min-height: 220px;              /* Altura mínima do header */
    padding: 20px 0;                /* Espaço acima e abaixo da imagem */
}

/* Esconde o gradiente decorativo do menu.css */
.header::before {
    display: none;
}

/* Esconde os campos preenchidos pelo admin (estão na imagem) */
#headerLogo      { display: none; }
#restaurantName  { display: none; }
#restaurantTagline { display: none; }