/*
 * Oliver Mottram site frame: painted header, footer and page frame.
 * Adapted from the design's site.css. Colours and fonts use the Elementor
 * global variables when they are present, with the design values as fallbacks.
 */

body.omsf {
	--omsf-black: var(--c-black, #040202);
	--omsf-night: var(--c-night, #120b0a);
	--omsf-frame: var(--c-frame, #b6651f);
	--omsf-peach: var(--c-peach, #e9a66f);
	--omsf-light: var(--c-light, #f6e8d6);
	--omsf-parchment: var(--c-parchment, #e4c6a7);
	--omsf-field-ink: var(--c-field-ink, #2b1508);
	--omsf-field-ink-soft: var(--c-field-ink-soft, #5a3419);
	--omsf-font: var(--font-display, "ZT Otez", Georgia, "Times New Roman");

	--omsf-side-w: 48px;
	--omsf-top-h: 48px;
	--omsf-bottom-h: 48px;
	--omsf-side-cap: 1.8545;
	--omsf-pad-x: 96px;

	/* Sizes below use cqw: 1% of the width between the frame sides. */
	--omsf-sky-w: max(100cqw, 820px);
	--omsf-horizon: 0.2411;
	--omsf-nav-drop: 0.03;
	--omsf-header-pad-top: 0.026;
	--omsf-logo-w: clamp(150px, 21cqw, 400px);
	--omsf-nav-h: clamp(22px, 2.4cqw, 40px);
	--omsf-title-h: 26px;
	--omsf-menu-img-h: 26px;
	--omsf-menu-sub-h: 21px;
	--omsf-menu-bar-w: 44px;
	--omsf-insta-s: 34px;
	--omsf-field-h: 56px;

	--omsf-hover-bright: 1.3;
	--omsf-current-bright: 1.15;
	--omsf-fade-fast: 160ms;
	--omsf-z-overlay: 20;

	background: var(--omsf-black);
	font-family: var(--omsf-font);
}

/* ---------- Page frame ---------- */
body.omsf #page {
	position: relative;
	container-type: inline-size;
	padding: 0 var(--omsf-side-w);
	background-color: var(--omsf-night);
	background-image: var(--omsf-img-texture);
	background-repeat: repeat-y;
	background-size: 100% auto;
	background-position: center top;
	background-origin: content-box;
	background-clip: content-box;
}
body.omsf #content {
	position: relative;
	z-index: 1;
	background: none;
}

.omsf-side {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: var(--omsf-bottom-h);
	width: var(--omsf-side-w);
	pointer-events: none;
	background: var(--omsf-black) var(--omsf-img-side-cap) center top / 100% auto no-repeat;
}
.omsf-side::before {
	content: "";
	position: absolute;
	inset: calc(var(--omsf-side-w) * var(--omsf-side-cap)) 0 0 0;
	background: var(--omsf-img-side-tile) center top / 100% auto repeat-y;
}
.omsf-side-l { left: 0; }
.omsf-side-r { right: 0; transform: scaleX(-1); }

.omsf-frame-top {
	position: relative;
	z-index: 2;
	height: var(--omsf-top-h);
	background:
		var(--omsf-img-top-center) center top / auto 100% no-repeat,
		var(--omsf-img-top-tile) center top / auto 100% repeat-x;
}
.omsf-frame-bottom {
	position: relative;
	z-index: 3;
	height: var(--omsf-bottom-h);
	margin: 0 calc(-1 * var(--omsf-side-w));
	background: var(--omsf-black) var(--omsf-img-bottom-tile) left center / auto 100% repeat-x;
}

/* ---------- Sky: painting plus star layers, running on behind the top of the page ---------- */
.omsf-sky-clip {
	position: absolute;
	z-index: 0;
	top: var(--omsf-top-h);
	left: var(--omsf-side-w);
	right: var(--omsf-side-w);
	height: calc(var(--omsf-sky-w) * 884 / 1920);
	overflow: hidden;
	pointer-events: none;
}
.omsf-sky {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--omsf-sky-w);
	aspect-ratio: 1920 / 884;
	transform: translateX(-50%);
}
.omsf-sky-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}
.omsf-stars {
	position: absolute;
	left: 1.667%;
	top: 17.195%;
	width: 98.333%;
	height: 36.652%;
	max-width: none;
	will-change: opacity;
	animation: omsf-twinkle var(--omsf-tw-dur) ease-in-out var(--omsf-tw-delay) infinite;
}
.omsf-stars-1 { --omsf-tw-dur: 2.4s; --omsf-tw-delay: 0s; }
.omsf-stars-2 { --omsf-tw-dur: 3.6s; --omsf-tw-delay: -1.3s; }
.omsf-stars-3 { --omsf-tw-dur: 1.9s; --omsf-tw-delay: -1.1s; }
.omsf-stars-4 { --omsf-tw-dur: 4.7s; --omsf-tw-delay: -3.4s; }
.omsf-stars.omsf-stars-5 { left: 0; width: 100%; animation: omsf-pulse 2.5s ease-in-out -0.8s infinite; }
.omsf-stars.omsf-stars-6 { left: 33.125%; top: 17.195%; width: 1.4583%; height: 2.2624%; animation: omsf-pulse 2s ease-in-out -0.2s infinite; }
@keyframes omsf-twinkle {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}
@keyframes omsf-pulse {
	0%, 100% { opacity: 0; }
	50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.omsf-stars, .omsf-stars.omsf-stars-5, .omsf-stars.omsf-stars-6 { animation: none; }
}

/* ---------- Header ---------- */
.omsf-header-inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	height: calc(var(--omsf-sky-w) * var(--omsf-horizon));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: calc(var(--omsf-sky-w) * var(--omsf-header-pad-top)) var(--omsf-pad-x) calc(var(--omsf-sky-w) * var(--omsf-nav-drop));
}
.omsf-header-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
}
.omsf-header img { display: block; max-width: none; }

.omsf-logo { display: flex; text-decoration: none; }
.omsf-logo-img { width: var(--omsf-logo-w); height: auto; transition: filter var(--omsf-fade-fast); }
.omsf-logo:hover .omsf-logo-img,
.omsf-logo:focus-visible .omsf-logo-img { filter: brightness(var(--omsf-hover-bright)); }
.omsf-logo-text { font-family: var(--omsf-font); font-size: 48px; line-height: 1; color: var(--omsf-peach); }

.omsf-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px calc(var(--omsf-nav-h) * 1.6);
}
.omsf-nav-link { position: relative; display: flex; text-decoration: none; }
.omsf-nav-img { height: var(--omsf-nav-h); width: auto; transition: filter var(--omsf-fade-fast); }
.omsf-nav-link.is-current .omsf-nav-img { filter: brightness(var(--omsf-current-bright)); }
.omsf-nav-link:hover .omsf-nav-img,
.omsf-nav-link:focus-visible .omsf-nav-img,
.omsf-dd:hover > .omsf-nav-link .omsf-nav-img { filter: brightness(var(--omsf-hover-bright)); }

/* Painted box behind a menu word on hover. Items with a dropdown are left out: their card is the box.
   The box image's painted border keeps its thickness whatever the word's width; only the middle stretches. */
.omsf-nav > .omsf-nav-link { isolation: isolate; }
.omsf-nav > .omsf-nav-link::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: calc(var(--omsf-nav-h) * -0.55);
	right: calc(var(--omsf-nav-h) * -0.55);
	height: calc(var(--omsf-nav-h) * 1.75);
	box-sizing: border-box;
	transform: translateY(-50%);
	border: calc(var(--omsf-nav-h) * 0.42) solid transparent;
	border-image-source: var(--omsf-img-hover-box);
	border-image-slice: 26 fill;
	border-image-width: 1;
	border-image-repeat: stretch;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--omsf-fade-fast);
}
.omsf-nav > .omsf-nav-link:hover::before,
.omsf-nav > .omsf-nav-link:focus-visible::before { opacity: 1; }

/* Text shown for any menu item without a painted image */
.omsf-label {
	display: block;
	font-family: var(--omsf-font);
	color: var(--omsf-peach);
	white-space: nowrap;
	transition: color var(--omsf-fade-fast);
}
a:hover > .omsf-label, a:focus-visible > .omsf-label { color: var(--omsf-light); }
.omsf-nav-img-label { font-size: calc(var(--omsf-nav-h) * 0.8); line-height: var(--omsf-nav-h); }
.omsf-dd-link-img-label { font-size: calc(var(--omsf-nav-h) * 0.7); line-height: 1; align-self: center; }
.omsf-dd-head-img-label { font-size: calc(var(--omsf-nav-h) * 0.8); line-height: 1; }
.omsf-menu-img-label, .omsf-title-img-label { font-size: 22px; line-height: 1.1; text-align: center; }

/* Dropdown: the painted card opens over the menu item, its top band lining up with the item */
.omsf-dd { position: relative; display: flex; }
.omsf-dd-panel {
	position: absolute;
	z-index: var(--omsf-z-overlay);
	left: calc(var(--omsf-nav-h) * -1.033);
	top: calc(var(--omsf-nav-h) * -0.68);
	width: calc(var(--omsf-nav-h) * 5.477);
	aspect-ratio: 328 / 453;
	background: var(--omsf-img-dropdown) center / 100% 100% no-repeat;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--omsf-fade-fast), visibility 0s linear var(--omsf-fade-fast);
}
.omsf-dd:hover .omsf-dd-panel,
.omsf-dd:focus-within .omsf-dd-panel {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--omsf-fade-fast), visibility 0s;
}
.omsf-dd-head { position: absolute; left: 18.86%; top: 8.98%; width: 62.2%; display: flex; text-decoration: none; }
.omsf-dd-head-img { width: 100%; height: auto; transition: filter var(--omsf-fade-fast); }
.omsf-dd-link { position: absolute; left: 17.93%; display: flex; text-decoration: none; }
.omsf-dd-link-img { height: 100%; width: auto; transition: filter var(--omsf-fade-fast); }
.omsf-dd-head:hover .omsf-dd-head-img, .omsf-dd-head:focus-visible .omsf-dd-head-img,
.omsf-dd-link:hover .omsf-dd-link-img, .omsf-dd-link:focus-visible .omsf-dd-link-img { filter: brightness(var(--omsf-hover-bright)); }

/* Phone menu button */
.omsf-menu-toggle {
	display: none;
	margin: 0;
	padding: 8px;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}
.omsf-menu-toggle:hover, .omsf-menu-toggle:focus { background: none; }
.omsf-menu-icon { width: var(--omsf-menu-bar-w); height: auto; transition: filter var(--omsf-fade-fast); }
.omsf-menu-toggle:hover .omsf-menu-icon,
.omsf-menu-toggle:focus-visible .omsf-menu-icon,
.omsf-menu-toggle.is-open .omsf-menu-icon { filter: brightness(var(--omsf-hover-bright)); }

/* Instagram */
.omsf-insta { display: flex; flex: none; align-items: center; text-decoration: none; }
.omsf-insta-img { width: var(--omsf-insta-s); height: auto; transition: filter var(--omsf-fade-fast); }
.omsf-insta:hover .omsf-insta-img, .omsf-insta:focus-visible .omsf-insta-img { filter: brightness(var(--omsf-hover-bright)); }
.omsf-insta-header { margin-top: 8px; }
.omsf-insta-menu { margin-top: 8px; --omsf-insta-s: 30px; }

/* Painted page title (phones) */
.omsf-title-row { display: none; justify-content: center; }
.omsf-title-img { height: var(--omsf-title-h); width: auto; max-width: 100%; object-fit: contain; }

/* Phone menu panel */
.omsf-menu-slot {
	display: none;
	position: relative;
	z-index: var(--omsf-z-overlay);
	flex-direction: column;
	height: 0;
	overflow: visible;
}
.omsf-menu-panel {
	display: none;
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	aspect-ratio: 1080 / 1415;
	padding: 11% 22% 12%;
	background: var(--omsf-black) var(--omsf-img-menu-panel) center / 100% 100% no-repeat;
}
.omsf-header.is-open .omsf-menu-panel { display: flex; }
.omsf-menu-link { display: flex; justify-content: center; text-decoration: none; }
.omsf-menu-img { height: var(--omsf-menu-img-h); width: auto; max-width: 100%; object-fit: contain; transition: filter var(--omsf-fade-fast); }
.omsf-menu-link:hover .omsf-menu-img, .omsf-menu-link:focus-visible .omsf-menu-img { filter: brightness(var(--omsf-hover-bright)); }
.omsf-menu-sub { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.omsf-menu-sub .omsf-menu-img { height: var(--omsf-menu-sub-h); }

/* ---------- Footer ---------- */
.omsf-footer { position: relative; z-index: 1; display: flex; flex-direction: column; }
.omsf-footer img { display: block; max-width: 100%; }
.omsf-signup {
	position: relative;
	aspect-ratio: 2400 / 118;
	background: var(--omsf-img-bar) center / 100% 100% no-repeat;
}
.omsf-signup-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	font-family: var(--omsf-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--omsf-peach);
	text-align: center;
	text-wrap: balance;
}
.omsf-signup-bar {
	position: absolute;
	left: 64.1%;
	right: 0.3%;
	top: 30.1%;
	bottom: 28.8%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 8px 0 16px;
}
.omsf-signup-bar:focus-within { outline: 2px solid var(--omsf-peach); outline-offset: 2px; }
.omsf-signup-widget { flex: 1 1 auto; align-self: stretch; min-width: 0; margin: 0; }

/* MailPoet form, laid into the painted field: no box of its own, just the typed text and the button */
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_form_popup_overlay { display: none; }
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_form,
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_form form {
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
}
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_form form {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 8px;
}
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_paragraph { display: flex; margin: 0; padding: 0; }
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_paragraph:first-of-type { flex: 1 1 auto; min-width: 0; }
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_paragraph:last-of-type { flex: none; }
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_text {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--omsf-font);
	font-size: 16px;
	color: var(--omsf-field-ink);
}
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_text::placeholder { color: var(--omsf-field-ink-soft); opacity: 1; }
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_text:focus { outline: none; }
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_submit {
	height: 100%;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--omsf-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--omsf-field-ink);
	text-underline-offset: 4px;
	cursor: pointer;
}
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_submit:hover,
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_submit:focus-visible { color: var(--omsf-black); text-decoration: underline; background: none; }
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_form_loading { display: none; }
/* Confirmation and error messages sit just under the bar */
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_message,
body.omsf #omsf-colophon .omsf-signup-bar .parsley-errors-list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--omsf-font);
	font-size: 14px;
	line-height: 1.3;
	color: var(--omsf-peach);
	text-shadow: 0 0 4px #000, 0 0 2px #000;
}
body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_message p { margin: 0; padding: 0; }

/* ---------- Footer line, over the trees ---------- */
.omsf-footer-bottom { position: relative; }
.omsf-footer-trees { width: 100%; height: auto; }
.omsf-footer-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 12px;
	margin: 0;
	padding: 0 var(--omsf-pad-x);
	font-family: var(--omsf-font);
	font-size: 15px;
	line-height: 1.4;
	color: var(--omsf-parchment);
	text-align: center;
	text-shadow: 0 0 6px #000, 0 0 2px #000;
}
.omsf-footer-sep { opacity: 0.7; }
.omsf-footer-link {
	color: var(--omsf-peach);
	text-decoration: none;
	text-underline-offset: 4px;
	transition: color var(--omsf-fade-fast);
}
.omsf-footer-link:hover, .omsf-footer-link:focus-visible { color: var(--omsf-light); text-decoration: underline; }
.omsf-insta-footer { --omsf-insta-s: 22px; margin-left: 4px; filter: drop-shadow(0 0 3px #000); }

/* ---------- Tablet (narrower than 1024px) ---------- */
@media (max-width: 1023px) {
	body.omsf {
		--omsf-side-w: 28px;
		--omsf-top-h: 28px;
		--omsf-bottom-h: 28px;
		--omsf-pad-x: 40px;
	}
	.omsf-signup {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 32px 0 0;
		background: none;
	}
	.omsf-signup-text {
		position: static;
		width: auto;
		height: auto;
		padding: 0 var(--omsf-pad-x);
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
	.omsf-signup-bar {
		position: relative;
		inset: auto;
		height: var(--omsf-field-h);
		padding: calc(var(--omsf-field-h) * 0.301) var(--omsf-pad-x) calc(var(--omsf-field-h) * 0.288);
		background: var(--omsf-img-field-tile) left center / auto 100% repeat-x;
	}
}

/* ---------- Phone (narrower than 640px) ---------- */
@media (max-width: 639px) {
	body.omsf {
		--omsf-side-w: 6px;
		--omsf-top-h: 22px;
		--omsf-bottom-h: 6px;
		--omsf-pad-x: 20px;
		--omsf-sky-w: 100cqw;
		--omsf-logo-w: 25cqw;
		--omsf-title-h: max(14px, 3.6cqw);
		--omsf-menu-bar-w: 9.7cqw;
	}
	.omsf-side, .omsf-frame-bottom { background: var(--omsf-frame); }
	.omsf-side::before { display: none; }
	.omsf-header-inner { justify-content: flex-start; padding: 3.7cqw 3.9cqw 0 3.3cqw; }
	.omsf-insta-header { display: none; }
	.omsf-menu-toggle { display: flex; position: absolute; top: calc(2.5cqw - 8px); right: calc(3.9cqw - 8px); }
	.omsf-nav { display: none; }
	.omsf-title-row { display: flex; position: absolute; left: 0; right: 0; top: 15.3cqw; pointer-events: none; }
	.omsf-menu-slot { display: flex; }
	/* The trees are too short on phones to carry the line, so it sits underneath them */
	.omsf-footer-line { position: static; padding: 12px var(--omsf-pad-x) 16px; font-size: 14px; }
	body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_text, body.omsf #omsf-colophon .omsf-signup-bar .mailpoet_submit { font-size: 15px; }
}