/* 
   Pizza do Giulli - Estilos Customizados & Editorial Gastronômico
   Cores: Marsala (#7a2035), Dark Mode (#181414), Creme (#f8f4ee), Ouro (#d4a359)
*/

:root {
    --marsala: #4a101d;
    --marsala-dark: #2d0911;
    --marsala-hover: #591322;
    --darkbg: #181414;
    --darkbg-surface: #221c1c;
    --darkbg-card: #2a2222;
    --darkbg-border: #3d3131;
    --cream: #f8f4ee;
    --cream-muted: #c8bfae;
    --gold: #d4a359;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--darkbg);
}
::-webkit-scrollbar-thumb {
    background: var(--darkbg-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--marsala);
}

/* Selection */
::selection {
    background-color: var(--marsala);
    color: var(--cream);
}

/* Base Body Setup */
body {
    background-color: var(--darkbg);
    color: var(--cream);
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.6;
}

/* Contain reveal transforms and shrink intrinsic grid content on narrow screens. */
html {
    background-color: var(--darkbg);
    color-scheme: dark;
    overflow-x: clip;
    scroll-padding-top: calc(var(--header-height, 133px) + 16px);
}

/* Keep the matching first frame visible until a real video frame is ready. */
#hero-video {
    opacity: 0;
    transition: opacity 180ms linear;
}

#hero-video.is-ready { opacity: 1; }

.grid > * { min-width: 0; }

:focus-visible {
    outline: 2px solid var(--gold) !important;
    outline-offset: 4px;
}

#main-header:focus-within {
    transform: none;
    pointer-events: auto;
}

#mobile-menu {
    max-height: calc(100dvh - var(--header-height, 101px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

#menu-content > section {
    padding-top: max(12rem, calc(var(--header-height, 258px) + 20px));
}

@media (min-width: 768px) {
    #menu-content > section {
        padding-top: max(10rem, calc(var(--header-height, 180px) + 20px));
    }
}

@media (max-width: 767px) {
    button, .order-whatsapp-btn, .order-online-btn, .header-online-link, #mobile-menu a, footer a {
        min-height: 44px;
        min-width: 44px;
    }
    #mobile-menu a, footer a {
        display: inline-flex;
        align-items: center;
    }
    footer .flex { flex-wrap: wrap; }
    main > section:first-child > a[aria-label] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #menu-items-container .flex > h3,
    #menu-items-container .flex > div,
    #detail-modal h2 {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    #menu-items-container .menu-card > .flex > span:last-child {
        min-width: 0;
        text-align: center;
    }
}

/* Use the existing drawer before the desktop navigation collides. */
@media (min-width: 768px) and (max-width: 1199px) {
    #main-header nav { display: none; }
    #mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    #mobile-menu:not(.hidden) { display: flex; }
}

/* Typography Enhancements */
h1, h2, h3, h4, .font-serif {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Tab Button Custom States */
.tab-btn {
    background-color: var(--darkbg-surface);
    border: 1px solid var(--darkbg-border);
    color: var(--cream-muted);
    transition: all 0.3s ease;
}

.tab-btn:hover {
    border-color: var(--marsala);
    color: var(--cream);
}

.tab-btn.active {
    background-color: var(--marsala);
    border-color: var(--gold);
    color: var(--cream);
    box-shadow: 0 4px 15px rgba(122, 32, 53, 0.4);
}

/* Menu Card Animation */
.menu-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.menu-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(122, 32, 53, 0.3);
}

/* Animated Header Scroll & Hide Effects */
#main-header {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#main-header.header-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

#main-header.scrolled {
    background-color: rgba(24, 20, 20, 0.94) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7);
    border-bottom-color: rgba(61, 49, 49, 0.6);
}

/* WhatsApp Pulse Animation */
@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.floating-wa-btn {
    animation: pulse-ring 2.5s infinite;
}

/* Custom Image Frame Glow */
.image-glow {
    position: relative;
}
.image-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* Scroll Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-35px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(35px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.93);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Stagger animation delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* 21st.dev / Magic UI Infinite Marquee Carousel */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

.marquee-container {
    display: flex;
    overflow: hidden;
    user-select: none;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee-content {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: marquee 35s linear infinite;
}

.marquee-content-reverse {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: marquee-reverse 35s linear infinite;
}

.marquee-container:hover .marquee-content,
.marquee-container:hover .marquee-content-reverse {
    animation-play-state: paused;
}

.marquee-container:focus-within .marquee-content,
.marquee-container:focus-within .marquee-content-reverse {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    #hero-video { transition: none; }
    html.scroll-smooth { scroll-behavior: auto; }
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .marquee-content, .marquee-content-reverse {
        animation: none;
        transform: none;
    }
    .marquee-container { overflow-x: auto; }
    .animate-ping, .floating-wa-btn { animation: none; }
    #main-header { transition: background-color 0.15s; }
}