/* style.css */
:root {
    --primary-green: #2c5e2e; /* Deep forest green */
    --accent-gold: #d4a017; /* Warm sunlight gold */
    --text-dark: #333;
    --text-light: #f4f4f4;
    --bg-cream: #fefdd9;
    --font-heading: 'Merriweather', Georgia, Cambria, 'Times New Roman', Times, serif;; /* Titles */
    --font-body: 'Open Sans', sans-serif; /* Readable */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background-color: var(--bg-cream);
    color: var(--text-dark);
    line-height: 1.6;
}

a {
    text-decoration: none;
	color: var(--primary-green);
	font-weight: 600;
}

.title-anchor a:hover { color: white; }


footer p {
	color: var(--bg-cream);
}

footer a {
	color: var(--bg-cream);
}

footer h4 {
	color: #fefdd9;
	font-family: 'Open Sans', sans-serif;	
	font-weight: bold;
	font-size: 1.2em;
}

li {
	margin-left: 30px;
}

nav li {margin: 0px;}

hr {
	color: var(--primary-green);
}

h1, h2, h3 { font-family: var(--font-heading); color: var(--primary-green); }


#about h3 {
	margin-top: 20px;
}

/* Navigation */
header {
    background: var(--primary-green);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
	transition: transform 0.3s ease-in-out;
}

.nav-up {
    transform: translateY(-100%); /* Moves the header completely out of view */
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    flex-wrap: wrap;
}

nav a, nav li {
    color: var(--text-light);
    padding: 0.5rem 0.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

nav a:hover { color: var(--accent-gold); }

/* 1. Desktop Active State (Stronger Selector) */
header nav ul li a.active {
    color: var(--accent-gold) !important; /* Force the color */
    border-bottom: 2px solid var(--accent-gold);
}

/* 2. Mobile Active State Adjustment */
@media (max-width: 768px) {
    header nav ul li a.active {
        border-bottom: none;          /* Remove the underline on phones */
        background: rgba(0,0,0,0.2);  /* Darken the button background */
    }
}

/* --- HERO SECTION --- */

.hero-content p {
	background: rgba(0, 0, 0, 0.2); /* Dark tint */
	padding-left: 15px;
	padding-right: 15px;
	font-weight: bold;
}

/* 1. The Container: Forces full width and removes default section padding */
.hero-container {
    display: grid;
    grid-template-areas: "stack";
    width: 100%;             /* Full width of parent */
    max-width: 100%;         /* Ensures it overrides the global 1200px limit */
    margin: 0;               /* Removes centering margins */
    padding: 0;              /* Removes the 4rem padding from global section rule */
    overflow: hidden;
}

/* 2. The Image: Acts as the background layer */
.hero-img {
    grid-area: stack;
    width: 100%;
    height: auto;            /* Height is determined by the image */
    display: block;
    object-fit: cover;
}

/* 3. The Overlay: Darkens the image and centers text */
.hero-overlay {
    grid-area: stack;
    /* background: rgba(0, 0, 0, 0.4);  Dark tint */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}

/* 4. The Content: Restoring your original text styling */
.hero-content {
    padding: 20px;
    color: white; /* Ensures text is white */
}

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
	text-shadow: 
        0 0 5px rgba(0,0,0, 0.9),   /* Tight dark edge */
        0 0 15px rgba(0,0,0, 0.7);  /* Wide soft glow */
    font-family: var(--font-heading);
	color: white;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Slight shadow for readability */
}

.hero-img {
    grid-area: stack;
    position: relative; /* OR just delete the 'position' line entirely */
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile Adjustment for Text Size */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2rem; }
    .hero-content p { font-size: 1rem; }
}

.btn {
    display: inline-block;
    background: var(--accent-gold);
    color: var(--primary-green);
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 20px;
	font-size: 1.1rem;          /* Text Size */
}

p {
	margin-bottom: 10px;
}

/* Sections */
section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; }

.information {
	    background-color: #fefde9;
		padding:20px;
		margin:20px 0px 20px 0px;
		border-radius: 8px;		
	
}

/* Grid for Rooms */
.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.room-card {
    background: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
}

.room-card:hover { transform: translateY(-5px); }
.room-content { padding: 1.5rem; }
.price { color: var(--primary-green); font-weight: bold; font-size: 1.2rem; }

#about {
    clear: both;
    display: block;
    position: relative;
    background-color: var(--bg-cream); /* Ensures it's not transparent! */
    z-index: 2; /* Sits 'higher' than the hero if they accidentally touch */
    padding: 2rem;
}

/* Footer */
footer {
    background: var(--text-dark);
    color: var(--text-light);
    text-align: right;
    padding: 2rem;
    margin-top: 4rem;
}

@media (max-width: 768px) {
    .hero h1 { font-size: 2rem; }
    
    /* EXISTING LINE: Keeps the list vertical */
    nav ul { flex-direction: column; text-align: center; }

    /* NEW LINES: Makes the buttons bigger and easier to tap */
    nav li {
        margin: 3px 0; 
        width: 100%;
    }

    nav a {
        display: block; 
        padding: 3px;       /* Big touch target */
        border-radius: 4px;
    }
}


.price td {
	padding-right: 10px;
}

table.price {
	margin-top: 10px;
}

/* --- BULLETPROOF SLIDER (Flexbox Version) --- */

/* Slider Container */
.slider-wrapper {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #eee;
    z-index: 1; 
}

/* The Track - using Flexbox with "No Shrink" */
.slider-track {
    display: flex;            /* Back to Flexbox */
    width: 100%;
    height: 100%;
    overflow-x: auto;         /* Allow scrolling */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    
    /* Hide scrollbars */
    scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

/* Prevents the page from jumping while images load */
.slider-track img {
    aspect-ratio: 3 / 2;
    width: 100%;
    height: auto;
    object-fit: cover;     /* Ensures photos fill the box without stretching */
    display: block;
}

/* The Images - The important fix is here */
.slide {
    flex: 0 0 100%;          /* Grow: 0, Shrink: 0, Basis: 100% */
	min-width: 0;
    width: 100%;             /* Force explicit width */
    height: 100%;
    object-fit: cover;
    
    scroll-snap-align: start;
}

/* Navigation Buttons (Keep these the same) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    z-index: 10;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.slider-wrapper:hover .slider-btn {
    opacity: 1;
}

.slider-wrapper .prev { left: 10px; right: auto; }
.slider-wrapper .next { right: 10px; left: auto; }

/* Mobile Adjustment */
@media (max-width: 768px) {
    .slider-btn { opacity: 1; background: rgba(0,0,0,0.3); }
}

/* --- MAP STYLES (Moved outside of any brackets) --- */
.map-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;  /* 16:9 Aspect Ratio */
    background: #fefdd9; /* Placeholder color while loading */
    margin-top: 2rem;    /* Adds space between text and map */
	margin-bottom: 2rem;    /* Adds space between text and map */
}

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

/* Mobile Map Adjustment */
@media (max-width: 768px) {
    .map-container {
        /* Change from 16:9 (56.25%) to 1:1 (100%) */
        padding-top: 100%; 
    }
}

/* --- PANORAMA VIEWER --- */
.pano-container {
    width: 100%;
    height: 260px; /* Fixed height for the window */
    overflow: hidden; /* Hides the parts of the image that are zoomed out */
    border: 0px;
    position: relative;
    cursor: grab; /* Shows "hand" icon */
    background: #eee;
    margin-bottom: 2rem;
}

.pano-container:active {
    cursor: grabbing; /* "Clenched hand" when dragging */
}

.pano-container img {
    display: block;
    width: 100%; /* Start by fitting the width */
    height: 100%;
    object-fit: contain; /* Ensures the whole image is visible initially */
	background-color: var(--bg-cream);
}

.pano-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.2);
    color: white;
    padding: 2px 5px;
    font-size: 0.8rem;
    border-radius: 4px;
    pointer-events: none; /* Let clicks pass through to the image */
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .pano-container {
        height: 150px; /* Smaller window on phones */
    }
}

.responsive-img {
    max-width: 500px; /* Cap the width at 500px */
    width: 100%;      /* Fill the container up to the max-width */
    height: auto;     /* Maintain aspect ratio so it doesn't squash */
    display: block;   /* Removes tiny gap underneath images */
}

form {
    display: flex;           /* Turns on Flexbox layout */
    flex-direction: column;  /* Stacks everything vertically */
	width: 100%;             /* Fills the space on mobile */
    max-width: 600px;        /* Stops it from getting too wide on desktop */
    margin: 0 auto;          /* Top/Bottom = 0, Left/Right = Auto (Centers it) */
    padding: 20px;           /* Optional: Adds internal breathing room */
}

input, textarea {
	margin-bottom: 20px;
}

/* Optional: Pushes the button to the left/start */

input[type="submit"] {
    align-self: flex-start;
    margin-top: 10px;
}

/* Stack labels above inputs */
label {
    display: block;        /* Forces label to its own line */
    font-weight: bold;     /* Makes it stand out */
    margin-bottom: 10px;    /* Adds a tiny gap before the input */
    color: var(--primary-green);
}

/* Ensure inputs fill the width */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;           
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--font-body);
}

textarea {
    min-height: 150px; /* Sets a comfortable starting height */
    resize: vertical;  /* vital: Allows dragging down, but prevents dragging sideways */
}

/* Print Styles: Clean up the page when someone hits Ctrl+P */
@media print {
    /* Hide navigation, buttons, and decorative hero images */
    header, .hamburger, .hero-img, footer, .btn {
        display: none !important;
    }

    /* Make text black on white for saving ink */
    body, .container {
        background-color: white !important;
        color: black !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure the map and directions are visible */
    iframe {
        max-width: 100% !important;
        height: 400px !important; /* Limit height so it fits on one page */
    }

    /* Add a helpful footer for the printed page */
    body::after {
        content: "The Tree House - 168 West Coast Road, Kohukohu - 09 405 5855";
        display: block;
        text-align: center;
        margin-top: 20px;
        font-weight: bold;
    }
	
    /* Remove all shadows for crisp text */
    * {
        text-shadow: none !important;
        box-shadow: none !important; /* Optional: Removes shadows from boxes/images too */
    }

    /* Ensure text is strictly black for best contrast */
    body, h1, h2, h3, p, li, a {
        color: #000000 !important;
    }	
}