/* ---------------------------------------------------------------------------------------------

	Theme Name: OFT
	Text Domain: oft
	Version: 0.9.1
	Description: A WordPress block theme with a docs custom post type. Adds rustdoc-style UX (sticky TOC, client-side search, keyboard shortcuts, deep-link heading IDs), visitor-togglable light/dark mode, syntax highlighting via highlight.js, and a single-line post meta block with reading time.
	Tags: blog, one-column, three-columns, block-patterns, block-styles, style-variations, template-editing, full-site-editing, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, wide-blocks
	Author: Bogdan Susala
	Author URI: https://susala.eu
	Theme URI: https://susala.eu
	License: GNU General Public License version 2.0
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Requires PHP: 7.4
	Tested up to: 6.9

	Upstream: https://wordpress.org/themes/beaumont/ (Beaumont 0.2.5 by Anders Norén,
	GPL-2.0-or-later).

	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html).

--------------------------------------------------------------------------------------------- */

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

a { text-underline-offset: .2em; }

/* Input styles */

input, textarea, select, button {
	background-color: inherit;
	border-radius: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	margin: 0;
}

input, textarea, select {
	background-color: var( --wp--preset--color--background );
	border: .1rem solid var( --wp--preset--color--secondary );
	box-sizing: border-box;
	color: var( --wp--preset--color--foreground );
	max-width: 100%;
	padding: .5em;
}

::placeholder { 
	color: var( --wp--preset--color--primary ); 
	opacity: 1;
}

label {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
}

/* Editor Post Title */

.editor-post-title__input { 
	text-align: center;
}

/* Background Padding */

h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background,p.has-background {
	padding: min( 1em, var(--wp--preset--spacing--40) );
}

:where(.wp-block-group.has-background) {
	padding: min( 2em, var(--wp--preset--spacing--40) );
}

/* ------------------------------------------- */
/*	Typography
/* ------------------------------------------- */

.has-huge-font-size, .has-heading-1-font-size, .has-heading-2-font-size, .has-heading-3-font-size, .has-heading-4-font-size, .has-heading-5-font-size { 
	letter-spacing: var( --wp--custom--typography--letter-spacing--heading );
	line-height: var( --wp--custom--typography--line-height--headings ); 
}

.has-medium-font-size {
	line-height: var( --wp--custom--typography--line-height--body );
}

/* ------------------------------------------- */
/* Helper Classes
/* ------------------------------------------- */

.hide-when-empty:empty { display: none !important; }
.no-shrink { flex-shrink: 0 !important; }

/* ------------------------------------------- */
/* Blocks
/* ------------------------------------------- */

/* Block: Avatar ----------------------------- */

.wp-block-avatar img {
	display: block;
}

/* Block: Calendar --------------------------- */

.wp-block-calendar table caption,
.wp-block-calendar table tbody {
	color: var( --wp--preset--color--foreground );
}

.wp-block-calendar th,
.wp-block-calendar tbody td {
	border-color: var( --wp--preset--color--primary );
}

.wp-block-calendar table th { 
	background-color: var( --wp--preset--color--primary ); 
}

/* Block: Comments --------------------------- */

#cancel-comment-reply-link {
	font-weight: 500;
	letter-spacing: var(--wp--custom--typography--letter-spacing--body);
}

.wp-block-post-comments-form input[type=submit] {
	border-radius: 999px;
	font-size: var( --wp--preset--font-size--small );
}

/* Block: File ------------------------------- */

.wp-block-file {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

:root .wp-block-file__button:not(:only-child) { 
	margin-left: var(--wp--preset--spacing--40); 
}

/* Block: Heading ---------------------------- */

.wp-block-post-content h1:not([style*="margin-top"]):not(:first-child),
.wp-block-post-content h2:not([style*="margin-top"]):not(:first-child),
.wp-block-post-content h3:not([style*="margin-top"]):not(:first-child),
.wp-block-post-content h4:not([style*="margin-top"]):not(:first-child),
.wp-block-post-content h5:not([style*="margin-top"]):not(:first-child),
.wp-block-post-content h6:not([style*="margin-top"]):not(:first-child) {
	margin-top: 1.25em !important;
}

.wp-block-post-content h1:not([style*="margin-bottom"]):not(:last-child),
.wp-block-post-content h2:not([style*="margin-bottom"]):not(:last-child),
.wp-block-post-content h3:not([style*="margin-bottom"]):not(:last-child),
.wp-block-post-content h4:not([style*="margin-bottom"]):not(:last-child),
.wp-block-post-content h5:not([style*="margin-bottom"]):not(:last-child),
.wp-block-post-content h6:not([style*="margin-bottom"]):not(:last-child) {
	margin-bottom: .75em !important;
}

/* Block: Paragraph -------------------------- */

.has-drop-cap:not(:focus):first-letter {
    font-size: 5.3em;
    font-weight: inherit;
	transform: translateY( .06em );
}

/* Block: Post Comments Form ----------------- */

ol.wp-block-comment-template {
	margin: 0;
}

.wp-block-post-comments-form input:not([type=submit]), 
.wp-block-post-comments-form textarea {
	border-color: var( --wp--preset--color--secondary );
}

.required-field-message, .comment-notes {
	display: none;
}

.logged-in-as {
	color: var( --wp--preset--color--primary );
}

.comment-reply-title {
	margin: 0;
}

/* Block: Post Content ----------------------- */

.is-root-container > .alignwide:not(:first-child), .wp-block-post-content > .alignwide:not(:first-child),
.is-root-container > .alignfull:not(:first-child), .wp-block-post-content > .alignfull:not(:first-child) {
	margin-top: 64px;
}

.is-root-container > .alignwide:not(:last-child), .wp-block-post-content > .alignwide:not(:last-child),
.is-root-container > .alignfull:not(:last-child), .wp-block-post-content > .alignfull:not(:last-child) {
	margin-bottom: 64px;
}

/* Block: Post Template ---------------------- */

.wp-block-post-template {
	--wp--style--block-gap: 0;
}

/* Block: Pull Quote ------------------------- */

:root .wp-block-pullquote.alignleft, 
:root .wp-block-pullquote.alignright {
	max-width: min( 316px, 50% );
}

.wp-block-pullquote blockquote p {
	hanging-punctuation: first;
	line-height: inherit;
}

/* Block: Query Pagination ------------------- */

.wp-block-query-pagination > .wp-block-query-pagination-next, 
.wp-block-query-pagination > .wp-block-query-pagination-numbers, 
.wp-block-query-pagination > .wp-block-query-pagination-previous {
	margin-bottom: 0;
}

.wp-block-query-pagination-next:only-child {
	margin-left: auto;
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: .5em;
}

.wp-block-query-pagination-numbers .current {
	color: var( --wp--preset--color--primary );
}

/* STYLE: VERTICAL SEPARATORS */

.wp-block-query-pagination.is-style-oft-vertical-separators {
	border-top: 1px solid var( --wp--preset--color--secondary );
	gap: 0;
}

.wp-block-query-pagination.is-style-oft-vertical-separators a,
.wp-block-query-pagination-numbers {
	position: relative;
}

.wp-block-query-pagination.is-style-oft-vertical-separators .post-navigation-link-previous a:before,
.wp-block-query-pagination.is-style-oft-vertical-separators .post-navigation-link-next a:before {
	position: absolute;
}

.wp-block-query-pagination.is-style-oft-vertical-separators .post-navigation-link-previous a:before { content: "←"; }
.wp-block-query-pagination.is-style-oft-vertical-separators .post-navigation-link-next a:before { content: "→"; }

/* Horizontal Orientation */

.wp-block-query-pagination.is-style-oft-vertical-separators:not(.is-vertical) {
	border-bottom: 1px solid var( --wp--preset--color--secondary );
	gap: 16px;
	padding: 16px 0;
}

.wp-block-query-pagination.is-style-oft-vertical-separators:not(.is-vertical) .post-navigation-link-previous a { padding-left: 1.6em; }
.wp-block-query-pagination.is-style-oft-vertical-separators:not(.is-vertical) .post-navigation-link-previous a:before { left: 0; }

.wp-block-query-pagination.is-style-oft-vertical-separators:not(.is-vertical) .post-navigation-link-next a { padding-right: 1.6em; }
.wp-block-query-pagination.is-style-oft-vertical-separators:not(.is-vertical) .post-navigation-link-next a:before { right: 0; }

/* Vertical Orientation */

.wp-block-query-pagination.is-style-oft-vertical-separators.is-vertical > *:empty { 
	display: none; 
}

.wp-block-query-pagination.is-style-oft-vertical-separators.is-vertical > *:not(:empty) {
	border-bottom: 1px solid var( --wp--preset--color--secondary );
	margin: 0;
	padding: 16px 0;
	width: 100%;
}

.wp-block-query-pagination.is-style-oft-vertical-separators.is-vertical .post-navigation-link-previous a,
.wp-block-query-pagination.is-style-oft-vertical-separators.is-vertical .post-navigation-link-previous + .wp-block-query-pagination-numbers,
.wp-block-query-pagination.is-style-oft-vertical-separators.is-vertical .post-navigation-link-next a {
	box-sizing: border-box;
	padding-left: 1.6em;
}

.wp-block-query-pagination.is-style-oft-vertical-separators.is-vertical .post-navigation-link-next a:before,
.wp-block-query-pagination.is-style-oft-vertical-separators.is-vertical .post-navigation-link-previous a:before { 
	left: 0;
}

/* Block: Quote ------------------------------ */

blockquote p:first-child { margin-top: 0; }
blockquote p:last-of-type { margin-bottom: 0; }

blockquote cite {
	display: block;
}

/* Block: Separator -------------------------- */

:root hr[class*="is-style-oft-diamond"] {
	background-color: transparent !important;
	background: linear-gradient(90deg, currentColor 0%, currentColor calc( 50% - 20px ), transparent calc( 50% - 20px ), transparent calc( 50% + 20px ), currentColor calc( 50% + 20px ), currentColor 100%);
	border: none;
	height: 1px !important;
	overflow: visible;
	position: relative;
}

:root hr.is-style-oft-diamond { width: 201px !important; }
:root hr.is-style-oft-diamond-wide { width: 100% !important; }

:root hr[class*="is-style-oft-diamond"]:before {
	background-color: currentColor;
	content: "";
	display: block;
	position: absolute;
		left: calc( 50% - 3.5px );
		top: calc( 50% - 3.5px );
	height: 7px;
	transform: rotate( 45deg );
	width: 7px;
}

/* Block: Search Form ------------------------ */

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-search__input {
	border-color: var( --wp--preset--color--secondary );
}

/* SETTING: BUTTON INSIDE */

.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	box-sizing: border-box;
	margin: 0;
	padding: .5em;
}

.wp-block-search__button-inside .wp-block-search__input {
	box-sizing: border-box;
	margin: 0;
	padding: .5em 1rem;
}

/* ===========================================================================
 * Docs — three-column layout, sidebar tree, TOC, neighbors.
 * Scoped styles for the single-docs.php + archive-docs.php templates.
 * Uses Beaumont's existing preset colors and spacing scale for consistency.
 * =========================================================================== */

/* oft/docs-body block wrapper — rendered inside the single-docs.html
 * block template which already provides the block theme's normal <main>
 * context. The wrapper centers itself at a responsive max-width and
 * carries the root horizontal padding so it aligns with the header's
 * has-global-padding on both sides. border-box is crucial: without it
 * the padding pushes the box past the viewport edge and triggers
 * horizontal scroll on viewports near the max-width. */
.oft-docs-body {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
	padding-block: var(--wp--preset--spacing--60);
}

.oft-docs-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 1024px) {
	/* Two columns by default: sidebar + article (TOC only appears if the
	 * doc has headings — rendered conditionally in the block's render
	 * callback in inc/docs.php). */
	.oft-docs-layout {
		grid-template-columns: 14rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}
	.oft-docs-layout.has-toc {
		grid-template-columns: 14rem minmax(0, 1fr) 14rem;
	}
}

.oft-docs-sidebar,
.oft-docs-toc-wrap {
	position: sticky;
	top: 1rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	align-self: start;
	font-size: var(--wp--preset--font-size--small);
}
.oft-docs-sidebar {
	/* Give the sidebar titles breathing room on the left so the text
	 * doesn't crash into the column edge. */
	padding-inline: var(--wp--preset--spacing--30) 0;
}
.oft-docs-sidebar-link {
	padding: 0.5rem 0.75rem;
}

@media (max-width: 1023px) {
	.oft-docs-sidebar,
	.oft-docs-toc-wrap {
		position: static;
		max-height: none;
	}
}

.oft-docs-article {
	min-width: 0;
}

.oft-docs-article > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

/* Article head — holds the breadcrumb above the title. */
.oft-docs-article-head {
	margin-bottom: 0.5rem;
}

/* Breadcrumb */
.oft-doc-breadcrumb {
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--primary);
}
.oft-doc-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.oft-doc-breadcrumb li + li::before {
	content: "›";
	margin-right: 0.5rem;
	color: var(--wp--preset--color--secondary);
}
.oft-doc-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.oft-doc-breadcrumb a:hover { text-decoration: underline; }
.oft-doc-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
}

/* Header */
.oft-docs-header {
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--secondary);
}
.oft-docs-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-2);
	line-height: var(--wp--custom--typography--line-height--headings);
}
.oft-docs-updated {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--primary);
}

/* Content — leans on Beaumont's element styles for prose. Max-width for
 * readability: the article column fills the grid cell but the actual text
 * is capped at ~640px so long lines stay readable. */
.oft-docs-content {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--typography--line-height--body);
	max-width: 40rem;
}

/* Sidebar tree */
.oft-docs-sidebar-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.oft-docs-sidebar-list--depth-0 {
	font-weight: 600;
}
.oft-docs-sidebar-list details > ul {
	padding-left: 1rem;
	margin-top: 0.25rem;
	font-weight: 400;
}
.oft-docs-sidebar-item { padding: 0.125rem 0; }
.oft-docs-sidebar-link {
	display: block;
	padding: 0.375rem 0.5rem;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	border-radius: 4px;
}
.oft-docs-sidebar-link:hover {
	background: var(--wp--preset--color--secondary);
}
.oft-docs-sidebar-item.is-current > .oft-docs-sidebar-link,
.oft-docs-sidebar-item.is-current > details > summary > .oft-docs-sidebar-link {
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}
.oft-docs-sidebar-list details > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.oft-docs-sidebar-list details > summary::-webkit-details-marker { display: none; }
.oft-docs-sidebar-list details > summary::before {
	content: "▸";
	font-size: 0.75em;
	color: var(--wp--preset--color--primary);
	transition: transform 150ms ease;
	flex-shrink: 0;
}
.oft-docs-sidebar-list details[open] > summary::before { transform: rotate(90deg); }

/* Table of contents (on this page) */
.oft-doc-toc {
	font-size: var(--wp--preset--font-size--tiny);
}
.oft-doc-toc-title {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary);
}
.oft-doc-toc-list,
.oft-doc-toc-list ol {
	list-style: none;
	padding: 0;
	margin: 0;
}
.oft-doc-toc-list > li {
	padding: 0.25rem 0;
	border-left: 2px solid transparent;
	padding-left: 0.75rem;
	transition: border-color 150ms ease;
}
.oft-doc-toc-list > li.is-active,
.oft-doc-toc-list > li:has(a.is-active) {
	border-left-color: var(--wp--preset--color--foreground);
}
.oft-doc-toc-list ol {
	padding-left: 0.75rem;
	margin-top: 0.25rem;
}
.oft-doc-toc-list a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: color 150ms ease;
}
.oft-doc-toc-list a:hover {
	color: var(--wp--preset--color--foreground);
}
.oft-doc-toc-list a.is-active {
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
}

/* Prev/next chapter navigation */
.oft-docs-neighbors {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--secondary);
}
@media (min-width: 640px) {
	.oft-docs-neighbors { grid-template-columns: 1fr 1fr; }
}
.oft-docs-neighbors-prev,
.oft-docs-neighbors-next {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	transition: border-color 150ms ease;
}
.oft-docs-neighbors-prev:hover,
.oft-docs-neighbors-next:hover {
	border-color: var(--wp--preset--color--foreground);
}
.oft-docs-neighbors-next {
	text-align: right;
}
.oft-docs-neighbors-label {
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.oft-docs-neighbors-title {
	font-weight: 600;
}

/* Archive grid wrapper — same box-sizing contract as .oft-docs-body. */
.oft-docs-index {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left);
	padding-block: var(--wp--preset--spacing--60);
}
.oft-docs-archive-header {
	margin-bottom: var(--wp--preset--spacing--50);
	text-align: center;
}
.oft-docs-archive-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-1);
}
.oft-docs-archive-description {
	max-width: 40rem;
	margin: 1rem auto 0;
	color: var(--wp--preset--color--primary);
}
.oft-docs-archive-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}
@media (min-width: 640px) {
	.oft-docs-archive-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.oft-docs-archive-grid { grid-template-columns: repeat(3, 1fr); }
}
.oft-docs-archive-chapter {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.oft-docs-archive-chapter-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.oft-docs-archive-chapter-title:hover { text-decoration: underline; }
.oft-docs-archive-chapter-children {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
}
.oft-docs-archive-chapter-children a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.oft-docs-archive-chapter-children a:hover {
	color: var(--wp--preset--color--foreground);
	text-decoration: underline;
}
.oft-docs-archive-chapter-more a {
	font-weight: 600;
}

/* ===========================================================================
 * Dark mode — visitor-togglable via data-color-scheme on <html>.
 * Overrides Beaumont's preset color custom properties. Smooth transition so
 * toggling doesn't flash. Respects prefers-color-scheme on first visit.
 * =========================================================================== */

html {
	color-scheme: light;
	transition: background-color 200ms ease, color 200ms ease;
}

html[data-color-scheme="dark"] {
	color-scheme: dark;
	--wp--preset--color--foreground: #EEE3E0;
	--wp--preset--color--background: #1B1918;
	--wp--preset--color--primary: #9C928C;
	--wp--preset--color--secondary: #353130;
}

/* Header search box — sized and styled to sit comfortably between the
 * site title and the nav/toggle cluster. The core wp:search block carries
 * the class .oft-header-search (added via the block's className attr). */
.oft-header-search.wp-block-search {
	flex: 0 1 24rem;
	min-width: 0;
}
.oft-header-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 999px;
	padding: 0.25rem 0.25rem 0.25rem 1rem;
	background: var(--wp--preset--color--background);
}
.oft-header-search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0.375rem 0;
	font-size: var(--wp--preset--font-size--small);
	min-width: 0;
}
.oft-header-search .wp-block-search__button {
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--primary);
}
.oft-header-search .wp-block-search__button svg {
	fill: currentColor;
}

/* Smart search dropdown (FlexSearch-powered, search.js). */
.oft-header-search--has-panel {
	position: relative;
}
.oft-search-panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	z-index: 100;
	max-height: 60vh;
	overflow-y: auto;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.oft-search-panel[hidden] { display: none; }
.oft-search-loading,
.oft-search-empty {
	padding: 1rem 1.25rem;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
}
.oft-search-result {
	display: block;
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--wp--preset--color--secondary);
	color: inherit;
	text-decoration: none;
	transition: background-color 120ms ease;
}
.oft-search-result:first-child { border-top: 0; }
.oft-search-result:hover,
.oft-search-result:focus {
	background: var(--wp--preset--color--secondary);
}
.oft-search-result__type {
	display: inline-block;
	padding: 0 1.1em;
	margin-right: 1em;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	font-size: 0.55em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	vertical-align: middle;
}
.oft-search-result__title {
	display: inline;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground);
}
.oft-search-result__meta {
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--primary);
	margin-top: 0.25rem;
	line-height: 1.4;
}

/* The toggle button itself (live inside parts/header.html as a core HTML
 * block). Kept borderless so it blends into any header layout. */
.oft-color-scheme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 150ms ease;
}
.oft-color-scheme-toggle:hover {
	background: var(--wp--preset--color--secondary);
}
.oft-color-scheme-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}
html[data-color-scheme="light"] .oft-color-scheme-toggle [data-icon="sun"],
html[data-color-scheme="dark"]  .oft-color-scheme-toggle [data-icon="moon"] {
	display: none;
}

/* Keyboard help modal (triggered by ?) */
.oft-kbd-help[hidden] { display: none; }
.oft-kbd-help {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.oft-kbd-help-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.oft-kbd-help-panel {
	position: relative;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 8px;
	padding: 2rem 2.5rem;
	min-width: 20rem;
	max-width: 90vw;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.oft-kbd-help-panel h2 {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--large);
}
.oft-kbd-help-panel dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1.25rem;
	margin: 0;
}
.oft-kbd-help-panel dt,
.oft-kbd-help-panel dd {
	margin: 0;
	padding: 0.25rem 0;
}
.oft-kbd-help-panel kbd {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	background: var(--wp--preset--color--secondary);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.875rem;
}
.oft-kbd-help-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
}
.oft-kbd-help-close:hover {
	color: var(--wp--preset--color--foreground);
}
html.oft-kbd-help-open { overflow: hidden; }

/* ===========================================================================
 * Code blocks — always-dark (fixed palette, doesn't flip with light/dark
 * theme because code reads better on a stable dark background). Includes
 * an inline minimal highlight.js theme for the .hljs-* token classes.
 * Applies to core/code, core/preformatted, and any raw <pre><code>.
 * =========================================================================== */

:root {
	--oft-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", "Courier New", monospace;
	--oft-code-bg: #1b1918;
	--oft-code-fg: #eee3e0;
	--oft-code-muted: #7b746f;
}

/* Inline code inside prose — subtle tinted chip (uses theme colors, does flip). */
.entry-content :not(pre) > code,
.oft-docs-content :not(pre) > code {
	font-family: var(--oft-font-mono);
	font-size: 0.875em;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--foreground);
	padding: 0.125em 0.375em;
	border-radius: 4px;
	white-space: break-spaces;
}

/* Block code — always dark, regardless of light/dark mode. */
.entry-content pre,
.oft-docs-content pre,
.wp-block-code,
.wp-block-preformatted {
	position: relative;
	font-family: var(--oft-font-mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	background: var(--oft-code-bg);
	color: var(--oft-code-fg);
	padding: 1.25rem 1.5rem;
	border-radius: 6px;
	overflow-x: auto;
	tab-size: 4;
}

.entry-content pre code,
.oft-docs-content pre code,
.wp-block-code code,
.wp-block-preformatted code {
	font-family: inherit;
	font-size: inherit;
	background: transparent;
	color: inherit;
	padding: 0;
	white-space: pre;
}

/* highlight.js minimal dark theme (inline, ~15 rules instead of 400+ KB
 * of upstream theme CSS). Keeps the palette small, warm, readable.
 * Colors chosen to harmonize with OFT's foreground/background. */
.hljs { background: var(--oft-code-bg); color: var(--oft-code-fg); }
.hljs-comment,
.hljs-quote       { color: var(--oft-code-muted); font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in    { color: #c084fc; }
.hljs-string,
.hljs-attr        { color: #a3e635; }
.hljs-number,
.hljs-literal     { color: #fbbf24; }
.hljs-function,
.hljs-title,
.hljs-name        { color: #60a5fa; }
.hljs-variable,
.hljs-template-variable { color: #facc15; }
.hljs-section     { color: #f472b6; font-weight: 600; }
.hljs-symbol      { color: #2dd4bf; }
.hljs-meta,
.hljs-doctag      { color: #93c5fd; }
.hljs-type,
.hljs-class .hljs-title,
.hljs-tag         { color: #fb923c; }
.hljs-params      { color: var(--oft-code-fg); }
.hljs-deletion    { background: rgba(239, 68, 68, 0.2); }
.hljs-addition    { background: rgba(16, 185, 129, 0.2); }
.hljs-emphasis    { font-style: italic; }
.hljs-strong      { font-weight: 700; }

/* Hover-revealed copy button (.oft-code-copy is injected by code-copy.js).
 * color uses --oft-code-fg (fixed light) because the code block background
 * is always dark — we don't want the button text flipping with the theme. */
.oft-code-copy {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.625rem;
	font-family: var(--oft-font-mono);
	font-size: 0.75rem;
	line-height: 1;
	color: var(--oft-code-fg);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-2px);
	transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
}
.oft-code-copy svg {
	width: 0.9em;
	height: 0.9em;
	display: inline-block;
}
.oft-code-copy:hover {
	background: rgba(255, 255, 255, 0.18);
}
.entry-content pre:hover .oft-code-copy,
.oft-docs-content pre:hover .oft-code-copy,
.wp-block-code:hover .oft-code-copy,
.wp-block-preformatted:hover .oft-code-copy,
.oft-code-copy:focus-visible {
	opacity: 1;
	transform: translateY(0);
}
.oft-code-copy.is-copied {
	background: rgba(16, 185, 129, 0.25);
	border-color: rgba(16, 185, 129, 0.5);
}

/* Post meta line — date · words · read time, centered under single post
 * titles. Rendered by the oft/post-meta-line dynamic block, used in
 * templates/single.html directly after wp:post-title. */
.oft-post-meta-line {
	margin: 0.75rem 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--default-sans);
	font-weight: 500;
	letter-spacing: var(--wp--custom--typography--letter-spacing--body);
}
.oft-post-meta-line time,
.oft-post-meta-line .oft-post-meta-words,
.oft-post-meta-line .oft-post-meta-reading {
	display: inline-block;
}
.oft-post-meta-line .oft-post-meta-sep {
	display: inline-block;
	margin-inline: 0.5rem;
	color: var(--wp--preset--color--secondary);
}


/* ----------------------------------------------------------------------------
	OFT POSTS BY MONTH (dynamic block)
	Grouped posts listing — year / month headings followed by per-post links.
---------------------------------------------------------------------------- */

.oft-posts-by-month {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60, 2rem);
}
.oft-posts-by-month__year {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.oft-posts-by-month__year-heading {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	padding-bottom: 0.25rem;
}
.oft-posts-by-month__month {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.oft-posts-by-month__month-heading {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	margin: 0.5rem 0 0.25rem;
	color: var(--wp--preset--color--primary);
}
.oft-posts-by-month__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oft-posts-by-month__item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--secondary);
}
.oft-posts-by-month__item:last-child {
	border-bottom: 0;
}
.oft-posts-by-month__link {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	text-decoration: none;
	color: inherit;
}
.oft-posts-by-month__link:hover .oft-posts-by-month__title,
.oft-posts-by-month__link:focus .oft-posts-by-month__title {
	text-decoration: underline;
}
.oft-posts-by-month__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.oft-posts-by-month__date {
	flex: 0 0 auto;
	font-size: 0.85em;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}
.oft-posts-by-month__empty {
	color: var(--wp--preset--color--primary);
	font-style: italic;
}


/* ----------------------------------------------------------------------------
	OFT FAQ LIST (dynamic block)
	Accessible <details>/<summary> stack with hover affordance and a tasteful
	disclosure indicator. Zero JavaScript — browser handles expand/collapse.
---------------------------------------------------------------------------- */

.oft-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.oft-faq-list__item {
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	padding: 0;
}
.oft-faq-list__item:last-of-type {
	border-bottom: 0;
}
.oft-faq-list__question {
	cursor: pointer;
	padding: 0.85rem 0;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--medium);
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.oft-faq-list__question::-webkit-details-marker {
	display: none;
}
.oft-faq-list__question::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.25em;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: transform 120ms ease;
}
.oft-faq-list__item[open] > .oft-faq-list__question::after {
	content: "−";
}
.oft-faq-list__question:hover {
	color: var(--wp--preset--color--primary);
}
.oft-faq-list__answer {
	padding: 0 0 1rem;
	color: var(--wp--preset--color--foreground);
}
.oft-faq-list__answer > :first-child {
	margin-top: 0;
}
.oft-faq-list__answer > :last-child {
	margin-bottom: 0;
}
.oft-faq-list__empty {
	color: var(--wp--preset--color--primary);
	font-style: italic;
}