/* -------------------------------------------------------------------
   responsive.css - phone and small-tablet layout (October 2026).
   Desktop is untouched: every rule sits inside the media query.
   Loaded last on every page so it wins over style.css.
   ------------------------------------------------------------------- */

@media only screen and (max-width: 800px) {

	html, body { overflow-x: hidden; }
	body { font-size: 14px; }

	/* full-bleed background photo, without waiting for the resize script */
	#bg {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}

	/* ---- navigation: wraps onto two or three rows ---- */
	#nav-wrapper,
	body.wide-950 #nav-wrapper {
		width: auto;
		height: auto;
		margin: 0;
	}
	#nav,
	body.wide-950 #nav {
		position: relative;
		width: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 4px 8px 6px;
		border-radius: 0 0 10px 10px;
	}
	#nav > li {
		float: none;
		height: auto;
		line-height: 38px;
	}
	#nav > li > a { padding: 0 9px; font-size: 14px; }
	#nav > li.logo {
		flex: 0 0 auto;
		margin: 0 8px 0 4px;
		line-height: 0;
	}
	#nav > li.social {
		float: none;
		margin: 0 0 0 auto;
	}
	/* Approach sub-pages: shown as a plain row, no hover menu needed */
	#nav > li > ul,
	#nav > li > ul.sf-menu {
		position: static !important;
		display: flex !important;
		visibility: visible !important;
		flex-wrap: wrap;
		width: auto !important;
		margin: 0;
		background: none;
		box-shadow: none;
	}
	#nav > li:has(> ul) {
		flex: 1 1 100%;
		order: 5;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-top: 1px solid rgba(0,0,0,.08);
	}
	#nav > li:has(> ul):hover { background: none; border-color: transparent; }
	#nav > li:has(> ul):hover > a { color: #606060; text-shadow: 1px 1px rgba(255,255,255,.7); }
	#nav > li > ul > li { float: none; width: auto !important; border: 0; }
	#nav > li > ul > li > a {
		display: block;
		color: #606060;
		text-shadow: none;
		font-size: 13px;
		line-height: 30px;
		padding: 0 9px;
	}
	#nav > li > ul > li > a:before { content: "\203A\00a0"; color: #9a9a9a; }
	#nav > li > ul li:hover { background: none; }
	#nav .sf-sub-indicator { display: none; }

	/* ---- page card ---- */
	#page-wrap,
	body.wide-950 #page-wrap {
		width: auto;
		margin: 14px 10px 40px;
		padding: 22px 16px;
	}
	#page-wrap #content,
	#page-wrap #content2,
	#page-wrap #content.fullwidth,
	body.wide-950 #page-wrap #content,
	body.wide-950 #page-wrap #content.fullwidth,
	#sidebar {
		width: auto;
		float: none;
		margin: 0;
	}
	#sidebar { margin-top: 26px; }

	h2 { font-size: 24px; }
	h6 { font-size: 18px; }
	p { text-align: left; }

	img, iframe, video { max-width: 100%; height: auto; }
	.entry-feature-image img { width: 100%; height: auto; }
	.trailer iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

	/* ---- gallery ---- */
	#gallery-holder { width: auto; margin: 0 10px 40px; }
	.gallery-filter { display: flex; flex-wrap: wrap; padding: 0 8px; }
	.gallery-thumbs { width: auto; display: flex; flex-wrap: wrap; gap: 12px; }
	.gallery-thumbs > li { margin: 0; }
	#image-description { width: auto; left: 10px; right: 10px; }

	/* ---- contact ---- */
	.uk-map img { width: 100px; }
	#contactForm textarea { width: 100%; }

	/* ---- slide-up footer panel ---- */
	#footer-wrapper,
	body.wide-950 #footer-wrapper { width: auto; padding: 0 16px; }
	#footer-wrapper .footer-col,
	body.wide-950 #footer-wrapper .footer-col {
		width: auto;
		float: none;
		margin: 0 0 20px 0;
	}
	#footer-overlay { padding: 24px 0; max-height: 75vh; overflow-y: auto; }

	/* ---- legal strip ---- */
	#legal-strip,
	body.wide-950 #legal-strip {
		width: auto;
		padding: 0 16px;
		font-size: 11px;
	}
}

/* home page: on a phone the legal strip sits under the intro text
   instead of floating over it */
@media only screen and (max-width: 800px) {
	body#page #legal-strip {
		position: static;
		margin: 16px 10px 24px;
		padding: 12px 14px;
		border-radius: 8px;
		background: rgba(0,0,0,.55);
		pointer-events: auto;
	}
	body#page #gallery-holder { margin-bottom: 0; }
}