/* ============================================================
   SpenceZeta Landing - component styles
   Mobile first: base rules target the smallest screen, then
   min-width queries scale type, spacing and artwork upward.
   ============================================================ */

/* ------------------------------------------------------------
   1. Base
   ------------------------------------------------------------ */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(a):focus-visible,
:where(button):focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

.wp-block-site-logo img {
	max-width: 100%;
	height: auto;
}

/* Sticky footer shell: the template root fills the viewport so the licence
   bar sits at the bottom on short pages as well as on the hero. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > .sz-hero-canvas {
	flex: 1 1 auto;
}

/* ------------------------------------------------------------
   2. Hero canvas - the layered blueprint backdrop
      ::before  the interior linework artwork
      ::after   radial white scrim that lifts the content

   The artwork carries its own 96px blueprint grid, so the theme
   does not draw one. It is sized with `cover`, which behaves
   differently by shape and is what we want in both cases: on a
   phone the whole 2:3 frame fits the height and bleeds off the
   sides, on wider screens it is driven by width and the bottom
   anchor keeps the room in view while the empty top is cropped.
   ------------------------------------------------------------ */

.sz-hero-canvas {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
	background-color: var(--neutral-0);
	font-family: var(--font-primary);
}

.sz-hero-canvas::before,
.sz-hero-canvas::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.sz-hero-canvas::before {
	z-index: 0;
	background-color: var(--neutral-0);
	/* The artwork is black line art on white paper. A navy slab is laid over it
	   and blended with `lighten`, which recolours the drawing to the brand navy
	   without touching the paper: lighten picks the brighter channel, so
	   max(navy, black) is navy and max(navy, white) is white. The opacity below
	   then drops the whole drawing back to a blueprint weight. */
	background-image: linear-gradient(var(--navy-600), var(--navy-600)), var(--sz-hero-art);
	background-size: 100% 100%, 185% auto;
	background-position: center, center bottom;
	background-repeat: no-repeat, no-repeat;
	background-blend-mode: lighten, normal;
	opacity: 0.34;
}

/* The vignette that keeps the logo and copy legible. It clears a pocket through
   the middle of the canvas and falls to nothing well before the edges, so the
   drawing still reads around the outside on every screen size. */
.sz-hero-canvas::after {
	z-index: 1;
	background: radial-gradient(
		108% 56% at 50% 42%,
		rgba(255, 255, 255, 0.97) 18%,
		rgba(255, 255, 255, 0.82) 38%,
		rgba(255, 255, 255, 0.4) 60%,
		rgba(255, 255, 255, 0) 80%
	);
}

.sz-hero-canvas > * {
	position: relative;
	z-index: 2;
}

/* ------------------------------------------------------------
   3. Header - client login
   ------------------------------------------------------------ */

.sz-hero-header {
	display: flex;
	justify-content: flex-end;
	padding: 12px 12px 0;
}

.wp-block-button.is-style-sz-login > .wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	background-color: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--navy-600);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--tracking-widest);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color var(--duration-normal) var(--ease-out),
		border-color var(--duration-normal) var(--ease-out),
		color var(--duration-normal) var(--ease-out);
}

.wp-block-button.is-style-sz-login > .wp-block-button__link.wp-element-button::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: var(--sz-icon-login);
	mask-image: var(--sz-icon-login);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wp-block-button.is-style-sz-login > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-sz-login > .wp-block-button__link.wp-element-button:focus {
	background-color: var(--navy-50);
	border-color: var(--navy-200);
	color: var(--navy-700);
}

/* ------------------------------------------------------------
   4. Main - centred hero stack
   ------------------------------------------------------------ */

.sz-hero-main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding: 28px 20px 40px;
	text-align: center;
}

.sz-hero-main > * {
	margin-block: 0;
}

/* Eyebrow pill */
.is-style-sz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-full);
	background-color: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--navy-600);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Logo */
.sz-hero-logo {
	width: 100%;
	max-width: 620px;
}

.sz-hero-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Lede paragraph.
   One step darker than the design's neutral-600. The artwork now reads through
   the scrim, and over its darkest lines neutral-600 lands at 3.1:1, under the
   4.5:1 AA floor; neutral-700 clears it at 5.2:1 without changing the muted
   character of the text. */
.sz-hero-lede {
	max-width: 30ch;
	margin: 0 auto;
	color: var(--neutral-700);
	font-size: 16px;
	line-height: 1.55;
	text-wrap: pretty;
}

/* Call to action stack */
.sz-hero-cta.wp-block-buttons {
	width: 100%;
	max-width: 320px;
	margin-top: 2px;
	gap: 12px;
}

.sz-hero-cta .wp-block-button {
	width: 100%;
}

.sz-hero-cta .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* Outline CTA - navy on transparent, per the design system Button */
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	padding: 13px 32px;
	border: 2px solid var(--navy-600);
	background-color: transparent;
	background-image: none;
	color: var(--navy-600);
}

.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:focus {
	border-color: var(--navy-700);
	background-color: var(--navy-50);
	color: var(--navy-700);
}

/* Filled CTA hover glow, matching the design system */
.wp-block-button:not(.is-style-outline):not(.is-style-sz-login) > .wp-block-button__link.wp-element-button {
	transition:
		background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-normal) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.wp-block-button:not(.is-style-outline):not(.is-style-sz-login) > .wp-block-button__link.wp-element-button:hover {
	box-shadow: var(--shadow-accent);
}

.wp-block-button > .wp-block-button__link.wp-element-button:active {
	transform: scale(0.97);
}

/* ------------------------------------------------------------
   5. Service chips
   ------------------------------------------------------------ */

.sz-chips.wp-block-group {
	gap: 8px 10px;
	margin-top: 4px;
}

.is-style-sz-chip {
	margin: 0;
	padding: 6px 12px;
	border-radius: var(--radius-chip);
	background-color: var(--navy-50);
	color: var(--navy-600);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* ------------------------------------------------------------
   6. Footer - licence bar
   ------------------------------------------------------------ */

.sz-hero-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 20px;
	background-color: var(--navy-600);
	color: rgba(255, 255, 255, 0.72);
	text-align: center;
}

.sz-license.wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
}

.sz-license > p {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: var(--tracking-widest);
	line-height: 1.4;
	text-transform: uppercase;
}

.sz-license > p + p::before {
	content: "/";
	display: inline-block;
	margin-right: 12px;
	color: rgba(255, 255, 255, 0.28);
	font-weight: 400;
}

.is-style-sz-license-accent {
	color: var(--orange-400);
}

/* ------------------------------------------------------------
   7. Fallback content styles (pages, posts, search, 404)
   ------------------------------------------------------------ */

.sz-page {
	padding: 48px 20px 64px;
}

.sz-page :where(h1, h2, h3) {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.sz-page :where(p, ul, ol) {
	margin-bottom: 1.1em;
}

/* ------------------------------------------------------------
   8. Breakpoints
   ------------------------------------------------------------ */

@media (min-width: 600px) {
	.sz-hero-header {
		padding: 16px 16px 0;
	}

	.wp-block-button.is-style-sz-login > .wp-block-button__link.wp-element-button {
		padding: 9px 16px;
		font-size: 11px;
	}

	.sz-hero-main {
		gap: 28px;
		padding: 40px 24px 48px;
	}

	.is-style-sz-eyebrow {
		padding: 7px 16px;
		font-size: 11px;
	}

	.sz-hero-lede {
		font-size: 17px;
	}

	.is-style-sz-chip {
		padding: 6px 14px;
		font-size: 11px;
	}

	.sz-chips.wp-block-group {
		margin-top: 8px;
	}

	.sz-hero-cta.wp-block-buttons {
		margin-top: 4px;
	}

	.sz-hero-footer {
		gap: 10px;
		padding: 22px 24px;
	}

	.sz-license > p {
		font-size: 11px;
	}

	.sz-license.wp-block-group {
		gap: 6px 14px;
	}

	.sz-license > p + p::before {
		margin-right: 14px;
	}

	.sz-page {
		padding: 64px 32px 80px;
	}

	.sz-hero-canvas::before {
		background-size: 100% 100%, 140% auto;
	}
}

/* The artwork is a 16:9 room. On a phone it has to be scaled past the viewport
   width and anchored low, or `cover` would crop it to a couple of chair legs;
   from tablet up the shapes are close enough that `cover` frames the whole
   room. */
@media (min-width: 1024px) {
	.sz-hero-canvas::before {
		background-size: 100% 100%, cover;
	}
}

/* ------------------------------------------------------------
   9. Motion and print
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.wp-block-button > .wp-block-button__link.wp-element-button:active {
		transform: none;
	}
}

@media print {
	.sz-hero-canvas::before,
	.sz-hero-canvas::after {
		display: none;
	}

	.sz-hero-canvas {
		min-height: 0;
	}
}