/*
Theme Name: Tangled Wire
Theme URI: https://tangledwiredigital.co.uk
Author: Tangled Wire Digital
Author URI: https://tangledwiredigital.co.uk
Description: A focused block theme for Tangled Wire Digital.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.2.0
Text Domain: tangled-wire
*/

:root {
	--twd-ink: #232a27;
	--twd-paper: #f7f5f0;
	--twd-thread: #a54838;
	--twd-muted: #616a66;
	--twd-mist: #ebe8e1;
	--twd-rule: rgba(35, 42, 39, 0.16);
}

html { scroll-behavior: smooth; }
body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(165, 72, 56, 0.22); color: var(--twd-ink); }
a { text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--twd-thread); outline-offset: 4px; }
.wp-site-blocks { overflow: clip; }

.twd-site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--twd-rule); }
.twd-header-inner { min-height: 5rem; }
.twd-wordmark { display: flex; flex: 0 0 auto; align-items: center; gap: 0.75rem; white-space: nowrap; letter-spacing: -0.035em; line-height: 1; }
.twd-wordmark a { text-decoration: none; }
.twd-wordmark::after { width: 2rem; height: 1px; background: var(--twd-thread); content: ""; }
.twd-nav { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.045em; }
.twd-nav .wp-block-navigation-item__content { text-decoration: none; }
.twd-nav .wp-block-navigation-item__content:hover { color: var(--twd-thread); }
.twd-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.twd-nav .is-menu-open .wp-block-navigation__container { gap: 1.25rem; font-size: 1.35rem; }

.wp-block-button__link { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.wp-block-button__link:hover { border-color: var(--twd-thread); background: var(--twd-thread); color: #fff; }
.is-style-outline > .wp-block-button__link { border-color: var(--twd-rule); }
.is-style-outline > .wp-block-button__link:hover { border-color: var(--twd-ink); background: var(--twd-ink); color: var(--twd-paper); }

.twd-home { position: relative; isolation: isolate; }
.twd-home::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("assets/wire.svg");
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	opacity: 0.5;
	pointer-events: none;
}
.twd-home > .wp-block-post-content { position: relative; z-index: 1; }

.twd-hero {
	min-height: min(700px, calc(100svh - 5rem));
	display: grid;
	align-items: center;
}
.twd-hero > .wp-block-group { width: 100%; box-sizing: border-box; }
.twd-kicker { display: flex; align-items: center; gap: 0.75rem; color: var(--twd-thread); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.twd-kicker::before { width: 2rem; height: 1px; flex: 0 0 auto; background: currentColor; content: ""; }
.twd-hero-title { max-width: 10.5ch; margin-top: clamp(1.5rem, 4vw, 3rem); text-wrap: balance; }
.twd-hero-copy { max-width: 34rem; color: var(--twd-muted); }
.twd-hero .wp-block-buttons { gap: 0.65rem; }

.twd-proof-strip { border-block: 1px solid var(--twd-rule); background: rgba(235, 232, 225, 0.62); }
.twd-proof-strip p { max-width: 1200px; margin-inline: auto; letter-spacing: 0.01em; }

.twd-services,
.twd-route,
.twd-personal { border-bottom: 1px solid var(--twd-rule); }
.twd-section-title { max-width: 14ch; text-wrap: balance; }
.twd-services .has-lead-font-size { max-width: 46rem; color: var(--twd-muted); }
.twd-service-list { border-top: 1px solid var(--twd-rule); }
.twd-service-row {
	display: grid;
	grid-template-columns: minmax(3.5rem, 0.35fr) minmax(9rem, 0.9fr) minmax(16rem, 1.65fr);
	gap: clamp(1rem, 4vw, 4.5rem);
	align-items: baseline;
	padding-block: clamp(1.75rem, 3.5vw, 3.25rem);
	border-bottom: 1px solid var(--twd-rule);
}
.twd-service-number { color: var(--twd-thread); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; }
.twd-service-row h3,
.twd-service-row p { margin-block: 0; }
.twd-service-row p { max-width: 35rem; color: var(--twd-muted); }

.twd-route { color: var(--twd-ink); }
.twd-route > .wp-block-group { max-width: 1200px; }
.twd-route-step {
	display: grid;
	grid-template-columns: minmax(10rem, 0.8fr) minmax(16rem, 1.3fr);
	gap: clamp(2rem, 8vw, 8rem);
	align-items: start;
	padding-block: clamp(1.8rem, 4vw, 3rem);
	border-top: 1px solid var(--twd-rule);
}
.twd-route-step h3,
.twd-route-step p { margin-block: 0; }
.twd-route-step p { max-width: 32rem; color: var(--twd-muted); }

.twd-personal > .wp-block-group { max-width: 1200px; }
.twd-statement { max-width: 18ch; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }

.twd-contact { border-bottom: 1px solid var(--twd-rule); background-color: rgba(235, 232, 225, 0.88) !important; }
.twd-contact h2 { max-width: 14ch; text-wrap: balance; }
.twd-contact .has-lead-font-size { max-width: 42rem; color: var(--twd-muted); }

.twd-site-footer { border-top: 0; }
.twd-site-footer .twd-wordmark::after { background: var(--twd-thread); }
.twd-footer-meta { padding-top: 1.4rem; border-top: 1px solid rgba(247, 245, 240, 0.18); color: rgba(247, 245, 240, 0.72); }

@supports (animation-timeline: scroll()) {
	.twd-home::before {
		animation: twd-wire-reveal linear both;
		animation-range: 0% 88%;
		animation-timeline: scroll(root);
	}

	@keyframes twd-wire-reveal {
		from { clip-path: inset(0 0 82% 0); }
		to { clip-path: inset(0 0 0 0); }
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.wp-block-button__link { transition: none; }
	.twd-home::before { animation: none; clip-path: none; }
}

@media (max-width: 900px) {
	.twd-header-inner .twd-header-cta { display: none; }
	.twd-wordmark.has-lead-font-size { font-size: 1.05rem !important; }
	.twd-hero-title { max-width: 11ch; }
}

@media (max-width: 780px) {
	.twd-header-inner { min-height: 4.5rem; }
	.twd-wordmark::after { width: 1.15rem; }
	.twd-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	.twd-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
	.twd-home::before { background-image: url("assets/wire-mobile.svg"); opacity: 0.42; }
	.twd-hero { min-height: min(620px, calc(100svh - 4.5rem)); }
	.twd-hero-title { font-size: clamp(2.4rem, 8vw, 3.15rem) !important; }
	.twd-service-row { grid-template-columns: 2.25rem 1fr; gap: 0.65rem 1rem; }
	.twd-service-row p { grid-column: 2; }
	.twd-route-step { grid-template-columns: 1fr; gap: 0.55rem; padding-left: 2.2rem; }
	.twd-personal > .wp-block-group { max-width: none; }
}

@media (max-width: 480px) {
	.twd-wordmark.has-lead-font-size { font-size: 1rem !important; }
	.twd-wordmark::after { display: none; }
	.twd-hero-title { font-size: clamp(2.4rem, 12vw, 3rem) !important; }
	.twd-hero .wp-block-buttons { align-items: stretch; flex-direction: column; }
	.twd-hero .wp-block-button,
	.twd-hero .wp-block-button__link { width: 100%; }
}