/*
Theme Name:        TRL TechRidge Labs
Template:          trl-block-theme-starter
Author:            TechRidge Labs LLC
Author URI:        https://techridgelabs.com
Description:       TechRidge Labs' own site: a thin child of the TRL Block Theme Starter. Lander from the 2026-10 Claude Design homepage.
Version:           0.1.0
Requires at least: 7.0
Requires PHP:      8.1
License:           GPL-2.0-or-later
Text Domain:       trl-techridgelabs
*/

/* ─────────────────────────────────────────────────────────────────────────
   Tokens
   Colours come from theme.json presets; these are the layout measures from
   the design (1200px wide, 720px measure). Change them here to restyle.
   ───────────────────────────────────────────────────────────────────────── */
:root {
	--trl-slate: var(--wp--preset--color--brand-primary);
	--trl-teal: var(--wp--preset--color--brand-secondary);
	--trl-gold: var(--wp--preset--color--brand-accent);
	--trl-terracotta: var(--wp--preset--color--accent-warm);
	--trl-evergreen: var(--wp--preset--color--accent-deep);
	--trl-ink: var(--wp--preset--color--ink);
	--trl-ink-muted: var(--wp--preset--color--ink-muted);
	--trl-line: var(--wp--preset--color--line);
	--trl-paper: var(--wp--preset--color--surface-bright);
	--trl-mist: var(--wp--preset--color--mist);
	--trl-mist-deep: var(--wp--preset--color--mist-deep);
	--trl-on-slate-muted: var(--wp--preset--color--on-slate-muted);
	--trl-on-slate-line: rgba(255, 255, 255, 0.22);
	--trl-ridge-back: #DAE3EE;
	--trl-ridge-mid: #C6D4E4;
	--trl-footer-text: #C7CCD1;
	--trl-footer-dim: #8F979E;
	--trl-footer-line: #3A3D3C;

	--trl-display: var(--wp--preset--font-family--outfit);
	--trl-mono: var(--wp--preset--font-family--system-mono);

	--trl-fs-large: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
	--trl-fs-xl: clamp(1.4rem, 1.25rem + 0.5vw, 1.6rem);
	--trl-fs-xxl: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
	--trl-fs-huge: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);

	--trl-measure: 720px;
	--trl-gutter: clamp(16px, 4vw, 40px);
	--trl-section: clamp(64px, 8vw, 104px);
	--trl-radius: 6px;
	--trl-header-h: 68px;
}

html {
	scroll-padding-top: calc(var(--trl-header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

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

h1, h2, h3 {
	text-wrap: balance;
}

a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

:focus-visible {
	outline: 2px solid var(--trl-teal);
	outline-offset: 3px;
	border-radius: 2px;
}

/* The page is a stack of full-bleed bands: no gaps between template parts or sections. */
.wp-site-blocks > * + *,
.trl-main > * + *,
.wp-block-post-content > .trl-section {
	margin-block-start: 0;
}

/* Flow-layout groups used as CSS grids: drop WordPress's flow margins inside them. */
body .trl-grid > *,
body .trl-promises > *,
body .trl-contact__grid > *,
body .trl-footer__grid > *,
body .trl-footer__base > *,
body .trl-footer__links > li {
	margin-block: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Shared pieces
   ───────────────────────────────────────────────────────────────────────── */
.trl-section {
	padding-block: var(--trl-section);
	padding-inline: var(--trl-gutter);
}

/* Eyebrow: the starter's is-style-trl-eyebrow, in the design's mono + gold dot. */
p.is-style-trl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	font-family: var(--trl-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--trl-teal);
}

p.is-style-trl-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--trl-gold);
	flex: none;
}

.trl-section-head {
	display: grid;
	gap: 1rem;
	max-width: var(--trl-measure);
	margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

body .trl-section-head > * {
	margin-block: 0;
}

.trl-section-head h2,
.trl-contact__info h2 {
	font-size: var(--trl-fs-xxl);
	line-height: 1.15;
}

.trl-section-head p:not(.is-style-trl-eyebrow),
.trl-lede {
	font-size: var(--trl-fs-large);
	color: var(--trl-ink-muted);
	max-width: 58ch;
}

/* Buttons: match the design's 2px-bordered buttons (primary + outline). */
.wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.4rem;
	border: 2px solid var(--trl-slate);
	line-height: 1;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus-visible {
	border-color: var(--trl-teal);
}

.wp-block-button.is-style-trl-outline .wp-block-button__link:hover,
.wp-block-button.is-style-trl-outline .wp-block-button__link:focus-visible {
	background: var(--trl-paper);
	color: var(--trl-slate);
	border-color: var(--trl-slate);
}

.trl-btn-small .wp-block-button__link.wp-element-button {
	padding: 0.6rem 1rem;
	font-size: 0.95rem;
	white-space: nowrap;
}

.trl-header__cta {
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Header + lockup
   ───────────────────────────────────────────────────────────────────────── */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 10;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.trl-header {
	padding-inline: var(--trl-gutter);
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--trl-line);
}

.trl-header__bar {
	min-height: var(--trl-header-h);
	gap: 1.5rem;
}

.trl-header__nav {
	gap: clamp(1rem, 2.4vw, 2rem);
}

.trl-nav {
	gap: clamp(1rem, 2.4vw, 2rem);
	font-family: var(--trl-display);
	font-size: 0.98rem;
}

.trl-nav a {
	color: var(--trl-ink);
	text-decoration: none;
}

.trl-nav a:hover,
.trl-nav a:focus-visible {
	color: var(--trl-teal);
}

.trl-lockup {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--trl-ink);
	text-decoration: none;
}

.trl-lockup:hover {
	color: inherit;
}

.trl-lockup img {
	display: block;
	width: 58px;
	height: auto;
}

.trl-lockup span {
	font-family: var(--trl-display);
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.trl-lockup b {
	font-weight: 600;
}

.trl-lockup i {
	font-style: normal;
	font-weight: 400;
	margin-left: 0.25em;
	letter-spacing: 0.14em;
}

/* ─────────────────────────────────────────────────────────────────────────
   Hero: ridge landscape with the traced TRL mark sitting on it
   ───────────────────────────────────────────────────────────────────────── */
.trl-hero {
	--mw: clamp(320px, 38vw, 580px);
	position: relative;
	overflow: hidden;
	background: var(--trl-mist);
	padding-top: clamp(56px, 8vw, 104px);
	padding-bottom: clamp(150px, 15vw, 210px);
}

.trl-hero__copy {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 1.5rem;
}

body .trl-hero__copy > * {
	margin-block: 0;
	max-width: 40rem;
}

.trl-hero__title {
	font-size: var(--trl-fs-huge);
	letter-spacing: -0.025em;
	line-height: 1.04;
}

.trl-hero__title em {
	font-style: normal;
	color: var(--trl-slate);
}

.trl-hero .trl-lede {
	max-width: 52ch;
}

.trl-hero__actions {
	padding-top: 0.5rem;
	gap: 0.75rem;
}

.trl-hero__where {
	font-family: var(--trl-display);
	font-size: 0.95rem;
	color: var(--trl-ink-muted);
}

.trl-hero__ranges {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 0;
	width: 100%;
	height: clamp(110px, 13vw, 190px);
}

.trl-hero__ranges .far {
	fill: var(--trl-ridge-back);
}

.trl-hero__ranges .near {
	fill: var(--trl-ridge-mid);
}

body .trl-hero > .trl-hero__mark {
	position: absolute;
	z-index: 1;
	bottom: 0;
	/* right edge of the 1200px column (or the gutter on narrower screens) */
	left: calc(50% + min(600px, 50% - var(--trl-gutter)) - var(--mw));
	width: var(--mw);
	max-width: none;
	height: auto;
	margin: 0 !important;
	overflow: visible;
}

.trl-hero__mark .fill {
	fill: var(--trl-mist);
}

.trl-hero__mark .ink {
	fill: var(--trl-slate);
}

.trl-hero__mark .pulse {
	fill: none;
	stroke: var(--trl-teal);
	stroke-width: 2;
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
}

.trl-hero__mark .pulse--gold {
	stroke: var(--trl-gold);
}

@media (prefers-reduced-motion: no-preference) {
	.trl-hero__mark .pulse {
		animation: trl-pulse 3.6s ease-out infinite;
	}

	@keyframes trl-pulse {
		0% { transform: scale(1); opacity: 0.75; }
		70%, 100% { transform: scale(2.8); opacity: 0; }
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   How we help
   ───────────────────────────────────────────────────────────────────────── */
.trl-help {
	padding-top: clamp(56px, 7vw, 88px);
}

.trl-areas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
}

.trl-area {
	display: grid;
	gap: 0.8rem;
	align-content: start;
	padding-top: 1.25rem;
	border-top: 2px solid var(--trl-ink);
	min-width: 0;
}

body .trl-area > * {
	margin-block: 0;
}

.trl-area h3 {
	font-size: var(--trl-fs-xl);
}

.trl-area p {
	max-width: 44ch;
}

.trl-heard {
	margin-top: 0.35rem;
	padding-left: 1rem;
	border-left: 2px solid var(--trl-terracotta);
	font-style: italic;
	font-size: 0.98rem;
	color: var(--trl-ink-muted);
}

.trl-help__note {
	margin-top: clamp(2.25rem, 4vw, 3rem);
	font-family: var(--trl-display);
	font-size: 1.05rem;
}

.trl-help__note a {
	font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────
   How it works
   ───────────────────────────────────────────────────────────────────────── */
.trl-process {
	border-top: 1px solid var(--trl-line);
}

.trl-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 4vw, 3rem);
}

.trl-steps::before,
.trl-steps::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 0;
	top: 17px;
	height: 2px;
	background: var(--trl-line);
}

/* The line fills teal as the steps scroll into view (where the browser supports
   scroll-driven animation; elsewhere it stays the quiet grey line). */
.trl-steps::after {
	background: var(--trl-teal);
	transform-origin: left center;
	transform: scaleX(0);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.trl-steps::after {
			animation: trl-fill linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 55%;
		}
	}
}

@keyframes trl-fill {
	to { transform: scaleX(1); }
}

.trl-step {
	position: relative;
	display: grid;
	gap: 0.6rem;
	align-content: start;
	min-width: 0;
}

body .trl-step > * {
	margin-block: 0;
}

.trl-step h3 {
	font-size: 1.25rem;
}

.trl-step p:not(.trl-step__num) {
	color: var(--trl-ink-muted);
	max-width: 40ch;
}

.trl-step__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: 0.5rem !important;
	border: 2px solid var(--trl-teal);
	border-radius: 50%;
	background: var(--trl-paper);
	color: var(--trl-teal);
	font-family: var(--trl-mono);
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   The website standard (slate band)
   ───────────────────────────────────────────────────────────────────────── */
.trl-standard {
	background: var(--trl-slate);
	color: var(--trl-paper);
}

.trl-standard p.is-style-trl-eyebrow {
	color: var(--trl-on-slate-muted);
}

.trl-standard h2,
.trl-standard h3 {
	color: var(--trl-paper);
}

.trl-standard .trl-section-head p:not(.is-style-trl-eyebrow) {
	color: var(--trl-on-slate-muted);
}

.trl-promises {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--trl-on-slate-line);
}

.trl-promise {
	display: grid;
	gap: 0.45rem;
	align-content: start;
	min-width: 0;
	padding: 1.5rem 1.5rem 1.6rem 0;
	border-bottom: 1px solid var(--trl-on-slate-line);
}

body .trl-promise > * {
	margin-block: 0;
}

.trl-promise:not(:nth-child(3n+1)) {
	padding-left: 1.5rem;
	border-left: 1px solid var(--trl-on-slate-line);
}

.trl-promise h3 {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	font-size: 1.2rem;
}

.trl-promise h3::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--trl-gold);
	transform: translateY(-2px);
}

.trl-promise p {
	color: var(--trl-on-slate-muted);
	max-width: 36ch;
}

/* ─────────────────────────────────────────────────────────────────────────
   From the lab
   ───────────────────────────────────────────────────────────────────────── */
.trl-lab {
	background: var(--trl-mist);
}

.trl-products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.trl-product,
.trl-card {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	min-width: 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--trl-paper);
	border: 1px solid var(--trl-mist-deep);
	border-radius: 10px;
}

body .trl-product > *,
body .trl-card > * {
	margin-block: 0;
}

.trl-product__top {
	gap: 1rem;
}

body .trl-product__top > * {
	margin-block: 0;
}

.trl-product__type {
	font-family: var(--trl-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--trl-ink-muted);
}

.trl-product h3,
.trl-card h3 {
	font-size: var(--trl-fs-xl);
}

.trl-product p {
	max-width: 50ch;
}

.trl-product__foot {
	padding-top: 0.25rem;
	font-family: var(--trl-display);
	font-size: 0.95rem;
	color: var(--trl-ink-muted);
}

.trl-product__foot a {
	font-weight: 500;
}

.trl-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	font-family: var(--trl-mono);
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
}

.trl-chip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.trl-chip--go {
	color: var(--trl-evergreen);
	background: #EDF5F0;
}

.trl-chip--class {
	color: var(--trl-slate);
	background: var(--trl-mist);
}

/* ─────────────────────────────────────────────────────────────────────────
   Contact
   ───────────────────────────────────────────────────────────────────────── */
.trl-contact {
	border-top: 1px solid var(--trl-line);
}

.trl-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}

.trl-contact__info {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}

body .trl-contact__info > * {
	margin-block: 0;
}

.trl-facts {
	display: grid;
	gap: 1rem;
	margin: 0.5rem 0 0;
}

.trl-facts div {
	display: grid;
	gap: 0.15rem;
}

.trl-facts dt {
	font-family: var(--trl-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--trl-ink-muted);
}

.trl-facts dd {
	margin: 0;
	font-family: var(--trl-display);
	font-size: 1.1rem;
}

.trl-card {
	border-color: var(--trl-line);
}

.trl-checklist {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trl-checklist li {
	position: relative;
	padding-left: 1.4rem;
}

.trl-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--trl-gold);
}

.trl-card .wp-block-buttons {
	padding-top: 0.5rem;
}

.trl-card__note {
	font-family: var(--trl-display);
	font-size: 0.92rem;
	color: var(--trl-ink-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────────────────── */
.trl-footer {
	padding: clamp(48px, 6vw, 72px) var(--trl-gutter) 32px;
	background: var(--trl-ink);
	color: var(--trl-footer-text);
}

.trl-footer a {
	color: var(--trl-mist);
	text-decoration: none;
}

.trl-footer a:hover,
.trl-footer a:focus-visible {
	color: var(--trl-paper);
	text-decoration: underline;
}

.trl-footer .trl-lockup {
	color: var(--trl-paper);
}

.trl-footer .trl-lockup:hover {
	text-decoration: none;
}

.trl-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

.trl-footer__brand {
	display: grid;
	gap: 1rem;
	align-content: start;
}

body .trl-footer__brand > *,
body .trl-footer__col > * {
	margin-block: 0;
}

.trl-footer__brand p {
	max-width: 38ch;
	font-size: 0.98rem;
}

h2.trl-footer__heading {
	margin-bottom: 0.9rem !important;
	font-family: var(--trl-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--trl-footer-dim);
}

.trl-footer__links {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--trl-display);
}

.trl-footer__base {
	margin-top: 3rem !important;
	padding-top: 1.25rem;
	border-top: 1px solid var(--trl-footer-line);
	gap: 0.5rem 2rem;
	font-family: var(--trl-display);
	font-size: 0.88rem;
	color: var(--trl-footer-dim);
}

/* ─────────────────────────────────────────────────────────────────────────
   Responsive (breakpoints from the design)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.trl-hero {
		padding-bottom: 0;
	}

	body .trl-hero > .trl-hero__mark {
		position: relative;
		left: auto;
		display: block;
		width: min(100%, 440px);
		margin: 2.5rem auto 0 !important;
	}

	.trl-areas,
	.trl-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.trl-areas {
		gap: 2.25rem;
	}

	.trl-nav {
		display: none;
	}

	.trl-promises {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.trl-promise:not(:nth-child(3n+1)) {
		padding-left: 0;
		border-left: 0;
	}

	.trl-promise:nth-child(even) {
		padding-left: 1.5rem;
		border-left: 1px solid var(--trl-on-slate-line);
	}

	.trl-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.trl-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 680px) {
	.trl-steps,
	.trl-products,
	.trl-promises {
		grid-template-columns: minmax(0, 1fr);
	}

	.trl-steps::before,
	.trl-steps::after {
		left: 17px;
		right: auto;
		top: 18px;
		bottom: 18px;
		width: 2px;
		height: auto;
	}

	.trl-steps::after {
		transform-origin: center top;
		transform: scaleY(0);
	}

	@keyframes trl-fill {
		to { transform: scaleY(1); }
	}

	.trl-step {
		grid-template-columns: 36px minmax(0, 1fr);
		column-gap: 1rem;
	}

	.trl-step__num {
		grid-row: span 2;
		margin: 0 !important;
	}

	.trl-promise:nth-child(even) {
		padding-left: 0;
		border-left: 0;
	}

	.trl-lockup span {
		font-size: 0.95rem;
	}

	.trl-lockup img {
		width: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}