/*
------------------------------------------------
RESPONSIVE
Desktop (> 920px) is untouched; these rules only
kick in as the viewport narrows.
Some pages set their own widths in a <style> block,
so those overrides are prefixed with .main.
------------------------------------------------
*/

/* menu button, hidden on desktop */
.nav_toggle { display:none; }

/*
---------------------------------
FLUID (<= 920px)
---------------------------------
*/
@media screen and (max-width:920px) {

	/* single fluid column: header picture, menu bar, page content, footer */
	#wrapper, .container { width:auto; }
	.main { width:auto; margin-left:12px; margin-right:12px; }
	img { max-width:100%; height:auto; }

	/* header picture (the logo is part of it) scales - #wrapper so it beats the #header.homeBg background shorthand */
	#wrapper #header { width:auto; height:auto; aspect-ratio:885/195; background-size:100% auto; background-repeat:no-repeat; }
	#header > a { display:block; height:100%; }
	#header #logo { width:auto; height:100%; margin:0; }

	/* menu bar with collapsible menu */
	.nav_toggle { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; margin:0; padding:0 16px; background:#00a5ac; border:0; color:#fff; font-size:16px; text-shadow:2px 1px 2px #666; cursor:pointer; box-shadow:0 2px 6px #666; position:relative; z-index:1; }
	.nav_toggle_bars { display:block; width:22px; }
	.nav_toggle_bars span { display:block; height:3px; margin:0 0 4px 0; background-color:#fff; border-radius:2px; box-shadow:1px 1px 1px #666; }
	.nav_toggle_bars span:last-child { margin:0; }

	ul#mainNav { display:none; width:auto; height:auto; margin:0; background:#00a5ac; line-height:normal; text-align:left; }
	ul#mainNav.menu_open { display:block; }
	ul#mainNav li { display:block; float:none; height:auto; margin:0; border-top:1px solid #33b7bd; }
	ul#mainNav li a:link, ul#mainNav li a:visited { display:block; float:none; height:auto; padding:11px 16px; }
	ul#mainNav li a.first { margin-left:0; }

	/* grid columns stack */
	.g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10 { display:block; float:none; width:auto; margin-left:0; }

	/* home */
	#leftCol, #rightCol { width:auto; }
	#rightCol .introText { height:auto; }
	#rightCol img { margin-top:10px; }
	div.wrapper { float:none; }
	.box .text { float:none; width:auto; margin-left:115px; padding:15px 10px; }

	/* rooms */
	.main .rooms { float:none; height:auto; margin-bottom:20px; }
	.rooms img { box-sizing:border-box; }
	.rooms .info .btn { margin:10px 0 0 5px; }

	/* page headings float - keep the text that follows underneath */
	.galleryHeader { overflow:hidden; }

	/* gallery - thumbnails fill the width */
	.galleryHeader .paging { float:left; clear:left; margin-top:0; }
	ul#gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
	ul#gallery li, ul#gallery li a { width:auto; height:auto; margin:0; }
	.gallery img { display:block; width:100%; height:auto; aspect-ratio:1; box-sizing:border-box; }

	/* booking - PDF boxes, then the form */
	.booking, .bookingForm { float:none; }
	.booking .info.pdf { padding-bottom:0 !important; }
	#bookingForm { padding:15px 12px 0 12px; }
	#bookingForm legend { margin-left:0; width:100%; }
	#bookingForm .leftCol, #bookingForm .rightCol { float:none; }
	#bookingForm .form-actions { margin-left:0; width:auto; }
	#bookingForm .form-actions button { float:none; margin:20px 0; }
	#bookingForm altcha-widget { margin-left:0; }
	.form-actions .g6.checkbox { margin-top:20px; }

	/* calendar */
	.main #calendar { width:auto; }

	/* forms - labels above full width fields */
	.form-horizontal .control-label { float:none; width:auto; padding-top:0; text-align:left; }
	.form-horizontal .controls { margin-left:0; }
	.form-horizontal .form-actions { padding-left:20px; }
	.form-horizontal input.g4, .form-horizontal textarea.g4,
	#bookingForm input[type="text"], #bookingForm input[type="email"], #bookingForm input[type="tel"], #bookingForm textarea { display:block; width:100%; box-sizing:border-box; min-height:34px; }
	#bookingForm input#datepicker { display:inline-block; width:auto; }

	/* contact */
	.contact img { box-sizing:border-box; margin-bottom:15px; }
	.contact p { margin-bottom:15px; }
	.form-horizontal altcha-widget { --altcha-max-width:100%; }

	/* footer links wrap */
	ul#footerNav { display:block; height:auto; padding:0 12px; text-align:center; }
	ul#footerNav li { float:none; height:auto; line-height:22px; }
	#footer p { display:block; padding:0 12px; }
}

/*
---------------------------------
PHONE (<= 480px)
---------------------------------
*/
@media screen and (max-width:480px) {

	.box .icon { width:80px; }
	#leftCol .box .icon img#calendar { width:80px; height:auto; }
	.box .text { margin-left:90px; padding:10px; }
	.box .text h2 { font-size:1.05em; margin-bottom:4px; }

	ul#gallery { grid-template-columns:repeat(2, 1fr); }

	ul#footerNav li.last, ul#footerNav li { border-right:none; }
}