/* Template Default - CSS */

/* Custom Properties */
:root {
    --color-primary: #3b82f6;
    --color-secondary: #1e293b;
    --color-accent: #22c55e;
    --color-background: #ffffff;
    --color-text: #1e293b;
    --color-muted: #64748b;
    --color-border: #e2e8f0;
    --color-surface: #ffffff;
    --color-footer_bg: #0f172a;
    --color-footer_text: #cbd5e1;
    --color-footer_link: #ffffff;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;
    --color-info: #0ea5e9;
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
    background-color: var(--color-background);
    color: var(--color-text);
}

.st-bg-custom[data-st-bg-custom] {
    background-color: var(--st-bg-custom, transparent);
}

/* Template semantic helpers */
.st-icon-badge {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.st-hero {
    background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 65%, var(--color-secondary)), var(--color-secondary));
}

.st-hero-orb {
    background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.st-header-scrolled {
    background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/*
 * Sticky header sobre fundo claro: o estado "scrolled" adiciona vidro fosco,
 * mas o fosco base é CLARO (--color-surface) e apagava o contraste de headers
 * de tom ESCURO (text-white → nav/logo brancos sobre fosco branco = ilegível).
 * Cascata resolvida na ORIGEM por especificidade (#id + [attr] + .classe vence
 * a .st-header-scrolled e o bg-* utilitário do Tailwind, sem !important):
 *   - header de texto branco  → fosco ESCURO NEUTRO (slate-900), mesma família
 *     do bg-slate-950 dos headers escuros. NÃO usa --color-secondary: é cor de
 *     marca (pode ser vívida, ex.: violeta) e mudaria o matiz do header ao
 *     rolar; o slate neutro mantém o header escuro e legível em qualquer tema;
 *   - header de fundo primário (brand) → fosco na própria cor primária,
 *     preservando a identidade e o mesmo contraste do estado não-rolado.
 * O seletor [class~="token"] casa a classe utilitária REAL emitida pela view
 * (bg-primary / text-white), então cobre todas as variantes de header global.
 */
#site-header[class~="text-white"].st-header-scrolled {
    background-color: rgb(15 23 42 / 0.92); /* slate-900 fosco */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.35);
}

#site-header[class~="bg-primary"].st-header-scrolled {
    background-color: color-mix(in srgb, var(--color-primary) 92%, transparent);
}

.st-mobile-menu-backdrop {
    background-color: rgb(0 0 0 / 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.st-mobile-menu-backdrop.is-open {
    opacity: 1;
}

.st-mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.st-mobile-menu.is-open {
    transform: translateX(0);
}

.st-mobile-menu-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.st-mobile-menu-item.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.st-no-scroll {
    overflow: hidden;
}

body.font-sans {
    font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
}

.font-sans {
    font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Utility classes for CSS variables */
.bg-primary {
    background-color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary);
}

.border-primary {
    border-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.text-secondary {
    color: var(--color-secondary);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-surface {
    background-color: var(--color-surface);
}

.bg-background {
    background-color: var(--color-background);
}

.text-accent {
    color: var(--color-accent);
}

.text-info {
    color: var(--color-info);
}

.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.text-danger {
    color: var(--color-danger);
}

.text-muted {
    color: var(--color-muted);
}

.text-text {
    color: var(--color-text);
}

.text-border {
    color: var(--color-border);
}

.text-surface {
    color: var(--color-surface);
}

.text-background {
    color: var(--color-background);
}

.border-border {
    border-color: var(--color-border);
}

.st-rich-bg-primary {
    background-color: var(--color-primary);
}

.st-rich-bg-secondary {
    background-color: var(--color-secondary);
}

.st-rich-bg-accent {
    background-color: var(--color-accent);
}

.st-rich-bg-info {
    background-color: var(--color-info);
}

.st-rich-bg-success {
    background-color: var(--color-success);
}

.st-rich-bg-warning {
    background-color: var(--color-warning);
}

.st-rich-bg-danger {
    background-color: var(--color-danger);
}

.st-rich-mark-pad {
    padding-inline: 0.25rem;
}

.st-rich-radius-none {
    border-radius: 0;
}

.st-rich-radius-sm {
    border-radius: 3px;
}

.st-rich-radius-md {
    border-radius: 6px;
}

.st-rich-radius-lg {
    border-radius: 10px;
}

.st-rich-radius-pill {
    border-radius: 999px;
}

.st-rich-leading-compact {
    line-height: 1;
}

.st-rich-leading-normal {
    line-height: 1.45;
}

.st-rich-leading-comfortable {
    line-height: 1.7;
}

.st-rich-leading-loose {
    line-height: 2;
}

.st-rich-align-left {
    text-align: left !important;
}

.st-rich-align-center {
    text-align: center !important;
}

.st-rich-align-right {
    text-align: right !important;
}

.st-rich-align-justify {
    text-align: justify !important;
}

.st-rich-list {
    margin: 0.35em 0;
    padding-left: 1.35em;
}

.st-rich-list-disc {
    list-style: disc;
}

.st-rich-list-decimal {
    list-style: decimal;
}

.st-rich-list li > p {
    margin: 0;
}

/* Ring focus with primary color */
.focus\:ring-primary:focus {
    --tw-ring-color: var(--color-primary);
}

.focus\:border-primary:focus {
    border-color: var(--color-primary);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Stagger animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Back to top button */
#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* Form input focus states */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Button hover effects */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--color-primary) 90%, black);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px var(--color-primary);
}

/* Link hover underline effect */
.link-underline {
    position: relative;
}

.link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

.link-underline:hover::after {
    width: 100%;
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Loading spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Banner styles moved to banner-styles.css — single source of truth */

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive typography */
@media (max-width: 640px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
}

/* Print styles */
@media print {
    header,
    footer,
    #back-to-top,
    .no-print {
        display: none;
    }
    
    body {
        font-size: 12pt;
    }
    
    a {
        text-decoration: underline;
    }
}

/* F1.7 — Carrossel (marquee) de logos do bloco LogoCloud. Ativado quando
   logos_animation = "marquee". Usa duas faixas idênticas e translada -50% para
   um loop contínuo sem emenda. Pausa no hover e respeita reduced-motion. */
.st-logos-marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.st-logos-marquee-inner {
    display: flex;
    width: max-content;
    animation: st-logos-scroll var(--st-logos-duration, 30s) linear infinite;
}

.st-logos-marquee[data-speed="slow"] .st-logos-marquee-inner {
    --st-logos-duration: 46s;
}

.st-logos-marquee[data-speed="normal"] .st-logos-marquee-inner {
    --st-logos-duration: 30s;
}

.st-logos-marquee[data-speed="fast"] .st-logos-marquee-inner {
    --st-logos-duration: 16s;
}

.st-logos-marquee .st-logos-track {
    flex: 0 0 auto;
    padding-right: 2.5rem;
}

.st-logos-marquee:hover .st-logos-marquee-inner {
    animation-play-state: paused;
}

@keyframes st-logos-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .st-logos-marquee-inner {
        animation: none;
    }
}

/* ─── Botão de ação do cabeçalho no celular ────────────────────────────────
   As seis variantes básicas do cabeçalho global escondiam o botão de ação
   abaixo de 640px (`hidden … sm:inline-flex`). Medido em 20/08 no Atlântico a
   390px: a caixa do "Confira o seu pedido" era 0×0 (`display:none`) e a
   primeira tela do celular tinha dois alvos — a logo e o hambúrguer — e nenhum
   caminho de pedido sem abrir o menu. Num restaurante, a maior parte de quem
   vai pedir chega por esta tela.

   A família premium já resolvia isso em header-premium.css (bloco
   `max-width: 899px`); aqui vale a mesma ideia, no vocabulário destas
   variantes. O botão fica na barra, compacto: 44px de alvo de toque, teto de
   46vw e corte por reticências numa ponta só, com o texto alinhado ao início.
   O defeito que a premium documentou — ler "ntral Delivery: (11) 5051-12" —
   vem de CENTRALIZAR o texto e cortar as DUAS pontas; alinhar ao início deixa
   sempre legível o começo do rótulo. O texto do link continua inteiro no DOM,
   então o leitor de tela recebe o rótulo completo. */
@media (max-width: 639.98px) {
    #site-header .st-header-cta {
        display: inline-block;
        max-width: 46vw;
        padding: 0.75rem 0.875rem;
        font-size: 0.8125rem;
        line-height: 1.25rem;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* A marca cede largura ao botão em vez de empurrá-lo para fora da barra.
       Sem isto a logo mantém a largura intrínseca (145px medidos no Atlântico,
       teto `max-w-44` = 176px) e a linha estoura: o hambúrguer passava a
       sobrepor a logo em 9px. `object-contain` no <img> preserva a proporção
       enquanto a caixa encolhe. */
    #site-header .st-header-brand {
        min-width: 0;
    }

    #site-header .st-header-brand img {
        max-width: 100%;
    }
}