/* --- TABLE OF CONTENTS ---
1.  :root Variables (Colors, Fonts)
2.  Global Styles & Typography
3.  Header & Navigation
4.  Hero Section
5.  Story Section
6.  Specialties Section
7.  Social Proof Section
8.  Gallery Section
9.  Events Section
10. Visit Us (Map) Section
11. Contact Section
12. Footer
13. Utility & Animation Classes
14. Responsive Design
--------------------------*/
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}
/* --- SMOOTH PAGE FADE-IN --- */
body {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

body.loaded {
    opacity: 1;
}

/* 1. :root Variables */
:root {
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    
    --color-background: #FDFBF8; /* Warm, creamy off-white */
    --color-text: #4A2C2A;       /* Rich, dark chocolate brown */
    --color-accent: #C9A96E;     /* Soft, premium gold */
    --color-white: #FFFFFF;
    --color-border: #EAEAEA;

    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 2rem;     /* 32px */
    --spacing-lg: 4rem;     /* 64px */
    --spacing-xl: 6rem;     /* 96px */
}

/* 2. Global Styles & Typography */
html, body {
    overflow-x: hidden; 
}
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; 
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

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

h1 { font-size: 4rem; }
h2 { font-size: 2.75rem; margin-bottom: var(--spacing-lg); text-align: center; overflow-wrap: break-word;}
h3 { font-size: 1.5rem; margin-bottom: var(--spacing-xs); }
p { margin-bottom: var(--spacing-sm); color: var(--color-text); opacity: 0.9; }
a { color: var(--color-accent); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--color-text); }
strong { font-weight: 700; }
.section-subtitle { max-width: 600px; margin: -2rem auto 2rem; text-align: center; font-size: 1.1rem; }

/* --- Utility Classes for Buttons --- */
.cta-button-header, .cta-button-main, .cta-button-secondary {
    display: inline-block;
    padding: 0.9rem 2.2rem;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    letter-spacing: 0.5px;
}
.cta-button-header { background-color: transparent; border-color: rgba(255, 255, 255, 0.8); color: var(--color-white); transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease; }
.main-header.scrolled .cta-button-header { color: var(--color-accent); border-color: var(--color-accent); }
.main-header.scrolled .cta-button-header:hover { background-color: var(--color-accent); color: var(--color-white); }
.cta-button-header:hover { background-color: var(--color-white); color: var(--color-text); }
.cta-button-main { background-color: var(--color-accent); color: var(--color-white); }
.cta-button-main:hover { background-color: #b3925a; transform: translateY(-3px); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.cta-button-secondary { background-color: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.cta-button-secondary:hover { background-color: var(--color-accent); color: var(--color-white); }

/* 3. Header & Navigation */
.main-header { position: fixed; top: 0; left: 0; width: 100%; padding: var(--spacing-sm) 0; z-index: 1000; transition: all 0.4s ease; }
.main-header.scrolled { background-color: rgba(253, 251, 248, 0.95); box-shadow: 0 2px 15px rgba(0,0,0,0.08); backdrop-filter: blur(8px); padding: var(--spacing-xs) 0; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--color-white); transition: color 0.4s ease; }
.main-header.scrolled .logo { color: var(--color-text); }
.main-nav { display: flex; align-items: center; }
.main-nav a { margin: 0 var(--spacing-sm); color: var(--color-white); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px; transition: color 0.4s ease; }
.main-header.scrolled .main-nav a { color: var(--color-text); }
.main-nav a:hover { color: var(--color-accent); }

/* 4. Hero Section */
.hero-section { height: 100vh; min-height: 750px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.hero-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-video-container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.2)); z-index: 2; }
.hero-video-container video { width: 100%; height: 100%; object-fit: cover; }
.hero-content-container { position: relative; z-index: 3; padding: var(--spacing-md); }
.hero-text { max-width: 800px; }
.hero-text h1 { color: var(--color-white); text-shadow: 0 3px 15px rgba(0,0,0,0.5); }
.hero-text p { font-size: 1.3rem; margin-top: var(--spacing-sm); margin-bottom: var(--spacing-md); color: rgba(255, 255, 255, 0.9); font-weight: 400; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.hero-cta-group { display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.hero-cta-group .cta-button-secondary { color: var(--color-white); border-color: rgba(255, 255, 255, 0.8); }
.hero-cta-group .cta-button-secondary:hover { background-color: var(--color-white); color: var(--color-text); }

/* 5. Story Section */
.story-section { padding: var(--spacing-xl) 0; }
.story-container { display: flex; align-items: center; gap: var(--spacing-lg); max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }
.story-image-container { flex: 1; max-width: 50%; }
.story-image-container img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 15px 35px rgba(74, 44, 42, 0.15); }
.story-content-container { flex: 1; }
.story-content-container h2 { text-align: left; }
.story-content-container p { margin-bottom: var(--spacing-md); line-height: 1.7; }
.story-content-container a { margin-top: var(--spacing-sm); }

/* 6. Specialties Section */
.specialties-section { padding: var(--spacing-xl) 0; background-color: #F9F6F1; }
.specialties-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); }
.specialty-card { background-color: var(--color-white); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(74, 44, 42, 0.08); text-align: center; padding: var(--spacing-md); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.specialty-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(74, 44, 42, 0.12); }
.specialty-card img { width: 100%; height: 250px; object-fit: cover; border-radius: 4px; margin-bottom: var(--spacing-md); }
.specialty-card h3 { margin-bottom: var(--spacing-sm); }

/* 7. Social Proof Section */
.social-proof-section { padding: var(--spacing-xl) 0; }
.social-proof-container { text-align: center; }
.testimonial-container { max-width: 700px; margin: 0 auto var(--spacing-lg); }
.testimonial-quote { font-family: var(--font-heading); font-size: 1.75rem; font-style: italic; margin-bottom: var(--spacing-sm); }
.testimonial-author { font-weight: 700; color: var(--color-accent); }
.review-highlight { margin: 0 auto var(--spacing-lg); display: inline-flex; align-items: center; background-color: #F9F6F1; border-radius: 50px; padding: var(--spacing-xs) var(--spacing-sm); }
.review-score { font-family: var(--font-heading); font-size: 2rem; color: var(--color-accent); margin-right: var(--spacing-sm); }
.awards-container { display: flex; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; }
.award-badge { border: 2px solid var(--color-accent); color: var(--color-accent); padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: 700; }

/* 8. Gallery Section */
.gallery-section { padding: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 350px); gap: 0; }
.gallery-item { overflow: hidden; position: relative; }
.gallery-item::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: 0; transition: opacity 0.4s ease; }
.gallery-item:hover::after { opacity: 0.2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.1); }

/* 9. Events Section */
.events-section { padding: var(--spacing-xl) 0; background-color: #F9F6F1; }
.events-container { display: flex; align-items: center; gap: var(--spacing-lg); max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }
.events-content-container { flex: 1; }
.events-content-container h2 { text-align: left; }
.events-content-container ul { list-style-type: '🍦'; padding-left: 2rem; margin-bottom: var(--spacing-md); }
.events-content-container li { margin-bottom: var(--spacing-xs); padding-left: var(--spacing-sm); font-weight: 700; }
.events-image-container { flex: 1; max-width: 50%; }
.events-image-container img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 15px 35px rgba(74, 44, 42, 0.15); }

/* 10. Visit Us (Map) Section */
.visit-section { padding: var(--spacing-xl) 0; background-color: var(--color-background); }
.address-container { text-align: center; padding: var(--spacing-md) 0; }
.address-container p { font-size: 1.2rem; margin: 0.5rem; }
.map-container { 
    height: 450px; 
    margin-top: calc(var(--spacing-lg) * -1); /* Pulls map up under the H2 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(74, 44, 42, 0.15);
}

/* 11. Contact Section */
.contact-section { padding: var(--spacing-xl) 0; background-color: #F9F6F1; }
.contact-container { max-width: 800px; margin: 0 auto; padding: 0 var(--spacing-md); text-align: center; }
.form-row { display: flex; gap: var(--spacing-md); }
.form-group { flex: 1; text-align: left; margin-bottom: var(--spacing-sm); }
.form-group label { display: block; margin-bottom: var(--spacing-xs); font-weight: 700; }
.form-group input, .form-group textarea { width: 100%; padding: 0.8rem; border-radius: 4px; border: 1px solid var(--color-border); background-color: var(--color-white); font-family: var(--font-body);    transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(201, 169, 10, 0.2); }
.contact-container button { margin-top: var(--spacing-sm); }

/* ADD THIS to the end of the Contact Section styles */

.inquiry-type-group label {
    margin-bottom: var(--spacing-sm);
}

.radio-options-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    text-align: left;
}

.radio-option {
    display: flex;
    align-items: center;
}

.radio-option label {
    position: relative;
    padding-left: 30px; /* Space for the custom radio button */
    cursor: pointer;
    font-weight: 400; /* Lighter than main labels */
    margin: 0;
}

/* Hide the default radio button */
.radio-option input[type="radio"] {
    display: none;
}

/* Create the custom radio button circle */
.radio-option label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    background-color: var(--color-white);
    border-radius: 50%;
    transition: all 0.2s ease;
}

/* Create the inner dot */
.radio-option label::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(0); /* Start hidden and scaled down */
    width: 10px;
    height: 10px;
    background-color: var(--color-accent);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

/* Style changes when the radio button is checked */
.radio-option input[type="radio"]:checked + label::before {
    border-color: var(--color-accent);
}

.radio-option input[type="radio"]:checked + label::after {
    transform: translateY(-50%) scale(1); /* Scale up to become visible */
}

/* Responsive adjustment for the radio buttons on mobile */
@media (max-width: 768px) {
    .radio-options-container {
        grid-template-columns: 1fr;
    }
}
/* 12. Footer (NEW: Polished "Heritage & Cream" Style) */
.main-footer {
    position: relative;
    background-color: transparent;
    padding: 0;
    margin-top: 5rem; /* Give the wave room to breathe */
}

/* --- THE WAVE (Ice Cream Drip) --- */
.footer-wave {
    line-height: 0;
    width: 100%;
    margin-bottom: -1px; /* Seamless connection */
    filter: drop-shadow(0px -5px 10px rgba(0,0,0,0.05)); /* Subtle depth */
}
.footer-wave svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #4A2C2A;
}

/* --- MAIN CONTAINER --- */
.footer-content-wrapper {
    /* Rich Gradient: slight shift from chocolate to dark cocoa */
    background: linear-gradient(to bottom, #4A2C2A, #3D2321); 
    color: #FDFBF8;
    padding-bottom: var(--spacing-lg);
}

.footer-container {
    display: grid;
    /* Refined Layout: Brand | Location | Contact | Menu */
    grid-template-columns: 1.2fr 1.4fr 1.4fr 1fr; 
    gap: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    align-items: start;
}

/* --- HEADERS (Labels) --- */
.footer-column h3 {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(201, 169, 110, 0.8); /* Muted Gold */
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

/* --- BRAND COLUMN & BADGE --- */
.footer-logo {
    font-family: var(--font-heading) !important; /* FIX: Matches the header font */
    font-weight: 700 !important; /* Matches header boldness */
    font-size: 2.5rem !important;
    color: #FDFBF8 !important;
    margin-bottom: var(--spacing-sm) !important;
    line-height: 1;
    text-transform: none !important; /* Ensures original capitalization */
}
.footer-tagline {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.4;
    color: #FDFBF8; /* FIX: Forces text to be light/visible */
    margin-bottom: var(--spacing-md);
}

/* The "Gold Seal" Badge */
.heritage-badge {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #C9A96E;
    outline: 2px solid #C9A96E; /* Double border effect */
    outline-offset: 4px;
    border-radius: 50%;
    width: 85px;
    height: 85px;
    margin: var(--spacing-md) 0;
    color: #C9A96E;
    transform: rotate(-8deg); /* Playful tilt */
    transition: transform 0.3s ease;
    background-color: rgba(74, 44, 42, 0.5); /* Semi-transparent backing */
}
.heritage-badge:hover {
    transform: rotate(0deg) scale(1.05);
}
.heritage-badge span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.heritage-badge strong {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    line-height: 1;
}

/* --- BIG TEXT LINKS (Location & Phone) --- */
.big-link {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #FDFBF8; /* Start Cream */
    text-decoration: none;
    display: block;
    margin-bottom: var(--spacing-xs);
    transition: all 0.3s ease;
    
    /* Custom Underline Effect */
    background-image: linear-gradient(#C9A96E, #C9A96E);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
}
.big-link:hover {
    color: #C9A96E; /* Turn Gold */
    background-size: 100% 2px; /* Underline grows */
}
.sub-text {
    font-size: 1rem;
    opacity: 0.7;
    font-family: var(--font-body);
    font-style: italic;
    color: #FDFBF8; /* FIX: Forces text to be light/visible */
    margin-bottom: var(--spacing-sm);
}

/* --- QUICK LINKS (Menu Style) --- */
.footer-links ul {
    list-style: none;
    padding: 0;
}
.footer-links li {
    margin-bottom: 0.8rem;
}
.footer-links a {
    font-family: var(--font-heading); /* Serif font for menu feel */
    color: #FDFBF8;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: inline-block;
}
.footer-links a:hover {
    color: #C9A96E;
    transform: translateX(5px);
}

/* --- SOCIAL ICONS --- */
.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: var(--spacing-md);
}
.social-icons a {
    color: #FDFBF8;
    border: 1px solid rgba(255,255,255,0.3);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.social-icons a:hover {
    background: #C9A96E;
    border-color: #C9A96E;
    color: #4A2C2A;
    transform: translateY(-3px);
}

/* --- BOTTOM BAR --- */
.footer-bottom {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-bottom p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin: 0;
    letter-spacing: 0.5px;
}
.footer-bottom a {
    color: #C9A96E;
    font-weight: 700;
    transition: color 0.3s;
}
.footer-bottom a:hover {
    color: #FDFBF8;
    text-decoration: underline;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr; /* Stack all columns */
        text-align: center;
        gap: 3rem;
    }
    .heritage-badge {
        margin: 1.5rem auto;
    }
    .social-icons {
        justify-content: center;
    }
    .footer-links ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }
    /* Make big text slightly smaller on mobile */
    .big-link {
        font-size: 1.8rem;
    }
    .big-link:hover {
        background-size: 0% 2px; /* Disable underline anim on touch */
        color: #C9A96E;
    }
    /* Classic Ampersand Style */
.classic-amp {
    font-family: 'Playfair Display', serif; /* Ensure it uses the serif font */
    font-style: italic; /* This triggers the curvy, elegant glyph */
    font-weight: 400; /* Keeps it from getting too chunky */
    font-size: 1.1em; /* Slightly larger to match the caps */
    margin: 0 0.1rem; /* Tiny bit of breathing room */
    color: #C9A96E; /* Optional: Makes the & Gold to match your badge */
}
}
/* 13. Hamburger Menu & Mobile Nav */
.hamburger-menu { display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; }
.hamburger-line { width: 30px; height: 3px; background-color: var(--color-white); border-radius: 10px; transition: all 0.3s linear; }
.main-header.scrolled .hamburger-line { background-color: var(--color-text); }
.mobile-nav-open .main-nav { transform: translateX(0); }
.mobile-nav-open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.mobile-nav-open .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-nav-open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }
.mobile-nav-open .main-header.scrolled .hamburger-line { background-color: var(--color-text); }

/* 14. Utility & Animation Classes */
.story-container, .specialty-card, .social-proof-container, .gallery-item, .events-container, .visit-section .container h2, .address-container, .contact-container, .map-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.visible { opacity: 1; transform: translateY(0); }
.specialty-card:nth-child(2) { transition-delay: 0.2s; }
.specialty-card:nth-child(3) { transition-delay: 0.4s; }
.gallery-item:nth-child(2) { transition-delay: 0.1s; }
.gallery-item:nth-child(3) { transition-delay: 0.2s; }
.gallery-item:nth-child(4) { transition-delay: 0.3s; }
.gallery-item:nth-child(5) { transition-delay: 0.4s; }
.gallery-item:nth-child(6) { transition-delay: 0.5s; }

/* 15. Responsive Design */
@media (max-width: 992px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; overflow-wrap: break-word; }
    .main-nav { position: fixed; top: 0; right: 0; height: 100vh; width: 70%; max-width: 300px; background-color: var(--color-background); box-shadow: -5px 0 25px rgba(0,0,0,0.1); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
    .main-nav a { color: var(--color-text); font-size: 1.5rem; }
    .cta-button-header { display: none; }
    .hamburger-menu { display: flex; }

    .story-container { flex-direction: column; text-align: center; }
    .story-image-container { max-width: 80%; margin-bottom: var(--spacing-md); }
    .story-content-container h2 { text-align: center; }
    .specialties-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 250px); }
    .events-container { flex-direction: column-reverse; text-align: center; }
    .events-image-container { max-width: 80%; margin-bottom: var(--spacing-md); }
    .events-content-container { text-align: center; } /* This centers all children */
    .events-content-container h2 { text-align: center; }
    .events-content-container ul { display: inline-block; text-align: left; }
    .footer-container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    html { font-size: 15px; }
    h2 { font-size: 2rem; overflow-wrap: break-word; }
    .testimonial-quote { font-size: 1.5rem; overflow-wrap: break-word; }
    p, li, a, label { overflow-wrap: break-word; }
    .hero-text p { font-size: 1.1rem; }
    .hero-cta-group { flex-direction: column; align-items: center; }
    .hero-cta-group a { width: 100%; max-width: 300px; }
    .gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(6, 250px); }
    .form-row { flex-direction: column; gap: 0; }
    .footer-container { grid-template-columns: 1fr; text-align: center; }
    .footer-social .social-icons { justify-content: center; }
    .story-container,
    .events-container,
    .review-highlight,
    .awards-container,
    .hero-cta-group {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    }
}