/* tech201 Theme Toggle 1.0.3
 * Dark is the Kadence global palette set in the Customizer.
 * Light is the override below, switched on by <html data-theme="light">.
 */

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

/* ---------- Colour tokens ---------- */
:root {
	--t201-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--t201-surface2: #0f1520;
	--t201-border2: #263244;
	--t201-code-bg: #070a10;
	--t201-quick-bg: #0e1a24;
	--t201-badge-bg: #0f2a1c;
	--t201-badge: #4ade80;
	--t201-note-bg: #221a0b;
	--t201-note-border: #4a3510;
	--t201-note: #fcd9a0;
	--t201-grid: #141b2a;
	--t201-footer: #080b12;
	color-scheme: dark;
}

html[data-theme="light"] {
	--global-palette1: #0e7490;
	--global-palette2: #155e75;
	--global-palette3: #0f172a;
	--global-palette4: #1e293b;
	--global-palette5: #334155;
	--global-palette6: #475569;
	--global-palette7: #e2e8f0;
	--global-palette8: #f8fafc;
	--global-palette9: #ffffff;
	--global-palette10: #ffffff;
	--global-palette11: #13612e;
	--global-palette12: #1159af;
	--global-palette13: #b82105;
	--global-palette14: #c2410c;
	--global-palette15: #b45309;
	--t201-surface2: #f1f5f9;
	--t201-border2: #cbd5e1;
	--t201-code-bg: #f1f5f9;
	--t201-quick-bg: #f0f9ff;
	--t201-badge-bg: #dcfce7;
	--t201-badge: #166534;
	--t201-note-bg: #fef3c7;
	--t201-note-border: #fcd34d;
	--t201-note: #78350f;
	--t201-grid: #e9eef5;
	--t201-footer: #f1f5f9;
	color-scheme: light;
}

/* ---------- Toggle button ---------- */
.t201-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 10px;
	border: 1px solid var(--global-palette7);
	background: var(--global-palette9);
	color: var(--global-palette5);
	cursor: pointer;
	box-shadow: none;
	transition: color .15s ease, border-color .15s ease;
}
.t201-toggle:hover,
.t201-toggle:focus {
	background: var(--global-palette9);
	color: var(--global-palette3);
	border-color: var(--t201-border2);
}
.t201-toggle:focus-visible {
	outline: 2px solid var(--global-palette1);
	outline-offset: 2px;
}
.t201-toggle svg { width: 18px; height: 18px; display: block; }
.t201-toggle .t201-moon { display: none; }
html[data-theme="light"] .t201-toggle .t201-sun { display: none; }
html[data-theme="light"] .t201-toggle .t201-moon { display: block; }

/* ---------- Logo: ">_" badge + "tech" in heading colour, "201" in accent ---------- */
.site-branding .site-title {
	display: inline-block;
	padding: 0;
	font-family: var(--t201-mono);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0;
	/* monospace: "tech" is 4 of 7 equal-width characters */
	background: linear-gradient(90deg, var(--global-palette3) 57.142%, var(--global-palette1) 57.142%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.site-branding .brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.site-branding .brand::before {
	content: ">_";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid var(--global-palette7);
	background: var(--global-palette9);
	color: var(--global-palette1);
	font-family: var(--t201-mono);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}

/* ---------- Site chrome ---------- */
.site-footer .site-footer-wrap,
.site-footer .site-footer-row-container-inner {
	background: var(--t201-footer);
}
.site-footer {
	border-top: 1px solid var(--global-palette7);
}
#masthead .site-main-header-wrap .site-header-row-container-inner {
	border-bottom: 1px solid var(--global-palette7);
}

/* Post cards in archives and the blog page */
.loop-entry.content-bg {
	border: 1px solid var(--global-palette7);
	border-radius: 14px;
	box-shadow: none;
	overflow: hidden;
}
.loop-entry .entry-taxonomies a,
.loop-entry .entry-taxonomies {
	font-family: var(--t201-mono);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Article content ---------- */
.entry-content code,
.entry-content kbd,
.entry-content pre {
	font-family: var(--t201-mono);
}

.entry-content :not(pre) > code {
	padding: .12em .4em;
	border-radius: 6px;
	border: 1px solid var(--global-palette7);
	background: var(--t201-surface2);
	font-size: .88em;
	color: var(--global-palette3);
}

.entry-content kbd {
	padding: 2px 7px;
	border-radius: 6px;
	border: 1px solid var(--t201-border2);
	background: var(--global-palette9);
	font-size: .85em;
	color: var(--global-palette3);
	box-shadow: 0 1px 0 var(--t201-border2);
}

.entry-content pre,
.entry-content pre.wp-block-code {
	position: relative;
	margin: 1.5em 0;
	padding: 52px 18px 18px;
	border-radius: 12px;
	border: 1px solid var(--global-palette7);
	background: var(--t201-code-bg);
	color: var(--global-palette1);
	font-size: 14px;
	line-height: 1.65;
	overflow-x: auto;
	white-space: pre;
}
.entry-content pre code {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
}
.entry-content pre::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 40px;
	border-bottom: 1px solid var(--global-palette7);
	background: var(--t201-surface2);
}
.t201-copy {
	position: absolute;
	top: 6px;
	right: 8px;
	height: 28px;
	padding: 0 12px;
	border-radius: 7px;
	border: 1px solid var(--t201-border2);
	background: var(--global-palette9);
	color: var(--global-palette5);
	font-family: var(--global-body-font-family, inherit);
	font-size: 13px;
	font-weight: 600;
	line-height: 26px;
	cursor: pointer;
	box-shadow: none;
}
.t201-copy:hover,
.t201-copy:focus {
	background: var(--global-palette9);
	color: var(--global-palette3);
}
.t201-copy.is-done { color: var(--t201-badge); }

/* Quick fix box: Group block with class "t201-quick" */
.entry-content .t201-quick {
	margin: 1.75em 0;
	padding: 22px 26px;
	border-radius: 14px;
	border: 1px solid var(--global-palette1);
	background: var(--t201-quick-bg);
}
.entry-content .t201-quick > :first-child { margin-top: 0; }
.entry-content .t201-quick > :last-child { margin-bottom: 0; }
.entry-content .t201-label {
	margin: 0 0 .6em;
	font-family: var(--t201-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--global-palette1);
}

/* Warning note: Group or Paragraph block with class "t201-note" */
.entry-content .t201-note {
	margin: 1.5em 0;
	padding: 16px 20px;
	border-radius: 12px;
	border: 1px solid var(--t201-note-border);
	background: var(--t201-note-bg);
	color: var(--t201-note);
	font-size: .94em;
}
.entry-content .t201-note a,
.entry-content .t201-note strong { color: inherit; }

/* "Tested on" badge: span or paragraph with class "t201-tested" */
.t201-tested {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--t201-badge-bg);
	color: var(--t201-badge);
	font-family: var(--t201-mono);
	font-size: 12px;
	line-height: 1.5;
}
.t201-tested::before { content: "\2713\00a0"; }

/* Screenshot frames */
.entry-content .wp-block-image img {
	border-radius: 12px;
	border: 1px solid var(--global-palette7);
}

/* FAQ: Rank Math FAQ block and plain <details> */
.entry-content .rank-math-faq-item,
.entry-content details {
	margin: 0 0 12px;
	padding: 18px 20px;
	border-radius: 12px;
	border: 1px solid var(--global-palette7);
	background: var(--global-palette9);
}
.entry-content .rank-math-question {
	margin: 0 0 .5em;
	font-size: 1.05em;
}
.entry-content .rank-math-answer > :last-child { margin-bottom: 0; }
.entry-content details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--global-palette3);
}

/* Homepage hero: Group block with class "t201-hero" */
.t201-hero {
	background-image:
		linear-gradient(var(--t201-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--t201-grid) 1px, transparent 1px);
	background-size: 40px 40px;
	border-bottom: 1px solid var(--global-palette7);
}
.t201-mono { font-family: var(--t201-mono); }

/* Cards: Group block with class "t201-card" */
.t201-card {
	padding: 24px;
	border-radius: 14px;
	border: 1px solid var(--global-palette7);
	background: var(--global-palette9);
}

/* Ad containers never sit flush against content */
.entry-content .google-auto-placed,
.entry-content ins.adsbygoogle { margin: 1.75em auto; }

@media (prefers-reduced-motion: reduce) {
	.t201-toggle { transition: none; }
}