/**
 * OFM Core front-end styles.
 *
 * Only for markup this plugin creates at runtime (Etch only outputs CSS for classes on the page).
 * Colours and spacing come from Automatic.css tokens.
 */

/* Video dialog ------------------------------------------------------------ */

.ofm-video-dialog {
	inline-size: min(92vw, 80rem, calc(86vh * 16 / 9));
	max-inline-size: none;
	max-block-size: none;
	margin: auto; /* the Etch reset zeroes every margin, which removes the browser's dialog centring */
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--white);
	overflow: visible;
}

.ofm-video-dialog::backdrop {
	background: rgb(0 0 0 / 0.85);
}

.ofm-video-dialog[open] {
	animation: ofm-video-dialog-in 0.2s ease-out;
}

.ofm-video-dialog__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--black);
}

.ofm-video-dialog__video {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background: var(--black);
}

.ofm-video-dialog__close {
	position: absolute;
	inset-block-end: calc(100% + 0.75rem);
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	min-inline-size: 0;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 50%;
	background: transparent;
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ofm-video-dialog__close:hover,
.ofm-video-dialog__close:focus-visible {
	border-color: var(--white);
	background: rgb(255 255 255 / 0.15);
}

.ofm-video-dialog__close svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

html:has(.ofm-video-dialog[open]) {
	overflow: hidden;
}

@keyframes ofm-video-dialog-in {
	from {
		opacity: 0;
		transform: scale(0.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ofm-video-dialog[open] {
		animation: none;
	}
}

/* Photo lightbox ------------------------------------------------------------ */

.ofm-lightbox-trigger {
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.ofm-lightbox-trigger:focus-visible {
	outline: var(--focus-width, 2px) solid var(--focus-color, currentColor);
	outline-offset: var(--focus-offset, 2px);
}

.ofm-lightbox {
	display: none;
	inline-size: 100vw;
	block-size: 100dvh;
	max-inline-size: none;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--white);
}

.ofm-lightbox[open] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	animation: ofm-video-dialog-in 0.2s ease-out;
}

.ofm-lightbox::backdrop {
	background: rgb(0 0 0 / 0.92);
}

.ofm-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	grid-column: 2;
	min-inline-size: 0;
	margin: 0;
}

.ofm-lightbox__image {
	display: block;
	max-inline-size: 100%;
	max-block-size: calc(100dvh - 6rem);
	inline-size: auto;
	block-size: auto;
	border-radius: 0;
	object-fit: contain;
}

.ofm-lightbox__counter {
	font-size: var(--text-s);
	color: rgb(255 255 255 / 0.8);
}

.ofm-lightbox__close,
.ofm-lightbox__nav {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	min-inline-size: 0;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.3);
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ofm-lightbox__close:hover,
.ofm-lightbox__close:focus-visible,
.ofm-lightbox__nav:hover,
.ofm-lightbox__nav:focus-visible {
	border-color: var(--white);
	background: rgb(255 255 255 / 0.15);
}

.ofm-lightbox__close svg,
.ofm-lightbox__nav svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.ofm-lightbox__close {
	position: absolute;
	inset-block-start: var(--space-s);
	inset-inline-end: var(--space-s);
	z-index: 1;
}

.ofm-lightbox__nav {
	margin-inline: var(--space-s);
}

@media (max-width: 767px) {
	/* Phones: arrows sit over the photo's edges, swipe also works. */
	.ofm-lightbox[open] {
		grid-template-columns: 1fr;
	}

	.ofm-lightbox__figure {
		grid-column: 1;
		grid-row: 1;
	}

	.ofm-lightbox__nav {
		position: absolute;
		inset-block-end: var(--space-m);
		z-index: 1;
		margin: 0;
	}

	.ofm-lightbox__nav--prev {
		inset-inline-start: var(--space-m);
	}

	.ofm-lightbox__nav--next {
		inset-inline-end: var(--space-m);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ofm-lightbox[open] {
		animation: none;
	}
}

/* Date preview banner (inc/phases.php) -------------------------------------- */

.ofm-date-preview {
	padding-block: var(--space-xs);
	padding-inline: var(--gutter);
	background: var(--base);
	color: var(--bg-ultra-light);
	text-align: center;
}

.ofm-date-preview__text {
	max-inline-size: var(--content-width);
	margin-inline: auto;
	font-size: var(--text-s);
	line-height: 1.4;
}

.ofm-date-preview__clear {
	color: var(--accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.ofm-date-preview__clear:hover,
.ofm-date-preview__clear:focus-visible {
	color: var(--bg-ultra-light);
}

/* ACSS hides the skip link by shifting it above the header; with the banner on top it would land on the banner. */
html:has(.ofm-date-preview) .skip-link:not(:focus-visible) {
	clip-path: inset(50%);
}

/* Tabs (data-ofm-tabs) ----------------------------------------------------- */

.ofm-tabs__list {
	display: flex;
	margin-block-end: var(--space-l);
	border-block-end: 2px solid var(--neutral-ultra-light, #e4e4e4);
	overflow-x: auto; /* phones: the tab row scrolls sideways rather than wrapping */
	scrollbar-width: none;
}

.ofm-tabs__tab {
	flex: 1 0 auto;
	margin-block-end: -2px; /* the active bar sits on the track line */
	padding-block: var(--space-s);
	padding-inline: var(--space-m);
	border: 0;
	border-block-end: 3px solid transparent;
	background: none;
	color: var(--base);
	font-family: inherit;
	font-size: var(--text-m);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.ofm-tabs__tab:hover {
	color: var(--primary);
}

.ofm-tabs__tab[aria-selected="true"] {
	border-block-end-color: var(--base);
}

/* Panels are often flex or grid sections, which would override the hidden attribute. */
.ofm-tabs > [hidden] {
	display: none;
}

.ofm-tabs__tab:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
}

/* Gallery paging and photo fade-in ------------------------------------------ */

.ofm-lightbox-trigger[hidden] {
	display: none;
}

.ofm-lightbox-trigger {
	background: var(--bg-ultra-light); /* placeholder tone while a lazy photo loads */
}

[data-ofm-lightbox] img {
	transition: opacity 0.5s ease-out;
}

[data-ofm-lightbox] img.is-loading {
	opacity: 0;
}

.ofm-more {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-l);
}

.ofm-more__button {
	padding-block: var(--space-xs);
	padding-inline: var(--space-m);
	border: 1px solid var(--base);
	background: none;
	color: var(--base);
	font-family: inherit;
	font-size: var(--text-s);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.ofm-more__button:hover,
.ofm-more__button:focus-visible {
	background: var(--base);
	color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
	[data-ofm-lightbox] img {
		transition: none;
	}
}

/* Background video (data-ofm-bg-video) ------------------------------------ */

.ofm-bg-video {
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.ofm-bg-video.is-playing {
	opacity: 1;
}

.ofm-bg-video__toggle {
	position: absolute;
	z-index: 2;
	inset-block-end: var(--space-s);
	inset-inline-end: var(--space-s);
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	min-inline-size: 0;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.3);
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ofm-bg-video__toggle:hover,
.ofm-bg-video__toggle:focus-visible {
	border-color: var(--white);
	background: rgb(0 0 0 / 0.5);
}

/* Phones: in the flow under the buttons, so it never covers the heading or a button. */
@media (max-width: 767px) {
	.ofm-bg-video__toggle {
		position: static;
		align-self: flex-end;
		margin-block-start: var(--space-s);
	}
}

.ofm-bg-video__toggle svg {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
	.ofm-bg-video {
		transition: none;
	}
}

/* Gravity Forms (Orbital theme) in the site's colours and type ------------- */

/* Gravity Forms derives every control style from these variables. It prints some of them on the
   wrapper with an id selector, so they are set one level down, on the form, where they win. */
.gform_wrapper.gform-theme--framework form {
	--gf-ctrl-font-family: inherit;
	--gf-ctrl-btn-font-family: inherit;
	--gf-ctrl-label-color-primary: var(--text-dark, var(--base));
	--gf-ctrl-radius: 0;
	--gf-ctrl-border-color: var(--neutral-light, #b5b9c0);
	--gf-ctrl-border-color-hover: var(--neutral, #707070);
	--gf-ctrl-border-color-focus: var(--primary);
	--gf-ctrl-btn-radius: 0;
	--gf-ctrl-btn-font-size: 1rem;
	--gf-ctrl-btn-font-weight: 400;
	--gf-ctrl-btn-text-transform: none;
	--gf-ctrl-btn-letter-spacing: 0;
	--gf-ctrl-btn-padding-x: 1.75em;
	/* Same box as the site's .button: 1.2 line height + 0.75em padding each side + 1px borders. */
	--gf-ctrl-btn-size: calc(2.7rem + 2px);
	--gf-ctrl-btn-bg-color-primary: var(--primary);
	--gf-ctrl-btn-bg-color-hover-primary: var(--base);
	--gf-ctrl-btn-bg-color-focus-primary: var(--base);
	--gf-ctrl-btn-border-color-primary: var(--primary);
	--gf-ctrl-btn-border-color-hover-primary: var(--base);
	--gf-ctrl-btn-border-color-focus-primary: var(--base);
	--gf-ctrl-btn-color-primary: var(--white);
	--gf-ctrl-btn-color-hover-primary: var(--white);
	--gf-ctrl-btn-color-focus-primary: var(--white);
	/* Checkboxes, radios and focus rings use the theme colour, not Gravity Forms blue. */
	--gf-color-primary: var(--primary);
	--gf-color-primary-darker: var(--base);
	--gf-color-primary-lighter: var(--primary-light, var(--primary));
	--gf-color-primary-contrast: var(--white);
}

/* Filled in by OFM Core from the ?acquisition= / ?gclid= campaign cookie; never shown. */
.gform_wrapper .gfield.acquisition {
	display: none;
}

/* Sign Up component: borderless grey fields on the cream panel, as in the mockup. */
.signup__form .gform_wrapper.gform-theme--framework form {
	--gf-ctrl-bg-color: var(--neutral-ultra-light, #e9e9e9);
	--gf-ctrl-bg-color-hover: var(--neutral-ultra-light, #e9e9e9);
	--gf-ctrl-bg-color-focus: var(--white);
	--gf-ctrl-border-color: transparent;
	--gf-ctrl-border-color-hover: var(--neutral-light, #b5b9c0);
	--gf-ctrl-shadow: none;
}

.signup__form .gform_wrapper .gform_fields {
	row-gap: var(--space-xs);
}