/*
Theme Name: Strange Audio
Theme URI: https://strange-audio.com
Author: Strange Audio
Author URI: https://strange-audio.com
Description: A dark, technical block theme built for audio plugin developers. Product pages with spec tables and format badges, a plugin catalogue custom post type, and a monospace-accented editorial layout for release notes and manuals.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.6.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: strange-audio
Tags: block-theme, full-site-editing, dark, one-column, two-columns, wide-blocks, custom-colors, custom-logo, editor-style, block-patterns
*/

/*
 * Nearly all styling lives in theme.json so it stays editable from
 * Appearance > Editor > Styles. This file is only for the handful of
 * things theme.json cannot express: pseudo-elements, transitions,
 * and the custom block styles registered in functions.php.
 */

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

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

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

:where(a):focus-visible,
:where(button):focus-visible,
:where(.wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------
   Links & buttons
   --------------------------------------------------------------- */

.wp-block-post-content a:where(:not(.wp-element-button)),
.wp-block-post-excerpt a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 120ms ease;
}

.wp-block-button__link {
	transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------
   Gumroad overlay buttons

   gumroad.js ships its own stylesheet for `.gumroad-button` — white
   background, its own type, a logo glyph. These selectors are deliberately
   specific (0,3,1) so they outrank it whichever order the sheets land in,
   and the button keeps looking like every other button on the site.
   --------------------------------------------------------------- */

a.gumroad-button.wp-element-button,
a.gumroad-button.wp-block-button__link {
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
	background-image: none;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: inherit;
	text-decoration: none;
	text-transform: none;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	padding: 0.8rem 1.5rem;
	height: auto;
	box-shadow: none;
}

a.gumroad-button.wp-element-button:hover,
a.gumroad-button.wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Gumroad injects a logo glyph before the label; the theme doesn't want it. */
a.gumroad-button.wp-element-button .logo-full,
a.gumroad-button.wp-element-button::after,
a.gumroad-button.wp-block-button__link .logo-full {
	display: none;
}

/* ---------------------------------------------------------------
   Navigation
   --------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: color 120ms ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------
   Block style: "Panel" — the bordered card used for plugins & specs
   --------------------------------------------------------------- */

.is-style-sa-panel {
	position: relative;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	overflow: hidden;
	transition: border-color 160ms ease, transform 160ms ease;
}

.is-style-sa-panel:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	transform: translateY(-2px);
}

/* Hairline that lights up on hover — the "signal" motif. */
.is-style-sa-panel::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--wp--preset--color--accent),
		transparent
	);
	opacity: 0;
	transition: opacity 160ms ease;
}

.is-style-sa-panel:hover::before {
	opacity: 1;
}

/* ---------------------------------------------------------------
   Block style: "Label" — monospace eyebrow text
   --------------------------------------------------------------- */

.is-style-sa-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.is-style-sa-label::before {
	content: "// ";
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------
   Block style: "Badge" — format chips (VST3 / AU / CLAP …)
   --------------------------------------------------------------- */

.is-style-sa-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 0.45em 0.7em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	color: var(--wp--preset--color--muted);
	background-color: var(--wp--preset--color--surface-2);
}

/* ---------------------------------------------------------------
   Block style: "Rule" — a separator that fades at both ends
   --------------------------------------------------------------- */

.wp-block-separator.is-style-sa-rule {
	border: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--wp--preset--color--line) 20%,
		var(--wp--preset--color--line) 80%,
		transparent
	);
	opacity: 1;
}

/* ---------------------------------------------------------------
   Spec tables (used on plugin pages)
   --------------------------------------------------------------- */

.wp-block-table.is-style-sa-spec table {
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table.is-style-sa-spec td,
.wp-block-table.is-style-sa-spec th {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.85em 0;
	vertical-align: top;
}

.wp-block-table.is-style-sa-spec td:first-child {
	color: var(--wp--preset--color--muted);
	width: 34%;
	white-space: nowrap;
}

.wp-block-table.is-style-sa-spec tr:last-child td {
	border-bottom: 0;
}

/* ---------------------------------------------------------------
   Code — release notes and manual pages lean on this
   --------------------------------------------------------------- */

.wp-block-code,
.wp-block-preformatted {
	overflow-x: auto;
	tab-size: 2;
}

:where(:not(pre) > code) {
	background-color: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	padding: 0.1em 0.35em;
	font-size: 0.9em;
}

/* ---------------------------------------------------------------
   Images inside content
   --------------------------------------------------------------- */

.wp-block-post-content .wp-block-image img {
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--line);
}

/* Screenshots of plugin UIs read better without a competing border. */
.wp-block-image.is-style-sa-plain img {
	border: 0;
	border-radius: 0;
}

/* ---------------------------------------------------------------
   Motion preferences
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}