/*
Theme Name: OverAchiever 26
Theme URI: https://www.overachiever.net/
Author: Michael K. Campbell
Author URI: https://www.overachiever.net/
Description: A lightweight, content-first block theme for the 3to9 Blog — single-column, fast, and responsive, with a light/auto/dark switch, a grey page / white content card, and self-hosted fonts (Schibsted Grotesk + Geist Mono) plus Prism syntax highlighting. Built for WordPress 6.5+ and PHP 8.2+.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: overachiever26
Tags: blog, one-column, full-site-editing, block-patterns, custom-colors, custom-logo, sticky-post, editor-style, translation-ready
*/

/* ==========================================================================
   Self-hosted fonts
   ========================================================================== */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/schibsted-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/schibsted-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/schibsted-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/schibsted-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/geist-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/geist-mono-500.woff2") format("woff2"); }

/* ==========================================================================
   Design tokens — LIGHT (defaults)
   ========================================================================== */
:root {
	--accent:#D9191B; --accent-soft:#fdeaea;
	--ink:#0a0a0a; --ink-soft:#666666;
	--page:#DEDEDE; --card:#ffffff; --card-border:#d4d4d4; --surface:#ffffff;
	--rule:#ededed; --rule-strong:#d4d4d4; --sel:#fbcfcc;
	--code-bg:#f6f8fa; --code-ink:#24292f; --code-border:#e1e4e8; --code-dim:#6e7781;
	--c-com:#6e7781; --c-key:#b21531; --c-str:#117a3d; --c-num:#0a58ca; --c-fn:#6639ba; --c-type:#0e7490; --c-var:#953800;
	--font:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--maxw:840px;
}

/* Design tokens — DARK. Two triggers: system preference (unless forced light) and forced dark.
   We also remap the matching --wp--preset--color--* vars so editor-applied palette colours flip too. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--accent:#fb5249; --accent-soft:#2e1412;
		--ink:#fafafa; --ink-soft:#8f8f8f;
		--page:#0a0a0a; --card:#161719; --card-border:#26272b; --surface:#111111;
		--rule:#1f1f1f; --rule-strong:#2e2e2e; --sel:#5f231d;
		--code-bg:#0d1117; --code-ink:#e6edf3; --code-border:#2a2f37; --code-dim:#8b949e;
		--c-com:#8b949e; --c-key:#ff7b72; --c-str:#7ee787; --c-num:#79c0ff; --c-fn:#d2a8ff; --c-type:#56d4d4; --c-var:#ffa657;
		--wp--preset--color--accent:#fb5249; --wp--preset--color--ink:#fafafa; --wp--preset--color--ink-soft:#8f8f8f;
		--wp--preset--color--page:#0a0a0a; --wp--preset--color--card:#161719;
	}
}
[data-theme="dark"] {
	--accent:#fb5249; --accent-soft:#2e1412;
	--ink:#fafafa; --ink-soft:#8f8f8f;
	--page:#0a0a0a; --card:#161719; --card-border:#26272b; --surface:#111111;
	--rule:#1f1f1f; --rule-strong:#2e2e2e; --sel:#5f231d;
	--code-bg:#0d1117; --code-ink:#e6edf3; --code-border:#2a2f37; --code-dim:#8b949e;
	--c-com:#8b949e; --c-key:#ff7b72; --c-str:#7ee787; --c-num:#79c0ff; --c-fn:#d2a8ff; --c-type:#56d4d4; --c-var:#ffa657;
	--wp--preset--color--accent:#fb5249; --wp--preset--color--ink:#fafafa; --wp--preset--color--ink-soft:#8f8f8f;
	--wp--preset--color--page:#0a0a0a; --wp--preset--color--card:#161719;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
	background: var(--page);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background .25s, color .25s;
}
::selection { background: var(--sel); }
a { color: var(--accent); text-underline-offset: 3px; }

/* Keep any image (block or classic/legacy) inside its container — no per-image
   work needed. height:auto preserves aspect ratio when width is capped. */
img { max-width: 100%; height: auto; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { background: var(--card); position: sticky; top: 0; z-index: 30; }
.site-bar {
	max-width: var(--maxw); margin: 0 auto; height: 58px; padding: 0 24px;
	display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; margin-right: auto; }
.brand .logo { height: 50px; width: auto; display: block; }
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .brand .logo-light { display: none; }
	:root:not([data-theme="light"]) .brand .logo-dark { display: block; }
}
[data-theme="dark"] .brand .logo-light { display: none; }
[data-theme="dark"] .brand .logo-dark { display: block; }

/* Primary navigation (custom, server-rendered — see patterns/site-nav.php) */
.main-nav { position: relative; display: flex; align-items: center; }
.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-menu > a,
.nav-menu .menu-btn {
	color: var(--ink-soft); text-transform: uppercase; font-weight: 600; letter-spacing: .03em;
	font-size: 13px; line-height: 1; padding: 7px 10px; text-decoration: none;
}
.nav-menu > a:hover,
.nav-menu .menu-btn:hover { color: var(--accent); }
.nav-menu .dd { position: relative; display: inline-flex; align-items: center; }
.nav-menu .menu-btn { list-style: none; background: none; border: 0; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-menu .menu-btn::-webkit-details-marker { display: none; }
.nav-menu .menu-btn::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .6; }
.nav-menu .dd-panel {
	position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; display: none;
	min-width: 200px; padding: 6px; background: var(--surface);
	border: 1px solid var(--rule-strong); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.12);
}
.nav-menu .dd[open] .dd-panel { display: block; }
.nav-menu .dd-panel a { display: block; padding: 9px 12px; font-size: 14px; color: var(--ink-soft); text-decoration: none; border-radius: 8px; white-space: nowrap; }
.nav-menu .dd-panel a:hover { background: var(--accent-soft); color: var(--ink); }
.nav-menu .dd-panel a[aria-current="page"] { color: var(--accent); }
.nav-menu .dd-sep { height: 1px; margin: 5px 8px; background: var(--rule); }

/* Hamburger toggle — hidden on desktop */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--ink-soft); padding: 6px; align-items: center; justify-content: center; }
.nav-toggle:hover { color: var(--accent); }
.nav-toggle svg { display: block; }
.nav-toggle .nav-toggle-close { display: none; }
.main-nav.is-open .nav-toggle .nav-toggle-open { display: none; }
.main-nav.is-open .nav-toggle .nav-toggle-close { display: block; }

/* Mobile: collapse the links behind the hamburger; theme picker stays separate */
@media (max-width: 700px) {
	.site-bar { padding: 0 16px; }
	.brand .logo { height: 40px; }
	.nav-toggle { display: inline-flex; }
	.nav-menu {
		display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
		flex-direction: column; align-items: stretch; gap: 2px; min-width: 220px; padding: 6px;
		background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 12px;
		box-shadow: 0 16px 40px rgba(0,0,0,.16);
	}
	.main-nav.is-open .nav-menu { display: flex; }
	.nav-menu > a,
	.nav-menu .menu-btn { width: 100%; padding: 10px 12px; border-radius: 8px; }
	.nav-menu > a:hover,
	.nav-menu .menu-btn:hover { background: var(--accent-soft); color: var(--ink); }
	.nav-menu .menu-btn { justify-content: space-between; }
	.nav-menu .menu-btn::after { margin-top: 0; }
	/* Blog submenu expands inline within the mobile panel */
	.nav-menu .dd { position: static; display: block; }
	.nav-menu .dd-panel {
		position: static; display: none; min-width: 0; margin: 2px 0 4px;
		padding: 2px 0 2px 10px; background: none; border: 0; border-radius: 0; box-shadow: none;
	}
	.nav-menu .dd[open] .dd-panel { display: block; }
}

/* ==========================================================================
   Theme toggle (custom header snippet)
   ========================================================================== */
.theme-dd { position: relative; }
.theme-dd > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; padding: 7px 8px; color: var(--ink-soft); cursor: pointer; }
.theme-dd > summary::-webkit-details-marker { display: none; }
.theme-dd > summary:hover { color: var(--accent); }
.theme-dd #theme-icon { display: flex; }
.theme-dd #theme-icon svg { display: block; }
.theme-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 5px; min-width: 158px; box-shadow: 0 16px 40px rgba(0,0,0,.16); display: none; z-index: 40; }
.theme-dd[open] .theme-menu { display: block; }
.theme-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; cursor: pointer; color: var(--ink-soft); font: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 10px; border-radius: 8px; text-align: left; }
.theme-menu button:hover { background: var(--accent-soft); color: var(--ink); }
.theme-menu button[aria-checked="true"] { color: var(--accent); }
.theme-menu .ck { margin-left: auto; display: inline-flex; opacity: 0; }
.theme-menu button[aria-checked="true"] .ck { opacity: 1; }
.theme-menu .mi { display: inline-flex; }

/* ==========================================================================
   Content card (grey page / white card)
   ========================================================================== */
/* Deterministic top gap: padding on <main> (non-collapsing) instead of the
   card's top margin, which WordPress resets to 0 for direct children of a flow
   container but leaves intact when the card is nested in the query loop — so
   relying on it made the header-to-first-card gap differ between single posts
   and archive/list pages. */
.site-main { margin-top: 0; padding-top: 28px; }
.content-card {
	max-width: var(--maxw); margin: 0 auto 40px; background: var(--card);
	border: 1px solid var(--card-border); border-radius: 6px; padding: 52px 44px;
	box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 34px -14px rgba(0,0,0,.14);
}
@media (max-width: 688px) {
	.site-main { padding-top: 16px; }
	.content-card { margin: 0 12px 28px; padding: 36px 24px; }
}

/* Post header bits */
/* Category badges — each term (a `.wp-block-post-terms` link) is its own pill,
   so hover styles the whole pill at once and multiple categories don't share a
   box. WordPress's term separator is hidden in favour of a flex gap. */
.kicker { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.kicker a { display: inline-block; color: var(--accent); text-decoration: none; border: 2.5px solid var(--accent); border-radius: 3px; padding: 4px 9px; }
.kicker a:hover { background: var(--accent); color: #fff; text-decoration: none; }
.kicker .wp-block-post-terms__separator { display: none; }
.wp-block-post-title { font-size: clamp(32px, 6vw, 46px); line-height: 1.05; letter-spacing: -.035em; font-weight: 600; margin: 0 0 22px; }
.wp-block-post-title a, .wp-block-post-title a:hover { text-decoration: none; }
.post-meta { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--ink-soft); display: flex; gap: 16px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }

/* Archive / search heading (Query Title). Archive titles are split by the theme
   into a badge label + big term ("Option 2"); search titles use the base style. */
.wp-block-query-title { font-size: clamp(28px, 5vw, 40px); line-height: 1.05; letter-spacing: -.025em; font-weight: 600; margin: 0; }
.wp-block-query-title.qt-styled { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 18px; border-left: 4px solid var(--accent); }
.qt-label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .05em; line-height: 1; text-transform: uppercase; color: var(--ink-soft); }
.qt-term { text-transform: capitalize; }
.wp-block-term-description { color: var(--ink-soft); font-size: 16px; margin-top: 16px; }

/* ==========================================================================
   Post content typography
   ========================================================================== */
.entry-content { font-size: 18px; }
.entry-content > p { margin: 1.4em 0; }
.entry-content > p.lede, .entry-content > .lede { font-size: 20px; color: var(--ink-soft); line-height: 1.55; }
.entry-content h2 { font-size: 24px; letter-spacing: -.025em; color: var(--ink); margin: 2.2em 0 .3em; font-weight: 600; }
.entry-content blockquote, .wp-block-quote { margin: 1.8em 0; font-size: 22px; line-height: 1.45; letter-spacing: -.02em; color: var(--ink); padding-left: 20px; border-left: 2px solid var(--accent); }
.entry-content figure, .wp-block-image { margin: 40px 0; }
.wp-block-image img { border-radius: 8px; }
figcaption { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; }

/* ==========================================================================
   Code — bare fallbacks + Style D chrome + Prism theme-aware tokens
   ========================================================================== */
pre { background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--rule); border-radius: 10px; padding: 18px; overflow: auto; font: 13px/1.65 var(--mono); margin: 1.8em 0; }
code { font: 13px/1.5 var(--mono); background: var(--code-bg); padding: .12em .35em; border-radius: 5px; font-size: .88em; }
pre code { background: none; padding: 0; font-size: 13px; }

.codeblock { margin: 1.8em 0; border: 1px solid var(--code-border); border-radius: 10px; overflow: hidden; background: var(--code-bg); }
.codeblock .cb-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--code-border); }
.cb-lang { font: 11.5px var(--mono); color: var(--code-dim); text-transform: uppercase; letter-spacing: .05em; margin-right: auto; }
.cb-copy { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--code-border); background: transparent; color: var(--code-dim); font: 11px var(--mono); padding: 3px 9px; border-radius: 6px; cursor: pointer; }
.cb-copy:hover { color: var(--code-ink); border-color: var(--accent); }
.cb-copy.ok { color: #2ea043; border-color: #2ea043; }
.codeblock pre { margin: 0; border: 0; border-radius: 0; background: none; padding: 15px 16px; overflow: auto; font: 13px/1.7 var(--mono); color: var(--code-ink); }
.codeblock pre code { background: none; padding: 0; font: inherit; font-size: 13px; color: inherit; white-space: pre; }
/* Token colours are scoped to `pre` (not `.codeblock`) so they apply to any
   highlighted code — including classic/legacy <pre><code class="language-*">. */
pre .token.comment, pre .token.prolog, pre .token.doctype, pre .token.cdata { color: var(--c-com); font-style: italic; }
pre .token.keyword, pre .token.boolean, pre .token.atrule { color: var(--c-key); }
pre .token.string, pre .token.char, pre .token.attr-value, pre .token.regex { color: var(--c-str); }
pre .token.number { color: var(--c-num); }
pre .token.function { color: var(--c-fn); }
pre .token.class-name, pre .token.builtin, pre .token.namespace { color: var(--c-type); }
pre .token.variable, pre .token.property { color: var(--c-var); }

/* ==========================================================================
   Tags (core Post Terms block, given .post-tags)
   ========================================================================== */
.post-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--rule); }
.post-tags a {
	display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12.5px;
	color: var(--ink); border: 2.5px solid var(--ink); border-radius: 3px; padding: 4px 9px; text-decoration: none;
}
.post-tags a::before {
	content: ""; width: 12px; height: 12px; flex: none; background: var(--accent);
	-webkit-mask: var(--tag-icon) center / contain no-repeat; mask: var(--tag-icon) center / contain no-repeat;
	--tag-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.6 13.4 12 22l-9-9V3h10l7.6 7.6a2 2 0 0 1 0 2.8z"/><circle cx="7.5" cy="7.5" r="1.4" fill="black" stroke="none"/></svg>');
}
.post-tags a:hover { color: var(--accent); border-color: var(--accent); }

/* ==========================================================================
   Query pagination — "Option A": bordered pills (matches tag/category badges)
   ========================================================================== */
.wp-block-query-pagination {
	max-width: var(--maxw); margin: 8px auto 24px; padding: 0 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	font-family: var(--mono);
}
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination-numbers { display: flex; align-items: center; gap: 8px; }
.wp-block-query-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
	padding: 0 9px; border: 2px solid var(--rule-strong); border-radius: 3px; color: var(--ink-soft); font-size: 13px;
}
.wp-block-query-pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.wp-block-query-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.wp-block-query-pagination .page-numbers.dots { border: 0; min-width: 0; padding: 0 2px; }
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
	border: 2px solid var(--ink); border-radius: 3px; color: var(--ink);
	text-transform: uppercase; font-weight: 600; letter-spacing: .03em; font-size: 12px;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 560px) {
	.wp-block-query-pagination { padding: 0 12px; flex-wrap: wrap; justify-content: center; gap: 10px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding: 34px 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
.site-footer .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent); }