/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap'); /* Added Rye font */

/* Basic Reset & Font */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #F0E6D2; /* Creamy white from logo */
    background-color: #3A2E29; /* Dark brown from logo */
    /* Remove the background image styles */
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('photos/77.jpeg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; */
}

h1, h2, h3 {
    margin-bottom: 1rem;
    line-height: 1.2;
    font-weight: 600;
}

p {
    margin-bottom: 1rem;
}

a {
    color: #A0522D; /* Sienna/brown for links */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #C78C57; /* Lighter brown for hover */
}

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

/* Section Styling */
.content-section {
    padding: 15px 15px; /* Reduced vertical padding */
    position: relative;
    overflow: hidden; /* Ensure pseudo-elements don't overflow */
    background-size: cover;
    background-position: center center;
    z-index: 1; /* Ensure content is above pseudo-element */
    border-bottom: 1px solid #5C4033; /* Medium brown border */
}

#about {
    background-image: url('photos/m2.jpeg');
    background-size: cover;
    background-position: right center;
    background-attachment: scroll;
    display: flex;
     min-height: 60vh; /* Keep minimum height */
     /* Remove section-level padding */
     padding: 0 15px; /* Add horizontal padding here for mobile consistency */
}

#about .container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-width: 1100px;
    margin: 0 auto;
     /* Keep only horizontal padding from original .container rule */
     /* Remove vertical padding (top/bottom) */
     padding: 0 5px; /* Adjusted horizontal padding relative to parent's 15px */
     /* Example: padding: 0 20px; was original, parent now has 15px, so container needs less or none */
    position: relative;
    z-index: 2;
    /* text-align: center; */ /* REMOVE this - Apply to h2 only */
}

#about h2 {
     /* Default heading margin is fine here now */
     /* margin-bottom: 0.5rem; */
     /* margin-top: 0; // No longer needed here */
}

#about-section-logo {
    display: block;
    margin: 20px auto; /* Vertical margin, horizontal auto for centering */
    max-width: 80%;    /* Adjust as needed, relative to container */
    max-height: 250px; /* Example max height, adjust as needed */
    border-radius: 8px; /* Optional: if you want rounded corners like header logo had */
}

#about .about-top-content {
   /* Control space above this block */
   padding-top: 1.5rem; /* Adjust this value for top spacing */
}
#about .about-top-content h2 {
    margin-top: 0; /* Prevent heading margin from adding extra space */
    margin-bottom: 0.5rem; /* Control space below heading */
    text-align: center; /* ADD BACK - Center only the h2 */
}

#about .about-bottom-content {
   /* Control space below this block */
   padding-bottom: 10px; /* Adjust this value for bottom spacing */
}

#about p {
     font-size: 100%;
     margin-bottom: 1rem; /* Default paragraph spacing */
}

#about .about-bottom-content p:last-child {
     margin-bottom: 0; /* Keep last paragraph flush with bottom padding */
}

/* Background Image Overlay */
.content-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(58, 46, 41, 0.65); /* Dark brown overlay from logo, with opacity */
    z-index: -1; /* Place overlay behind content */
}

.container {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
    position: relative; /* Needed for z-index context */
    z-index: 2; /* Ensure container content is above overlay */
}

/* Header */
header {
    height: 70vh; /* Increased height to accommodate logo */
    /* Add Fallback Background Image */
    background-image: url('photos/5.jpeg'); /* UPDATED fallback background */
    background-size: cover;
    background-position: center center;
    /* End Fallback Background Image */
    text-align: center; /* RESTORED */
    position: relative; /* Keep position relative for absolute children */
    color: #F0E6D2; /* Creamy white from logo */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #5C4033; /* Medium brown border */
}

/* REMOVE the rule for .header-background-image */
/*
.header-background-image { ... }
*/

#header-video {
    /* Restore absolute positioning and cover */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Change back from contain/auto */
    z-index: 0; /* Keep video behind overlay/text */
    /* Remove block display */
    /* display: block; */
    /* height: auto; */
}

header::before {
     /* Keep overlay absolutely positioned to cover header */
     content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(58, 46, 41, 0.3); /* Dark brown overlay from logo, lighter for header */
    z-index: 1; /* Keep overlay above video, below text */
}

header .container {
    position: relative; /* Keep relative */
    z-index: 2;
    display: flex; /* <<< ADDED flex properties here */
    flex-direction: column; /* <<< ADDED flex properties here */
    justify-content: space-between; /* CHANGED: Aligns title to top, paragraph to bottom */
    align-items: center; /* Center direct children (text block, logo) horizontally */
    flex-grow: 1; /* Allow container to grow */
    height: 100%; /* Make container fill header height */
    padding: 20px; /* Consistent padding */
}

header .header-top-content {
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: center; /* Horizontally center items */
    /* gap: 15px; */ /* Space between h1 and image - REMOVED, hat is now outside */
    position: relative; /* Added for positioning context */
}

#header-hat-image {
    position: absolute; /* For centering within header-top-content */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 12rem;  MOVED to media queries */
    width: auto;
    z-index: -1; /* Behind the h1 text */
    opacity: 0.5; /* Added 50% transparency */
    display: none; /* Hide the hat */
}

/* Allow pointer events on direct children (h1, p) */
/* header .container > * {
     pointer-events: auto;
 } */

header h1 {
    font-family: 'Rye', cursive; /* Western font */
    font-weight: 400; /* Rye font only has 400 weight */
    font-size: 4.5rem; /* Adjusted size for Rye font */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem; /* Added some bottom margin */
    color: #D2B48C; /* Tan color - CHANGED */
    /* Add text shadow for contrast */
    text-shadow: 3px 3px 0px #3A2E29, /* Main shadow - dark brown */
                 -1px -1px 0 #3A2E29,
                  1px -1px 0 #3A2E29,
                 -1px  1px 0 #3A2E29,
                  1px  1px 0 #3A2E29;
}

header p {
    font-weight: 400; /* Ensure regular weight */
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
    width: 75%; /* CHANGED from 80% for more even line wrapping */
    line-height: 1.4; /* Adjust line height for readability */
    /* New styles to match h1 */
    font-family: 'Rye', cursive;
    font-size: 1.6rem; /* Desktop: INCREASED by ~30% */
    color: #D2B48C; /* Tan color - CHANGED */
    text-shadow: 3px 3px 0px #3A2E29, /* Main shadow - dark brown */
                 -1px -1px 0 #3A2E29,
                  1px -1px 0 #3A2E29,
                 -1px  1px 0 #3A2E29,
                  1px  1px 0 #3A2E29;
}

/* Musical Note Animation */
@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10%, 90% { /* Fade in/out duration */
        opacity: 0.6; /* Max opacity - slightly more subtle - INCREASED */
    }
    100% {
        transform: translateY(-50vh); /* Float up distance */
        opacity: 0;
    }
}

.musical-note {
    position: absolute;
    bottom: -20px; /* Start slightly below the viewport */
    color: rgba(240, 230, 210, 0.4); /* Semi-transparent cream - INCREASED OPACITY */
    font-size: 1.5rem; /* Adjust size as needed */
    pointer-events: none; /* Prevent interaction */
    z-index: 1; /* Ensure they are above ::before overlay, below text container */
    opacity: 0; /* Start invisible */
    animation-name: floatUp;
    animation-timing-function: linear; /* Constant speed */
    animation-iteration-count: infinite;
    animation-fill-mode: forwards; /* Keep final state (though opacity 0 makes it invisible) */
}

/* Individual Note Variations */
#note1 {
    left: 15%;
    font-size: 2.8rem;
    animation-duration: 8s;
    animation-delay: 0s;
}
#note2 {
    left: 40%;
    font-size: 2.4rem;
    animation-duration: 10s;
    animation-delay: 2s;
}
#note3 {
    left: 65%;
    font-size: 2.6rem;
    animation-duration: 7s;
    animation-delay: 1s;
}
#note4 {
    left: 85%;
    font-size: 2.9rem;
    animation-duration: 9s;
    animation-delay: 3s;
}

#note5 {
    left: 5%;
    font-size: 2.2rem;
    animation-duration: 11s;
    animation-delay: 0.5s;
}
#note6 {
    left: 25%;
    font-size: 2.7rem;
    animation-duration: 8s;
    animation-delay: 1.5s;
}
#note7 {
    left: 55%;
    font-size: 2.3rem;
    animation-duration: 10s;
    animation-delay: 2.5s;
}
#note8 {
    left: 75%;
    font-size: 2.9rem;
    animation-duration: 7.5s;
    animation-delay: 3.5s;
}

/* Photo Carousel */
#photos {
    background-image: url('photos/8.jpeg'); /* UPDATED background */
    background-size: cover;
    background-position: center center;
}

/* === Section Heading Standardization === */
#about h2, #features h2, #special-attractions h2, #photos h2, #videos h2, #location h2, #contact h2 {
    text-align: center; /* Keep centered */
    margin-bottom: 2rem; /* Consistent bottom margin */
    font-size: 3.5rem; /* Adjusted for western theme */
    font-family: 'Rye', cursive; /* Western font for section headings */
    font-weight: 400; /* Rye only has 400 */
    color: #D2B48C; /* Tan color */
    text-shadow: 2px 2px 0px #3A2E29, /* Main shadow - dark brown */
                 -1px -1px 0 #3A2E29,
                  1px -1px 0 #3A2E29,
                 -1px  1px 0 #3A2E29,
                  1px  1px 0 #3A2E29;
}

.carousel-container {
    max-width: 900px;
    margin: auto;
    background-color: rgba(88, 68, 60, 0.8); /* Darker brown, semi-transparent */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.main-photo-container {
    position: relative;
    margin-bottom: 15px;
    background-color: transparent; /* Make background transparent */
    min-height: 400px; /* Ensure container has height before image loads */
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-photo {
    max-height: 60vh; /* Limit max height */
    width: auto; /* Adjust width automatically */
    max-width: 100%;
    border-radius: 4px;
    cursor: pointer; /* Add cursor to indicate clickable */
    border: 3px solid #D2B48C; /* Tan border */
    /* Add blur effect for progressive loading */
    filter: blur(20px);
    transition: filter 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* New class to un-blur the loaded image */
#main-photo.loaded {
    filter: blur(0);
}

.thumbnail-wrapper {
    position: relative; /* Needed for absolute positioning of arrows */
    padding: 0 30px; /* Add space on sides so arrows don't overlap thumbnails initially */
    margin: 0 -30px; /* Counteract padding for layout purposes if needed */
}

.carousel-thumbnails {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    padding-bottom: 10px; /* Space for scrollbar */
    gap: 10px; /* Space between thumbnails */
     scrollbar-width: thin;
     scrollbar-color: #5C4033 #3A2E29; /* Brown scrollbar */
     /* Make scrolling smooth when using arrows */
     scroll-behavior: smooth;
     /* Hide scrollbar visually (optional, works on webkit/firefox) */
     /* -ms-overflow-style: none; */ /* IE and Edge */
     /* scrollbar-width: none; */ /* Firefox */
}
/* .carousel-thumbnails::-webkit-scrollbar {
    display: none; // Hide scrollbar on Chrome/Safari/Opera
} */


.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(88, 68, 60, 0.7); /* Darker brown */
    color: #F0E6D2; /* Creamy white */
    border: 1px solid #D2B48C; /* Tan border */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    line-height: 30px; /* Center text vertically */
    text-align: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0.8;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    display: none; /* Initially hidden, JS will show them */
}

.scroll-arrow:hover,
.scroll-arrow:focus {
    background-color: rgba(100, 80, 70, 0.9); /* Lighter brown on hover */
    opacity: 1;
    outline: none; /* Remove default focus outline if needed */
}

.scroll-arrow.left-arrow {
    left: 5px; /* Position near the edge */
}

.scroll-arrow.right-arrow {
    right: 5px; /* Position near the edge */
}

.scroll-arrow.hidden { /* Class to hide arrows when not needed */
     display: none;
     /* Or use opacity/pointer-events for fade effects */
     /* opacity: 0;
     pointer-events: none; */
}

/* Styling for the new thumbnail wrapper and caption for PHOTO CAROUSEL */
.custom-thumbnail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 6px;
    flex-shrink: 0; /* Prevent items from shrinking */
}

.custom-thumbnail-item img {
    width: 100px;
    height: 75px;
    object-fit: cover;
    border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: block;
}

.custom-thumbnail-caption {
    font-size: 0.75rem;
    color: #F0E6D2;
    margin-top: 5px;
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.custom-thumbnail-caption:empty { /* Hides caption element if it has no text */
    display: none;
}

.custom-thumbnail-item:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.custom-thumbnail-item.active-thumb {
    border-color: #D2B48C;
}
.custom-thumbnail-item.active-thumb img {
    opacity: 1;
}
.custom-thumbnail-item.active-thumb .custom-thumbnail-caption {
    color: #D2B48C;
    font-weight: bold;
}

/* Styles for VIDEO thumbnails */
.carousel-thumbnails .video-thumbnail img {
    width: 100px;
    height: 75px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    border: 2px solid transparent;
    display: block;
}

.carousel-thumbnails .video-thumbnail:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.carousel-thumbnails .video-thumbnail.active-thumb img { /* Specific to video thumbs if needed */
   opacity: 1;
   /* border-color: #D2B48C; /* Border is on the wrapper for video too */
}


/* Video Carousel Specific */
.video-thumbnail {
    position: relative; /* For play icon positioning */
    cursor: pointer;
    border-radius: 4px; /* Match image border radius */
    overflow: hidden; /* Ensure play icon stays within bounds */
    border: 2px solid transparent; /* For active state */
    transition: border-color 0.3s ease; /* Smooth border transition */
    flex-shrink: 0; /* Prevent thumbnails from shrinking */
}

.video-thumbnail.active-thumb { /* This applies to the .video-thumbnail div */
    border-color: #D2B48C; /* Tan highlight */
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-color: rgba(88, 68, 60, 0.7); /* Darker brown */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Don't interfere with clicks */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.play-icon::after { /* Triangle shape for play */
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #F0E6D2; /* Creamy white play icon */
    margin-left: 3px; /* Adjust position */
}

.video-thumbnail:hover .play-icon {
    opacity: 1;
}

/* Video Section (Original Grid - kept for potential future use) */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 20px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Features Section */
.features-categories-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Columns adjust based on available space */
    gap: 2rem; /* Space between category columns/rows */
    margin-top: 1.5rem; /* Space below the intro paragraph */
}

.feature-category h3 {
    font-size: 1.8rem; /* Adjusted for western theme */
    color: #D2B48C; /* Tan color */
    margin-bottom: 1rem;
    border-bottom: 1px solid #5C4033; /* Medium brown separator */
    padding-bottom: 0.5rem;
    font-family: 'Georgia', serif; /* A more classic serif for sub-category titles */
}

.features-list {
    list-style: none;
    padding-left: 0;
    /* The existing grid styles will apply to items *within* each category list */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.features-list li {
    background-color: rgba(88, 68, 60, 0.8); /* Darker brown from logo inspiration */
    padding: 15px;
    border-radius: 5px;
    border-left: 4px solid #A0522D; /* Sienna/brown border */
    transition: background-color 0.3s ease;
    position: relative;
    cursor: default;
    color: #F0E6D2; /* Creamy text */
}
 .features-list li:hover {
     background-color: rgba(100, 80, 70, 0.9); /* Lighter brown */
 }

/* Amenity Hover Card Styles */
.amenity-hover-card {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 105%; /* Position above the list item */
    left: 0;
     /* Or try: right: 0; or left: 50%; transform: translateX(-50%); */
    width: 250px; /* Adjust width */
    z-index: 10; /* Ensure it's above other items */
    background-color: rgba(58, 46, 41, 0.95); /* Dark brown from logo */
    color: #D2B48C; /* Tan text */
    border: 1px solid #D2B48C; /* Tan border */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    pointer-events: none; /* Prevent card itself from interfering with hover */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Show card on hover (desktop) or when li gains focus (mobile tap/keyboard) */
.features-list li:hover .amenity-hover-card,
.features-list li:focus-within .amenity-hover-card {
    display: block; /* Make it take up space */
    opacity: 1; /* Fade it in */
}

.amenity-hover-card img {
    width: 100%;
    height: 150px; /* Fixed height for photo area */
    object-fit: contain;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: #5C4033; /* Medium brown placeholder */
    border: 2px solid #D2B48C; /* Tan border */
}
.amenity-hover-card p {
    margin-bottom: 0;
    font-size: 0.9em;
    line-height: 1.4;
}
/* Allow links inside hover card to be clickable */
.amenity-hover-card a {
    pointer-events: auto; /* Make links clickable */
    color: #C78C57; /* Lighter brown for links */
}
.amenity-hover-card a:hover {
    color: #E6A970; /* Even lighter for hover */
    text-decoration: underline;
}


/* Location Section */
.map-container {
    position: relative;
    padding-bottom: 50%; /* Adjust aspect ratio as needed */
    height: 0;
    overflow: hidden;
    border-radius: 8px; /* Optional: Keep or remove with border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    margin-top: 2rem;
    border: 3px solid #D2B48C; /* Tan border */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* === Special Attractions Section Styles === */
#special-attractions {
    /* Background set via JS */
    /* background-image: url('photos/some-default-bg.jpg'); */
}

#special-attractions h2 {
    text-align: center;
}
#special-attractions > .container > p { /* Style the intro paragraph */
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    color: #D2B48C; /* Tan */
}

.attractions-layout {
    display: flex;
    /* flex-direction: column-reverse; */ /* REMOVE - Apply only on mobile */
    gap: 2rem;
    align-items: flex-start; /* Align items to the top */
}

.attractions-selector-wrapper {
    flex: 0 0 200px; /* Fixed width for selector */
}

#attraction-selector {
    display: flex; /* Arrange selectors horizontally */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px; /* Space between selectors */
    justify-content: center; /* Center selectors horizontally */
    margin: 0; /* Ensure no default ul margins */
    padding: 0; /* Ensure no default ul padding */
    list-style: none; /* Add this to remove bullets */
}

/* --- DESKTOP Attraction Button Styles --- */
#attraction-selector li {
    display: block;           /* Stack vertically */
    width: 100%;             /* Fill selector column width */
    margin-bottom: 10px;     /* Space between stacked buttons */
    /* --- INCREASED PADDING AND FONT SIZE FOR DESKTOP --- */
    padding: 12px 18px;      /* Larger desktop padding */
    font-size: 1.1rem;       /* Larger desktop font size */
    /* --- End Increased Sizes --- */
    background-color: rgba(88, 68, 60, 0.8); /* Darker brown from logo inspiration */
    border: 1px solid #5C4033; /* Medium brown border */
    border-radius: 4px;
    color: #D2B48C; /* Tan text */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    outline-offset: 2px;
    font-family: 'Georgia', serif;
}

#attraction-selector li:hover,
#attraction-selector li:focus {
    background-color: rgba(100, 80, 70, 0.9); /* Lighter brown on hover */
    border-color: #A0522D; /* Sienna border */
    outline: none;
}

#attraction-selector li.active-attraction {
    background-color: rgba(210, 180, 140, 0.5); /* Tan, semi-transparent */
    border-color: #D2B48C; /* Tan border */
    color: #3A2E29; /* Dark brown text for active */
    cursor: default;
}

#attraction-display {
    flex-grow: 1; /* Display area takes remaining space */
    /* background-color: rgba(20, 20, 20, 0.6); */ /* REMOVE background */
    /* padding: 20px; */ /* REMOVE padding */
    /* border-radius: 8px; */ /* REMOVE border radius */
    text-align: center; /* Keep text centered */
}

#attraction-image {
    width: 100%;
    max-width: 600px; /* Limit image width */
    height: auto;
    /* max-height: 50vh; */ /* Previous limit */
    max-height: 55vh; /* Slightly increased limit */
    object-fit: cover;
    border-radius: 4px;
    /* margin-bottom: 1rem; */ /* REMOVED - Now spacing is after image */
    display: block; /* Remove extra space */
    margin-left: auto; /* Center image if max-width is hit */
    margin-right: auto;
    margin-top: 1rem; /* Add margin ABOVE image */
    border: 3px solid #D2B48C; /* Tan border */
}

#attraction-description {
    margin-bottom: 1rem; /* Add space below description */
    font-style: italic; /* Add this line */
    color: #F5F5DC; /* Beige */
}
/* Style links within the attraction description */
#attraction-description a {
     color: #C78C57; /* Lighter brown */
}
#attraction-description a:hover {
     color: #E6A970; /* Even lighter */
     text-decoration: underline;
}


/* Video Carousel Container */
.video-carousel-container {
    max-width: 1100px;
    margin: auto;
    background-color: rgba(88, 68, 60, 0.8); /* Darker brown, semi-transparent */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.main-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 15px;
    background-color: #000; /* Black background */
    border-radius: 4px;
    border: 3px solid #D2B48C; /* Tan border */
}

.main-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    header h1 {
        /* Adjust mobile size for new font/desktop size */
        font-size: 2.8rem; /* Adjusted for Rye font on mobile */
        margin-bottom: 0.2rem;
        color: #D2B48C; /* Tan color - CHANGED */
    }

    header p {
        font-weight: 400; /* Ensure regular weight */
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0.5rem;
        width: 85%; /* CHANGED from 90% for more even line wrapping on mobile */
        line-height: 1.4; /* Adjust line height for readability */
        /* New styles to match h1 for mobile */
        font-family: 'Rye', cursive;
        font-size: 1.0rem; /* Mobile: INCREASED by ~30% */
        color: #D2B48C; /* Tan color - CHANGED */
        text-shadow: 2px 2px 0px #3A2E29, /* Adjusted shadow for mobile */
                     -1px -1px 0 #3A2E29,
                      1px -1px 0 #3A2E29,
                     -1px  1px 0 #3A2E29,
                      1px  1px 0 #3A2E29;
    }
    #header-hat-image { height: 6.4rem; } /* Mobile size for hat */

    /* === Section Heading Mobile Size === */
    #about h2, #features h2, #special-attractions h2, #photos h2, #videos h2, #location h2, #contact h2 {
        font-size: 2.2rem; /* Adjusted for Rye font on mobile */
    }

    /* Special Attractions Mobile Layout */
    .attractions-layout {
        flex-direction: column; /* Stack columns, buttons FIRST */
        gap: 1.5rem;
        align-items: center; /* Add this to center the display block */
    }
    .attractions-selector-wrapper {
        flex: 0 0 100%; /* Full width for mobile */
    }

    /* === Mobile Layout for Attraction Selector === */
    #attraction-selector {
        display: flex;           /* Arrange items horizontally */
        flex-wrap: wrap;         /* Allow wrapping */
        justify-content: center; /* Center the row(s) of buttons */
        gap: 8px;              /* Space between buttons */
    }

    /* --- MOBILE Attraction Button Styles (Overrides Desktop) --- */
    #attraction-selector li {
        display: inline-block;   /* Allow inline wrapping */
        width: auto;             /* Size button to content */
        margin-bottom: 0;        /* Remove bottom margin (use gap) */
        /* --- SMALLER PADDING AND FONT SIZE FOR MOBILE --- */
        padding: 8px 12px;        /* Adjusted mobile padding */
        font-size: 0.9rem;       /* Adjusted mobile font size */
        /* --- End Smaller Sizes --- */
        /* Other styles like border, bg, color are inherited */
    }
    /* --- End Mobile Attraction Button Styles --- */

    /* --- Mobile Styles for Accommodation Amenity List --- */
    #features .feature-category:nth-child(1) .features-list {
        gap: 10px; /* Reduce gap between accommodation items */
    }
    #features .feature-category:nth-child(1) .features-list li {
        padding-top: 10px;    /* Reduce top padding */
        padding-bottom: 10px; /* Reduce bottom padding */
        /* Keep horizontal padding (15px) and other styles */
    }
    /* --- End Mobile Styles for Accommodation List --- */

    /* --- Mobile Background for Features Section --- */
    #features {
        background-size: contain; /* Fit entire image, avoid cropping */
        background-repeat: no-repeat; /* Prevent tiling if image is smaller */
        background-position: center center; /* Center the contained image */
    }
    /* --- End Mobile Background for Features Section --- */

    .video-grid {
        grid-template-columns: 1fr; /* Stack videos on smaller screens */
    }

    /* Remove duplicate/conflicting mobile styles */
    /* .video-grid { font-size: 1.3rem; } */ /* Remove this, likely unintended */
    /* Remove the duplicate #attraction-selector li rule near the end */
}

/* Desktop Adjustments for 2x2 grid in Features */
@media (min-width: 769px) {
    .features-categories-container {
        grid-template-columns: repeat(2, 1fr); /* Enforce 2 columns */
    }
     #header-hat-image { height: 12rem; } /* Desktop size for hat */
}

/* Contact Section Specific */
#contact {
    min-height: 80vh; /* Ensure contact section is tall enough to show background image */
    display: flex;
    align-items: center; /* Center content vertically */
}

#contact .container {
    text-align: center; /* Center the intro text and button */
    padding: 60px 20px; /* Add extra vertical padding */
}

#contact .button {
    display: inline-block;
    background-color: #A0522D; /* Sienna/brown button */
    color: #F0E6D2; /* Creamy text on button */
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-family: 'Rye', cursive; /* Western font for button */
    border: 2px solid #5C4033; /* Medium brown border */
}
#contact .button:hover {
    background-color: #C78C57; /* Lighter brown on hover */
    text-decoration: none;
    transform: translateY(-2px);
    color: #3A2E29; /* Dark brown text on hover */
}

/* Fullscreen Modal Styles */
#fullscreen-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(58, 46, 41, 0.95); /* Dark brown overlay from logo, almost opaque */
    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#fullscreen-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: #F0E6D2; /* Creamy white */
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1; /* Ensure consistent positioning */
}
#fullscreen-image {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
    border: 3px solid #D2B48C; /* Tan border */
}
#fullscreen-prev, #fullscreen-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block; /* Ensure they are visible */
    width: 40px; /* Slightly larger */
    height: 40px;
    line-height: 40px;
    font-size: 1.5rem;
    background-color: rgba(88, 68, 60, 0.7); /* Darker brown */
    color: #F0E6D2; /* Creamy white */
    border: 1px solid #D2B48C; /* Tan border */
}
#fullscreen-prev { left: 15px; }
#fullscreen-next { right: 15px; }
#fullscreen-caption {
    color: #D2B48C; /* Tan caption */
    margin-top: 10px;
    font-size: 0.9rem;
}

.header-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 * 100) */
    height: 0;
    overflow: hidden;
    /* --- Fallback Background --- */
    background-image: url('photos/5.jpeg'); /* CHANGE to glass.png if intended */
    background-size: cover;
    background-position: center center;
    background-color: #3A2E29; /* Dark brown bg color in case image also fails */
}

/* Redundant #header-hat-image rule removed, handled by media queries above */