/*
Theme Name: BH Insider
Author: BH Insider
Description: Editorial block theme for BH Insider. Article cards with featured images, paginated index, category and tag archives, a non-linked "By" byline with categories on each article, and styling for the authors list. Automatic dark mode.
Requires at least: 6.6
Requires PHP: 7.4
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: bh-insider-theme
*/

/* Colors, fonts and spacing live in theme.json. This file covers what theme.json can't express. */

:root {
	color-scheme: light;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* Header, main and footer sit flush; spacing comes from their own padding. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Search field */
.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: 0.55rem 0.7rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.bh-search {
	max-width: 32rem;
}

/* ---------- Header and footer ---------- */

.bh-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.bh-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.bh-header .wp-block-navigation a:hover,
.bh-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--brand);
}

.bh-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

.bh-disclaimer {
	max-width: 44rem;
	margin: 0;
}

/* ---------- Page intro ---------- */

.bh-intro > * {
	margin-block: 0;
}

.bh-intro > * + * {
	margin-block-start: 0.75rem;
}

.bh-intro + .wp-block-query {
	margin-block-start: var(--wp--preset--spacing--50);
}

.bh-lede {
	max-width: 40rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

/* ---------- Chips: topic bar (Categories block) and category/tag terms ---------- */

.bh-topics,
.bh-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.bh-topics {
	list-style: none;
	padding: 0;
}

.bh-intro .bh-topics {
	margin-block-start: 1.25rem;
}

.bh-topics li {
	margin: 0;
}

.bh-chips .wp-block-post-terms__separator {
	display: none;
}

.bh-topics a,
.bh-chips a {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--brand);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
}

.bh-topics a:hover,
.bh-chips a:hover,
.bh-topics .current-cat a {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
}

/* ---------- Article cards (index, category, tag, search) ---------- */

.bh-cards > li {
	display: flex;
}

.bh-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.bh-card:hover,
.bh-card:focus-within {
	border-color: var(--wp--preset--color--brand);
}

.bh-card-image {
	margin: 0;
	background: var(--wp--preset--color--tint);
}

.bh-card-image img {
	display: block;
}

.bh-card-body {
	flex: 1 1 auto;
	padding: 1.25rem;
}

.bh-card-body > * {
	margin: 0;
}

.bh-card-title a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

.bh-card-excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: 0.9375rem;
}

.bh-card-body .bh-meta {
	margin-top: auto;
	padding-top: 0.25rem;
}

/* ---------- Byline: "By <author> · <date>" ---------- */

.bh-meta,
.bh-byline {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	align-items: baseline;
}

.bh-byline {
	font-size: 0.9375rem;
}

.bh-meta > *,
.bh-byline > * {
	margin: 0;
}

.bh-meta .wp-block-post-author-name,
.bh-byline .wp-block-post-author-name {
	color: var(--wp--preset--color--contrast);
	font-size: inherit;
}

.bh-meta .wp-block-post-date,
.bh-byline .wp-block-post-date {
	font-size: inherit;
}

.bh-meta .wp-block-post-date::before,
.bh-byline .wp-block-post-date::before {
	content: "·";
	margin-right: 0.4rem;
}

/* ---------- Single article ---------- */

.bh-article-head > * {
	margin-block: 0;
}

.bh-article-head > * + * {
	margin-block-start: 1rem;
}

.bh-article-image img {
	border-radius: 8px;
}

.wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-post-content blockquote {
	border-left: 3px solid var(--wp--preset--color--brand);
	padding-left: 1.25rem;
	margin-left: 0;
}

.bh-tags {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ---------- Pagination (Query Pagination block and the authors list) ---------- */

.wp-block-query-pagination,
.bh-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* "body" outranks core's own pagination margins regardless of load order. */
body .wp-block-query-pagination > *,
body .wp-block-query-pagination .page-numbers,
body .bh-pagination .page-numbers {
	margin: 0;
}

.wp-block-query-pagination > a,
.wp-block-query-pagination .page-numbers,
.bh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.8rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-query-pagination > a:hover,
.wp-block-query-pagination a.page-numbers:hover,
.bh-pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.wp-block-query-pagination .page-numbers.current,
.bh-pagination .page-numbers.current {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
}

.wp-block-query-pagination .page-numbers.dots,
.bh-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 1.5rem;
	padding: 0;
}

/* ---------- Authors list ([bh_authors] from BH Insider Core) ---------- */

.bh-authors {
	list-style: none;
	margin-block-start: var(--wp--preset--spacing--40);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 1rem;
}

.bh-author {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: 1rem;
	align-items: start;
	margin: 0;
	padding: 1.25rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

.bh-author-avatar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--source-serif);
	font-size: 1.25rem;
	font-weight: 600;
}

.bh-author-avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bh-author-name {
	margin: 0.15rem 0 0.4rem;
	font-size: var(--wp--preset--font-size--large);
}

.bh-author-bio {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.bh-author-bio p {
	margin: 0 0 0.5rem;
}

.bh-author-bio p:last-child {
	margin-bottom: 0;
}

/* ---------- Dark mode: swap the palette ---------- */

@media (prefers-color-scheme: dark) {
	:root:root,
	:root body {
		color-scheme: dark;
		--wp--preset--color--base: #141B1A;
		--wp--preset--color--surface: #1B2422;
		--wp--preset--color--contrast: #E6ECEA;
		--wp--preset--color--muted: #9AA8A4;
		--wp--preset--color--line: #33403D;
		--wp--preset--color--brand: #8CC5BB;
		--wp--preset--color--on-brand: #10201D;
		--wp--preset--color--tint: #1F2D2A;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bh-card {
		transition: none;
	}
}