/*
    -----------------------------------------------------
    General Styles
    -----------------------------------------------------
    This section defines basic styles for the body,
    default fonts, and reset some browser defaults.
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Inter:wght@300;400;600;700&display=swap');

:root {
    /* Define color variables for easy theme management */
    --color-coffee-brown: #44261A;         /* Primary dark brown - for header, dark sections, footer, some headings */
    --color-cheery-yellow: #FFCC00;        /* Primary bright yellow - for main title, headings on dark backgrounds, links on dark backgrounds, FAQ questions */
    --color-rust-accent: #B84C20;         /* Accent reddish-brown - for links on light backgrounds, sub-headings */
    --color-subtle-yellow: #E0B300;        /* Slightly muted yellow - for navigation hover background */
    --color-light-cream: #FFF8E1;          /* Light background color - for body, light sections, hero background */
    --color-dark-text: #333333;            /* Dark text color - for text on light backgrounds */
    --color-light-text: #FFFFFF;           /* Light text color - for text on dark backgrounds */

    --font-inter: 'Inter', sans-serif; /* Primary font family for body text */
    --font-oswald: 'Oswald', sans-serif; /* New font for headings */

    /* Define header height for scroll-margin-top to prevent overlap with sticky header */
    --header-height: 120px; /* Approximate height of your sticky header */
}

html {
    scroll-behavior: smooth; /* Enables smooth scrolling when navigating to section IDs */
}

body {
    font-family: var(--font-inter); /* Apply Inter font globally for body */
    line-height: 1.6;               /* Improve readability of text */
    margin: 0;                      /* Remove default body margin */
    padding: 0;                     /* Remove default body padding */
    background-color: var(--color-light-cream); /* Overall light background */
    color: var(--color-dark-text);  /* Default text color */
}

.container {
    max-width: 1000px; /* Max width for content to keep it readable */
    margin: 0 auto;    /* Center the container */
    padding: 0 20px;   /* Add horizontal padding */
}

/*
    -----------------------------------------------------
    Typography
    -----------------------------------------------------
    Styles for headings, paragraphs, and links to ensure
    readability and consistent branding.
*/

h1, h2, h3 {
    font-family: var(--font-oswald); /* Apply Oswald font to headings */
    font-weight: 700; /* Bold headings */
    margin-top: 0;    /* Remove default top margin */
    margin-bottom: 20px; /* Space below headings */
    /* Default heading color, overridden by specific sections */
}

h1 {
    font-size: 2.8em; /* Large size for main title */
    text-align: center;
    color: var(--color-cheery-yellow); /* Cheery yellow for the main hostel name */
    margin-bottom: 10px;
}

h2 {
    font-size: 2.2em; /* Size for section titles */
    text-align: center;
    color: var(--color-coffee-brown); /* Coffee brown for headings in light sections */
    margin-bottom: 40px;
}

h3 {
    font-size: 1.5em; /* Size for sub-headings (e.g., FAQ questions) */
    color: var(--color-rust-accent); /* Rust for sub-headings in light sections */
}

p {
    margin-bottom: 1em; /* Space below paragraphs */
}

a {
    color: var(--color-rust-accent); /* Link color in light sections */
    text-decoration: none;            /* Remove underline from links by default */
    transition: color 0.3s ease, transform 0.2s ease; /* Smooth color and transform transition on hover */
}

a:hover {
    color: var(--color-subtle-yellow); /* Change color on hover */
    text-decoration: underline;        /* Add underline on hover */
}

ul {
    list-style-type: disc; /* Default bullet points for lists */
    margin-left: 20px;     /* Indent list items */
    margin-bottom: 1em;
}

ol {
    list-style-type: decimal; /* Numbered list for ordered items */
    margin-left: 20px;
    margin-bottom: 1em;
}

li {
    margin-bottom: 8px; /* Space between list items */
}

/*
    -----------------------------------------------------
    Header & Navigation
    -----------------------------------------------------
    Styling for the top bar and its navigation links.
*/

.header {
    background-color: var(--color-coffee-brown); /* Coffee brown background */
    color: var(--color-light-text);              /* Light text */
    padding: 20px 0;                             /* Vertical padding */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);       /* Subtle shadow */
    position: sticky;                            /* Sticky header */
    top: 0;
    z-index: 1000;                               /* Ensure it stays on top */
}

.header .container {
    display: flex;             /* Use flexbox for alignment */
    flex-direction: column;    /* Stack items vertically on small screens */
    align-items: center;       /* Center items horizontally */
    gap: 15px;                 /* Space between title and nav */
}

/* New: Container for logo and H1 to control their layout */
.header-branding {
    display: flex;
    align-items: center; /* Vertically align logo and text */
    gap: 20px;           /* Space between logo and title */
    margin-bottom: 10px; /* Space below the branding block */
    flex-wrap: wrap;     /* Allow wrapping on smaller screens */
    justify-content: center; /* Center items if they wrap */
}

.header h1 {
    margin: 0;               /* Removed default margin for h1 in header */
    font-size: 2.5em;        /* Adjusted font size for header title */
    color: var(--color-cheery-yellow); /* Ensured header H1 is cheery yellow */
}

/* Styling for the logo */
.hostel-logo {
    width: 170px;  /* Half of 340px, adjusted for aspect ratio */
    height: 55px; /* Half of 110px */
    object-fit: contain; /* Ensures the image fits within the dimensions without cropping */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Add a subtle shadow */
}


.main-nav ul {
    list-style: none; /* Remove bullet points */
    padding: 0;       /* Remove default padding */
    margin: 0;        /* Remove default margin */
    display: flex;    /* Use flexbox for horizontal navigation */
    flex-wrap: wrap;  /* Allow items to wrap on smaller screens */
    justify-content: center; /* Center nav items */
    gap: 20px;        /* Space between nav items */
}

.main-nav a {
    color: var(--color-light-text); /* Light link text */
    font-weight: 600;            /* Slightly bolder font */
    padding: 5px 10px;           /* Padding around links */
    border-radius: 5px;          /* Slightly rounded corners */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; /* Smooth transitions for hover effects */
}

.main-nav a:hover {
    background-color: var(--color-subtle-yellow); /* Subtle yellow background on hover */
    color: var(--color-coffee-brown);            /* Coffee brown text on hover */
    text-decoration: none;                       /* Ensure no underline on hover for nav */
    transform: scale(1.05);                      /* Subtle grow effect on hover */
}

/*
    -----------------------------------------------------
    Section Styling
    -----------------------------------------------------
    Defines common styles for content sections,
    including background colors and padding.
*/

.section {
    padding: 80px 0; /* Top and bottom padding for sections */
    text-align: center; /* Center text within sections */
    border-bottom: 1px solid rgba(0,0,0,0.1); /* Subtle separator */
    scroll-margin-top: var(--header-height); /* Offset for sticky header */
}

.hero-section {
    background: linear-gradient(to bottom, var(--color-light-cream) 0%, var(--color-light-cream) 100%); /* Adjusted for new light background */
    padding-top: 50px;
    padding-bottom: 50px;
}

.dark-bg {
    background-color: var(--color-coffee-brown); /* Coffee brown background for some sections */
    color: var(--color-light-text);              /* Light text on dark background */
}

.dark-bg h2 {
    color: var(--color-cheery-yellow); /* Cheery yellow headings on dark background */
}

.dark-bg h3 {
    color: var(--color-cheery-yellow); /* Cheery yellow for sub-headings in dark sections */
}

.dark-bg a {
    color: var(--color-cheery-yellow); /* Cheery yellow links on dark background */
}

.dark-bg ul {
    list-style-type: circle; /* Different bullet style on dark sections */
}

.light-bg {
    background-color: var(--color-light-cream); /* Light cream background for other sections */
    color: var(--color-dark-text);         /* Dark text on light background */
}

/* Specific styling for lists within sections */
.section ul, .section ol {
    text-align: left; /* Align list items to the left */
    /* Removed max-width and margin: auto to allow left-justification within container */
    padding-left: 20px; /* Ensure proper indentation for bullets/numbers */
    margin-bottom: 1em; /* Keep space below lists */
}


/*
    -----------------------------------------------------
    Image Styling (including hover effects and FancyBox related)
    -----------------------------------------------------
    Styling for placeholder images to ensure they are
    responsive and visually appealing, and work with FancyBox.
*/

/* Styles for the <a> tag wrapping the image for FancyBox */
.section a, .hero-section a {
    display: inline-block; /* Allows transforms and keeps the image block-like */
    line-height: 0; /* Removes extra space below image if it's inline */
    border-radius: 10px; /* Match image border radius */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Add shadow to the clickable area */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Transition for hover effect */
}

/* Remove default link underline on image wrappers */
.section a:hover, .hero-section a:hover {
    text-decoration: none;
    box-shadow: 0 6px 15px rgba(0,0,0,0.3); /* Deeper shadow on hover */
    transform: translateY(-3px); /* Slightly lift the image on hover */
}


.hero-image {
    width: 100%;
    max-width: 800px; /* Limit max width for hero image */
    height: auto;
    max-height: 400px; /* Limit vertical height to prevent overly tall images */
    object-fit: cover; /* Crop image to fit while maintaining aspect ratio */
    border-radius: 10px; /* Rounded corners for images */
    display: block; /* Remove extra space below image */
    margin: 0 auto; /* Center the image within its container */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.section-image {
    width: 100%;
    max-width: 600px; /* Limit max width for section images */
    height: auto;
    max-height: 400px; /* Limit vertical height to prevent overly tall images */
    object-fit: cover; /* Crop image to fit while maintaining aspect ratio */
    border-radius: 8px;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

/* Subtle grow effect for images on hover */
.hero-image:hover,
.section-image:hover {
    transform: scale(1.02); /* Slightly grow the image on hover */
}

/* Styling for the embedded Google Map */
.responsive-map {
    width: 100%; /* Ensure map takes full width of its parent */
    max-width: 600px; /* Constrain map width similar to section images */
    height: 450px; /* Set a fixed height for the map */
    display: block; /* Ensures it behaves like a block element for centering */
    margin: 30px auto; /* Center the map and add vertical spacing */
    border: 0; /* Remove default iframe border */
    border-radius: 8px; /* Apply rounded corners */
    box-shadow: 0 3px 8px rgba(0,0,0,0.15); /* Apply shadow for consistency */
}

/* Styles for image galleries (e.g., in What We Provide section) */
.image-gallery {
    display: flex;
    flex-wrap: wrap; /* Allow images to wrap to the next line */
    justify-content: center; /* Center images horizontally */
    gap: 15px; /* Space between images */
    margin-top: 30px; /* Space above the gallery */
    max-width: 900px; /* Limit overall gallery width */
    margin-left: auto;
    margin-right: auto;
}

.image-gallery a {
    flex: 1 1 calc(33% - 20px); /* Adjust basis for 3 columns, accounting for gap */
    max-width: calc(33% - 20px); /* Max width for each image */
    min-width: 150px; /* Minimum width before wrapping */
    box