/*
Theme Name:   WD
Theme URI:    https://williamdoornekamp.com
Author:       William Doornekamp
Description:  Personal site theme for williamdoornekamp.com. Child theme of Twenty Twenty-Five: minimal, technical, with motion and HUD image bands.
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License:      GNU General Public License v2 or later
Text Domain:  wd
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--accent); color: #fff; }

.wd-mono,
.wd-label {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.wd-label { font-size: 12px; color: var(--wp--preset--color--muted); }
.wd-label .wd-num,
.wd-num { color: var(--wp--preset--color--accent); }
.has-ink-background-color .wd-label { color: #A3A19B; }
.has-ink-background-color .wd-num,
.has-ink-background-color .wd-accent { color: var(--wp--preset--color--accent-light); }
.wd-accent { color: var(--wp--preset--color--accent); }

/* ---------- Header ---------- */
.wd-header { border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base); }
.wd-header-inner,
.wd-footer-inner {
	max-width: 1360px; margin: 0 auto; padding: 20px 40px; box-sizing: border-box;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.wd-header-right { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.wd-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.wd-footer-inner { padding-top: 28px; padding-bottom: 28px; }
.wd-footer-inner p { margin: 0; }
.wd-footer-links { display: flex; gap: 24px; }
@media (max-width: 781px) {
	.wd-header-inner, .wd-footer-inner { padding-left: 20px; padding-right: 20px; }
	.wd-nav ul, .wd-header-right { gap: 18px; }
}
.wd-logo-mark {
	width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono); font-size: 13px; font-weight: 500;
}
.wd-brand a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; font-weight: 700; }
.wd-nav { font-family: var(--wp--preset--font-family--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.wd-nav a { text-decoration: none; }
.wd-nav a:hover { color: var(--wp--preset--color--accent); }
.wd-nav .wd-nav-cta a { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); padding: 12px 18px; }
.wd-nav .wd-nav-cta a:hover { background: var(--wp--preset--color--accent); color: #fff; }

.wd-lang { display: inline-flex; gap: 6px; align-items: center; font-family: var(--wp--preset--font-family--mono); font-size: 13px; }
.wd-lang a { text-decoration: none; color: var(--wp--preset--color--muted); padding: 6px 2px; }
.wd-lang a[aria-current="true"] { color: var(--wp--preset--color--ink); border-bottom: 1px solid var(--wp--preset--color--accent); }
.wd-lang .wd-lang-sep { color: var(--wp--preset--color--muted); }

/* ---------- Status dot ---------- */
.wd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent); margin-right: 10px; vertical-align: middle; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor; background: transparent; color: inherit;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }

/* ---------- Marquee ---------- */
.wd-marquee { overflow: hidden; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.wd-marquee .wd-marquee-track { display: flex; gap: 48px; width: max-content; white-space: nowrap; }
.wd-marquee p { margin: 0; font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; }

/* ---------- Image placeholders ---------- */
.wd-ph { background-color: #E6E4DE; background-image: repeating-linear-gradient(135deg, rgba(14,14,14,.06) 0 1px, transparent 1px 12px); }

/* ---------- HUD cover (block style) ---------- */
.wp-block-cover.is-style-hud { overflow: hidden; }
.wp-block-cover.is-style-hud::after {
	content: ""; position: absolute; inset: 32px; pointer-events: none; z-index: 2;
	--c: rgba(244,243,239,.9);
	background:
		linear-gradient(var(--c), var(--c)) top left / 28px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) top left / 1px 28px no-repeat,
		linear-gradient(var(--c), var(--c)) top right / 28px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) top right / 1px 28px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / 28px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / 1px 28px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / 28px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / 1px 28px no-repeat;
}
.wp-block-cover.is-style-hud .wd-scanline {
	position: absolute; left: 0; right: 0; top: 38%; height: 1px; margin: 0;
	background: var(--wp--preset--color--accent-light); opacity: .7; z-index: 1;
}
.wp-block-cover.is-style-hud .wp-block-cover__inner-container { position: static; }
.wp-block-cover.is-style-hud .wd-hud-row { position: absolute; left: 76px; right: 76px; top: 70px; z-index: 3; }
.wp-block-cover.is-style-hud .wd-hud-row p { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #C9C7C1; line-height: 1.8; }
.wp-block-cover.is-style-hud .wd-hud-statement { position: absolute; left: 76px; right: 76px; bottom: 64px; z-index: 3; margin: 0; }
.wp-block-cover.is-style-hud .wd-hud-statement h2,
.wp-block-cover.is-style-hud .wd-hud-statement p { margin: 0; }
@media (max-width: 781px) {
	.wp-block-cover.is-style-hud::after { inset: 16px; }
	.wp-block-cover.is-style-hud .wd-hud-row { left: 32px; right: 32px; top: 40px; }
	.wp-block-cover.is-style-hud .wd-hud-statement { left: 32px; right: 32px; bottom: 40px; }
}

.wp-block-cover.wd-ph-dark { background-color: #161616; background-image: repeating-linear-gradient(135deg, rgba(244,243,239,.05) 0 1px, transparent 1px 14px); }
.wp-block-cover .wd-scan-label { position: absolute; right: 76px; top: calc(38% - 24px); z-index: 3; font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: .08em; color: var(--wp--preset--color--accent-light); }
.wp-block-cover .wd-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); z-index: 3;
	background: linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) center / 1px 100% no-repeat,
	            linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) center / 100% 1px no-repeat; }
.wp-block-cover .wd-label { color: #C9C7C1; }
.wp-block-cover .wd-accent, .wp-block-cover .wd-label.wd-accent { color: var(--wp--preset--color--accent-light); }
.wp-block-columns.alignfull > .wp-block-column > .wp-block-cover { height: 100%; }
@media (max-width: 781px) { .wp-block-cover .wd-scan-label { right: 32px; } }

/* ---------- Insight block (red panel) ---------- */
.wd-insight { display: flex; flex-direction: column; justify-content: space-between; }

/* ---------- Case cards ---------- */
.wd-case-card .wp-block-post-featured-image { overflow: hidden; margin: 0; }
.wd-case-card .wp-block-post-featured-image img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.wd-case-card:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.wd-case-card .wp-block-post-title a { text-decoration: none; }
.wd-case-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.wd-case-meta { border-top: 1px solid var(--wp--preset--color--ink); padding-top: 16px; }
.wd-case-terms a { text-decoration: none; color: var(--wp--preset--color--muted); }

/* ---------- Featured cases: one large, two stacked ---------- */
.wd-featured-grid .wp-block-post-template {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px 24px;
	list-style: none; margin: 0; padding: 0;
}
.wd-featured-grid .wp-block-post-template > li:first-child { grid-row: span 2; }
.wd-featured-grid .wp-block-post-template > li:first-child .wp-block-post-title { font-size: 30px !important; }
@media (max-width: 781px) {
	.wd-featured-grid .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
	.wd-featured-grid .wp-block-post-template > li:first-child { grid-row: auto; }
}

/* ---------- Case filter ---------- */
.wd-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; font-family: var(--wp--preset--font-family--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.wd-filter a { text-decoration: none; border: 1px solid var(--wp--preset--color--ink); padding: 10px 16px; }
.wd-filter a:hover,
.wd-filter a[aria-current="page"] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }

/* ---------- Services ---------- */
.wd-service { border-top: 1px solid var(--wp--preset--color--ink); }

/* ---------- Timeline ---------- */
.wd-timeline p { margin: 0; }
.wd-timeline .wd-row { border-top: 1px solid rgba(14,14,14,.2); padding: 14px 0; }
.wd-timeline .wd-row:last-child { border-bottom: 1px solid rgba(14,14,14,.2); }

/* ---------- Terminal (block style) ---------- */
.wp-block-group.is-style-terminal {
	background: var(--wp--preset--color--ink); color: #C9C7C1;
	font-family: var(--wp--preset--font-family--mono); font-size: 14px; line-height: 1.9;
	padding: 24px 28px; max-width: 560px;
}
.wp-block-group.is-style-terminal p { margin: 0; }
.wp-block-group.is-style-terminal .wd-term-head { color: #8C8A84; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #2A2A2A; padding-bottom: 12px; margin-bottom: 14px; }
.wp-block-group.is-style-terminal .wd-term-out { color: var(--wp--preset--color--base); }
.wp-block-group.is-style-terminal .wd-term-prompt::before { content: "> "; color: var(--wp--preset--color--accent-light); }
.wd-cursor { display: inline-block; width: 9px; height: 16px; background: var(--wp--preset--color--base); vertical-align: middle; }

/* ---------- Footer ---------- */
.wd-footer { border-top: 1px solid var(--wp--preset--color--line); }
.wd-footer p, .wd-footer a { font-family: var(--wp--preset--font-family--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--wp--preset--color--muted); }

/* ---------- Parallax images ---------- */
.wd-parallax { overflow: hidden; }
.wp-block-image.wd-parallax img { width: 100%; }

/* ---------- Showreel ---------- */
.wd-showreel .wp-block-video { margin: 0; }
.wd-showreel .wp-block-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #1A1A1A; }