/* ================= MOBILE MENU ================= */
/* Include after style.css. Only kicks in at <=1002px since the
   original layout is fixed-width desktop (body { min-width:1002px }). */

/* Hamburger button — hidden on desktop */
.hamburger-btn {
	display: none;
	position: relative; /* z-index only applies to positioned elements */
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 30px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	margin: 8px 10px;
	z-index: 9999;
}
.hamburger-btn span {
	display: block;
	width: 100%;
	height: 3px;
	background: #fff;
	border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease;
}
.hamburger-btn.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Slide-in mobile nav panel */
.mobile-nav {
	position: fixed;
	top: 0;
	right: 0;
	width: 260px;
	max-width: 80%;
	height: 100%;
	background: #3f6209; /* darker shade of the site green, #56880c */
	box-shadow: -2px 0 12px rgba(0,0,0,.35);
	transform: translateX(100%);
	transition: transform .3s ease;
	z-index: 100000;
	overflow-y: auto;
	padding: 20px 0 40px;
}
.mobile-nav.open {
	transform: translateX(0);
}
.mobile-nav-logo {
	display: block;
	max-width: 160px;
	margin: 0 auto 20px;
}
.close-nav-btn {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mobile-nav li {
	border-bottom: 1px solid rgba(255,255,255,.15);
}
.mobile-nav li a {
	display: block;
	padding: 14px 22px;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Ubuntu Condensed', sans-serif;
	font-size: 15px;
	letter-spacing: .5px;
}
.mobile-nav li a:hover,
.mobile-nav li a:active {
	color: #daccaf;
	background: rgba(0,0,0,.12);
}

/* Dimmed backdrop behind the panel */
.mobile-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease;
	z-index: 99999;
}
.mobile-nav-overlay.open {
	opacity: 1;
	visibility: visible;
}

/* Lock page scroll while the mobile nav is open */
body.nav-open {
	overflow: hidden;
}

/* ================= HEADER / MENUBAR FIXES ================= */
/* #menubar in style.css is fixed at 32px with background-repeat:repeat-x,
   which breaks once nav items wrap to more than one row (extra rows show
   the plain page background instead of green). Let it grow and tile
   in both directions so any number of rows stays green. */
#menubar {
	height: auto;
	min-height: 32px;
	background-repeat: repeat;
	overflow: hidden; /* clear the floated <li> items */
}
#menu {
	overflow: hidden; /* clear floats so #menubar/#menu grow with wrapped items */
}
#menu ul.desktop-nav li {
	padding: 8px 20px; /* a bit more breathing room when stacked to 2-3 rows */
}

/* Space between the banner slider and the green .greenslidebottom strip
   below it — right now the slider's bottom edge touches it directly. */
#featured {
	margin-bottom: 20px;
}

/* ================= RESPONSIVE BREAKPOINT ================= */
@media screen and (max-width: 1002px) {
	body {
		min-width: 0;
		width: 100%;
		overflow-x: hidden; /* prevent a horizontal scrollbar from fixed-width children */
	}
	.size,
	.container,
	.innerbodycontent,
	#innerfooter {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	#logo {
		height: auto;
		padding: 12px 0;
	}
	#logo img {
		max-width: 200px;
		height: auto;
	}

	#menubar {
		height: auto;
	}
	#menu ul.desktop-nav {
		display: none; /* replaced by the slide-in nav */
	}
	.hamburger-btn {
		display: flex;
	}

	/* Slider */
	#featured,
	.nivoSlider {
		width: 100% !important;
		height: auto !important;
	}
	.nivoSlider img {
		position: relative;
		width: 100%;
		height: auto;
	}

	/* These decorative shadow/rounded-corner strips are drawn at a fixed
	   1000px width and just tile oddly on narrow screens — hide them. */
	.content_top,
	.content_bottom {
		display: none;
	}

	/* ---- Main content area: flexbox column layout ---- */
	.maincontent {
		width: 100% !important;
		box-sizing: border-box;
		padding: 0 12px;
	}
	.content_middle {
		display: flex;
		flex-direction: column;
		width: 100% !important;
		gap: 24px;
	}
	.contentmiddle_left,
	.contentmiddle_right {
		float: none;
		width: 100% !important;
		border-right: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.contentmiddle_innerleft,
	.contentmiddle_innerright {
		width: 100% !important;
		padding-top: 0;
		box-sizing: border-box;
	}
	.contentarea_boracay1 {
		width: 100% !important;
		box-sizing: border-box;
	}
	.contentarea_boracay1 .smalltxt {
		display: flex;
		flex-direction: column;
		padding: 0 !important;
	}
	.contentarea_boracay1 img[align="left"] {
		float: none;
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 0 14px 0;
	}
	.headtxt {
		width: auto;
		height: auto;
	}

	/* ---- Sidebar "DISTRICTS" box ---- */
	.contentarearight_1 {
		width: 100% !important;
		height: auto !important;
		padding-left: 0;
	}
	.willfind {
		width: 100%;
		height: auto;
		padding-left: 0;
	}
	.find {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.find > div {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.find a {
		position: static; /* the original absolute positioning only works at fixed desktop widths */
	}
	.mealpass {
		width: 100%;
		height: auto;
		padding-left: 0;
		display: flex;
		justify-content: center;
	}
	.mealpass img {
		width: 100%;
		height: auto;
		max-width: 320px;
	}
	.divider_1 {
		width: 100%;
		background-size: contain;
	}

	/* Any fixed-width images/blocks that would force horizontal scroll */
	img {
		max-width: 100%;
		height: auto;
	}

	/* Readability bump — the desktop design uses an 11px base size,
	   too small once it's the full-width mobile column. */
	.smalltxt,
	.innerdiv,
	.find div,
	.contentarea_boracay1 p {
		font-size: 15px;
		line-height: 1.6;
	}
	.innerheading {
		font-size: 17px;
	}

	/* ---- Footer: flexbox column, evenly spaced ---- */
	#footer {
		height: auto;
		padding: 20px 0;
	}
	#innerfooter {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 20px 15px;
		box-sizing: border-box;
	}
	.footerleft, .footercenter, .footerright {
		float: none;
		width: 100% !important;
		margin: 0;
	}
	.copyright {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 6px;
	}
	.copyrighttext, .copyrightlogo {
		width: 100%;
		float: none;
		text-align: center;
	}
}

@media screen and (max-width: 480px) {
	.mobile-nav { width: 220px; }
	.maincontent { padding: 0 10px; }
	.innerheading { font-size: 16px; }
	#footer {background-color: #407501;}
}
/* ================= /MOBILE MENU ================= */