/* Kevin D. Johnson — Custom Styles */

/* ── Theme Variables ───────────────────────────────── */
:root {
	--bg: #0a0e1a;
	--surface: #111827;
	--surface-light: #1e293b;
	--primary: #3b82f6;
	--secondary: #1e40af;
	--accent: #60a5fa;
	--text: #e2e8f0;
	--text-body: #cbd5e1;
	--muted: #94a3b8;
	--dim: #4b5563;
	--heading: #f8fafc;
	--border: #1e293b;
	--border-faint: rgba(30, 41, 59, 0.3);
	--code-bg: #111827;
	--code-text: #60a5fa;
	--header-bg: #0a0e1aee;
	--selection-bg: rgba(59, 130, 246, 0.3);
	--modal-bg: #0a0e1a;
	--scrollbar-track: #0a0e1a;
	--scrollbar-thumb: #1e293b;
	--scrollbar-hover: #334155;
	--hero-overlay-start: rgba(10, 14, 26, 0.3);
	--hero-overlay-mid: rgba(10, 14, 26, 0.7);
	--hero-overlay-end: #0a0e1a;
	--modal-backdrop: rgba(0, 0, 0, 0.92);
	--link-hover: #93bbfd;
	--btn-hover: #2563eb;
}

[data-theme="light"] {
	--bg: #f8fafc;
	--surface: #f1f5f9;
	--surface-light: #e2e8f0;
	--primary: #2563eb;
	--secondary: #1e40af;
	--accent: #3b82f6;
	--text: #334155;
	--text-body: #475569;
	--muted: #64748b;
	--dim: #94a3b8;
	--heading: #0f172a;
	--border: #cbd5e1;
	--border-faint: rgba(203, 213, 225, 0.5);
	--code-bg: #f1f5f9;
	--code-text: #2563eb;
	--header-bg: rgba(248, 250, 252, 0.95);
	--selection-bg: rgba(37, 99, 235, 0.2);
	--modal-bg: #ffffff;
	--scrollbar-track: #f1f5f9;
	--scrollbar-thumb: #cbd5e1;
	--scrollbar-hover: #94a3b8;
	--hero-overlay-start: rgba(248, 250, 252, 0.1);
	--hero-overlay-mid: rgba(248, 250, 252, 0.75);
	--hero-overlay-end: #f8fafc;
	--modal-backdrop: rgba(0, 0, 0, 0.6);
	--link-hover: #1d4ed8;
	--btn-hover: #1d4ed8;
}

/* ── Global ─────────────────────────────────────── */
html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--bg);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 0.3s ease, color 0.3s ease;
}

::selection {
	background-color: var(--selection-bg);
	color: var(--heading);
}

/* ── Typography ─────────────────────────────────── */
.wp-block-heading {
	font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
}

#focus-areas .wp-block-heading,
#writing .wp-block-heading,
#about .wp-block-heading {
	font-family: 'Chakra Petch', sans-serif;
	letter-spacing: 0.04em;
}

.article-card h3,
.wp-block-post-title {
	font-family: 'Chakra Petch', sans-serif;
}

/* Site title in header */
.wp-block-site-title {
	font-family: 'Chakra Petch', sans-serif !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
}

/* ── Minimal Navigation ─────────────────────────── */
.nav-minimal {
	display: flex;
	gap: 2.5rem;
	align-items: center;
}

.nav-minimal a {
	font-family: 'Chakra Petch', sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	text-decoration: none;
	position: relative;
	padding-bottom: 2px;
	transition: color 0.3s ease;
}

.nav-minimal a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	transition: width 0.3s ease;
}

.nav-minimal a:hover {
	color: var(--text);
}

.nav-minimal a:hover::after {
	width: 100%;
}

/* ── Sticky Header ──────────────────────────────── */
.site-header {
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	z-index: 100;
}

/* ── Hero Cover ─────────────────────────────────── */
.hero-cover {
	background-image:
		linear-gradient(180deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 60%, var(--hero-overlay-end) 100%),
		url('../images/hero-bg.jpg');
	background-size: cover;
	background-position: center 30%;
	background-attachment: fixed;
}

@media (max-width: 768px) {
	.hero-cover {
		background-attachment: scroll;
	}

	.hero-cover h1 {
		font-size: 2.25rem !important;
	}

	.scramble-tagline {
		font-size: 1.1rem !important;
	}

	.nav-minimal {
		gap: 1.5rem;
	}
}

/* ── Hero CTA ───────────────────────────────────── */
.hero-cta {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(96, 165, 250, 0.3);
	transition: all 0.3s ease;
}

.hero-cta:hover {
	color: var(--link-hover);
	border-bottom-color: var(--accent);
}

.hero-cta .cta-arrow {
	display: inline-block;
	transition: transform 0.3s ease;
}

.hero-cta:hover .cta-arrow {
	transform: translateX(4px);
}

/* ── Scramble Tagline ───────────────────────────── */
.scramble-tagline {
	font-family: 'IBM Plex Mono', monospace !important;
	font-size: 1.2rem !important;
	color: var(--accent) !important;
	visibility: hidden;
}

.scramble-tagline.scramble-ready {
	visibility: visible;
}

/* ── Focus Areas Table ──────────────────────────── */
.focus-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.focus-table td {
	padding: 1.5rem 2rem 1.5rem 0;
	vertical-align: top;
	width: 33.33%;
}

.focus-table td:last-child {
	padding-right: 0;
}

.focus-table tr:first-child td {
	padding-bottom: 2.5rem;
}

.focus-table tr:last-child td {
	padding-top: 2.5rem;
}

.focus-table h3 {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--muted);
	margin: 0 0 0.5rem 0;
	letter-spacing: 0.01em;
}

.focus-table p {
	font-size: 0.85rem;
	color: var(--dim);
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.focus-table,
	.focus-table tbody,
	.focus-table tr,
	.focus-table td {
		display: block;
		width: 100%;
		padding-right: 0;
	}

	.focus-table td {
		padding: 1.25rem 0;
	}
}

/* ── Writing Table ──────────────────────────────── */
.writing-table {
	gap: 2.5rem 4rem !important;
}

.writing-cell {
	background: none !important;
}

.writing-cell .wp-block-post-title {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
}

.writing-cell .wp-block-post-date {
	color: var(--dim);
}

/* ── Demo Table ─────────────────────────────────── */
.demo-table {
	width: 100%;
	border-collapse: collapse;
}

.demo-table th {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--dim);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: left;
	padding: 0 1.5rem 1rem 0;
	border-bottom: 1px solid var(--border);
}

.demo-table td {
	padding: 1rem 1.5rem 1rem 0;
	vertical-align: top;
	font-size: 0.9rem;
	color: var(--muted);
	line-height: 1.5;
	border-bottom: 1px solid var(--border-faint);
}

.demo-table td:first-child {
	white-space: nowrap;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.8rem;
	color: var(--dim);
	width: 5rem;
}

.demo-table td:last-child {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.75rem;
	color: var(--dim);
	width: 22%;
	padding-right: 0;
}

.demo-table td a {
	color: var(--muted);
	text-decoration: none;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	transition: color 0.2s ease;
}

.demo-table td a:hover {
	color: var(--accent);
}

.demo-table tr:last-child td {
	border-bottom: none;
}

.video-link {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.75rem;
	color: var(--primary) !important;
	text-decoration: none !important;
	white-space: nowrap;
	margin-left: 0.5rem;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.video-link:hover {
	opacity: 1;
	color: var(--accent) !important;
}

.writeup-link {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.75rem;
	color: var(--primary) !important;
	text-decoration: none !important;
	white-space: nowrap;
	margin-left: 0.5rem;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.writeup-link:hover {
	opacity: 1;
	color: var(--accent) !important;
}

@media (max-width: 768px) {
	.demo-table td:last-child {
		display: none;
	}

	.demo-table th:last-child {
		display: none;
	}
}

/* ── Media Modal ────────────────────────────────── */
.media-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.media-modal.active {
	opacity: 1;
	visibility: visible;
}

.media-modal-backdrop {
	position: absolute;
	inset: 0;
	background: var(--modal-backdrop);
}

.media-modal-content {
	position: relative;
	z-index: 1;
	max-width: 95vw;
	max-height: 95vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.media-modal-content video,
.media-modal-content img {
	border-radius: 4px;
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
}

.media-modal-close {
	position: absolute;
	top: 1.5rem;
	right: 2rem;
	z-index: 2;
	background: none;
	border: none;
	color: var(--muted);
	font-size: 2rem;
	cursor: pointer;
	line-height: 1;
	padding: 0.5rem;
	transition: color 0.2s ease;
}

.media-modal-close:hover {
	color: var(--heading);
}

.media-modal-content:has(.modal-article) {
	align-items: flex-start;
	padding-top: 3vh;
}

.modal-article {
	background: var(--modal-bg);
	max-width: 800px;
	width: 95vw;
	max-height: 90vh;
	overflow-y: auto;
	padding: 3rem;
	border-radius: 8px;
	border: 1px solid var(--border);
	-webkit-overflow-scrolling: touch;
}

.modal-article h1 {
	font-family: 'Chakra Petch', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	color: var(--heading);
	margin: 0 0 2rem 0;
	line-height: 1.3;
}

.modal-article h2 {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--text);
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

.modal-article p {
	color: var(--text-body);
	line-height: 1.8;
	font-size: 1rem;
}

.modal-article a {
	color: var(--accent);
}

.modal-article hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 2rem 0;
}

.modal-article em {
	color: var(--muted);
}

.modal-loading {
	color: var(--muted);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.9rem;
	padding: 3rem;
}

/* Scrollbar for modal article */
.modal-article::-webkit-scrollbar {
	width: 6px;
}

.modal-article::-webkit-scrollbar-track {
	background: var(--bg);
}

.modal-article::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 3px;
}

/* ── Post Content Styling ───────────────────────── */
.wp-block-post-content p {
	color: var(--text-body);
	line-height: 1.8;
}

.wp-block-post-content h2 {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

.wp-block-post-content blockquote {
	border-left: 3px solid var(--primary);
	padding-left: 1.5rem;
	margin-left: 0;
	color: var(--muted);
	font-style: italic;
}

.wp-block-post-content pre {
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.5rem;
	overflow-x: auto;
}

.wp-block-post-content code {
	background: var(--surface-light);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
	color: var(--code-text);
}

.wp-block-post-content pre code {
	background: transparent;
	padding: 0;
}

/* ── Responsive Column Stacking ─────────────────── */
@media (max-width: 768px) {
	.wp-block-columns {
		flex-direction: column !important;
	}

	.wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ── Subtle Starfield Animation (hero only) ─────── */
@keyframes twinkle {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
		radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
		radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
		radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
		radial-gradient(1.5px 1.5px at 10% 80%, rgba(255,255,255,0.4) 0%, transparent 100%),
		radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.3) 0%, transparent 100%),
		radial-gradient(1.5px 1.5px at 90% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
		radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.2) 0%, transparent 100%);
	animation: twinkle 4s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

.hero-section {
	position: relative;
}

.hero-section .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* ── Pagination Styling ─────────────────────────── */
.wp-block-query-pagination a,
.wp-block-query-pagination span {
	color: var(--muted);
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--border);
	transition: all 0.2s ease;
}

.wp-block-query-pagination a:hover {
	color: var(--accent);
	border-bottom-color: var(--primary);
}

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-hover);
}

/* ── Theme Toggle ──────────────────────────────── */
.theme-toggle {
	background: none;
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--muted);
	cursor: pointer;
	padding: 0.4rem 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.3s ease, border-color 0.3s ease;
	line-height: 1;
}

.theme-toggle:hover {
	color: var(--text);
	border-color: var(--muted);
}

.theme-toggle svg {
	width: 16px;
	height: 16px;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ── Light Theme: Override WP preset CSS variables ── */
/* WordPress generates classes like .has-white-color that use
   var(--wp--preset--color--white) !important. The only way to
   beat that specificity is to redefine the variables themselves. */
[data-theme="light"] {
	--wp--preset--color--background: #f8fafc;
	--wp--preset--color--surface: #f1f5f9;
	--wp--preset--color--surface-light: #e2e8f0;
	--wp--preset--color--primary: #2563eb;
	--wp--preset--color--secondary: #1e40af;
	--wp--preset--color--accent: #3b82f6;
	--wp--preset--color--text: #334155;
	--wp--preset--color--muted: #64748b;
	--wp--preset--color--white: #0f172a;
}

/* ── Light Theme Overrides for WP blocks ───────── */
[data-theme="light"] .wp-block-group.site-header {
	background-color: var(--header-bg) !important;
}

[data-theme="light"] .wp-block-site-title a {
	color: var(--heading) !important;
}

[data-theme="light"] .wp-block-heading {
	color: var(--heading);
}

[data-theme="light"] a {
	color: var(--accent);
}

[data-theme="light"] a:hover {
	color: var(--link-hover);
}

[data-theme="light"] h1, [data-theme="light"] h2,
[data-theme="light"] h3, [data-theme="light"] h4 {
	color: var(--heading);
}

/* WP-generated body styles use hardcoded colors */
[data-theme="light"] body {
	background-color: var(--bg);
	color: var(--text);
}

[data-theme="light"] a:where(:not(.wp-element-button)) {
	color: var(--accent);
}

[data-theme="light"] :where(a:where(:not(.wp-element-button)):hover) {
	color: var(--link-hover);
}

/* Footer border */
[data-theme="light"] .wp-block-group[style*="border-top-color:#1e293b"] {
	border-top-color: var(--border) !important;
}

/* Hero scramble tagline inline color */
[data-theme="light"] .scramble-tagline {
	color: var(--accent) !important;
}

/* Hero cover in light mode */
[data-theme="light"] .hero-cover .wp-block-cover__background {
	background-color: var(--bg) !important;
}

/* Post title links in writing section */
[data-theme="light"] .writing-cell .wp-block-post-title a {
	color: var(--muted) !important;
}

[data-theme="light"] .writing-cell .wp-block-post-title a:hover {
	color: var(--heading) !important;
}

/* WP blocks with inline background colors */
[data-theme="light"] .wp-block-code,
[data-theme="light"] .wp-block-preformatted {
	background: var(--code-bg) !important;
	color: var(--code-text) !important;
}

[data-theme="light"] .wp-block-quote {
	color: var(--muted) !important;
	border-left-color: var(--primary) !important;
}

/* ── Modal article fetched content overrides ───── */
/* Fetched WP post HTML contains inline dark-theme colors that
   must be forced to light-theme values inside the modal. */
[data-theme="light"] .modal-article p,
[data-theme="light"] .modal-article li {
	color: var(--text-body) !important;
}

[data-theme="light"] .modal-article h1,
[data-theme="light"] .modal-article h2,
[data-theme="light"] .modal-article h3,
[data-theme="light"] .modal-article h4 {
	color: var(--heading) !important;
}

[data-theme="light"] .modal-article h2 {
	border-top-color: var(--border) !important;
}

[data-theme="light"] .modal-article a {
	color: var(--accent) !important;
}

[data-theme="light"] .modal-article em {
	color: var(--muted) !important;
}

[data-theme="light"] .modal-article pre,
[data-theme="light"] .modal-article .wp-block-code {
	background: var(--code-bg) !important;
	border-color: var(--border) !important;
}

[data-theme="light"] .modal-article code {
	background: var(--surface-light) !important;
	color: var(--code-text) !important;
}

[data-theme="light"] .modal-article pre code {
	background: transparent !important;
}

[data-theme="light"] .modal-article blockquote {
	color: var(--muted) !important;
	border-left-color: var(--primary) !important;
}

[data-theme="light"] .modal-article hr {
	border-top-color: var(--border) !important;
}

[data-theme="light"] .modal-article .has-muted-color {
	color: var(--muted) !important;
}

[data-theme="light"] .modal-article .has-white-color {
	color: var(--heading) !important;
}