/* =============================================
   Cabeça de Touro - Restaurant Website Styles
   Traditional Portuguese Charcoal Grill
   ============================================= */

/* CSS Variables - Design System */
:root {
    /* Colors */
    --color-primary: #2D5A3D;
    /* Bottle green */
    --color-primary-dark: #1E3D29;
    --color-primary-light: #3A7550;
    --color-bg: #F5F2EB;
    /* Off-white */
    --color-bg-alt: #EDE9E0;
    --color-text: #1A1A1A;
    /* Charcoal black */
    --color-text-light: #4A4A4A;
    --color-accent: #8B4513;
    /* Warm brown accent */
    --color-white: #FFFFFF;

    /* Typography */
    --font-heading: 'Georgia', 'Times New Roman', serif;
    --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Container */
    --container-max: 1200px;
    --container-padding: 1.5rem;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Text Selection */
::selection {
    background-color: #2D5A3D;
    color: #FFFFFF;
}

/* Selection on dark backgrounds */
.header ::selection,
.hero ::selection,
.page-hero ::selection,
.daily-special ::selection,
.footer ::selection {
    background-color: #F5F2EB;
    color: #1E3D29;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

ul {
    list-style: none;
}

/* Visually hidden (accessible to screen readers, hidden on screen) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--spacing-md);
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: var(--spacing-sm);
}

p {
    margin-bottom: var(--spacing-sm);
}

/* Container */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Section Styles */
section {
    padding: var(--spacing-xl) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-header h2 {
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-primary);
    margin: var(--spacing-sm) auto 0;
}

/* =============================================
   Header & Navigation
   ============================================= */
.header {
    background-color: var(--color-primary-dark);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--spacing-sm) 0;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 1px;
}

.logo:hover {
    color: var(--color-white);
}

.logo-img {
    height: 70px;
    width: auto;
    transition: opacity var(--transition-fast);
}

.logo:hover .logo-img {
    opacity: 0.85;
}

/* Footer logo - slightly larger */
.footer .logo-img {
    height: 120px;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-list {
    display: flex;
    gap: var(--spacing-md);
}

.nav-list a {
    color: var(--color-bg);
    font-size: 0.95rem;
    padding: var(--spacing-xs) 0;
    position: relative;
}

.nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-bg);
    transition: width var(--transition-normal);
}

.nav-list a:hover::after {
    width: 100%;
}

.nav-list a:hover {
    color: var(--color-white);
}

/* Language Toggle */
.lang-toggle {
    display: flex;
    gap: 0.5rem;
    margin-left: var(--spacing-sm);
    padding-left: var(--spacing-sm);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.lang-toggle a,
.lang-toggle span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    transition: all var(--transition-fast);
}

.lang-toggle a:hover,
.lang-toggle .active {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--color-white);
    transition: all var(--transition-fast);
}

/* =============================================
   Hero Section
   ============================================= */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(30, 61, 41, 0.6),
            rgba(30, 61, 41, 0.7)), url('../images/hero.jpg') center/cover no-repeat;
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    padding-top: 80px;
}

.hero-content {
    max-width: 800px;
    padding: var(--spacing-md);
}

.hero h1 {
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-logo {
    max-width: 550px;
    width: 80vw;
    height: auto;
    margin: 0 auto var(--spacing-md);
    display: block;
}

.hero-tagline {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: var(--color-bg);
    margin-bottom: var(--spacing-md);
    font-style: italic;
}

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--color-bg);
    color: var(--color-bg);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn:hover {
    background-color: var(--color-bg);
    color: var(--color-primary-dark);
}

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

.btn-primary:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-white);
}

/* =============================================
   About Section
   ============================================= */
.about {
    background-color: var(--color-bg);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.about-text p {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
}

.about-image {
    height: 400px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Features */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.feature {
    text-align: center;
    padding: var(--spacing-md);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.feature h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.feature p {
    color: var(--color-text-light);
    font-size: 0.95rem;
}

/* =============================================
   Menu Section
   ============================================= */
.menu {
    background-color: var(--color-bg-alt);
}

.menu-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--spacing-lg);
    color: var(--color-text-light);
    font-size: 1.1rem;
}

/* Daily Special */
.daily-special {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-md);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    border-radius: 4px;
}

.daily-special h3 {
    color: var(--color-bg);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--spacing-xs);
}

.daily-special p {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-xs);
}


/* Menu Categories */
.menu-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.menu-category h3 {
    color: var(--color-primary);
    font-size: 1.5rem;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item-info {
    flex: 1;
    padding-right: var(--spacing-sm);
}

.menu-item-name {
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.menu-item-desc {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 0;
}


/* Legal / info notes at the bottom of the menu page */
.menu-notes {
    margin-top: 3rem;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-text);
    opacity: 0.8;
}

.menu-notes p {
    margin-bottom: 0.5rem;
}

/* =============================================
   Contact Section
   ============================================= */
.contact {
    background-color: var(--color-bg);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.contact-info h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.contact-icon {
    font-size: 1.5rem;
    color: var(--color-primary);
    min-width: 30px;
}

.contact-text h4 {
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.contact-text p {
    color: var(--color-text-light);
    margin-bottom: 0;
}

/* Hours Table */
.hours-table {
    margin-top: var(--spacing-md);
}

/* Temporary notice above the hours table (holidays, closures) */
.hours-notice {
    background-color: var(--color-bg-alt);
    border-left: 4px solid var(--color-accent);
    padding: 0.75rem 1rem;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--color-accent);
}

.hours-table table {
    width: 100%;
    border-collapse: collapse;
}

.hours-table td {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.hours-table td:last-child {
    text-align: right;
    color: var(--color-text-light);
}

/* Map Placeholder */
.map-container {
    background: linear-gradient(135deg,
            var(--color-primary-dark) 0%,
            var(--color-primary) 100%);
    height: 100%;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    border-radius: 4px;
}

/* =============================================
   Gallery Section
   ============================================= */
.gallery {
    background-color: var(--color-bg);
}

.gallery-carousel {
    position: relative;
}

.gallery-track {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 var(--spacing-sm);
    cursor: grab;
}

.gallery-track::-webkit-scrollbar {
    display: none;
}

/* While the pointer is dragging, snapping and smooth scrolling fight the
   drag — turn both off so the track follows the cursor exactly. */
.gallery-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.gallery-track:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.gallery-img {
    /* Three photos fill the track and the fourth is cut in half, so there is
       always something visibly off the edge to drag towards. Three whole slides
       leave three gaps before that half slide, hence the 3 × gap subtraction.
       clamp() inside the `flex` shorthand is parsed unreliably and can drop the
       whole declaration, so size the slide with an explicit width. */
    flex: 0 0 auto;
    width: calc((100% - 3 * var(--spacing-md)) / 3.5);
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 4px;
    scroll-snap-align: start;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    user-select: none;
    -webkit-user-drag: none;
}

.gallery-track:not(.is-dragging) .gallery-img:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-bg-alt);
    color: var(--color-accent);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background-color var(--transition-fast);
}

.gallery-nav:hover {
    background-color: var(--color-accent);
    color: var(--color-bg-alt);
}

.gallery-nav--prev {
    left: calc(var(--spacing-sm) * -1);
}

.gallery-nav--next {
    right: calc(var(--spacing-sm) * -1);
}

/* The round badge that rides along with the pointer, standing in for the
   cursor so the strip visibly asks to be dragged. Two elements on purpose:
   the outer one is moved by script every pointer move, the inner one owns the
   fade and scale, so a transition never has to fight the position update. */
.gallery-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
    will-change: transform;
}

.gallery-cursor > span {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    border-radius: 50%;
    background-color: rgba(30, 61, 41, 0.85);
    color: var(--color-bg);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.gallery-cursor.is-visible > span {
    opacity: 1;
    transform: scale(1);
}

.gallery-cursor.is-grabbing > span {
    transform: scale(0.85);
}

/* Only hide the real cursor once the badge is actually running, so a failed
   script leaves the ordinary grab cursor in place rather than nothing at all. */
.gallery-carousel.has-cursor-badge .gallery-track,
.gallery-carousel.has-cursor-badge .gallery-track.is-dragging {
    cursor: none;
}

.gallery-hint {
    margin-top: var(--spacing-sm);
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Narrower tracks show fewer photos, but always keep one cut in half so the
   gallery still reads as something you drag. */
@media (max-width: 992px) {
    .gallery-img {
        width: calc((100% - 2 * var(--spacing-md)) / 2.5);
    }
}

@media (max-width: 480px) {
    .gallery-track {
        gap: var(--spacing-sm);
    }

    .gallery-img {
        width: calc((100% - var(--spacing-sm)) / 1.5);
    }
}

/* The arrows and the badge both need a pointer; on touch the swipe is the
   interaction and a finger has no cursor to stand in for. */
@media (hover: none) {
    .gallery-nav,
    .gallery-cursor {
        display: none;
    }
}

@media (hover: hover) {
    .gallery-hint {
        display: none;
    }
}

/* =============================================
   Footer
   ============================================= */
.footer {
    background-color: var(--color-primary-dark);
    color: var(--color-bg);
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.footer h4 {
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
}

.footer p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.footer-about .logo {
    margin-bottom: var(--spacing-sm);
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--color-white);
}

.footer-contact p {
    margin-bottom: 0.5rem;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-credit strong {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

/* =============================================
   Responsive Design
   ============================================= */

/* Tablet */
@media (max-width: 992px) {

    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .about-image {
        order: -1;
        height: 300px;
    }

    .features {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .menu-categories {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 4rem;
        --spacing-lg: 2.5rem;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }

    .header .container {
        position: relative;
    }

    .menu-toggle {
        display: flex;
        z-index: 1001;
    }

    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-primary-dark);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-normal);
    }

    .nav.active {
        opacity: 1;
        visibility: visible;
    }

    .nav-list {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
    }

    .nav-list a {
        font-size: 1.5rem;
    }

    .lang-toggle {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-md);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Menu toggle animation */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .hero {
        min-height: 80vh;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-links ul {
        align-items: center;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .btn {
        padding: 0.875rem 2rem;
        font-size: 0.9rem;
    }

    .daily-special {
        padding: var(--spacing-sm);
    }

    .menu-item {
        flex-direction: column;
        gap: 0.5rem;
    }

}

/* =============================================
   Page Hero (for internal pages)
   ============================================= */
.page-hero {
    background-color: #1E3D29;
    color: #FFFFFF;
    padding: calc(80px + var(--spacing-xl)) 0 var(--spacing-xl);
    text-align: center;
}

.page-hero h1 {
    color: #FFFFFF;
    margin-bottom: var(--spacing-sm);
}

.page-hero p {
    color: #F5F2EB;
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 0;
}

/* Menu Page Styles */
.menu-page {
    padding-top: var(--spacing-lg);
}

/* Suggestions Category - Full Width Highlight */
.menu-category.suggestions-category {
    grid-column: 1 / -1;
    background-color: #2D5A3D;
    padding: 2rem;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.menu-category.suggestions-category h3 {
    color: #FFFFFF;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.menu-category.suggestions-category .menu-item {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.menu-category.suggestions-category .menu-item-name {
    color: #FFFFFF;
}

.menu-category.suggestions-category .menu-item-desc {
    color: rgba(255, 255, 255, 0.7);
}


/* Menu CTA Button */
.menu-cta {
    text-align: center;
    margin-top: var(--spacing-lg);
}

/* Suggestions Grid in Daily Special */
.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.5rem;
    margin-top: var(--spacing-sm);
    text-align: left;
}

.suggestions-grid p {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 0;
}

.suggestions-grid p span {
    font-weight: 600;
    white-space: nowrap;
    margin-left: 1rem;
}

/* Active Nav Link */
.nav-list a.active {
    color: var(--color-white);
}

.nav-list a.active::after {
    width: 100%;
}

/* =============================================
   Intro Animation Overlay
   ============================================= */
.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary-dark);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.intro-content {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: introFadeIn 0.8s ease forwards;
    animation-delay: 0.3s;
}

.intro-logo-img {
    max-width: 400px;
    width: 85vw;
    height: auto;
}

.intro-line {
    width: 0;
    height: 2px;
    background-color: var(--color-bg);
    margin: var(--spacing-md) auto 0;
    animation: lineGrow 0.8s ease forwards;
    animation-delay: 1s;
}

/* Intro animations */
@keyframes introFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes introSlideUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes lineGrow {
    from {
        width: 0;
    }

    to {
        width: 200px;
    }
}

/* When animation completes */
.intro-overlay.slide-up {
    animation: introSlideUp 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

.intro-overlay.hidden {
    display: none;
}

/* =============================================
   Daily Menu Dynamic Styles
   ============================================= */

/* Loading state */
.daily-special .loading {
    font-style: italic;
    opacity: 0.8;
}

/* Daily dish items inside .daily-special */
.daily-special .daily-dish-item {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 2rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.daily-special .daily-dish-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.daily-special .daily-dish-item:first-child {
    padding-top: 0;
}

.daily-special .daily-dish-item .dish-name {
    font-size: 1.25rem;
    font-weight: 500;
}


.daily-special .recent-label {
    font-size: 0.85rem;
    opacity: 0.7;
    font-style: italic;
    margin-bottom: var(--spacing-xs);
}

/* Dish description */
.daily-special .dish-description {
    font-size: 1rem;
    opacity: 0.9;
    font-style: italic;
    margin-bottom: var(--spacing-xs);
}

/* Recent label (fallback) */
.daily-special .recent-label {
    font-size: 0.85rem;
    opacity: 0.7;
    font-style: italic;
    margin-bottom: var(--spacing-xs);
}

/* Allergens */
.daily-special .allergens {
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
    opacity: 0.8;
}

/* No menu message */
.daily-special .no-menu-message {
    font-style: italic;
    opacity: 0.9;
}

/* Sold out state */
.daily-special.is-sold-out {
    background-color: var(--color-text-light);
}

.daily-special .dish-name.sold-out {
    text-decoration: line-through;
    opacity: 0.7;
}

.daily-special .sold-out-label {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 3px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
}