/* TheWildWeb: everything theme.json can't express. Colours always come from the
   theme.json palette variables, so dark mode only has to swap those. */

/* ---- Dark mode: follow the system, or the ◐ toggle (data-theme on <html>) ---- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--base: #13171f;
		--wp--preset--color--contrast: #e6ebe9;
		--wp--preset--color--muted: #9aa7a2;
		--wp--preset--color--accent: #00ad66;
		--wp--preset--color--accent-hover: #00d67f;
		--wp--preset--color--soft: #173026;
		--wp--preset--color--line: #2a322f;
		--wp--preset--color--code: #1b2026;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--wp--preset--color--base: #13171f;
	--wp--preset--color--contrast: #e6ebe9;
	--wp--preset--color--muted: #9aa7a2;
	--wp--preset--color--accent: #00ad66;
	--wp--preset--color--accent-hover: #00d67f;
	--wp--preset--color--soft: #173026;
	--wp--preset--color--line: #2a322f;
	--wp--preset--color--code: #1b2026;
	color-scheme: dark;
}

:root {
	--ww-accent: var(--wp--preset--color--accent);
	--ww-muted: var(--wp--preset--color--muted);
	--ww-line: var(--wp--preset--color--line);
	--ww-soft: var(--wp--preset--color--soft);
	--ww-radius: 0.4rem;
	--hl-comment: #6b7a74;
	--hl-key: #0b6e5c;
	--hl-string: #9a4b14;
	--hl-number: #6a3fb0;
	--hl-punct: #5d6662;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--hl-comment: #8a9893;
		--hl-key: #5fd0b4;
		--hl-string: #f0a46c;
		--hl-number: #c4a5ff;
		--hl-punct: #a5b0ab;
	}
}
:root[data-theme="dark"] {
	--hl-comment: #8a9893;
	--hl-key: #5fd0b4;
	--hl-string: #f0a46c;
	--hl-number: #c4a5ff;
	--hl-punct: #a5b0ab;
}

/* Reading size lives on the root, so every rem in theme.json and below scales with it:
   17px on phones up to 20px on large screens, and it still follows the browser's font setting. */
html { font-size: clamp(106.25%, 93.75% + 0.4vw, 125%); }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--ww-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--ww-accent) 22%, transparent); }
.ww-main { padding-block: 1.5rem 0; }

/* ---- Header ---- */
.ww-header { padding-block: 1.5rem 0.5rem; }
.ww-header-inner { gap: 0.5rem 1.5rem; }
.ww-header-right { gap: 0.25rem 1.1rem; }
.ww-wordmark { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); text-decoration: none; white-space: nowrap; }
.ww-wordmark span { color: var(--ww-accent); }
.ww-wordmark:hover { color: var(--wp--preset--color--contrast); }
.ww-nav { gap: 0.25rem 1.1rem; font-size: 0.9rem; }
.ww-nav a { color: var(--ww-muted); text-decoration: none; }
.ww-nav a:hover, .ww-nav .current-menu-item a, .ww-nav a[aria-current="page"] { color: var(--wp--preset--color--contrast); }
.ww-theme-toggle { all: unset; cursor: pointer; color: var(--ww-muted); font-size: 0.9rem; }
.ww-theme-toggle:hover { color: var(--wp--preset--color--contrast); }

/* ---- Homepage ---- */
.ww-intro { gap: 1.25rem; }
.ww-intro > * { min-width: 0; }
.ww-avatar { flex: 0 0 auto; margin: 0; }
.ww-avatar img { border-radius: 50%; display: block; }
.ww-intro-name { font-size: 1.6rem; margin-bottom: 0.4rem; }
.ww-lede { color: var(--ww-muted); }
.ww-lede-strong { color: var(--wp--preset--color--contrast); font-size: 1.1rem; }
.ww-section { margin-top: 2.75rem; }
.ww-label { font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ww-muted); }
.ww-help-item h3 { font-size: 1.05rem; margin-bottom: 0.15rem; }
.ww-help-item p { margin-top: 0; color: var(--ww-muted); }
.ww-help-item a, .ww-more a { white-space: nowrap; text-decoration: none; }
.ww-more { font-size: 0.95rem; }

/* ---- Post lists ---- */
.ww-posts .wp-block-post-template { list-style: none; padding: 0; margin: 0; }
.ww-posts .wp-block-post { display: grid; gap: 0.2rem; padding-block: 0.75rem; margin: 0; border-bottom: 1px solid var(--ww-line); }
.ww-posts .wp-block-post > * { margin: 0; min-width: 0; }
.ww-post-title { font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.45; }
.ww-post-title a { text-decoration: none; }
.ww-post-title a:hover { text-decoration: underline; }
.ww-post-meta { gap: 0.15rem 0.8rem; align-items: baseline; }
.ww-tags { display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; }
.ww-tags a { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.ww-tags a:hover { text-decoration: underline; }
.ww-tags .wp-block-post-terms__separator { display: none; }
.wp-block-post-date { font-variant-numeric: tabular-nums; }
.ww-summary p { margin: 0; color: var(--ww-muted); font-size: 0.9rem; }

/* ---- Writing archive (filters built by site.js) ---- */
.ww-archive-tools input[type="search"] { width: 100%; box-sizing: border-box; font: inherit; padding: 0.7rem 1rem; border-radius: 999px; border: 1px solid var(--ww-line); background: var(--wp--preset--color--base); color: inherit; }
.ww-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.ww-filters button { all: unset; cursor: pointer; font-size: 0.8rem; padding: 0.2rem 0.65rem; border-radius: 999px; border: 1px solid var(--ww-line); color: var(--ww-muted); }
.ww-filters button[aria-pressed="true"] { background: var(--ww-accent); border-color: var(--ww-accent); color: var(--wp--preset--color--base); }
.ww-arch-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 1rem; padding-bottom: 0.6rem; font-size: 0.85rem; color: var(--ww-muted); border-bottom: 1px solid var(--ww-line); }
.ww-years { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; }
.ww-years button { all: unset; cursor: pointer; color: var(--ww-accent); font-variant-numeric: tabular-nums; }
.ww-years button:hover { text-decoration: underline; }
.ww-archive .ww-year { border-bottom: 0; padding-top: 1.75rem; }
.ww-archive .ww-year h2 { margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ww-muted); font-variant-numeric: tabular-nums; }
.ww-empty { padding-block: 2rem; color: var(--ww-muted); }
mark { background: color-mix(in srgb, var(--ww-accent) 22%, transparent); color: inherit; padding: 0 0.1em; border-radius: 2px; }

/* ---- Articles ---- */
.ww-back { font-size: 0.9rem; margin-bottom: 0.5rem; }
.ww-back a { text-decoration: none; }
.ww-article-meta { color: var(--ww-muted); font-size: 0.85rem; }
.ww-content p, .ww-content li { line-height: 1.65; }
.ww-content h2 { margin-top: 2.25rem; }
.is-style-in-short { background: var(--ww-soft); padding: 1rem 1.25rem; border-radius: var(--ww-radius); }
.is-style-in-short > * { margin-block: 0; }
.is-style-in-short > * + * { margin-top: 0.4rem; }
.ww-in-short-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ww-accent); }
.wp-block-code { overflow-x: auto; }
.wp-block-code code { font-family: inherit; }
:not(pre) > code { font-family: var(--wp--preset--font-family--mono); font-size: 0.85em; background: var(--wp--preset--color--code); padding: 0.1em 0.35em; border-radius: 0.25rem; }
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.wp-block-table th, .wp-block-table td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; border: 0; border-bottom: 1px solid var(--ww-line); }
.wp-block-table thead { border: 0; }
.ww-cta { border-top: 1px solid var(--ww-line); margin-top: 3rem; padding-top: 1.5rem; }
.ww-cta-title { font-size: 1.15rem !important; margin-top: 0; }
.ww-author { gap: 1rem; margin-top: 2rem; color: var(--ww-muted); font-size: 0.9rem; }
.ww-author p { margin: 0; }

/* Prism tokens, from the theme colours */
.token.comment { color: var(--hl-comment); font-style: italic; }
.token.keyword, .token.property, .token.builtin, .token.function { color: var(--hl-key); }
.token.string, .token.url { color: var(--hl-string); }
.token.number, .token.boolean { color: var(--hl-number); }
.token.punctuation, .token.operator { color: var(--hl-punct); }

/* ---- Pages: services, work, contact ---- */
.ww-block { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--ww-line); }
.ww-role { color: var(--ww-accent); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 0.2rem; }
.ww-principles, .ww-formats { list-style: none; padding-left: 0; }
.ww-principles li, .ww-formats li { color: var(--ww-muted); margin-bottom: 0.6rem; }
.ww-principles strong, .ww-formats strong { color: var(--wp--preset--color--contrast); }
.ww-familiar { list-style: none; padding-left: 0; }
.ww-familiar li { color: var(--ww-muted); font-style: italic; }
.ww-familiar li::before { content: "\201C"; color: var(--ww-accent); font-style: normal; margin-right: 0.1em; }
.ww-familiar li::after { content: "\201D"; color: var(--ww-accent); font-style: normal; margin-left: 0.05em; }
.ww-facts { font-size: 0.9rem; color: var(--ww-muted); }
.ww-facts strong { color: var(--wp--preset--color--contrast); font-weight: 500; }
.ww-stack { font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; }
.ww-soft-box, .ww-consult { background: var(--ww-soft); padding: 1.1rem 1.25rem; border-radius: var(--ww-radius); }
.ww-soft-box > *, .ww-consult > * { margin-block: 0; }
.ww-soft-box > * + *, .ww-consult > * + * { margin-top: 0.5rem; }
.ww-consult h2 { font-size: 1.15rem; }
.ww-consult a, .ww-soft-box a { font-weight: 500; text-decoration: none; }
.ww-direct { border-top: 1px solid var(--ww-line); }
.ww-direct p { margin: 0; padding-block: 0.55rem; border-bottom: 1px solid var(--ww-line); display: grid; grid-template-columns: 7rem 1fr; gap: 0.25rem 1rem; align-items: baseline; }
.ww-direct a { color: var(--wp--preset--color--contrast); font-weight: 500; text-decoration: none; }
.ww-direct a:hover { color: var(--ww-accent); }
.ww-direct p > * { min-width: 0; overflow-wrap: anywhere; }
.ww-direct .ww-dl { color: var(--ww-muted); font-size: 0.85rem; }
@media (max-width: 480px) { .ww-direct p { grid-template-columns: 1fr; } }

/* ---- Contact form ---- */
.ww-contact-form { display: grid; gap: 0.25rem; }
.ww-contact-form p { margin: 0 0 0.75rem; }
.ww-contact-form label { display: block; font-size: 0.95rem; margin-bottom: 0.3rem; }
.ww-contact-form input, .ww-contact-form select, .ww-contact-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; color: inherit;
	padding: 0.65rem 0.8rem; border: 1px solid var(--ww-line); border-radius: var(--ww-radius);
	background: var(--wp--preset--color--base);
}
.ww-contact-form textarea { resize: vertical; }
.ww-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ww-form-row > * { min-width: 0; }
@media (max-width: 560px) { .ww-form-row { grid-template-columns: 1fr; } }
.ww-opt { color: var(--ww-muted); font-size: 0.8rem; }
.ww-form-note { font-size: 0.85rem; color: var(--ww-muted); }
.ww-form-status { padding: 0.75rem 1rem; border-radius: var(--ww-radius); background: var(--ww-soft); }
.ww-form-status.is-err { background: color-mix(in srgb, #c0392b 15%, transparent); }
.ww-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Footer ---- */
.ww-footer { margin-top: 3.5rem; padding-block: 0 2.5rem; font-size: 0.85rem; color: var(--ww-muted); }
.ww-footer p { margin: 0 0 0.4rem; }
.ww-foot-consult { color: var(--wp--preset--color--contrast); font-size: 0.95rem; padding-block: 1.5rem 0.9rem; margin-bottom: 0.9rem !important; border-top: 1px solid var(--ww-line); border-bottom: 1px solid var(--ww-line); }
.ww-foot-consult a { font-weight: 500; text-decoration: none; white-space: nowrap; }
.ww-contact-line { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.ww-contact-line a { color: var(--wp--preset--color--contrast); text-decoration: none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Language note: in the footer, and between the post meta and the title */
.ww-article > .ww-lang-note { margin-block: 0.6rem 0.4rem !important; padding: 0.55rem 0.9rem; border-radius: var(--ww-radius); background: var(--ww-soft); font-size: 0.8rem; color: var(--ww-muted); }