/**
 * Slabwork: element and layout rules.
 * Colour, type and spacing values come from theme.json presets and the
 * custom properties they generate — no literal hex, font stack or pixel
 * font size lives in this file.
 */

:root {
	--slabwork-shear: 24deg;
	--slabwork-crop: polygon( 0 28%, 100% 0, 100% 72%, 0 100% );
}

/* ----------------------------------------------------------------------
 * Accessibility utilities
 * ------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	z-index: 100000;
}

.skip-link:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	padding: var( --wp--preset--spacing--xs ) var( --wp--preset--spacing--s );
	position: fixed;
	top: 0;
	left: 0;
}

/* Every interactive element gets a visible focus outline; never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var( --wp--preset--color--accent-ink );
	outline-offset: 2px;
}

.is-style-slabwork-inverted a:focus-visible,
.is-style-slabwork-inverted button:focus-visible,
.slabwork-footer a:focus-visible,
.slabwork-footer button:focus-visible {
	outline-color: var( --wp--preset--color--accent-light );
}

/* ----------------------------------------------------------------------
 * Type scale: line-height, letter-spacing, weight per preset. Font size
 * itself is generated by WordPress from the fluid presets in theme.json.
 * ------------------------------------------------------------------- */

.has-display-xl-font-size {
	line-height: 1.02;
	letter-spacing: -1px;
	font-weight: 500;
}

.has-display-l-font-size {
	line-height: 1.05;
	letter-spacing: -0.5px;
	font-weight: 500;
}

.has-display-m-font-size {
	line-height: 1.3;
	font-weight: 400;
}

.has-heading-l-font-size {
	line-height: 1.3;
	font-weight: 500;
}

.has-heading-s-font-size {
	line-height: 1.25;
	font-weight: 500;
}

.has-label-font-size {
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: 5px;
	text-transform: uppercase;
}

.has-body-l-font-size {
	line-height: 1.5;
	font-weight: 400;
}

.has-body-font-size {
	line-height: 1.6;
	font-weight: 400;
}

.has-body-s-font-size {
	line-height: 1.55;
	font-weight: 400;
}

.has-caption-font-size {
	line-height: 1.5;
	font-weight: 400;
}

.has-mono-l-font-size {
	line-height: 1.4;
	letter-spacing: 2px;
	font-family: var( --wp--preset--font-family--mono );
}

.has-mono-s-font-size {
	line-height: 1.4;
	letter-spacing: 2px;
	font-family: var( --wp--preset--font-family--mono );
}

.has-figure-font-size {
	line-height: 1;
	font-weight: 500;
}

.has-credential-font-size {
	line-height: 1;
	font-weight: 500;
	letter-spacing: 5px;
}

@media ( min-width: 782px ) {
	.has-label-font-size {
		letter-spacing: 6px;
	}

	.has-mono-l-font-size {
		letter-spacing: 3px;
	}

	.has-credential-font-size {
		letter-spacing: 6px;
	}
}

/* ----------------------------------------------------------------------
 * Root padding: 24px mobile, 96px from 782px up. WordPress writes these
 * as custom properties from theme.json; this is the only breakpoint
 * override needed since useRootPaddingAwareAlignments is enabled.
 * ------------------------------------------------------------------- */

@media ( min-width: 782px ) {
	body {
		--wp--style--root--padding-right: 96px;
		--wp--style--root--padding-left: 96px;
	}
}

/* ----------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------- */

.slabwork-header {
	border-style: solid;
	border-width: 0 0 1.5px;
	min-height: 64px;
	align-items: center;
}

.slabwork-header .wp-block-site-logo img {
	width: 32px;
	height: auto;
}

.slabwork-header .wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
}

@media ( min-width: 782px ) {
	.slabwork-header {
		min-height: 88px;
	}

	.slabwork-header .wp-block-site-logo img {
		width: 40px;
	}
}

/* ----------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */

.slabwork-footer {
	align-items: center;
}

.slabwork-back-to-top .wp-block-button__link {
	min-height: 0;
	padding: 0;
}

/* ----------------------------------------------------------------------
 * Section rail: the twelve-column shape every content section repeats.
 * The counter is generated content, invisible to assistive technology;
 * no number is ever typed into the heading itself.
 * ------------------------------------------------------------------- */

main {
	counter-reset: slabwork-section;
}

.slabwork-section {
	counter-increment: slabwork-section;
	border-top: 1px solid var( --wp--preset--color--tertiary );
}

.slabwork-section-label::before {
	content: counter( slabwork-section, decimal-leading-zero ) "\00a0\00a0";
	color: var( --wp--preset--color--accent-ink );
}

.slabwork-rail {
	gap: var( --wp--preset--spacing--xs );
}

.is-style-slabwork-rule {
	width: 44px;
	height: 3px;
}

@media ( max-width: 781px ) {
	.slabwork-section[style*="grid-template-columns"],
	.slabwork-section {
		display: block;
	}

	.slabwork-rail {
		flex-direction: row;
		align-items: center;
		margin-block-end: var( --wp--preset--spacing--s );
	}
}

/* ----------------------------------------------------------------------
 * Experience row (P-02)
 * ------------------------------------------------------------------- */

.slabwork-experience-row {
	padding-block: var( --wp--preset--spacing--s );
	border-top: 1px solid var( --wp--preset--color--tertiary );
	align-items: baseline;
}

.slabwork-experience-list > .slabwork-experience-row:last-child {
	border-bottom: 1.5px solid var( --wp--preset--color--contrast );
}

.slabwork-current {
	border-top-width: 1.5px;
	border-top-color: var( --wp--preset--color--contrast );
	position: relative;
}

@media ( max-width: 781px ) {
	.slabwork-experience-row {
		display: flex;
		flex-direction: column;
		gap: var( --wp--preset--spacing--xs );
	}
}

/* ----------------------------------------------------------------------
 * Credential tiles (P-03)
 * ------------------------------------------------------------------- */

.slabwork-credential-tiles .wp-block-group {
	gap: var( --wp--preset--spacing--m );
}

.slabwork-credential-tile {
	gap: var( --wp--preset--spacing--xs );
	padding-block-start: var( --wp--preset--spacing--s );
	border-top: 1px solid var( --wp--custom--color--on-dark-hint );
}

@media ( max-width: 781px ) {
	.slabwork-credential-tiles [style*="grid-template-columns"] {
		display: flex;
		flex-direction: column;
	}
}

/* ----------------------------------------------------------------------
 * Hero (P-04)
 * ------------------------------------------------------------------- */

.slabwork-hero {
	align-items: center;
	gap: var( --wp--preset--spacing--l );
}

.slabwork-hero-figure {
	overflow: visible;
}

.slabwork-hero-figure svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

@media ( max-width: 781px ) {
	.slabwork-hero[style*="grid-template-columns"],
	.slabwork-hero {
		display: flex;
		flex-direction: column;
	}

	.slabwork-hero-figure {
		width: 100%;
		height: 280px;
		overflow: hidden;
	}
}

/* ----------------------------------------------------------------------
 * Contact band (P-05)
 * ------------------------------------------------------------------- */

.slabwork-contact-band-form {
	gap: var( --wp--preset--spacing--s );
}

@media ( max-width: 781px ) {
	.is-style-slabwork-inverted [style*="grid-template-columns"] {
		display: flex;
		flex-direction: column;
		gap: var( --wp--preset--spacing--l );
	}
}

/* ----------------------------------------------------------------------
 * Post index (P-06) and mixed-format list rows
 * ------------------------------------------------------------------- */

.slabwork-index {
	counter-reset: slabwork-row;
}

.slabwork-index-row {
	counter-increment: slabwork-row;
	display: grid;
	grid-template-columns: 40px 104px 1fr 120px;
	column-gap: var( --wp--preset--spacing--m );
	align-items: center;
	padding-block: 14px;
	border-top: 1px solid var( --wp--preset--color--tertiary );
}

.slabwork-index-row:first-child {
	border-top-width: 1.5px;
	border-top-color: var( --wp--preset--color--contrast );
}

.slabwork-index-row:last-child {
	border-bottom: 1.5px solid var( --wp--preset--color--contrast );
}

.slabwork-index-row::before {
	content: counter( slabwork-row, decimal-leading-zero );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-l );
	color: var( --wp--preset--color--secondary );
}

.slabwork-index-row:first-child::before {
	color: var( --wp--preset--color--accent-ink );
}

.slabwork-index-row.has-post-format-standard::after,
.slabwork-index-row.has-post-format-status::after,
.slabwork-index-row.has-post-format-link::after,
.slabwork-index-row.has-post-format-audio::after,
.slabwork-index-row.has-post-format-video::after,
.slabwork-index-row.has-post-format-gallery::after {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-s );
	color: var( --wp--preset--color--secondary );
	justify-self: end;
}

@media ( max-width: 781px ) {
	.slabwork-index-row {
		grid-template-columns: 24px 1fr;
		grid-template-areas: "position content";
	}
}

/* ----------------------------------------------------------------------
 * Post formats: single view
 * ------------------------------------------------------------------- */

.slabwork-format-aside-plate {
	position: relative;
}

.slabwork-format-aside-plate::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-inline-end: var( --wp--preset--spacing--xs );
	background: var( --wp--preset--color--primary );
	vertical-align: middle;
}

.slabwork-format-status {
	font-family: var( --wp--preset--font-family--mono );
}

.slabwork-format-video iframe,
.slabwork-format-video video {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}

.slabwork-format-audio figure,
.slabwork-format-audio .wp-block-audio {
	margin: 0;
}

.slabwork-format-chat table,
.slabwork-format-chat dl {
	width: 100%;
	border-collapse: collapse;
}

.slabwork-format-chat th,
.slabwork-format-chat dt {
	width: 96px;
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-s );
	text-align: left;
	vertical-align: top;
	padding: var( --wp--preset--spacing--xs );
}

.slabwork-format-chat td,
.slabwork-format-chat dd {
	padding: var( --wp--preset--spacing--xs );
	margin: 0;
}

.slabwork-format-chat tr:nth-child( even ) td {
	background: var( --wp--custom--color--tint-row );
}

/* ----------------------------------------------------------------------
 * Motion: the only animation in the theme, and only without a user
 * preference against it.
 * ------------------------------------------------------------------- */

@media ( prefers-reduced-motion: no-preference ) {
	a,
	button,
	.wp-block-button__link {
		transition: color 150ms ease, background-color 150ms ease;
	}
}

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