/*
Theme Name: Stratos North
Template: plainvanilla-base
Version: 0.1.0
Text Domain: stratos-north
*/

/*
 * Site shell / Main content
 */

.wp-site-blocks > .wp-block-template-part + main {
	margin-block-start: var(--wp--preset--spacing--xxl);

}

.wp-site-blocks > main {
    margin-block-end: var(--wp--preset--spacing--xxl);
}

/* Front page exception
--------------------------------------------- */

.home .wp-site-blocks > .wp-block-template-part + main {
	margin-block-start: 0;
}

/*
 * Body
 */

body {
	background-color: var(--wp--preset--color--color-1);
	color: var(--wp--preset--color--color-2);
}

/*
 * Header
 */

.wp-block-template-part:has(.site-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header {
	color: var(--wp--preset--color--color-5);
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--color-4) 95%,
		transparent
	);
	border-bottom: 4px solid var(--wp--preset--color--color-3);
}

/*
 * Footer
 */

.site-footer {
	color: var(--wp--preset--color--color-5);
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--color-4) 95%,
		transparent
	);
	border-top: 4px solid var(--wp--preset--color--color-3);
}

/*
 * Navigation overlay
 */

.navigation-overlay {
	color: var(--wp--preset--color--color-5);
	background-color: var(--wp--preset--color--color-3);
}

.navigation-overlay-content {
	padding: var(--wp--preset--spacing--xxl);
}

.navigation-overlay-header {
	margin-bottom: var(--wp--preset--spacing--xxl);
}

.navigation-overlay .wp-block-navigation-overlay-close {
	color: var(--wp--preset--color--color-5);
}

.navigation-overlay .wp-block-navigation-overlay-close svg {
	fill: currentColor;
	stroke: currentColor;
}

/*
 * Footer reveal
 */

/* Footer Reveal is opt-in; the default footer remains in document flow. */
@supports (animation-timeline: scroll(root block)) and (animation-range: calc(100% - 1px) 100%) {
	.stratos-footer-reveal {
		/* Measured footer clearance plus any short-page reveal deficit. */
		padding-bottom: var(--stratos-footer-space);
	}

	.stratos-footer-reveal > .wp-block-template-part:has(.site-footer) {
		position: fixed;
		inset: auto 0 0;
		width: auto;
		margin: 0;
		z-index: 99;
		transform: translateY(calc(100% - var(--stratos-footer-peek)));
		animation: stratos-footer-reveal 1ms linear both;
		animation-timeline: scroll(root block);
		animation-range: calc(100% - var(--stratos-footer-travel)) 100%;
	}

	/* Keyboard focus exposes the entire panel independently of scroll position. */
	.stratos-footer-reveal > .wp-block-template-part:has(.site-footer):focus-within {
		animation: none;
		transform: none;
	}
}

@keyframes stratos-footer-reveal {
	from {
		transform: translateY(calc(100% - var(--stratos-footer-peek)));
	}
	to {
		transform: translateY(0);
	}
}

/*
 * Front Page Hero
 *
 * Latest post displayed as a full-bleed hero.
 * Featured image provides the background; post title provides the CTA.
 */

/* Hero
--------------------------------------------- */

.stratos-hero {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
	min-height: 70vh;
	margin-top: 0;
}

/* Post structure
--------------------------------------------- */

.stratos-hero .wp-block-post-template,
.stratos-hero .wp-block-post {
	height: 100%;
	min-height: inherit;
}

/* Featured image
--------------------------------------------- */

.stratos-hero .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.stratos-hero .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Image overlay
--------------------------------------------- */

.stratos-hero .wp-block-post::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgb(0 0 0 / 55%);
	pointer-events: none;
}

/* Post title / CTA
--------------------------------------------- */

.stratos-hero .wp-block-post-title {
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	z-index: 2;

	width: 10ch;
	max-width: 90vw;
	margin-inline: auto;

	color: var(--wp--preset--color--color-5);
	font-size: clamp(3rem, 7vw, 8rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	text-align: left;
	text-transform: uppercase;

	text-shadow:
		0 2px 4px rgb(0 0 0 / 30%),
		0 8px 24px rgb(0 0 0 / 35%);

	transform: translateY(-50%);
}

.stratos-hero .wp-block-post-title a {
	color: inherit;
}

/*
 * Front page sections
 */

.home .entry-content > .wp-block-group {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--xxl);

	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	margin-left: -50vw;
	margin-right: -50vw;
	padding-inline: var(--pvw-gutter);
}

.home .entry-content > .wp-block-group ~ .wp-block-group {
	border-block-start: 1px solid var(--wp--preset--color--color-6);
}

.home .entry-content > :nth-child(odd of .wp-block-group) {
	background-color: var(--wp--preset--color--color-1);
}

.home .entry-content > :nth-child(even of .wp-block-group) {
	background-color: var(--wp--preset--color--color-5);
}

/*
 * Contact form
 *
 * PV Contact provides structure and behaviour.
 * Stratos North provides presentation.
 */

.pv-contact {
	margin-block: var(--wp--preset--spacing--xxl);
}

.pv-contact__form {
	display: grid;
	gap: var(--wp--preset--spacing--xl);
}

.pv-contact__field {
	display: grid;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
}

.pv-contact__input,
.pv-contact__textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 1rem 1.125rem;
	color: inherit;
	background-color: color-mix(
		in srgb,
		currentColor 4%,
		transparent
	);
	border: 1px solid color-mix(
		in srgb,
		currentColor 25%,
		transparent
	);
	border-radius: 3px;
	font: inherit;
	line-height: 1.4;
	transition:
		border-color 160ms ease,
		background-color 160ms ease;
}

.pv-contact__textarea {
	min-height: 12rem;
	resize: vertical;
}

.pv-contact__input:hover,
.pv-contact__textarea:hover {
	border-color: color-mix(
		in srgb,
		currentColor 50%,
		transparent
	);
}

.pv-contact__input:focus,
.pv-contact__textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--color-3);
	background-color: color-mix(
		in srgb,
		currentColor 7%,
		transparent
	);
}

.pv-contact__contact-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xl);
}

.pv-contact__help,
.pv-contact__privacy {
	margin: 0;
	opacity: 0.65;
}

.pv-contact__submit {
	width: 100%;
	padding: 1.125rem 1.5rem;
	color: var(--wp--preset--color--color-5);
	background: var(--wp--preset--color--color-4);
	border: 0;
	border-radius: 3px;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color 160ms ease,
		transform 160ms ease;
}

.pv-contact__submit:hover {
	background: var(--wp--preset--color--color-3);
}

.pv-contact__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--color-3);
	outline-offset: 3px;
}

.pv-contact__submit:active {
	transform: translateY(1px);
}

@media (max-width: 700px) {
	.pv-contact__contact-row {
		grid-template-columns: 1fr;
	}
}