@import url('events.css');
@import url('whatsapp.css');
@import url('contact.css');

:root {
    --color-espresso: #6F4E37;
    --color-blue-grey: #8BA4A8;
    --color-beige: #F5F5DC;
    --color-cream: #FFFDD0;
    --color-anthracite: #336450;
    --color-text-main: #2C2C2C;
    --color-text-light: #F9F9F9;
    --color-white: #FFFFFF;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;

    --transition-smooth: all 0.3s ease-in-out;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-deep: 0 15px 40px rgba(0, 0, 0, 0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-main);
    background-color: var(--color-beige);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
blockquote {
    font-family: var(--font-heading);
    color: var(--color-espresso);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

ul {
    list-style: none;
}

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

/* Utilities */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 2rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-primary {
    background-color: var(--color-espresso);
    color: var(--color-white);
    border: 2px solid var(--color-espresso);
}

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

.btn-secondary {
    background-color: transparent;
    color: var(--color-espresso);
    border: 2px solid var(--color-espresso);
}

.btn-secondary:hover {
    background-color: var(--color-espresso);
    color: var(--color-white);
}

/* Header */
#main-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition-smooth);
}

#main-header.scrolled {
    background-color: rgba(245, 245, 220, 0.95);
    /* Beige translucent */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
}

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

.logo img {
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--color-espresso);
    transition: var(--transition-smooth);
}

#main-header.scrolled .logo img {
    height: 50px;
}

.main-nav ul {
    display: flex;
    gap: 30px;
}

.main-nav a {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--color-espresso);
    /* Ensure visible on light BG */
}

.main-nav a:hover {
    color: var(--color-blue-grey);
}

/* Make nav white initially if on dark hero? 
   Actually, without a background on header initially, text should be readable on Hero.
   Hero image is dark? Let's assume white text initially is better for Hero, but user scrolls and it becomes dark.
   Let's handle that with .scrolled logic or keep header solid/semi-transparent always.
   For "antique modern", a solid strip or glassmorphism is nice. 
   Let's use white/light text on top of Hero and Espresso text on Scrolled.
*/

#main-header:not(.scrolled) .main-nav a {
    color: var(--color-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#main-header:not(.scrolled) .logo img {
    border-color: var(--color-white);
}

.mobile-menu-btn {
    display: none;
    cursor: pointer;
}

/* Hero Section */
.hero {
    height: 100vh;
    background: url('../img/hero2.png') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: var(--color-white);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Darken hero for text */
    background: linear-gradient(to bottom, rgba(51, 100, 80, 0.3), rgba(111, 78, 55, 0.6));
    /* Anthracite to Espresso gradient tint */
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.hero h1 {
    font-size: 5rem;
    color: var(--color-cream);
    margin-bottom: 10px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.hero .subtitle {
    font-size: 1.5rem;
    margin-bottom: 30px;
    font-weight: 300;
}

/* Sections General */
.section {
    padding: 80px 0;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-blue-grey);
    margin: 10px auto 0;
}

/* About Grid */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 15px;
}

.visual-box {
    width: 100%;
    height: 400px;
    background-color: var(--color-espresso);
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-deep);
}

/* Simulated Image in Visual Box */
.visual-box::before {
    /* Usually we'd put an image here. I'll use a gradient placeholder or if user provides one. 
        For now, let's make it decorative. */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(45deg, var(--color-espresso), var(--color-anthracite));
    opacity: 0.9;
}

.deco-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 2px solid var(--color-cream);
    border-radius: 50%;
    opacity: 0.5;
}

/* Menu Highlights */
.menu-highlights {
    background-color: var(--color-white);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.menu-card {
    background-color: var(--color-beige);
    padding: 40px 20px;
    border-radius: 8px;
    text-align: center;
    transition: var(--transition-smooth);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.menu-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-deep);
    background-color: var(--color-cream);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--color-espresso);
    /* Fixed from color-secondary to keep palette strict */
}

.menu-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.menu-card p {
    color: #666;
    margin-bottom: 20px;
}

.price {
    display: inline-block;
    padding: 5px 15px;
    background-color: var(--color-anthracite);
    color: var(--color-white);
    border-radius: 20px;
    font-weight: bold;
}

/* Quote Section */
.quote-section {
    background-color: var(--color-anthracite);
    color: var(--color-cream);
    padding: 100px 0;
    text-align: center;
}

blockquote {
    font-size: 2rem;
    font-style: italic;
    color: var(--color-cream);
}

/* Footer */
footer {
    background-color: #222;
    color: var(--color-cream);
    padding: 60px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h3 {
    color: var(--color-white);
    margin-bottom: 20px;
    font-size: 1.2rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-espresso);
    display: inline-block;
    padding-bottom: 5px;
}

.footer-col p,
.footer-col a {
    color: #aaa;
    margin-bottom: 10px;
    display: block;
}

.footer-col a:hover {
    color: var(--color-blue-grey);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 20px;
    color: #666;
    font-size: 0.9rem;
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s forwards;
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    animation-delay: 0.2s;
    transition-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
    transition-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
    transition-delay: 0.6s;
}

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

/* Responsive */
@media (max-width: 768px) {
    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 70%;
        background-color: var(--color-beige);
        padding-top: 80px;
        transform: translateX(100%);
        transition: var(--transition-smooth);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    }

    .main-nav.active {
        transform: translateX(0);
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
    }

    .main-nav a {
        color: var(--color-espresso) !important;
        /* Always dark in mobile menu */
        font-size: 1.2rem;
    }

    .mobile-menu-btn {
        display: block;
        z-index: 1001;
    }

    .mobile-menu-btn span {
        display: block;
        width: 30px;
        height: 3px;
        background-color: var(--color-white);
        /* White explicitly for Hero */
        margin: 5px 0;
        transition: var(--transition-smooth);
    }

    /* Keep toggle button visible when menu is open */
    .mobile-menu-btn.open span {
        background-color: var(--color-espresso);
        /* Dark when menu open on Beige */
    }

    .mobile-menu-btn.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .mobile-menu-btn.open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

    .header-container {
        padding: 0 10px;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }
}