/* ==========================================================================
   Latent — supplemental styles
   Layered on top of theme.json. Covers what design tokens can't express:
   automatic dark mode, prose refinements, tables, inline code, anchors,
   focus states, and block-style variations.
   ========================================================================== */

/* ----- 1. Automatic dark mode -------------------------------------------- */
/* theme.json wires every surface to these preset tokens, so remapping the
   seven of them here flips the entire theme — no per-element overrides. */
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--base: #0E0E11;
		--wp--preset--color--surface: #17171B;
		--wp--preset--color--hairline: #28282F;
		--wp--preset--color--muted: #9A9AA4;
		--wp--preset--color--contrast: #ECECEE;
		--wp--preset--color--primary: #9D94FF;
		--wp--preset--color--accent-soft: #1E1B33;
	}
	/* Slightly soften images so they don't glare on the dark canvas. */
	img:not(.no-dim) { filter: brightness(0.92) contrast(1.02); }
}

/* ----- 2. Global niceties ------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::selection { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Visible, on-brand focus ring for keyboard users. */
:where(a, button, input, textarea, select, summary, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ----- 3. Prose rhythm --------------------------------------------------- */
.wp-block-post-content,
.entry-content {
	overflow-wrap: break-word;
}

/* Breathing room above headings inside the article (tighter for the one that
   immediately follows another heading). */
:where(.wp-block-post-content) :is(h2, h3, h4) {
	margin-top: 2.4em;
}
:where(.wp-block-post-content) :is(h2) {
	padding-top: 0.4rem;
}
:where(.wp-block-post-content) :is(h1, h2, h3, h4) + :is(h2, h3, h4) {
	margin-top: 0.6em;
}

/* Anchored headings (content uses id="" anchors) — offset for sticky header
   and a soft flash when linked to. */
:where(.wp-block-post-content) :is(h2, h3, h4, h5, h6)[id] {
	scroll-margin-top: 6rem;
}
:where(.wp-block-post-content) :target {
	animation: latent-target 1.6s ease;
}
@keyframes latent-target {
	0%, 30% { background: var(--wp--preset--color--accent-soft); box-shadow: 0 0 0 6px var(--wp--preset--color--accent-soft); }
	100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}

/* Links inside prose: subtle underline that thickens on hover. */
:where(.wp-block-post-content, .entry-content) a {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
:where(.wp-block-post-content, .entry-content) a:hover {
	text-decoration-color: var(--wp--preset--color--primary);
}

/* Lists: a touch more line spacing between items. */
:where(.wp-block-post-content) :is(ul, ol) > li + li { margin-top: 0.4em; }
:where(.wp-block-post-content) li::marker { color: var(--wp--preset--color--muted); }

/* ----- 4. Inline code ---------------------------------------------------- */
:where(.wp-block-post-content, .entry-content) :not(pre) > code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.86em;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 5px;
	padding: 0.12em 0.4em;
	word-break: break-word;
}
/* Don't double-box code that sits inside a link. */
:where(.wp-block-post-content) a > code { color: inherit; }

/* Scrollable code blocks on small screens. */
:where(.wp-block-code, .wp-block-preformatted) {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ----- 5. Tables --------------------------------------------------------- */
/* Comparison tables are core content on this site — make them legible. */
.wp-block-post-content table,
.wp-block-table table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
/* Allow long tables to scroll horizontally rather than overflow the page. */
.wp-block-table,
.wp-block-post-content figure.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.wp-block-post-content table :is(th, td),
.wp-block-table table :is(th, td),
.entry-content table :is(th, td) {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: 0.7rem 0.9rem;
	text-align: left;
	vertical-align: top;
}
.wp-block-post-content table thead th,
.wp-block-table table thead th,
.entry-content table thead th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border-bottom: 1.5px solid var(--wp--preset--color--contrast);
}
.wp-block-post-content table tbody tr:nth-child(even),
.wp-block-table table tbody tr:nth-child(even),
.entry-content table tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 55%, transparent);
}
.wp-block-post-content table tbody tr:last-child :is(th, td),
.wp-block-table table tbody tr:last-child :is(th, td) {
	border-bottom: none;
}

/* ----- 6. Media & quotes ------------------------------------------------- */
.wp-block-image img { height: auto; }
figcaption { text-align: center; }

.wp-block-quote { font-style: italic; }
.wp-block-quote cite { display: block; margin-top: 0.6rem; font-style: normal; }

/* ----- 7. Header / footer chrome ----------------------------------------- */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.wp-site-blocks > footer {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

/* Navigation: open menu submenu/overlay surfaces follow the palette. */
.wp-block-navigation .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--hairline) !important;
}

/* Submenu dropdown ("Projects") — a clean, contained card. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	min-width: 18.5rem;
	margin-top: 0.6rem;
	padding: 0.4rem;
	border: 1px solid var(--wp--preset--color--hairline) !important;
	border-radius: 12px;
	box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	white-space: nowrap;
	padding: 0.5rem 0.7rem;
	border-radius: 8px;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}
/* The parent toggle keeps the same weight as sibling links. */
.wp-block-navigation .wp-block-navigation-submenu__toggle {
	font-weight: inherit;
}

/* ----- 8. Post-list (home / archive) ------------------------------------- */
.wp-block-post-template .wp-block-post {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding-bottom: var(--wp--preset--spacing--50);
}
.wp-block-post-template li.wp-block-post:last-child {
	border-bottom: none;
}
.wp-block-post-featured-image img {
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s ease;
}
.wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.02);
}

/* Pagination */
.wp-block-query-pagination {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* ----- 9. Block-style variations ----------------------------------------- */
/* Card group */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--50);
}
/* Asterisk separator */
.wp-block-separator.is-style-asterisks {
	border: none;
	max-width: none;
	text-align: center;
	overflow: visible;
	height: auto;
}
.wp-block-separator.is-style-asterisks::before {
	content: "✳   ✳   ✳";
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	letter-spacing: 0.4em;
}
/* Framed image */
.wp-block-image.is-style-frame img {
	border: 1px solid var(--wp--preset--color--hairline);
	padding: 0.5rem;
	background: var(--wp--preset--color--base);
	border-radius: 12px;
}

/* ----- 10. Skip link ----------------------------------------------------- */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
}
.skip-link.screen-reader-text:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem;
}