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

/* Body styling */
body {
    background-color: #EAEAEA;
    font-family: Arial, sans-serif;
    color: #333;
}

/* ------ Base Styles (Mobile First) ------ */
/* Body Styling */
body {
	background-color: #90C7E3;
	font-family: Arial, sans-serif;
	color: #333;
	margin: 0;
}

/* Wrapper */
#wrapper {
    width: 100%;
    margin: 0 auto;
    background-color: white;
}

/* Header */
header {
    background-color: #90C7E3;
    color: white;
    text-align: center;
    font-size: 2em;
    letter-spacing: 0.15em;
    padding: 1em;
}

/* Header links */
header a {
    text-decoration: none;
    color: white;
}
header a:hover {
    color: #5C7FA3;
}

/* Navigation (Mobile: stacked Links) */
nav {
	text-align: center;
    background-color: white;
    padding: 0.5em;
}

nav ul {
    list-style-type: none;
	display: flex;
	flex-direction: column;
	text-align: center;
    padding: 0;
}

nav ul li {
	border-bottom: 1px solid white;
}

nav ul li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 10px;
}

nav ul li a:hover {
    background-color: #344873;
}

/* Hero image container */
.hero-container {
	width: 100%; /* Ensures conatiner takes up full width */
	overflow: hidden; /* Ensures the image does not overflow */
}


/* Hero image */
.hero {
	width: 100%;    /* Image spans full container width */
	max-width: 100%; /* Prevents it from exceeding its orginal size */
	height: auto; /* maintains aspect ratio */
	display: block; /* Avoids extra space below inline images */
	margin: 0 auto; /* centers the image; */
	object-fit: cover; /* Ensures good fit for different screen sizes */
}

/* Main content */
main {
    background-color: white;
	padding: 1em;
}

/* Sections */
section {
    padding: 1em;
}

/* Footer */
footer {
    background-color: white;
    text-align: center;
    padding: 1em;
}

/* Hyperlinks */
a:link {
    color: #5C7FA3;
}
a:visited {
    color: #344873;
}
a:hover {
    color: #A52A2A;
}

/* Mobile Phone Number Styling */
#mobile { display: block; }
#desktop { display: none; }

/* ------Yurt info boxes ------*/
.yurt-info {
	display: flex;
	flex-direction: column;   /* horizontal layout */
	gap: 1.5em;
	padding: 2em 1em;
	text-align: center; /* centers the content */
}

.yurt-box {
	background-color: #f9f9f9;
	padding: 1em;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	text-align: left;
	width: 100%;
	max-width: 600px; /*prevents it from shrinking */
	margin: 0 auto; /* Center boxes on mobile */
	box-sizing: border-box; /* Prevents overflow */
}

/* ------ Activity info for boxes ------- */
.activity-info {
	display: grid;
	grid-template-columns: 1fr;  /* Default: 1 column on small screens */
	gap: 2em;
	margin-top: 1em;
	padding: 1em;
}

.activity-box {
	background-color: #f9f9f9;
	padding: 1em;
	text-align: left; /* Keep text aligned to the left */
}

/* ------ Table styling for Yurts Page ------ */

/* Table: center, border, width */
table {
	width: 90%;
	margin: 1em auto;
	border: 1px solid #3399CC;
	border-collapse: collapse;
}

/* Table headers and cells */
th, td {
	border: 1px solid #3399CC;
	padding: 5px;
}

/* Center td text by default */
td {
	text-align: center;
}

/* Left-align text class */
.text {
	text-align: left;
}

/* Alternate row background color */
tr:nth-child(even) {
	background-color: #DFEDF8;
}


/* ------ Medium Screens (600px+) ------- */
@media screen and (min-width: 600px) {
	/* Stacked layout for mobile, but starting to show row on medium screens */
	.yurt-info {
		flex-direction: row; /* Horizontal layout */
		justify-content: space-between;
		gap: 2em;
		width: 100%;
	}
	
	.yurt-box {
		flex: 1 1 calc(30% - 1.5em); /* Each box take 45% of the row width */
		max-width: none;
		margin: 0;
	}
}

	/* Ensures the entire image fits */
	.hero {
		width: 100%; 
		height: auto;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
	
	/* Header */
	h1 {
		font-size: 2.5em;
		letter-spacing: 0.2em;
	}
	
	/* Navigation (horizontal layout) */
	nav ul {
		flex-direction: row;
		justify-content: center;
	}
	
	nav ul li {
		border: none;
		padding: 1em;
	}
	
	/* Adjust content layout */
	#wrapper {
		width: 95%;
		margin: auto;
		background-color: white;
	}
	
	main {
		padding: 1em;
		display: flex;
		flex-direction: column;
		align-items: center;  /* centers content horizontally */
	}
	
	section {
		width: 100%;
		max-width: 600px; /* keeps it readable on wide phones */
	}
	
	.activity-info {
		grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
	
	/* Desktop phone number */
	#mobile { display: none; }
	#desktop { display: inline; }
}

/* ------- Large Screens (1024px+) -------- */
@media screen and (min-width: 1024px) {
	/* Gradient background */
	body {
		background: linear-gradient(to bottom, white 20%, #90C7E3, white);
	}
	
	
	/* Wrapper width */
	#wrapper {
		width: 85%;
		margin: auto;
	}
	
	/*main content as two-column layout for activities */
	main {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 2em; /* Adds space between columns */
	}
	
	
	.yurt-info {
		justify-content: space-between;
	}
	
	.yurt-box {
		flex: 0 0 30%; /* Each box takes 22% of the row width */
	}
	
	.activities-container {
		display: flex;
		justify-content:space-between;
		gap: 2em;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.activities, .book-adventure {
		flex: 1;
		max-width: 48%; /* Ensure each section takes 48% of the width */
		background-color: white;
		padding: 1.5em;
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
		border-radius: 10px;
	}
	
	
	/* Hero image */
	.hero {
		width: 100%;
		height: auto;  /* maintain aspect ratio */
		object-fit: cover; /* Ensures the image fills without stretching */
	}
	
	/* footer */
	footer {
		padding: 1.5em;
	}
}