/*
Theme Name: Stratum
Theme URI: https://stratumalliance.co.uk
Author: Sean Paterson
Description: Block theme for STRATUM Alliance Building & Construction Ltd.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stratum
*/


/* ==========================================================================
   Base
   ========================================================================== */

:root {
	--stratum-gutter: 28px;
	--stratum-line: rgba(45, 241, 93, .42);
	--stratum-line-soft: rgba(45, 241, 93, .25);
	--stratum-divider: rgba(255, 255, 255, .12);
	--stratum-header-height: 74px;
}

@media (max-width: 780px) {
	:root { --stratum-gutter: 18px; }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body { -webkit-font-smoothing: antialiased; }

/* Long unbroken text (email or web addresses typed into any block) wraps instead of
   pushing the page sideways. break-word leaves normal layout sizing untouched. */
.wp-site-blocks :is(p, li, h1, h2, h3, h4, a) { overflow-wrap: break-word; }

/* Header, main and footer sit flush against each other. */
.wp-site-blocks > * { margin-block: 0; }

/* Sections sit flush against each other inside the page content. */
.wp-block-post-content > .alignfull { margin-block: 0; }

/* Keep anchored headings clear of the sticky header. */
[id] { scroll-margin-top: calc(var(--stratum-header-height) + 16px); }

/* Small green uppercase label above a heading. */
p.stratum-kicker {
	margin: 0;
	color: var(--wp--preset--color--green);
	font-size: .69rem;
	font-weight: 900;
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* Kicker and heading on the left, short intro on the right. */
.stratum-section-top.stratum-section-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 16px;
}
.stratum-section-top h2 { margin: 6px 0 0; }
.stratum-section-top > p {
	max-width: 550px;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: .8rem;
	line-height: 1.65;
}

/* Inline list separated by short green bars: hero values and footer bottom line. */
.stratum-values.stratum-values {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: .69rem;
	font-weight: 700;
	letter-spacing: .085em;
	text-transform: uppercase;
}
.stratum-values > li { display: flex; align-items: center; gap: 12px; margin: 0; }
.stratum-values > li + li::before {
	content: "";
	width: 2px;
	height: 16px;
	background: var(--wp--preset--color--green);
}

/* Buttons */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, .75);
	background: transparent;
	color: var(--wp--preset--color--white);
}
.wp-block-button.stratum-button-green-outline > .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--green);
	background: rgba(2, 15, 23, .55);
	color: var(--wp--preset--color--white);
}
.wp-block-button.stratum-button-green-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--navy);
}
.wp-block-button.stratum-button-arrow > .wp-block-button__link::after {
	content: "\2192";
	margin-left: 14px;
}

/* Plain pages and the 404 */
.stratum-page.stratum-page { padding-block: clamp(48px, 8vw, 120px); }
.stratum-page h1 { margin: 8px 0 20px; }

@media (max-width: 780px) {
	.stratum-section-top.stratum-section-top { display: block; }
	.stratum-section-top > p { margin-top: 12px; }
}


/* ==========================================================================
   Footer
   ========================================================================== */

.stratum-site-footer {
	background: var(--wp--preset--color--deep);
	border-top: 1px solid rgba(45, 241, 93, .40);
}
.stratum-footer-content p { margin: 0; }

.stratum-footer-values.stratum-footer-values {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border-bottom: 1px solid rgba(45, 241, 93, .36);
}
.stratum-footer-values > .stratum-footer-value {
	margin: 0;
	padding: 16px 14px;
	text-align: center;
	border-right: 1px solid var(--stratum-divider);
}
.stratum-footer-values > .stratum-footer-value:last-child { border-right: 0; }
.stratum-footer-value .stratum-footer-value__title {
	font-size: .64rem;
	font-weight: 700;
	text-transform: uppercase;
}
.stratum-footer-value .stratum-footer-value__text {
	margin-top: 3px;
	color: var(--wp--preset--color--muted);
	font-size: .62rem;
}

.stratum-footer-main.stratum-footer-main {
	display: grid;
	grid-template-columns: 1.65fr .7fr 1.28fr .55fr;
	margin: 0;
}
.stratum-footer-main > .stratum-footer-block {
	min-width: 0;
	margin: 0;
	padding: 22px 24px;
	border-right: 1px solid rgba(255, 255, 255, .14);
}
.stratum-footer-main > .stratum-footer-block:last-child { border-right: 0; }
.stratum-footer-block p + p {
	margin-top: 5px;
	font-size: .73rem;
	font-weight: 700;
	line-height: 1.48;
}
.stratum-footer-block .stratum-footer-label {
	color: var(--wp--preset--color--green);
	font-size: .61rem;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.stratum-footer-block .stratum-footer-email {
	font-size: clamp(.92rem, 1.35vw, 1.32rem);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.015em;
	overflow-wrap: anywhere;
}

.stratum-footer .stratum-footer-bottom {
	justify-content: center;
	margin: 0;
	padding: 15px 20px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .58rem;
	letter-spacing: .24em;
}

@media (max-width: 1100px) {
	.stratum-footer-values.stratum-footer-values { grid-template-columns: repeat(3, 1fr); }
	.stratum-footer-values > .stratum-footer-value:nth-child(3n) { border-right: 0; }
	.stratum-footer-main.stratum-footer-main { grid-template-columns: 1fr 1fr; }
	.stratum-footer-main > .stratum-footer-block { border-bottom: 1px solid rgba(255, 255, 255, .10); }
	.stratum-footer-main > .stratum-footer-block:nth-child(2n) { border-right: 0; }
}

@media (max-width: 620px) {
	.stratum-footer-values.stratum-footer-values,
	.stratum-footer-main.stratum-footer-main { grid-template-columns: 1fr; }
	.stratum-footer-values > .stratum-footer-value,
	.stratum-footer-main > .stratum-footer-block { border-right: 0; }
	.stratum-footer .stratum-footer-bottom { flex-wrap: wrap; gap: 10px 14px; }
}


/* ==========================================================================
   Hero
   ========================================================================== */

.stratum-hero.stratum-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: center;
	min-height: 690px;
	padding-block: 54px;
	background-color: var(--wp--preset--color--navy);
	border-bottom: 1px solid var(--stratum-line);
}
/* Dark left-to-right gradient over the photo, behind the text. */
.stratum-hero.stratum-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(2, 15, 23, .97) 0%, rgba(2, 15, 23, .88) 39%, rgba(2, 15, 23, .42) 67%, rgba(2, 15, 23, .14) 100%);
}
.stratum-hero .stratum-hero__copy { width: 100%; min-width: 0; }
.stratum-hero .stratum-hero__copy > * { max-width: 850px; }
.stratum-hero .stratum-hero__logo { width: min(610px, 82%); margin: 0; }
.stratum-hero .stratum-hero__logo img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .42));
}
.stratum-hero .stratum-values {
	font-size: clamp(.75rem, 1.2vw, 1.05rem);
	letter-spacing: .12em;
}
.stratum-hero .stratum-hero__title {
	max-width: 760px;
	margin: 14px 0 0;
	color: #e0e6e9;
	font-size: clamp(.8rem, 1.1vw, 1rem);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .2em;
}
.stratum-hero .stratum-hero__actions { gap: 15px; margin-top: 28px; }

@media (max-width: 780px) {
	.stratum-hero.stratum-hero { min-height: 560px; align-content: end; }
	.stratum-hero.stratum-hero::before {
		background: linear-gradient(180deg, rgba(2, 15, 23, .35) 0%, rgba(2, 15, 23, .85) 55%, rgba(2, 15, 23, .97) 100%);
	}
	.stratum-hero .stratum-hero__logo { width: min(520px, 94%); }
}

@media (max-width: 620px) {
	.stratum-hero .stratum-hero__actions { flex-direction: column; align-items: stretch; }
}


/* ==========================================================================
   Divisions
   ========================================================================== */

.stratum-divisions.stratum-divisions {
	padding-block: 20px 0;
	background: linear-gradient(180deg, #051923, #03131d);
}

.stratum-division-grid.stratum-division-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid rgba(45, 241, 93, .38);
}
.stratum-division-grid > .stratum-division-card {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--panel);
	border-right: 1px solid rgba(45, 241, 93, .34);
}
.stratum-division-grid > .stratum-division-card:last-child { border-right: 0; }

.stratum-division-card .stratum-division-card__photo { height: 250px; margin: 0; overflow: hidden; }
.stratum-division-card .stratum-division-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.stratum-division-card:hover .stratum-division-card__photo img { transform: scale(1.035); }

.stratum-division-card .stratum-division-card__body {
	position: relative;
	min-height: 350px;
	margin: 0;
	padding: 64px 22px 26px;
	text-align: center;
}
.stratum-division-card__body h3 { margin: 0; overflow-wrap: anywhere; }
.stratum-division-card__body .stratum-division-rule {
	width: 68%;
	height: 3px;
	margin: 14px auto 16px;
	border: 0;
	background: var(--wp--preset--color--green);
	opacity: 1;
}
.stratum-division-card__body .stratum-services {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #f3f6f7;
	font-size: .72rem;
	line-height: 1.58;
	text-transform: uppercase;
}
.stratum-division-card__body .stratum-services li { margin: 0; }

/* Hexagon icon frame: green edge, dark fill, white pictogram. */
.stratum-division-card__body .stratum-hex-icon {
	position: absolute;
	top: 0;
	left: 50%;
	display: grid;
	place-items: center;
	width: 112px;
	height: 112px;
	margin: 0;
	background: var(--wp--preset--color--green);
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
	transform: translate(-50%, -50%);
}
.stratum-division-card__body .stratum-hex-icon::before {
	content: "";
	position: absolute;
	inset: 4px;
	background: linear-gradient(145deg, #071a25, #020d13);
	clip-path: inherit;
}
.stratum-division-card__body .stratum-hex-icon img {
	position: relative;
	z-index: 1;
	width: 68px;
	height: 68px;
}

/* "Coming soon" badge: a block style Gary can apply to any paragraph. */
p.is-style-badge {
	display: inline-block;
	margin: 8px 0 0;
	padding: 5px 20px;
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--navy);
	font-size: .7rem;
	font-weight: 900;
	text-transform: uppercase;
	transform: skewX(-12deg);
}

@media (max-width: 1100px) {
	.stratum-division-grid.stratum-division-grid { grid-template-columns: 1fr 1fr; }
	.stratum-division-grid > .stratum-division-card { border-bottom: 1px solid rgba(45, 241, 93, .34); }
	.stratum-division-grid > .stratum-division-card:nth-child(2n) { border-right: 0; }
}

@media (max-width: 620px) {
	.stratum-division-grid.stratum-division-grid { grid-template-columns: 1fr; }
	.stratum-division-grid > .stratum-division-card { border-right: 0; }
	.stratum-division-card .stratum-division-card__photo { height: 230px; }
}


/* ==========================================================================
   About
   ========================================================================== */

.stratum-about.stratum-about {
	padding-block: 54px;
	background: var(--wp--preset--color--section);
	border-top: 1px solid rgba(255, 255, 255, .06);
}
.stratum-about__grid.stratum-about__grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	min-height: 410px;
	border: 1px solid var(--stratum-line-soft);
}
.stratum-about__grid > .stratum-about__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: 48px 46px;
	background: linear-gradient(135deg, #061b28, #03131d);
}
.stratum-about__copy h2 { margin: 8px 0 16px; }
.stratum-about__copy p:not(.stratum-kicker) {
	max-width: 600px;
	margin: 0;
	color: #d0dade;
	font-size: .86rem;
	line-height: 1.75;
}
.stratum-about__copy .wp-block-buttons { margin-top: 24px; }
.stratum-about__grid > .stratum-about__photo { margin: 0; }
.stratum-about__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Feature strip
   ========================================================================== */

.stratum-features.stratum-features {
	background: var(--wp--preset--color--navy);
	border-block: 1px solid rgba(45, 241, 93, .35);
}
.stratum-feature-grid.stratum-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stratum-feature-grid > .stratum-feature {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	min-height: 112px;
	margin: 0;
	padding: 18px;
	border-right: 1px solid var(--stratum-divider);
}
.stratum-feature-grid > .stratum-feature:last-child { border-right: 0; }
.stratum-feature > .wp-block-group { min-width: 0; margin: 0; }
.stratum-feature .stratum-feature__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0;
	border: 2px solid var(--wp--preset--color--green);
	border-radius: 50%;
}
.stratum-feature .stratum-feature__icon img { width: 30px; height: 30px; }
.stratum-feature p { margin: 0; }
.stratum-feature .stratum-feature__title {
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
}
.stratum-feature .stratum-feature__text {
	margin-top: 3px;
	color: var(--wp--preset--color--muted);
	font-size: .62rem;
}

/* ==========================================================================
   Projects
   ========================================================================== */

.stratum-projects.stratum-projects { padding-block: 56px; background: var(--wp--preset--color--section); }
.stratum-project-grid.stratum-project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.stratum-project-grid > .stratum-project {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 310px;
	margin: 0;
	padding: 20px 22px;
	overflow: hidden;
	background-color: var(--wp--preset--color--panel);
	border: 1px solid rgba(45, 241, 93, .22);
}
/* Darkens the bottom of the photo so the text stays readable. */
.stratum-project-grid > .stratum-project::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 32%, rgba(2, 15, 23, .95) 100%);
}
.stratum-project .stratum-project__label {
	margin: 0;
	color: var(--wp--preset--color--green);
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .11em;
	text-transform: uppercase;
}
.stratum-project .stratum-project__title {
	margin: 7px 0 0;
	font-size: 1.15rem;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

@media (max-width: 1100px) {
	.stratum-about__grid.stratum-about__grid { grid-template-columns: 1fr; }
	.stratum-about__grid > .stratum-about__photo { height: 350px; }
	.stratum-feature-grid.stratum-feature-grid { grid-template-columns: 1fr 1fr; }
	.stratum-feature-grid > .stratum-feature:nth-child(2n) { border-right: 0; }
	.stratum-feature-grid > .stratum-feature:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .10); }
}

@media (max-width: 780px) {
	.stratum-project-grid.stratum-project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.stratum-about__grid > .stratum-about__copy { padding: 34px 24px; }
	.stratum-feature-grid.stratum-feature-grid { grid-template-columns: 1fr; }
	.stratum-feature-grid > .stratum-feature { justify-content: flex-start; border-right: 0; }
}


/* ==========================================================================
   Header and navigation
   ========================================================================== */

.stratum-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: rgba(3, 19, 29, .975);
	border-bottom: 1px solid rgba(45, 241, 93, .30);
}
/* The blur sits on a pseudo-element. On the header itself, backdrop-filter would trap
   the full-screen mobile menu inside the 74px header. */
.stratum-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(12px);
}
.stratum-header .stratum-header__bar {
	min-height: var(--stratum-header-height);
	gap: 28px;
}
.stratum-header__bar .wp-block-site-logo { flex: 0 0 auto; }
.stratum-header__bar .wp-block-site-logo img {
	width: 210px;
	max-height: 58px;
	object-fit: contain;
	object-position: left center;
}
.stratum-header__bar .stratum-nav {
	flex: 1 1 auto;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .055em;
	text-transform: uppercase;
}
.stratum-nav .wp-block-navigation-item__content { position: relative; padding: 29px 0 23px; }
.stratum-nav .wp-block-navigation-item__content:hover,
.stratum-nav .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--green); }
.stratum-nav .wp-block-navigation-item__content:hover::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 16px;
	left: 0;
	height: 2px;
	background: var(--wp--preset--color--green);
}
.stratum-header__cta .wp-block-button__link { padding: 13px 20px; font-size: .72rem; }

@media (max-width: 1100px) {
	.stratum-header__bar .stratum-nav { font-size: .66rem; }
	.stratum-nav .wp-block-navigation__container { gap: 20px; }
}

/* Core collapses the menu below 600px. Eight links don't fit below 1024px, so collapse there too. */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.stratum-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.stratum-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

@media (max-width: 1023.98px) {
	.stratum-header__bar .stratum-nav { flex: 0 0 auto; order: 3; }
	.stratum-header__bar .stratum-header__cta { margin-left: auto; }
	.stratum-nav .wp-block-navigation__responsive-container-open {
		padding: 9px 13px;
		border: 1px solid var(--stratum-line);
	}
	.stratum-nav .is-menu-open .wp-block-navigation-item__content::after { display: none; }

	/* Open menu: links start at the page gutter, and the close button sits exactly where the
	   menu button was (vertically centred in the header bar, at the right-hand gutter). */
	.stratum-nav .wp-block-navigation__responsive-container.is-menu-open {
		--navigation-layout-justification-setting: flex-start;
		--navigation-layout-justify: flex-start;
		--navigation-layout-align: flex-start;
		padding: 0 var(--stratum-gutter) 32px;
	}
	.stratum-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: calc((var(--stratum-header-height) - 44px) / 2);
		right: 0;
		padding: 9px 13px;
		border: 1px solid var(--stratum-line);
	}
	.stratum-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		padding-top: calc(var(--stratum-header-height) + 8px);
	}
	/* The list repeats core's items-justified-center class, so restate it on the list itself. */
	.stratum-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		--navigation-layout-justification-setting: flex-start;
		--navigation-layout-align: flex-start;
		align-items: stretch;
		gap: 0;
		border-top: 1px solid var(--stratum-divider);
	}
	.stratum-nav .is-menu-open .wp-block-navigation-item {
		border-bottom: 1px solid var(--stratum-divider);
	}
	.stratum-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 16px 0;
		font-size: 1rem;
		letter-spacing: .08em;
	}
}

@media (max-width: 600px) {
	/* Two classes, to beat core's .wp-block-buttons.is-layout-flex { display: flex }. */
	.stratum-header__bar .stratum-header__cta { display: none; }
	.stratum-header__bar .wp-block-site-logo img { width: 190px; }
}