/*
Theme Name: Quiver
Theme URI: https://mitchreynolds.au
Author: Mitch Reynolds
Author URI: https://mitchreynolds.au
Description: A dark, editorial block theme for Mitch Reynolds. Charcoal canvas, coral accents, built from the MR brand mark. Field notes on networking, development, archery, and the road in between. Ships a Light style variation.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 0.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quiver
Tags: blog, one-column, block-patterns, full-site-editing, custom-colors, custom-logo, editor-style, block-styles, wide-blocks, threaded-comments, style-variations
*/

/* ----------------------------------------------------------------------------
   Quiver supplementary styles. Everything here uses the theme's colour
   presets (var(--wp--preset--color--*)) so the Light style variation flips
   the whole UI automatically. theme.json handles the rest.
---------------------------------------------------------------------------- */

::selection { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Coral focus ring for keyboard users */
:where(a, button, input, textarea, select, .wp-block-button__link, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Sticky, frosted header — translucency derived from the active base colour */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Brand lockup — inline SVG follows currentColor (set to the text colour) */
.quiver-logo { display: inline-flex; color: var(--wp--preset--color--contrast); line-height: 0; }
.quiver-logo svg { height: 34px; width: auto; display: block; }
.quiver-logo:hover { color: var(--wp--preset--color--contrast); }

/* ---- Navigation: desktop ---- */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--contrast-2);
	transition: color .18s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; bottom: -4px;
	width: 100%; height: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* ---- Navigation: mobile overlay ---- */
/* Hamburger + close buttons */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--contrast); }
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover { color: var(--wp--preset--color--primary); }
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; fill: currentColor; }

/* The open overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	padding: clamp(1.5rem, 5vw, 3rem);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 2.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: -0.01em;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}
/* No sliding underline inside the overlay — it reads oddly on stacked links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

/* Featured images & figures */
.wp-block-post-featured-image img,
.wp-block-image img { border-radius: 12px; }

/* Code blocks scroll rather than break layout */
.wp-block-code code, .wp-block-preformatted { overflow-x: auto; display: block; white-space: pre; }

/* Inline code chips */
:where(p, li) code:not(.wp-block-code code) {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0.12em 0.4em;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	color: var(--wp--preset--color--primary-2);
}

/* Card block style */
.is-style-quiver-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: clamp(1.25rem, 3vw, 2rem);
	transition: border-color .2s ease;
}
.is-style-quiver-card:hover { border-color: color-mix(in srgb, var(--wp--preset--color--border) 60%, var(--wp--preset--color--contrast-2)); }

/* Blog index rows */
.quiver-postrow { border-top: 1px solid var(--wp--preset--color--border); }

/* Coral brand-dot flourish (e.g. footer site title) */
.quiver-dot::before {
	content: "";
	display: inline-block;
	width: 0.5em; height: 0.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	margin-right: 0.55em;
	vertical-align: middle;
}

/* Small screens: trim the logo a touch */
@media (max-width: 480px) {
	.quiver-logo svg { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

/* ============================================================
   Technical-post building blocks (patterns in /patterns)
   ============================================================ */
.quiver-callout { background: color-mix(in srgb, var(--wp--preset--color--surface) 90%, transparent); border: 1px solid var(--wp--preset--color--border); border-left: 3px solid var(--wp--preset--color--primary); border-radius: 12px; padding: 1rem 1.25rem; }
.quiver-callout > *:first-child { margin-top: 0; }
.quiver-callout > *:last-child { margin-bottom: 0; }
.quiver-callout__label { display: inline-block; font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.72rem; color: var(--wp--preset--color--primary); margin-bottom: 0.4rem; }
.quiver-callout.is-warning .quiver-callout__label { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); padding: 0.12rem 0.5rem; border-radius: 4px; }
.quiver-terminal { border: 1px solid var(--wp--preset--color--border); border-radius: 12px; overflow: hidden; background: var(--wp--preset--color--surface); }
.quiver-terminal__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--wp--preset--color--border); background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, var(--wp--preset--color--surface)); }
.quiver-terminal__bar .quiver-tdot { width: 0.72rem; height: 0.72rem; border-radius: 50%; background: var(--wp--preset--color--border); display: inline-block; }
.quiver-terminal__bar .quiver-tdot.is-live { background: var(--wp--preset--color--primary); }
.quiver-terminal__title { margin-left: 0.5rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; color: var(--wp--preset--color--contrast-2); }
.quiver-terminal .wp-block-code { border: 0; border-radius: 0; margin: 0; background: transparent; }
.quiver-prereq ul { list-style: none; padding-left: 0; margin: 0; }
.quiver-prereq li { position: relative; padding-left: 1.6rem; margin-bottom: 0.4rem; }
.quiver-prereq li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--wp--preset--color--primary); }
.quiver-step { display: flex; gap: 1rem; align-items: flex-start; }
.quiver-step__n { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 1rem; display: grid; place-items: center; line-height: 1; }
.quiver-step__body > *:first-child { margin-top: 0; }
.quiver-step__body > *:last-child { margin-bottom: 0; }

/* ============================================================
   Light / dark: OS-preference auto + manual toggle (data-theme)
   ============================================================ */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--wp--preset--color--base: #faf9f7; --wp--preset--color--surface: #ffffff;
		--wp--preset--color--surface-2: #f1efec; --wp--preset--color--border: #e4e0da;
		--wp--preset--color--contrast: #1d1d1d; --wp--preset--color--contrast-2: #6b6763;
		--wp--preset--color--primary: #e8483b; --wp--preset--color--primary-2: #ff5548;
	}
}
:root[data-theme="light"] {
	--wp--preset--color--base: #faf9f7; --wp--preset--color--surface: #ffffff;
	--wp--preset--color--surface-2: #f1efec; --wp--preset--color--border: #e4e0da;
	--wp--preset--color--contrast: #1d1d1d; --wp--preset--color--contrast-2: #6b6763;
	--wp--preset--color--primary: #e8483b; --wp--preset--color--primary-2: #ff5548;
}
.quiver-theme-toggle {
	background: transparent; border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast-2); border-radius: 8px; width: 38px; height: 38px;
	display: inline-grid; place-items: center; cursor: pointer; padding: 0;
	transition: color .18s ease, border-color .18s ease;
}
.quiver-theme-toggle:hover { color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }
.quiver-theme-toggle svg { width: 18px; height: 18px; }
.quiver-theme-toggle .icon-moon { display: none; }
.quiver-theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .quiver-theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .quiver-theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) .quiver-theme-toggle .icon-sun { display: none; }
	:root:not([data-theme]) .quiver-theme-toggle .icon-moon { display: block; }
}