/**
 * Global front-end refinements.
 *
 * Everything expressible as a design token lives in theme.json. This file is
 * only for the things it cannot describe: the masthead composite background,
 * sticky positioning, focus behaviour, and motion preferences.
 */

/* -----------------------------------------------------------------------------
 * Masthead
 *
 * The Artisteer header was two stacked absolutely-positioned layers of fixed
 * 902x150 imagery, so it could never adapt to a viewport. Here the photograph
 * is pinned to the left at its natural aspect ratio and a gradient dissolves it
 * into the page colour, which means the crop stays honest at any width and the
 * artwork is never stretched to fill.
 *
 * Dropping a higher-resolution photograph at the same path is the only change
 * needed to sharpen this on large displays.
 * -------------------------------------------------------------------------- */

.bsm-masthead {
	background-color: var(--wp--preset--color--base-2);
	background-image:
		linear-gradient(
			90deg,
			rgba(35, 16, 10, 0.08) 0%,
			rgba(35, 16, 10, 0.62) 28%,
			var(--wp--preset--color--base) 68%
		),
		url("../images/header-piano.jpg");
	background-position: left center, left center;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 100%, auto 100%;
	border-block-end: 1px solid rgba(245, 181, 5, 0.28);
	min-height: var(--wp--custom--header--min-height);
	position: relative;
}

.bsm-masthead__brand {
	position: relative;
	z-index: 1;
}

.bsm-masthead .wp-block-site-title {
	text-shadow: 0 2px 12px rgba(15, 6, 3, 0.75);
}

.bsm-masthead .wp-block-site-tagline {
	margin-block-start: 0.15em;
	opacity: 0.92;
	text-shadow: 0 1px 8px rgba(15, 6, 3, 0.8);
}

/* Below the photograph's useful width, drop it and keep the gradient alone. */
@media (max-width: 600px) {

	.bsm-masthead {
		background-image: linear-gradient(
			160deg,
			var(--wp--preset--color--base-2) 0%,
			var(--wp--preset--color--base) 100%
		);
	}
}

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

.bsm-navbar {
	border-block-end: 1px solid rgba(247, 239, 232, 0.1);
	position: sticky;
	top: 0;
	transition: box-shadow var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
	z-index: 20;
}

.bsm-navbar.is-scrolled {
	box-shadow: 0 6px 24px rgba(15, 6, 3, 0.55);
}

.admin-bar .bsm-navbar {
	top: 32px;
}

@media (max-width: 782px) {

	.admin-bar .bsm-navbar {
		top: 46px;
	}
}

.bsm-navbar__search {
	max-width: 18rem;
}

@media (max-width: 600px) {

	.bsm-navbar__search {
		max-width: none;
		width: 100%;
	}
}

/* -----------------------------------------------------------------------------
 * Surfaces
 *
 * `is-style-sheet` and `is-style-panel` are registered in inc/BlockStyles.php
 * against several block types at once (Group, Comments, Columns), so their
 * rules live here rather than as a per-block inline style — an inline style
 * would be emitted once per registered block type.
 *
 * Between them these two classes replace the whole `art-sheet` / `art-block` /
 * `art-blockcontent` apparatus: 27 empty positioned divs and four sliced PNGs.
 * -------------------------------------------------------------------------- */

.is-style-sheet {
	background: var(--wp--preset--gradient--surface-sheen);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--lifted), var(--wp--preset--shadow--inset-hairline);
	padding: var(--wp--preset--spacing--50);
}

.is-style-panel {
	background-color: color-mix(in srgb, var(--wp--preset--color--surface-2) 55%, transparent);
	border: var(--wp--custom--rule--hairline);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40);
}

/* A gradient or colour chosen in the editor must win over the sheet default. */
.is-style-sheet.has-background {
	background-image: none;
}

/* -----------------------------------------------------------------------------
 * Layout
 * -------------------------------------------------------------------------- */

/*
 * Columns collapse at 782px by default, which leaves the sidebar cramped in the
 * 782–960px band. Stacking a little earlier keeps both columns readable.
 */
@media (max-width: 960px) {

	.bsm-layout.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap;
	}

	.bsm-layout.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.bsm-card {
	transition:
		transform var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		box-shadow var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.bsm-card:hover,
.bsm-card:focus-within {
	box-shadow:
		0 4px 8px rgba(15, 6, 3, 0.4),
		0 18px 44px rgba(15, 6, 3, 0.45),
		inset 0 1px 0 rgba(247, 239, 232, 0.12);
	transform: translateY(-2px);
}

.bsm-article :where(.wp-block-post-content) > * {
	margin-block: var(--wp--preset--spacing--40);
}

/* -----------------------------------------------------------------------------
 * Focus and accessibility
 * -------------------------------------------------------------------------- */

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

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--small);
	clip-path: none;
	color: var(--wp--preset--color--base);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	height: auto;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	line-height: normal;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	width: auto;
	z-index: 100000;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

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

	.bsm-card:hover,
	.bsm-card:focus-within {
		transform: none;
	}
}

/* -----------------------------------------------------------------------------
 * Content details
 * -------------------------------------------------------------------------- */

.bsm-footer__pages ul,
.bsm-footer__latest {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bsm-footer__pages li,
.bsm-footer__latest li {
	margin-block: 0.4em;
}

.bsm-footer__latest .wp-block-latest-posts__post-date {
	color: var(--wp--preset--color--contrast-2);
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
}

.bsm-post-nav .wp-block-post-navigation-link {
	max-width: 48%;
}

@media (max-width: 600px) {

	.bsm-post-nav .wp-block-post-navigation-link {
		max-width: none;
	}
}