@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap');

/* Define Day Mode (Light) Variables */
:root {
    --bg-color: #ffead6;       /* Brand Day Background */
    --card-bg: #ffffff;        /* Pure white for form cards */
    --accent: #f67a06;         /* Brand Orange (Highlights & Accents) */
    --accent-hover: #a23510;   /* Brand Rust (Hovers) */
    --text-main: #061632;      /* Brand Night color used as Day text */
    --text-muted: #5e6d82;     /* Complementary slate for descriptions */
    --border: #e2cca8;         /* Complementary soft tan for card borders */
    --hero-overlay: rgba(6, 22, 50, 0.4);
}

/* Define Night Mode (Dark) Variables */
[data-theme="dark"] {
    --bg-color: #061632;       /* Brand Night Background */
    --card-bg: #0d254f;        /* Elevated navy for form cards */
    --accent: #f67a06;         /* Keeps orange for high contrast */
    --accent-hover: #a23510;   
    --text-main: #ffead6;      /* Brand Day color used as Night text */
    --text-muted: #9ba8b8;     /* Softened cream/blue for readable muted text */
    --border: #1a365d;         /* Visible but subtle border for dark mode */
    --hero-overlay: rgba(6, 22, 50, 0.7);
}

/* Apply the smooth transition to the whole page */

/* 1. Floating Logo - Initial Centered State */
.floating-logo {
    position: fixed;
    top: 40vh; /* Centers it vertically over the hero video */
    left: 50%;
    transform: translate(-50%, -50%); /* Perfectly centers the element */
    width: 60vw; /* Takes up 60% of the screen width... */
    min-width: 280px; /* ...but never gets smaller than 280px on tiny phones */
    max-width: 800px; /* ...and never gets larger than 550px on big desktop screens */
    z-index: 1001; /* Floats above everything, including the navbar */
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Creates a smooth, natural swoop */
    /* NEW: Flexbox to align the image and text side-by-side */
    display: flex;
    align-items: center;
    gap: 15px; /* Space between the logo and the text */
    text-decoration: none; /* Removes the default blue underline from the link */
}

.floating-logo img {
    width: 100%;
    height: auto;
}
/* NEW: The Text styling (Hidden by default) */
.logo-text {
    font-family: 'La Belle Aurore', cursive;
    font-size: 2.2rem;
    color: var(--accent-hover); /* Automatically adapts to Day/Night mode */
    white-space: nowrap; /* Prevents the name from stacking on two lines */
    display: none; /* Completely hidden when centered on the screen */
    opacity: 0;
}
/* 2. Floating Logo - Scrolled State */
.floating-logo.scrolled {
    width: auto;      /* Turns off width control */
    height: 90px;     /* THE FIX: Forces a strict height that fits inside the navbar */
    min-width: 0; 
    top: 2px;        /* Pushes it down. Adjust this up or down by a few pixels to align with your text */
    left: 2px;       /* Distance from the left screen edge */
    transform: translate(0, 0); 
}
/* NEW: Forces the image file to scale by height when scrolled */
.floating-logo.scrolled img {
    width: auto;
    height: 100%;
}
/* NEW: Reveal the text when scrolled */
.floating-logo.scrolled .logo-text {
    display: block; /* Adds it to the layout */
    animation: fadeIn 0.5s ease forwards; /* Smooth fade-in effect */
}
/* The fade-in animation keyframes */
@keyframes fadeIn {
    to { opacity: 1; }
}
/* 3. Updated Navbar - Initial Transparent State */
/* Updated Navbar - Taller with more padding */
/* 3. Updated Navbar - Initial Transparent State */
.navbar {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    background-color: transparent; 
    border-bottom: 2px solid transparent; 
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    
    /* THE FIX: 20px top/bottom makes the bar thick enough to hold the logo */
    padding: 20px 30px; 
    
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* 4. Updated Navbar - Scrolled Solid State */
.navbar.scrolled {
    background-color: var(--bg-color); /* Fades into the day/night background */
    border-bottom: 2px solid var(--border);
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-right: 30px; /* Space between links and the theme button */
}

/* Individual Links */
.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.2s ease;
}

/* Hover effect uses your brand orange */
.nav-links a:hover {
    color: var(--accent);
}

/* The Theme Button (Lo-fi style) */
.theme-btn {
    background-color: transparent;
    color: var(--text-main);
    border: 2px solid var(--text-main);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.theme-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Mobile Responsiveness: Stacks the nav on small screens */
/* Hide the hamburger icon on desktop */
.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-main);
    cursor: pointer;
    margin-left: 20px;
}

/* Mobile & Tablet Responsiveness: Triggers earlier at 1024px */
@media (max-width: 1024px) {
    .navbar {
        /* Slims down the top navbar padding slightly on smaller screens */
        padding: 20px 30px; 
        justify-content: flex-end; 
    }

    .hamburger {
        display: block; /* Show the hamburger icon */
    }

    .nav-links {
        display: none; /* Hide the horizontal links by default */
        flex-direction: column; /* Stacks links vertically */
        position: absolute;
        top: 100%; /* Drops the menu right below the navbar */
        right: 0;
        width: 250px;
        background-color: var(--bg-color); /* Uses your day/night background */
        border: 2px solid var(--border);
        border-right: none; /* Attaches it cleanly to the right edge of screen */
        padding: 30px;
        gap: 25px; /* Spaces out the vertical links */
        border-radius: 0 0 0 10px; /* Rounds the bottom left corner */
        box-shadow: -5px 10px 20px rgba(0,0,0,0.1);
    }

    /* This class is activated by Javascript when clicked */
    .nav-links.active {
        display: flex; 
    }
}
body {
    font-family: system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Hero Section Container */
.hero {
    position: relative;
    height: 90vh; /* Adjust this to change how tall the video section is */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: hidden; /* This prevents the video from stretching the page width */
    background-color: var(--bg-color); /* This perfectly matches your day/night themes */
}

/* The Video Element */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* object-fit: cover is the magic rule that forces the video to fill the screen, center itself, and crop the edges on mobile devices */
    object-fit: cover; 
    z-index: 0;
}

/* The Dark Tint Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hero-overlay); /* Uses the tint variable from your theme */
    z-index: 1;
}

/* The Text Content */
.hero-content {
    position: relative;
    z-index: 2; /* Keeps the text above the video and overlay */
    margin-top: 80px; /* Pushes the text down slightly so it doesn't crowd your floating logo */
}

.hero-content p {
    color: #ffffff; /* Forces white text over the dark video overlay */
    font-size: 1.2rem;
    margin-bottom: 30px;
}
.container {
    max-width: 900px;
    /* max width of the container set so that it doesn't spread across the whole screen if the device is wider than 900 pixels, e.g. a monitor or tablet */
    margin: 160px auto 40px auto; 
    /* the auto command makes sure the empty space either side of the container is evenly split. */
    padding: 0 20px;
    /* Very small gap of 20 pixels added for mobile phones */
}

.grid-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
}

.stack-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    width: 100%;
}

.stack-options .option-card {
    width: 100%;
    max-width: 300px;
}

/* Make custom cards act as checkboxes */
.option-card {
    position: relative;
    display: flex;
    background-color: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 100%;
    box-sizing: border-box;
}

.option-card input[type="radio"], 
.option-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.option-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.option-card input[type="radio"]:checked + .card-content h3, .option-card input[type="checkbox"]:checked + .card-content h3 {
    color: var(--accent);
}
.option-card:has(input:checked) {
    border-color: var(--accent);
    background-color: rgba(246, 122, 6, 0.05); /* Brand orange glow */
}

.price { font-size: 1.5rem; font-weight: bold; margin: 10px 0; color: var(--text-main); }
.price small { font-size: 0.8rem; color: var(--text-muted); font-weight: normal; }
.desc { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

.form-group {
    display: flex;
    flex-direction: column;
    margin: 0 auto 20px auto;
    max-width: 400px;
    width: 100%;
}

.form-group label { margin-bottom: 8px; font-weight: bold; color: var(--text-main); }

.form-group input, .form-group select {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 12px;
    border-radius: 6px;
    font-size: 1rem;
}

.form-group input:focus, .form-group select:focus {
    outline: 2px solid var(--accent);
}

.margin-top { 
    margin-top: 40px; 
    text-align:center;
}

.waiver-box {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 600px;
    margin: 30px auto;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.waiver-box input { accent-color: var(--accent); margin-top: 4px; }

.submit-btn {
    display: block;
    background-color: var(--accent);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    transition: background 0.2s;
}

.submit-btn:hover { background-color: var(--accent-hover); }

.card-content h3 {
    margin-top: 0; /* Removes the invisible browser margin pushing the text down */
    margin-bottom: 8px;
    font-size: 1.2rem;
}

/* --- Alternating Feature Layout (Zig-Zag) --- */
.feature-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Default state: Image left, Text right */
.feature-row {
    display: flex;
    align-items: center;
    gap: 60px; /* Generous whitespace between the image and text */
    margin-bottom: 100px;
}

/* Reverse state: Text left, Image right */
.feature-row.reverse {
    flex-direction: row-reverse;
}

/* The Text Block */
.feature-text {
    flex: 1 1 0; /* Enforces a 50/50 split */
    min-width: 0; /* Prevents text breaking the container */
}

.feature-text h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--accent); /* Automatically uses your brand orange */
}

.feature-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-main);
}

/* The Image Block */
.feature-image {
    flex: 1 1 0; /* 50 50 split */
    min-width: 0; /* prevents image breaking container */
    height: 450px; /* Forces all three images to exactly the same height */
    
    /* object-fit: cover is crucial here. It acts like a background image, 
       cropping the edges cleanly without squishing your original photos */
    object-fit: cover; 
    
    border-radius: 12px;
    border: 1px solid var(--border); /* Adds a subtle border matching your day/night themes */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    /* Stacks both standard and reversed rows vertically on small screens */
    .feature-row, 
    .feature-row.reverse {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
        text-align: center; /* Centers the text for mobile readability */
    }

    .feature-image {
        height: 350px; /* Slightly shorter image for mobile phone screens */
    }
}
/* --- Call to Action Card (Welcome Page Bottom) --- */
.cta-section {
    display: flex;
    justify-content: center;
    padding: 40px 20px 100px 20px; 
}

/* Modifies your existing option-card just for this button */
.cta-card {
    text-decoration: none; /* Removes the default link underline */
    width: 100%;
    max-width: 300px; /* Matches the width of your booking form cards */
    justify-content: center; /* Centers the text horizontally */
    align-items: center; /* Centers the text vertically */
}

.cta-card h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-main); /* Uses your day/night text color */
    transition: color 0.2s ease;
}

/* Optional: Makes the "Book Now" text turn orange when the card is hovered */
.cta-card:hover h3 {
    color: var(--accent);
}