@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600&display=swap');

:root {
    --sage: #5D6348;
    --dusty-rose: #E28C8C;
    --off-white: #FCFAFA;
    --slate: #334155;
}

body { font-family: 'Inter', sans-serif; background-color: var(--off-white); color: var(--slate); scroll-behavior: smooth; }
h1, h2, h3 { font-family: 'Playfair Display', serif; }

.btn-primary { background-color: var(--sage); color: white; padding: 1rem 2rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; transition: 0.3s; }
.btn-primary-menu { background-color: var(--sage); color: white; padding: .5rem 2rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; transition: 0.3s;}

.logo-cursive { font-family: 'Dancing Script', cursive; font-weight: 700; text-transform: none; letter-spacing: 0; }

.hero-centered { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.early-bird-banner { background-color: var(--sage); color: white; text-align: center; padding: 0.5rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; }

/* Small “tailwind-like” helpers used throughout the pages */
.text-sage { color: var(--sage); }
.bg-sage { background-color: var(--sage); }
.border-sage { border-color: var(--sage); }

/* Responsive adjustments for embedded calendar */
#booking {
    padding: 2rem 1rem; /* Reduced padding for mobile */
}

#booking > div > iframe {
    width: 100%;
    /* Maintain aspect ratio for iframe, adjust height dynamically */
    height: auto; 
    min-height: 500px; /* Minimum height for larger screens */
}

/* Media query for even smaller screens if needed */
@media (max-width: 640px) {
    #booking {
        padding: 1rem 0.5rem; /* Further reduced padding */
    }
    #booking > div > iframe {
        min-height: 400px; /* Adjust min-height for smaller viewports */
    }
}

/* Responsive adjustments for footer */
@media (max-width: 640px) {
    footer {
        letter-spacing: 0.1em; /* Slightly reduce letter spacing on mobile */
    }
    /* Ensure links stack nicely if they overflow on very narrow screens */
    footer .mb-6 {
        flex-direction: column; /* Stack links vertically */
        gap: 0.75rem; /* Reduce gap when stacked */
    }
    footer .mb-6 a {
        margin-bottom: 0.75rem; /* Add margin to stacked links */
    }
     footer .mb-6 a:last-child {
        margin-bottom: 0; /* Remove margin from the last stacked link */
    }
}