/*
Theme Name: Bugtrail Console
Theme URI: https://example.com/bugtrail-console
Author: Bugtrail
Description: A warm, quiet block theme for sites that publish their bug reports in the open. Parchment ground, walnut ink, one deep teal accent, and clay reserved for the things that are actually broken. Pairs with the Bugtrail plugin, and works as a plain blog theme without it.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bugtrail-console
Tags: block-templates, full-site-editing, one-column, custom-colors, editor-style, wide-blocks, accessibility-ready
*/

/* Most of the design lives in theme.json. This file covers the pieces block
   supports cannot reach: the bug archive plates, focus behaviour, and motion. */

:root {
	--btc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--btc-frame: 0 1px 2px rgba(74, 52, 30, 0.05), 0 12px 30px -18px rgba(74, 52, 30, 0.32);
}

body {
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------- skip link */

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.7rem 1.1rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	border-radius: 0 0 8px 0;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
	top: 0;
}

/* ------------------------------------------------------------- focus */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------ header */

.wp-block-template-part header .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wp-block-template-part header .wp-block-site-title a::before {
	content: '';
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	transform: rotate(45deg);
	transition: transform 380ms var(--btc-ease);
}

.wp-block-template-part header .wp-block-site-title a:hover::before {
	transform: rotate(135deg);
}

.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	padding-block: 0.2rem;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 300ms var(--btc-ease);
}

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

.wp-block-navigation .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------- page voice */

.btc-eyebrow {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
	margin-bottom: 0.6rem !important;
}

.btc-lead {
	font-size: 1.125rem;
	color: var(--wp--preset--color--ink-soft);
	max-width: 58ch;
}

.btc-footnote {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-faint);
}

.btc-case-head {
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* ------------------------------------------------- bug archive plates */

.btc-bug-list {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
}

.btc-bug-card {
	position: relative;
	display: grid;
	gap: 0.6rem;
	align-content: start;
	padding-top: 0.9rem;
	border-top: 2px solid var(--btc-rail, var(--wp--preset--color--line));
	transition: transform 400ms var(--btc-ease);
}

.btc-bug-card:hover {
	transform: translateY(-2px);
}

/* the rail colour carries the status, matching the plugin's palette */
.btc-status-new { --btc-rail: #756858; }
.btc-status-confirmed { --btc-rail: #a8442c; }
.btc-status-in_progress { --btc-rail: #0f6f63; }
.btc-status-needs_info { --btc-rail: #9a6413; }
.btc-status-in_review { --btc-rail: #4f6d8a; }
.btc-status-resolved { --btc-rail: #4d7a52; }
.btc-status-closed { --btc-rail: #b3a595; }
.btc-status-wont_fix { --btc-rail: #b3a595; }
.btc-status-duplicate { --btc-rail: #b3a595; }

.btc-bug-card .wp-block-post-featured-image {
	margin-bottom: 0.35rem;
	overflow: hidden;
	border-radius: 10px;
	background: var(--wp--preset--color--sunk);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--btc-frame);
}

.btc-bug-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 620ms var(--btc-ease);
}

.btc-bug-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.btc-bug-card .wp-block-post-title {
	margin: 0;
	line-height: 1.25;
}

.btc-bug-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.btc-bug-card:hover .wp-block-post-title a {
	color: #0a544a;
}

.btc-bug-card .wp-block-post-terms {
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.btc-bug-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.btc-bug-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* ---------------------------------------------------- pagination */

.wp-block-query-pagination {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	font-variant-numeric: tabular-nums;
	font-size: 0.875rem;
}

.wp-block-query-pagination a {
	text-decoration: none;
}

.wp-block-query-pagination-numbers .current {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------ search */

.wp-block-search__input {
	padding: 0.7rem 0.85rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 7px;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
}

.wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px #e4efec;
}

/* ------------------------------------------------------------ figure */

.btc-figure {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	box-shadow: var(--btc-frame);
}

.btc-figure svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------ motion */

@media (prefers-reduced-motion: no-preference) {
	.wp-block-post-template > li,
	.wp-block-post-content > * {
		animation: btc-rise 620ms var(--btc-ease) both;
	}

	.wp-block-post-template > li:nth-child(2) { animation-delay: 60ms; }
	.wp-block-post-template > li:nth-child(3) { animation-delay: 120ms; }
	.wp-block-post-template > li:nth-child(4) { animation-delay: 180ms; }
	.wp-block-post-template > li:nth-child(n + 5) { animation-delay: 240ms; }
}

@keyframes btc-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}