/*
Theme Name: About Docs
Theme URI: https://jonabnayem.framer.website/
Author: Nayem
Author URI: https://jonabnayem.framer.website/
Description: Implementation-ready, token-driven documentation theme for "About" — a clean, functional, implementation-oriented design system for developer-facing docs. Built from the project's design-system spec (WCAG 2.2 AA, keyboard-first, full interactive states on every component).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: about-docs
*/

/* =====================================================================
   1. DESIGN TOKENS
   Sourced directly from the design-system spec. Do not hardcode raw
   hex values or px sizes in component rules below — reference these
   custom properties instead (per "Rules: Do — use semantic tokens").
   NOTE: the spec did not define a primary text color for body copy on
   the black surface; --color-text-primary (#ffffff) is added here as
   the one necessary addition to make body text readable/AA-compliant.
   ===================================================================== */
:root {
	/* Color */
	--color-surface-base: #000000;
	--color-surface-muted: #191919;
	--color-surface-raised: #141414;
	--color-surface-strong: #212121;
	--color-text-primary: #ffffff; /* added: not specified in spec, needed for AA body text */
	--color-text-secondary: #cccccc;
	--color-text-tertiary: #999999;
	--color-text-inverse: #757575;

	/* Functional aliases (derived from the palette above, no new colors introduced) */
	--color-border: var(--color-surface-strong);
	--color-focus-ring: var(--color-text-primary);
	--color-link: var(--color-text-primary);
	--color-link-hover: var(--color-text-secondary);
	--color-error: #ff6b6b; /* added: spec requires an "error" state on every component but defines no error color */
	--color-error-surface: #2a1414; /* added: derived tint for error backgrounds, kept dark to match surface family */

	/* Typography */
	--font-family-primary: sans-serif;
	--font-family-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-size-base: 12px;
	--font-weight-base: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 600;
	--line-height-base: normal;
	--line-height-tight: 1.25;
	--line-height-relaxed: 1.6;

	--font-size-xs: 12px;
	--font-size-sm: 13px;
	--font-size-md: 14px;
	--font-size-lg: 15px;
	--font-size-xl: 16px;
	--font-size-2xl: 18px;
	--font-size-3xl: 22px;
	--font-size-4xl: 30px;

	/* Spacing */
	--space-1: 4px;
	--space-2: 6px;
	--space-3: 8px;
	--space-4: 10px;
	--space-5: 12px;
	--space-6: 16px;
	--space-7: 20px;

	/* Radius */
	--radius-xs: 10px;
	--radius-sm: 12px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 40px;
	--radius-2xl: 50px;

	/* Motion */
	--motion-duration-instant: 300ms;
	--motion-easing: ease;

	/* Layout */
	--layout-max-width: 1200px;
	--layout-sidebar-width: 260px;
	--layout-content-max-width: 760px;
}

/* =====================================================================
   2. RESET & BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--color-surface-base);
	color: var(--color-text-secondary);
	font-family: var(--font-family-stack);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-base);
	line-height: var(--line-height-relaxed);
}

img, svg { max-width: 100%; display: block; }

a {
	color: var(--color-link);
	text-decoration: none;
}
a:hover { color: var(--color-link-hover); text-decoration: underline; }
a:active { color: var(--color-text-tertiary); }

/* Global focus-visible rule — required across all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}
/* Never hide focus indicators (Rules: Don't) */
a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: none; }
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

h1, h2, h3, h4, h5, h6 {
	color: var(--color-text-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	margin: 0 0 var(--space-5);
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); margin-top: var(--space-7); }
h3 { font-size: var(--font-size-2xl); margin-top: var(--space-6); }
h4 { font-size: var(--font-size-xl); }
p { margin: 0 0 var(--space-6); }

code, pre, kbd, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--font-size-sm);
}
code {
	background: var(--color-surface-muted);
	color: var(--color-text-primary);
	padding: 2px var(--space-2);
	border-radius: var(--radius-xs);
}
pre {
	background: var(--color-surface-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	overflow-x: auto;
}
pre code { background: none; padding: 0; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--color-surface-strong);
	color: var(--color-text-primary);
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-xs);
}
.skip-link:focus { left: var(--space-6); top: var(--space-6); }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* =====================================================================
   3. LAYOUT
   ===================================================================== */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-surface-base);
	border-bottom: 1px solid var(--color-border);
}
.site-header-inner {
	max-width: var(--layout-max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	padding: var(--space-5) var(--space-7);
}
.site-branding { display: flex; align-items: center; gap: var(--space-4); }
.site-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin: 0; }
.site-title a { color: inherit; }
.site-title a:hover { color: var(--color-text-secondary); text-decoration: none; }
.site-description { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin: 0; }

.primary-nav ul {
	list-style: none;
	display: flex;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
}
.primary-nav a {
	display: inline-block;
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-xs);
}
.primary-nav a:hover { color: var(--color-text-primary); background: var(--color-surface-muted); text-decoration: none; }
.primary-nav a:active { background: var(--color-surface-strong); }
.primary-nav .current-menu-item > a {
	color: var(--color-text-primary);
	background: var(--color-surface-raised);
}

.menu-toggle {
	display: none;
	background: var(--color-surface-muted);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-size-sm);
}
.menu-toggle:hover { background: var(--color-surface-strong); }
.menu-toggle[aria-expanded="true"] { background: var(--color-surface-strong); }

.site-main-wrap {
	flex: 1;
	max-width: var(--layout-max-width);
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: var(--space-7);
	padding: var(--space-7);
}

.docs-sidebar {
	width: var(--layout-sidebar-width);
	flex-shrink: 0;
	position: sticky;
	top: calc(var(--space-7) * 3);
}
.docs-nav-heading {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-tertiary);
	margin: var(--space-6) 0 var(--space-3);
}
.docs-nav-heading:first-child { margin-top: 0; }
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav a {
	display: block;
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-xs);
	border-left: 2px solid transparent;
}
.docs-nav a:hover { color: var(--color-text-primary); background: var(--color-surface-muted); text-decoration: none; }
.docs-nav a:active { background: var(--color-surface-strong); }
.docs-nav .current_page_item > a,
.docs-nav a[aria-current="page"] {
	color: var(--color-text-primary);
	border-left-color: var(--color-text-primary);
	background: var(--color-surface-raised);
}

.content-area { flex: 1; min-width: 0; max-width: var(--layout-content-max-width); }

.site-footer {
	border-top: 1px solid var(--color-border);
	color: var(--color-text-tertiary);
	font-size: var(--font-size-xs);
}
.site-footer-inner {
	max-width: var(--layout-max-width);
	margin: 0 auto;
	padding: var(--space-6) var(--space-7);
	display: flex;
	justify-content: space-between;
	gap: var(--space-6);
	flex-wrap: wrap;
}
.site-footer a { color: var(--color-text-tertiary); }
.site-footer a:hover { color: var(--color-text-secondary); }

/* =====================================================================
   4. COMPONENTS
   ===================================================================== */

/* --- Button: default, hover, focus-visible, active, disabled, loading, error --- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: inherit;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-surface-muted);
	color: var(--color-text-primary);
	cursor: pointer;
	transition: background var(--motion-duration-instant) var(--motion-easing),
		border-color var(--motion-duration-instant) var(--motion-easing);
}
.btn:hover { background: var(--color-surface-strong); text-decoration: none; }
.btn:active { background: var(--color-surface-base); border-color: var(--color-text-tertiary); }
.btn:disabled,
.btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.5;
	background: var(--color-surface-muted);
	color: var(--color-text-tertiary);
}
.btn.is-loading {
	color: transparent;
	position: relative;
	pointer-events: none;
}
.btn.is-loading::after {
	content: "";
	position: absolute;
	width: 14px; height: 14px;
	border: 2px solid var(--color-text-tertiary);
	border-top-color: var(--color-text-primary);
	border-radius: 50%;
	animation: btn-spin 0.6s linear infinite;
}
.btn.is-error { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-surface); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.btn.is-loading::after { animation-duration: 1.4s; }
	* { scroll-behavior: auto !important; }
}

.btn-primary { background: var(--color-text-primary); color: var(--color-surface-base); border-color: var(--color-text-primary); }
.btn-primary:hover { background: var(--color-text-secondary); }
.btn-primary:active { background: var(--color-text-tertiary); }

/* --- Search form: default, hover, focus-visible, disabled, error --- */
.search-form { display: flex; gap: var(--space-3); }
.search-form label { flex: 1; }
.search-field {
	width: 100%;
	font-family: inherit;
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
	background: var(--color-surface-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-4) var(--space-5);
}
.search-field::placeholder { color: var(--color-text-tertiary); }
.search-field:hover { border-color: var(--color-text-tertiary); }
.search-field:disabled { opacity: 0.5; cursor: not-allowed; }
.search-form.is-error .search-field { border-color: var(--color-error); }
.search-form-error {
	font-size: var(--font-size-xs);
	color: var(--color-error);
	margin-top: var(--space-2);
}

/* --- Card --- */
.card {
	background: var(--color-surface-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}
.card:hover { border-color: var(--color-text-tertiary); }
.card + .card { margin-top: var(--space-6); }
.card-title { font-size: var(--font-size-lg); color: var(--color-text-primary); margin: 0 0 var(--space-3); }
.card-title a { color: inherit; }
.card-title a:hover { color: var(--color-text-secondary); }
.card-meta { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin: 0 0 var(--space-4); }

/* --- Empty state --- */
.empty-state {
	text-align: center;
	padding: var(--space-7) var(--space-6);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-text-tertiary);
}

/* --- Pagination --- */
.pagination { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }
.pagination a, .pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-xs);
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}
.pagination a:hover { background: var(--color-surface-muted); color: var(--color-text-primary); text-decoration: none; }
.pagination .current { background: var(--color-surface-strong); color: var(--color-text-primary); }

/* --- Table (long-content / overflow handling) --- */
.table-scroll { overflow-x: auto; margin-bottom: var(--space-6); }
table { border-collapse: collapse; width: 100%; font-size: var(--font-size-sm); }
th, td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
th { color: var(--color-text-primary); font-weight: var(--font-weight-bold); white-space: nowrap; }

/* --- Long content / truncation utility --- */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   5. RESPONSIVE
   ===================================================================== */
@media (max-width: 782px) {
	.menu-toggle { display: inline-flex; }
	.primary-nav { display: none; width: 100%; }
	.primary-nav.is-open { display: block; }
	.primary-nav ul { flex-direction: column; gap: var(--space-2); }
	.site-header-inner { flex-wrap: wrap; }

	.site-main-wrap { flex-direction: column; padding: var(--space-6); }
	.docs-sidebar { width: 100%; position: static; }
	.content-area { max-width: 100%; }
}