/**
 * TurkerDev — front-end styles.
 *
 * theme.json owns the design tokens; this file owns layout and the handful of
 * components block markup cannot express (the three-column shell, the colour
 * scheme switch, the code frame chrome).
 *
 * Dark mode re-points the WordPress preset custom properties rather than
 * restyling components. Every core block, every custom block and any future
 * block that respects the palette then follows automatically, with no
 * per-component dark rules to keep in sync.
 */

/* ---------------------------------------------------------------------------
 * 1. Colour scheme
 * ------------------------------------------------------------------------- */

html {
	--td-sticky-offset: 5rem;
	--td-terminal-bg: #14171c;

	color-scheme: light;
	scroll-behavior: smooth;
	scroll-padding-top: var(--td-sticky-offset);
}

html[data-color-scheme='dark'] {
	--wp--preset--color--base: #0f1216;
	--wp--preset--color--surface: #151920;
	--wp--preset--color--surface-strong: #1d232c;
	--wp--preset--color--contrast: #e7eaee;
	--wp--preset--color--contrast-muted: #98a2b1;
	--wp--preset--color--border: #262d38;
	--wp--preset--color--accent: #79a9ff;
	--wp--preset--color--accent-soft: #17233a;
	--wp--preset--color--note: #79a9ff;
	--wp--preset--color--tip: #4bbf95;
	--wp--preset--color--warning: #d99a44;
	--wp--preset--color--danger: #e57373;
	--wp--preset--color--code-surface: #12161c;
	--td-terminal-bg: #0b0e12;

	color-scheme: dark;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible,
:where(input):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
 * 2. Header
 * ------------------------------------------------------------------------- */

.td-header {
	position: sticky;
	top: 0;
	z-index: 20;
	border-block-end: 1px solid var(--wp--preset--color--border);
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
}

.td-header__inner {
	gap: var(--wp--preset--spacing--40);
}

.td-header__actions {
	gap: var(--wp--preset--spacing--30);
}

.td-header__nav a {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
	transition: color var(--wp--custom--transition);
}

.td-header__nav a:hover,
.td-header__nav .current-menu-item a {
	color: var(--wp--preset--color--contrast);
}

.td-header__search {
	max-width: 14rem;
}

.td-header__search .wp-block-search__input {
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--meta);
}

/* Colour scheme switch — swaps which icon is visible. */

.td-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast-muted);
	cursor: pointer;
	transition: color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.td-theme-toggle:hover {
	border-color: var(--wp--preset--color--contrast-muted);
	color: var(--wp--preset--color--contrast);
}

.td-theme-toggle__moon {
	display: none;
}

html[data-color-scheme='dark'] .td-theme-toggle__sun {
	display: none;
}

html[data-color-scheme='dark'] .td-theme-toggle__moon {
	display: block;
}

/* ---------------------------------------------------------------------------
 * 3. Documentation shell
 * ------------------------------------------------------------------------- */

.td-shell {
	padding-block: var(--wp--preset--spacing--60);
}

.td-shell > .wp-block-group {
	min-width: 0;
}

@media (min-width: 60rem) {
	.td-shell {
		display: grid;
		align-items: start;
		gap: var(--wp--custom--shell-gap);
		grid-template-columns: var(--wp--custom--sidebar-width) minmax(0, 1fr);
	}

	.td-shell--article {
		grid-template-columns:
			var(--wp--custom--sidebar-width)
			minmax(0, 1fr)
			var(--wp--custom--toc-width);
	}

	/* Pages have no sidebar; keep the reading column centred instead of hard left. */
	.td-shell--page {
		display: block;
	}
}

@media (min-width: 60rem) and (max-width: 80rem) {
	/* Below this the third column squeezes the article; drop the TOC first. */
	.td-shell--article {
		grid-template-columns: var(--wp--custom--sidebar-width) minmax(0, 1fr);
	}

	.td-shell__toc {
		display: none;
	}
}

.td-shell__aside,
.td-shell__toc {
	position: sticky;
	top: var(--td-sticky-offset);
	max-height: calc(100vh - var(--td-sticky-offset) - 1.5rem);
	overflow-y: auto;
	/* A long group label must not turn the rail into a horizontally
	   scrollable box; the label truncates instead. */
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border) transparent;
}

@media (max-width: 59.999rem) {
	.td-shell__aside,
	.td-shell__toc {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.td-shell__aside {
		margin-block-end: var(--wp--preset--spacing--50);
		padding-block-end: var(--wp--preset--spacing--40);
		border-block-end: 1px solid var(--wp--preset--color--border);
	}

	.td-shell__toc {
		display: none;
	}
}

.td-sidebar__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast-muted);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 4. Entry lists
 * ------------------------------------------------------------------------- */

.td-section-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast-muted);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.td-list__items,
.td-list .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.td-entry {
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.td-list .wp-block-post:last-child .td-entry {
	border-block-end: 0;
}

.td-entry--compact {
	padding-block: var(--wp--preset--spacing--20);
}

.td-entry__title {
	margin: 0;
}

.td-entry__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color var(--wp--custom--transition);
}

.td-entry__title a:hover {
	color: var(--wp--preset--color--accent);
}

.td-entry__excerpt {
	margin: 0.35rem 0 0;
	color: var(--wp--preset--color--contrast-muted);
}

.td-entry__excerpt .wp-block-post-excerpt__more-link {
	display: none;
}

.td-entry__tags a,
.td-article__tags a {
	display: inline-block;
	margin: 0.15rem 0.3rem 0.15rem 0;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--tiny);
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.td-entry__tags a:hover,
.td-article__tags a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.td-pagination a,
.td-pagination .page-numbers {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--meta);
	text-decoration: none;
}

.td-pagination .page-numbers.current {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 5. Article
 * ------------------------------------------------------------------------- */

.td-article :where(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--60);
	scroll-margin-top: var(--td-sticky-offset);
}

.td-article :where(h2) {
	padding-block-end: 0.3rem;
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.td-article :where(p, ul, ol) {
	margin-block: var(--wp--preset--spacing--30);
}

.td-article :where(ul, ol) {
	padding-inline-start: 1.35rem;
}

.td-article li + li {
	margin-block-start: 0.35rem;
}

.td-article__cover img {
	width: 100%;
	height: auto;
}

.td-article :where(figcaption) {
	margin-block-start: 0.5rem;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--meta);
	text-align: center;
}

/* Inline code — distinct from a code block, and never a full-width slab. */
.td-article :not(pre) > code {
	padding: 0.12em 0.36em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--code-surface);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
	word-break: break-word;
}

.td-article .wp-block-table {
	overflow-x: auto;
}

.td-article .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.td-article .wp-block-table :where(th, td) {
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border);
	text-align: start;
	vertical-align: top;
}

.td-article .wp-block-table th {
	background: var(--wp--preset--color--surface);
	font-weight: 650;
}

.td-post-nav a {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
}

.td-post-nav a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * 6. Code frame
 * ------------------------------------------------------------------------- */

.wp-block-code {
	position: relative;
	overflow: hidden;
}

.wp-block-code pre,
.wp-block-code code {
	overflow-x: auto;
	tab-size: 4;
	white-space: pre;
}

.td-copy-button {
	position: absolute;
	top: 0.4rem;
	inset-inline-end: 0.4rem;
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast-muted);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--tiny);
	opacity: 0;
	transition: opacity var(--wp--custom--transition), color var(--wp--custom--transition);
}

.wp-block-code:hover .td-copy-button,
.td-copy-button:focus-visible {
	opacity: 1;
}

.td-copy-button:hover {
	color: var(--wp--preset--color--contrast);
}

.td-copy-button[data-copied='true'] {
	border-color: var(--wp--preset--color--tip);
	color: var(--wp--preset--color--tip);
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * 7. Footer
 * ------------------------------------------------------------------------- */

.td-footer {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.td-footer__inner {
	gap: var(--wp--preset--spacing--30);
}

.td-footer__nav a {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
}

.td-footer__nav a:hover {
	color: var(--wp--preset--color--accent);
}