/**
 * Marginalia — Wired chrome styles.
 *
 * Loaded only when the active style variation sets
 * settings.custom.marginalia.wiredChrome (Mackintosh, Wright).
 * Everything that removes a native border or fill is scoped to
 * `.wired-ready`, which assets/js/wired-chrome.js adds to <html> once it
 * has drawn the replacements — so with JavaScript off, nothing is lost.
 *
 * Sketch tokens come from settings.custom.marginalia.sketch:
 *   --wp--custom--marginalia--sketch--stroke         line colour
 *   --wp--custom--marginalia--sketch--stroke-width   line weight
 *   --wp--custom--marginalia--sketch--hatch          hover hachure colour
 *   --wp--custom--marginalia--sketch--card-elevation (read by the JS)
 */

:root {
	--wired-stroke: var(--wp--custom--marginalia--sketch--stroke, currentColor);
	--wired-stroke-width: var(--wp--custom--marginalia--sketch--stroke-width, 1.25);
	--wired-hatch: var(--wp--custom--marginalia--sketch--hatch, var(--wp--preset--color--primary-accent));
}

/*
 * At night (body.marginalia-night, when night mode is on): the night palette (functions.php) redefines the colour presets
 * on body, but the sketch tokens above resolve on :root, where they still
 * hold the day colours (dark pencil on a dark page). Take the pencil and
 * the hatch straight from the presets on body instead; the hatch is a dark
 * ochre so cream text stays readable over it.
 */
@media (prefers-color-scheme: dark) {
	:where(body.marginalia-night) {
		--wired-stroke: var(--wp--preset--color--main);
		--wired-hatch: color-mix(in srgb, var(--wp--preset--color--primary-alt, var(--wp--preset--color--primary-accent)) 30%, var(--wp--preset--color--base));
	}
}

/* ------------------------------------------------------------------ */
/* Overlay sketches (drawn with rough.js in Wired's pencil)            */
/* ------------------------------------------------------------------ */

.wired-host {
	position: relative;
	isolation: isolate;
}

.wired-sketch {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: -1;
}

.wired-sketch path {
	fill: none;
	stroke: var(--wired-stroke);
	stroke-width: var(--wired-stroke-width);
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.wired-sketch path.wired-sketch__fill {
	stroke: var(--wired-hatch);
	stroke-width: 3;
	opacity: 0;
	transition: opacity 0.15s ease-out;
}

.wired-host:is(:hover, :focus-visible) > .wired-sketch .wired-sketch__fill,
.wired-host[aria-current] > .wired-sketch .wired-sketch__fill,
.wired-host.current > .wired-sketch .wired-sketch__fill {
	opacity: 1;
}

/* Underlines on navigation links: shown on hover, focus and the current page. */
.wired-sketch--underline {
	inset: auto 0 -0.35em 0;
	height: 6px;
}

.wired-sketch--underline path {
	opacity: 0;
	transition: opacity 0.15s ease-out;
}

.wired-host:is(:hover, :focus-visible) > .wired-sketch--underline path,
.wired-host[aria-current="page"] > .wired-sketch--underline path,
.current-menu-item > .wired-host > .wired-sketch--underline path {
	opacity: 1;
}

/* Image frames sit on top of the photo, like a pencilled mat. */
.wp-block-post-featured-image > .wired-sketch,
.wp-block-image > .wired-sketch {
	z-index: 1;
	inset: -3px;
	width: calc(100% + 6px);
	height: calc(100% + 6px);
}

@media (prefers-reduced-motion: reduce) {
	.wired-sketch path,
	.wired-sketch path.wired-sketch__fill {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Native chrome handed over to the sketches                            */
/* ------------------------------------------------------------------ */

.wired-ready :is(.wp-element-button, .wp-block-button__link):not(.has-background) {
	background-color: transparent;
	color: var(--wp--preset--color--main);
}

.wired-ready :is(.wp-element-button, .wp-block-button__link, .wp-block-read-more),
.wired-ready .wp-block-post-terms.is-style-term-button a,
.wired-ready :is(.wp-block-query-pagination, .wp-block-comments-pagination) :is(a, .page-numbers) {
	border-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-decoration: none;
}

.wired-ready .wp-block-post-terms.is-style-term-button a,
.wired-ready :is(.wp-block-query-pagination, .wp-block-comments-pagination) :is(a, .page-numbers) {
	display: inline-block;
	background-color: transparent !important;
	padding: 0.3em 0.75em;
}

.wired-ready .wp-block-read-more {
	display: inline-block;
	padding: 0.4em 0.9em;
}

.wired-ready .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

/* Fields */
.wired-field {
	position: relative;
	isolation: isolate;
}

.wired-field--block {
	display: block;
}

.wired-field--inline {
	display: inline-flex;
	flex: 1 1 auto;
	min-width: 0;
}

.wired-field > :is(input, textarea) {
	width: 100%;
}

.wired-ready .wired-field > :is(input, textarea) {
	background-color: transparent !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.wired-ready .wp-block-search__inside-wrapper {
	border-color: transparent !important;
	background-color: transparent !important;
}

.wired-field > :is(input, textarea):focus-visible,
.wired-ready .wired-host:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ */
/* Dividers and cards                                                   */
/* ------------------------------------------------------------------ */

/* Header and footer rules. */
.wired-ready .wired-edged {
	position: relative;
}

.wired-ready .wired-edged--bottom {
	border-bottom-color: transparent !important;
}

.wired-ready .wired-edged--top {
	border-top-color: transparent !important;
}

.wired-divider {
	display: block;
	height: 6px;
}

.wired-divider.wired-edge {
	position: absolute !important;
	left: 0;
	right: 0;
	max-width: none !important;
	margin: 0 !important;
	color: var(--wired-stroke);
	pointer-events: none;
}

.wired-divider.wired-edge--bottom {
	bottom: -3px;
}

.wired-divider.wired-edge--top {
	top: -3px;
}

/* Separators: keep the block's alignment and width classes, drop its border. */
.wired-divider.wired-separator {
	border: 0 !important;
	background: none !important;
	height: auto !important;
	color: var(--wired-stroke);
	margin-block: var(--wp--preset--spacing--large);
}

.wired-divider.wired-separator:not(.is-style-wide):not(.alignwide):not(.alignfull) {
	width: 100px;
	margin-inline: auto;
}

/* Cards around posts in query loops and around comments. */
.wired-ready .wp-block-post-template > li.wired-chrome-card {
	padding: var(--wp--preset--spacing--small);
}

.wired-ready .wired-chrome-card:is(.wp-block-group),
.wired-ready .wired-chrome-card > .wp-block-group {
	background-color: transparent !important;
	border-color: transparent !important;
	border-radius: 0 !important;
}

/* Wordmark follows the display face. */
.marginalia-wordmark {
	font-family: var(--wp--preset--font-family--secondary, inherit);
}

/* Menu toggles: Ollie gives them a tinted chip; the sketch replaces it. */
.wired-ready :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
	background-color: transparent !important;
	border-radius: 0 !important;
}

/* Social icons: solid discs become pencilled circles. */
.wired-ready .wp-block-social-links .wp-social-link {
	background-color: transparent !important;
	color: var(--wp--preset--color--main) !important;
}

.wired-ready .wp-block-social-links .wp-social-link a {
	color: inherit !important;
}

/*
 * Core sizes every `svg` inside the menu toggles and social links
 * (e.g. `.wp-block-social-link svg { width: 1em; height: 1em }`), which
 * shrank the sketch overlays to icon size and knocked them off-centre.
 * Pin the overlays to their host box.
 */
.wired-host > svg.wired-sketch {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	fill: none !important;
	transform: none !important;
}

.wired-host > svg.wired-sketch--underline {
	inset: auto 0 -0.35em 0 !important;
	height: 6px !important;
}

/* Core underlines the current menu item; the pencil underline replaces it. */
.wired-ready .wp-block-navigation-item__content.wired-host,
.wired-ready .current-menu-item > .wp-block-navigation-item__content.wired-host {
	text-decoration: none !important;
}

/* Back-to-top arrow: a pencilled circle about the height of a line of text. */
.wired-ready footer.wp-block-template-part a.marginalia-to-top,
.wired-ready footer.wp-block-template-part a.marginalia-to-top:is(:hover, :focus-visible) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	font-size: 1em !important;
	line-height: 1 !important;
	background: none !important;
	text-decoration: none !important;
	/* The pencil arrow replaces the glyph, which stays for no-JS and screen readers. */
	color: transparent !important;
}

.wired-ready .marginalia-to-top:is(:hover, :focus-visible) .wired-sketch__arrow {
	stroke: var(--wp--preset--color--primary);
}

/* Social icons: on hover, a scribble in the service's own colour fills the circle. */
.wired-ready .wp-block-social-links .wp-social-link > .wired-sketch .wired-sketch__fill {
	stroke: var(--wired-stroke);
	stroke-width: 2;
}

.wired-ready .wp-block-social-links .wp-social-link:is(:hover, :focus-within) > .wired-sketch .wired-sketch__fill {
	opacity: 0.35;
}