/*
Theme Name: Backline
Theme URI: https://gridwerkthemes.com/themes/backline/
Author: Gridwerk Themes
Author URI: https://gridwerkthemes.com/
Description: A block theme for rock bands, with a full-screen video hero, tour dates, releases and a press kit.
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: backline
Tags: entertainment, one-column, custom-colors, custom-logo, featured-images, full-site-editing, block-patterns, block-styles, style-variations, wide-blocks, editor-style, translation-ready
*/

/* Base layer shared by every theme (from starter/). Theme-specific CSS goes below it. Rules on html, body and
   .wp-site-blocks sit in :where(), so a theme's own rule on the same element always wins and is no duplicate. */

/* Visible keyboard focus (WordPress.org requirement). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

/* Buttons draw the ring inside, in their text color: outside, it would sit on a section background of the
   same color as the button (a gilded button on a gilded band). */
.wp-element-button:focus-visible {
	outline-offset: -5px;
}

/* The browser's own surfaces take the palette too: selected text and checkboxes, radios and range sliders. A theme
   picks its own selection pair through settings.custom.selection, never a second ::selection rule. */
::selection {
	background-color: var(
		--wp--custom--selection--background,
		var(--wp--preset--color--accent-1)
	);
	color: var(--wp--custom--selection--text, var(--wp--preset--color--base));
}

:where(:root) {
	accent-color: var(--wp--preset--color--accent-1);
}

/* Form fields follow the palette, so a dark theme never shows white boxes, and stand as full 44px touch targets like
   the buttons, whatever the theme's text size (their padding is in em): a plain field (a password-protected post's, a
   plugin's without its own styles) and a plain select (WooCommerce's sort order) alike. A control sized by its height
   alone keeps it, since a min-height outweighs any height: sliders (WooCommerce's price slider is 0 high), colour and
   image buttons, the toolbar's 24px search, and WooCommerce's quantity stepper, whose rules weigh as little as these
   and load first. */
:where(
	input:not(
		[type="checkbox"],
		[type="radio"],
		[type="submit"],
		[type="button"],
		[type="reset"],
		[type="image"],
		[type="range"],
		[type="color"],
		[type="hidden"],
		.adminbar-input,
		.wc-block-components-quantity-selector__input
	),
	textarea,
	select
) {
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.5em 0.75em;
	border: 1px solid currentcolor;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Browsers give form controls their own font (Arial), not the page's, and theme.json has no element for them: they
   take the theme's type. Zero specificity, so a block's or plugin's own font still wins. */
:where(input, select, textarea, button) {
	font: inherit;
}

/* Content made with core's default palette (another theme's posts, the test data) sets a background but no text
   colour, so it would inherit this theme's text colour. Each default background takes black or white, whichever
   contrasts more, and its headings and links follow. */
:is(
	.has-cyan-bluish-gray-background-color,
	.has-white-background-color,
	.has-pale-pink-background-color,
	.has-luminous-vivid-orange-background-color,
	.has-luminous-vivid-amber-background-color,
	.has-light-green-cyan-background-color,
	.has-vivid-green-cyan-background-color,
	.has-pale-cyan-blue-background-color,
	.has-vivid-cyan-blue-background-color,
	.has-vivid-purple-background-color
):not(.has-text-color) {
	color: var(--wp--preset--color--black);
}

:is(.has-black-background-color, .has-vivid-red-background-color):not(
	.has-text-color
) {
	color: var(--wp--preset--color--white);
}

:is(
		.has-black-background-color,
		.has-cyan-bluish-gray-background-color,
		.has-white-background-color,
		.has-pale-pink-background-color,
		.has-vivid-red-background-color,
		.has-luminous-vivid-orange-background-color,
		.has-luminous-vivid-amber-background-color,
		.has-light-green-cyan-background-color,
		.has-vivid-green-cyan-background-color,
		.has-pale-cyan-blue-background-color,
		.has-vivid-cyan-blue-background-color,
		.has-vivid-purple-background-color
	):not(.has-text-color)
	:is(h1, h2, h3, h4, h5, h6, a:not(.wp-element-button)) {
	color: inherit;
}

/* The byline reads "By Name" on one line, not as a tiny label above the name. */
.wp-block-post-author__content {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.3em;
	align-items: baseline;
}

.wp-block-post-author__byline {
	width: auto;
	font-size: inherit;
}

/* The comment beside its avatar may shrink below its longest word, so a long word wraps instead of widening the page. */
:where(.wp-block-comment-template li > .is-layout-flex) > .wp-block-group {
	flex: 1;
	min-width: 0;
}

/* The post author's own replies are marked, so readers can tell them from a guest's. */
:where(.wp-block-comment-template .bypostauthor) > .wp-block-group {
	border-inline-start: 2px solid currentcolor;
	padding-inline-start: var(--wp--preset--spacing--30);
}

/* One long word in a large heading (a name, a URL) wraps instead of widening the page. */
:where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}

/* The same for the next post's title, a flex item: only anywhere lowers its min-content width. */
:where(.wp-block-post-navigation-link) {
	overflow-wrap: anywhere;
}

/* Headings break into even lines, and running text avoids a lone word on its last line. */
:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title) {
	text-wrap: balance;
}

:where(p, li, figcaption, blockquote) {
	text-wrap: pretty;
}

/* Quotes in running text read as quotes, not as plain paragraphs: a rule in the text colour at their start (in place
   of the browser's indent), the source smaller under them, and a pull quote between two rules in the heading face.
   Only a quote written in a post's or page's body, so one inside a section (the testimonials) keeps its section's
   look; weightless, so a theme's theme.json styles for core/quote and core/pullquote still win. */
:where(
	.wp-block-post-content
		> .wp-block-quote:not(
			.is-style-plain,
			.has-text-align-center,
			.has-text-align-right
		)
) {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 2px solid currentcolor;
}

:where(
	.wp-block-post-content > :is(.wp-block-quote, .wp-block-pullquote) cite
) {
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

:where(.wp-block-post-content > .wp-block-pullquote) {
	border-block: 2px solid currentcolor;
	font-family: var(--wp--preset--font-family--heading);
}

/* Links inside running text stay recognizable without color. */
.wp-block-post-content
	:where(p, li:not(.wp-block-post))
	a:where(:not(.wp-element-button)) {
	text-decoration: underline;
}

/* Classic and comment content (captions, sized images, preformatted text) must not widen the page;
   :is() outranks the layout's content-size cap. */
:is(.wp-block-post-content, .wp-block-comment-content)
	:is(img, .wp-caption, embed, iframe, video) {
	max-width: 100%;
}

:where(.wp-block-post-content, .wp-block-comment-content) :where(img, video) {
	height: auto;
}

:where(.wp-block-post-content, .wp-block-comment-content) pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Logo-only social icons take the text color, not each brand's; the block's icon color (inline) still wins. */
.wp-block-social-links.is-style-logos-only .wp-social-link {
	color: currentcolor;
}

/* The mobile menu's open and close buttons are touch targets, however short their label (WCAG 2.5.8). */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 2.75rem;
	min-height: 2.75rem;
	justify-content: center;
	align-items: center;
}

/* On a touch screen every menu link is a 44px target too; core draws it only as tall as its text. */
@media (pointer: coarse) {
	.wp-block-navigation .wp-block-navigation-item__content {
		display: flex;
		min-height: 2.75rem;
		align-items: center;
	}
}

/* Page numbers, Previous and Next, and a comment's Reply and Edit are targets of at least 24px (WCAG 2.5.8), 44px on a
   touch screen; core draws them only as large as their text, a page number about 10px wide. */
:where(
	.wp-block-query-pagination a,
	.wp-block-comments-pagination a,
	:is(a, span).page-numbers,
	.wp-block-comment-reply-link a,
	.wp-block-comment-edit-link a
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	min-height: 1.5rem;
}

@media (pointer: coarse) {
	:where(
		.wp-block-query-pagination a,
		.wp-block-comments-pagination a,
		:is(a, span).page-numbers,
		.wp-block-comment-reply-link a,
		.wp-block-comment-edit-link a
	) {
		min-width: 2.75rem;
		min-height: 2.75rem;
	}
}

/* A phone number or a mail address is a target of at least 24px wherever it sits in running text, and as one box it
   moves to the next line whole rather than breaking. Only one longer than the line breaks, inside the line (a long
   address in a narrow column, a sentence linked to an address). A button or a Mail icon keeps its own box. */
:where(
	a:is([href^="tel:"], [href^="mailto:"]):not(
			.wp-element-button,
			.wp-block-social-link-anchor
		)
) {
	display: inline-block;
	max-width: 100%;
	min-height: 1.5rem;
	overflow-wrap: break-word;
}

/* Core's Sticky position on a header Group sticks only inside the template part's <header>, which is just as tall,
   so the header scrolled away. The <header> sticks instead, below the admin bar the way core offsets sticky blocks
   (core sets the offset only on .is-position-sticky, and to 0 where the admin bar scrolls away on phones). */
.wp-site-blocks > .wp-block-template-part:has(> .is-position-sticky) {
	--wp-admin--admin-bar--position-offset: var(
		--wp-admin--admin-bar--height,
		0px
	);
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset);
	z-index: 10;
}

@media screen and (max-width: 600px) {
	.wp-site-blocks > .wp-block-template-part:has(> .is-position-sticky) {
		--wp-admin--admin-bar--position-offset: 0px;
	}
}

/* Keyboard focus and anchor links scroll to just below a sticky header, never under it (WCAG 2.4.11). All of it
   inside :where(), since :has() weighs as much as its argument and a theme's own scroll-padding-top must win. */
:where(
	html:has(.wp-site-blocks > .wp-block-template-part > .is-position-sticky)
) {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 8rem);
}

/* On a very short screen (a phone held sideways) a sticky header would take most of it; it scrolls away there. */
@media (max-height: 30rem) {
	.wp-site-blocks > .wp-block-template-part:has(> .is-position-sticky) {
		position: static;
	}
}

/* A page built from full-width sections shows the template's title on the sections' wide edge, not on the text
   column centred above them (the page patterns' own title bands sit there too). */
.page:has(.wp-block-post-content > .alignfull:first-child)
	.wp-block-post-title {
	max-width: var(--wp--style--global--wide-size);
}

/* A page whose content opens with its own title band (a page pattern's full-width group with an h1) shows that
   title; the template's smaller one steps aside, so the page never says its name twice. Only the template's: the
   titles in the content and in a query or product grid (a shop section's product names) stay. */
.wp-site-blocks:has(.wp-block-post-content > .alignfull:first-child h1)
	.wp-block-post-title:not(
		.wp-block-post-content *,
		:is(.wp-block-post-template, .wc-block-product-template) *
	) {
	display: none;
}

/* That title band starts right under the header, without a strip of page background above it (a photo page head
   runs up to the header). The template's padding on <main> is inline, so only !important outranks it. */
.wp-site-blocks
	> main:has(> .wp-block-post-content > .alignfull:first-child h1) {
	margin-block-start: 0;
	padding-top: 0 !important;
}

.wp-site-blocks
	> main
	> .wp-block-post-content:has(> .alignfull:first-child h1) {
	margin-block-start: 0;
}

/* Short pages end with the footer, not with a strip of page background below it. */
:where(.wp-site-blocks) {
	display: flex;
	flex-direction: column;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

:where(.wp-site-blocks > main) {
	flex-grow: 1;
}

/* A page that ends in a full-width band (a call to action, a photo) runs it into the footer, without a strip of
   page background between them. The template's padding on <main> is inline, so only !important outranks it. */
:where(.wp-site-blocks) > footer {
	margin-block-start: 0;
}

.wp-site-blocks
	> main:is(
		:has(> .alignfull:last-child),
		:has(> .wp-block-post-content:last-child > .alignfull:last-child)
	) {
	padding-bottom: 0 !important;
}

/* Inside a page, full-width bands follow each other without the content's block gap between them, a strip of page
   background that shows wherever two band colours meet or a photo runs down to the next band. */
:where(.wp-block-post-content) > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* The menu marks the page you are on, and so do the page numbers; a theme restyles it to match its own hover. */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.page-numbers.current {
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, 0.08em);
	text-underline-offset: 0.3em;
}

/* So that mark stands out, the other page numbers drop the link underline (their place says they are links); under the
   pointer they take the theme's own link style back, its hover included. With the element, since the theme's link
   underline (theme.json, on a) outranks a weightless rule. */
a.page-numbers:not(:hover) {
	text-decoration-line: none;
}

/* Details (the FAQ component) open with a chevron drawn in the text colour instead of the browser's triangle.
   A block style of Details (a booking card, say) keeps its own summary. */
.wp-block-details:not([class*="is-style-"]) > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	cursor: pointer;
	list-style: none;
}

.wp-block-details:not([class*="is-style-"]) > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details:not([class*="is-style-"]) > summary::after {
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	content: "";
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease-out;
}

.wp-block-details:not([class*="is-style-"])[open] > summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

/* Motion that answers the visitor: an answer unfolds as its question opens, and a button settles into its hover
   colours and gives under the press. On translate, so a theme's own transform on either stays; reduced motion makes
   all of it instant (below). */
.wp-block-details:not([class*="is-style-"])[open] > :not(summary) {
	animation-name: backline-unfold;
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
}

@keyframes backline-unfold {
	from {
		opacity: 0;
		translate: 0 -0.4em;
	}
}

:where(.wp-element-button, .wp-block-button__link) {
	transition:
		background-color 0.15s ease-out,
		border-color 0.15s ease-out,
		box-shadow 0.15s ease-out,
		color 0.15s ease-out,
		translate 0.15s ease-out;
}

:where(.wp-element-button, .wp-block-button__link):active {
	translate: 0 1px;
}

/* An outline button answers the pointer with its ring doubled, inside so nothing moves, on every section style and
   variation. Never a fill: a wash of the text colour behind the label lowers the label's own contrast. */
:where(.wp-block-button.is-style-outline > .wp-block-button__link:hover) {
	box-shadow: inset 0 0 0 1px currentcolor;
}

/* A face without an italic stays upright rather than slanted by the browser; themes bundle the italics they use. */
:where(body) {
	font-synthesis-style: none;
}

/* A full-height Cover means the visible screen: on phones 100vh runs under the browser's toolbar. */
@supports (min-height: 100svh) {
	.wp-block-cover[style*="min-height:100vh"] {
		min-height: 100svh !important;
	}
}

/* A full-width Cover's text starts on the page's gutter, the root padding the sections around it start from, not on
   core's 1em. Two classes, since core's padding weighs one and its sheet may load after this one; a Cover's own
   padding (inline) still wins. */
.wp-block-cover.alignfull {
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
}

/* A Cover's content may shrink below its longest word, so one long word wraps instead of widening the Cover. */
:where(.wp-block-cover__inner-container) {
	min-width: 0;
}

/* A Cover whose overlay and words are the base and contrast pair is a photo cover: it takes the pair from
   settings.custom.photo, so a variation whose palette turns light (or dark) still keeps a dark overlay with light
   words, or whatever pair the variation names. A buyer's own overlay or text colour (another slug) still wins.
   The preset colour classes carry !important, so these do too, and the overlay rule weighs two classes: one more
   than the preset class, no more than a theme's own `.<hero> .wp-block-cover__background` after it. */
.wp-block-cover__background:is(
		.has-base-background-color,
		.has-contrast-background-color
	):where(.wp-block-cover:is(.has-base-color, .has-contrast-color) > *) {
	background-color: var(--wp--custom--photo--overlay) !important;
}

.wp-block-cover:is(.has-base-color, .has-contrast-color):has(
		> .wp-block-cover__background:is(
				.has-base-background-color,
				.has-contrast-background-color
			)
	) {
	color: var(--wp--custom--photo--text) !important;
}

/* Pause button on Cover background videos (inc/cover-video.php), above the overlay and the content, on the page's
   gutter. It always sits on a video, so it takes the photo Cover's pair (settings.custom.photo). */
.backline-video-toggle {
	position: absolute;
	z-index: 2;
	inset-inline-end: var(
		--wp--style--root--padding-right,
		var(--wp--preset--spacing--40)
	);
	bottom: var(--wp--preset--spacing--40);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 2px solid currentcolor;
	border-radius: 50%;
	background-color: var(
		--wp--custom--photo--overlay,
		var(--wp--preset--color--base)
	);
	color: var(--wp--custom--photo--text, var(--wp--preset--color--contrast));
	cursor: pointer;
}

.backline-video-toggle svg {
	width: 1rem;
	height: 1rem;
	fill: currentcolor;
}

/* The slug once per selector, so a long slug still fits Prettier's line. */
[aria-pressed="true"] > .backline-video-toggle__pause,
[aria-pressed="false"] > .backline-video-toggle__play {
	display: none;
}

/* Complianz's cookie banner on the theme's tokens, so it follows the palette, the style variations and the type.
   Complianz sets these properties on :root; set on the banner itself, they win without !important. Deny looks
   exactly like Accept: rejecting must be as easy as accepting. A hairline frame keeps it apart from a page of
   the same colour. A theme's own section sets position and shape. */
.cmplz-cookiebanner {
	--cmplz_banner_background_color: var(--wp--preset--color--base);
	--cmplz_banner_border_color: var(--wp--preset--color--contrast);
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: 0;
	--cmplz_text_color: var(--wp--preset--color--contrast);
	--cmplz_hyperlink_color: var(--wp--preset--color--contrast);
	--cmplz_title_font_size: var(--wp--preset--font-size--medium);
	--cmplz_text_font_size: var(--wp--preset--font-size--small);
	--cmplz_link_font_size: var(--wp--preset--font-size--small);
	--cmplz_category_body_font_size: var(--wp--preset--font-size--small);
	--cmplz_category_header_title_font_size: var(
		--wp--preset--font-size--small
	);
	--cmplz_category_header_active_font_size: var(
		--wp--preset--font-size--small
	);
	--cmplz_category_header_always_active_color: var(
		--wp--preset--color--contrast
	);
	--cmplz_button_font_size: var(--wp--preset--font-size--small);
	--cmplz_button_border_radius: 0;
	--cmplz_button_accept_background_color: var(--wp--preset--color--accent-1);
	--cmplz_button_accept_border_color: var(--wp--preset--color--accent-1);
	--cmplz_button_accept_text_color: var(--wp--preset--color--base);
	--cmplz_button_deny_background_color: var(--wp--preset--color--accent-1);
	--cmplz_button_deny_border_color: var(--wp--preset--color--accent-1);
	--cmplz_button_deny_text_color: var(--wp--preset--color--base);
	--cmplz_button_settings_background_color: var(--wp--preset--color--base);
	--cmplz_button_settings_border_color: var(--wp--preset--color--contrast);
	--cmplz_button_settings_text_color: var(--wp--preset--color--contrast);
	--cmplz_slider_active_color: var(--wp--preset--color--accent-1);
	--cmplz_slider_inactive_color: var(--wp--preset--color--contrast);
	--cmplz_slider_bullet_color: var(--wp--preset--color--base);

	font-family: var(--wp--preset--font-family--body);
}

/* Complianz's stylesheet loads after this one, so these start from its container's id. The focus ring sits
   inside the buttons: outside, Accept's base-colored ring would vanish on the base-colored banner. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: -5px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category {
	background-color: var(--wp--preset--color--accent-2);
}

/* Contact Form 7's and Mailchimp for WordPress's forms on the tokens: their submit is the theme's own button
   (functions.php gives it wp-element-button, so theme.json styles it), their fields take the form fields above,
   across the form's width, and their messages drop Contact Form 7's fixed reds, greens and yellows, which fail
   contrast on a dark palette: the words carry the state, on the token pairs every variation passes. */
:is(.wpcf7, .mc4wp-form)
	:is(
		input:not([type="checkbox"], [type="radio"], [type="submit"]),
		textarea,
		select
	) {
	width: 100%;
}

/* A file field's button is the theme's outline control, not the browser's grey rounded one. */
:is(.wpcf7, .mc4wp-form) input[type="file"]::file-selector-button {
	margin-inline-end: 0.75em;
	padding: 0.25em 0.75em;
	border: 1px solid currentcolor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* A field with an error doubles its line (inside, so nothing moves) and names the error under it. */
.wpcf7 .wpcf7-not-valid {
	box-shadow: inset 0 0 0 1px currentcolor;
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.35em;
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* The form's status after sending, on the theme's tinted surface (the highlight once sent), with room
   below it, so it never meets what follows the form. As strong as its per-state rules (form.invalid …);
   this stylesheet loads after its own. */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
	background-color: var(--wp--preset--color--accent-3);
}

.wpcf7 .wpcf7-spinner {
	background-color: currentcolor;
}

/* Mailchimp for WordPress's answer after signing up, on the same surfaces as Contact Form 7's status. */
.mc4wp-form .mc4wp-alert {
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

.mc4wp-form .mc4wp-success {
	background-color: var(--wp--preset--color--accent-3);
}

/* As light as a bare p, so no theme rule ending in p later on outranks it. */
:where(.mc4wp-form .mc4wp-alert) > p {
	margin: 0;
}

/* WPForms on the tokens. It styles its forms through these properties, set on :root; set on the container, they
   win without !important, and a form the buyer styles in its block (on #wpforms-<id>) still wins over them. Its
   errors take the text colour, like Contact Form 7's: its fixed red fails contrast on a dark palette, and the
   words and its warning sign carry the state. Its submit keeps its own rules, which outrank the theme's button,
   so it takes the button's colours from the token contract. */
.wpforms-container {
	--wpforms-field-background-color: var(--wp--preset--color--base);
	--wpforms-field-border-color: var(--wp--preset--color--contrast);
	--wpforms-field-border-color-spare: var(--wp--preset--color--contrast);
	--wpforms-field-border-radius: 0;
	--wpforms-field-text-color: var(--wp--preset--color--contrast);
	--wpforms-field-menu-color: var(--wp--preset--color--base);
	--wpforms-field-size-font-size: 1em;
	--wpforms-label-color: var(--wp--preset--color--contrast);
	--wpforms-label-sublabel-color: var(--wp--preset--color--contrast);
	--wpforms-label-error-color: var(--wp--preset--color--contrast);
	--wpforms-label-size-font-size: 1em;
	--wpforms-label-size-sublabel-font-size: var(
		--wp--preset--font-size--small
	);
	--wpforms-button-background-color: var(--wp--preset--color--accent-1);
	--wpforms-button-border-color: var(--wp--preset--color--accent-1);
	--wpforms-button-text-color: var(--wp--preset--color--base);
	--wpforms-button-border-radius: 0;
	--wpforms-button-size-font-size: var(--wp--preset--font-size--small);
}

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

/* Backline */

/* The front page's header sits on the hero video; .wp-site-blocks anchors it below the admin bar. */
.wp-site-blocks:has(> .backline-header-overlay) {
	position: relative;
}

/* Under .wp-site-blocks, which the Site Editor's canvas root carries too, so the canvas shows the header on the video
   as the site does: the editor's own position: relative on every block outranks a lone class. */
.wp-site-blocks > .backline-header-overlay {
	position: absolute;
	z-index: 10;
	inset: 0 0 auto;
	color: var(--wp--preset--color--on-stage);
}

/* On the stage the header's links take the stage's text color; the opened mobile menu keeps its own. */
.backline-header-overlay
	:where(
		.wp-block-site-title,
		.wp-block-navigation__responsive-container:not(.is-menu-open)
	)
	a {
	color: inherit;
}

/* So do text links on a cover in the stage's words (the release hero's Apple Music link): the theme's link colour is
   dark in Daylight, over a stage that stays dark. */
.wp-block-cover.has-on-stage-color a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* The centred heroes centre their text too, so a band name that wraps stays balanced. */
.backline-hero .wp-block-cover__inner-container {
	text-align: center;
}

/* A merch price keeps its width beside its name, which wraps instead; a wider heading face (Archivo in
   Amplifier) squeezed "£24" to a digit per line. */
.backline-price {
	flex-shrink: 0;
}

/* A row's lead (a tour date, a record's cover, a member's name) keeps its width when the rest needs the room, so
   the rows stay aligned, but never outgrows the row: the line-up's 16rem name column is 512px at 200% text. */
:is(.backline-date, .backline-row-lead) {
	flex-shrink: 0;
	max-width: 100%;
}

/* A date tops its row, level with the city, also when the venue and button stack beside it on a phone. */
.backline-date {
	align-self: flex-start;
}

/* A merch name and its price share a baseline, though one is set in Big Shoulders and the other in Archivo. */
.wp-block-group:has(> .backline-price) {
	align-items: baseline;
}

/* Tour dates: the Sold out style on a row (the Group a date leads) swaps its ticket button for the Sold out note, and
   so does it on the row's City, venue and tickets Group, where 1.1's guide had it picked. On any other Group, the list
   or the whole section, it only dims the text, so it never hides every Tickets button. */
.backline-sold-out-note {
	display: none;
}

:is(
		.is-style-sold-out > .backline-date + .wp-block-group,
		.backline-date + .wp-block-group.is-style-sold-out
	)
	> .backline-sold-out-note {
	display: block;
}

:is(
		.is-style-sold-out > .backline-date + .wp-block-group,
		.backline-date + .wp-block-group.is-style-sold-out
	)
	> .wp-block-buttons {
	display: none;
}

/* A full-width video's pause button lines up with the header's edge (every hero's, the release hero's too), and the
   centred hero's line keeps a readable measure. */
.wp-block-cover.alignfull > .backline-video-toggle {
	inset-inline-end: max(
		var(--wp--style--root--padding-right, 1rem),
		calc((100% - var(--wp--style--global--wide-size)) / 2)
	);
}

.backline-hero .wp-block-cover__inner-container > p {
	max-width: 28.8rem;
}

/* Hero: new release sizes the record's title by its column once the artwork stands beside it: at the display size, a
   column under half the page split its longest word (LOW / CEILIN / GS). 18cqi fits an eight-letter word in Archivo
   900 (Amplifier, Archivo headings) and a thirteen-letter one in Big Shoulders; stacked on a phone, the title takes
   the display size again. Only while the buyer keeps the Display size: another size from the sidebar still wins. */
.wp-block-column:has(> .backline-release-title) {
	container-type: inline-size;
}

@media (min-width: 782px) {
	.wp-block-heading.backline-release-title.has-display-font-size {
		font-size: min(var(--wp--preset--font-size--display), 18cqi) !important;
	}
}

/* A row's text and buttons sit beside its date or cover until larger text needs the room, then wrap under it
   (the tour dates, the discography). */
:is(.backline-date, .backline-row-lead) + .wp-block-group {
	flex: 1 1 9.6rem;
	container-type: inline-size;
}

/* Every row places its button the same way: by the row's width, never by how long its venue's name is. */
:is(.backline-date, .backline-row-lead) + .wp-block-group > .wp-block-group {
	flex: 1 1 0;
	min-width: 0;
}

@container (width < 22rem) {
	:is(.backline-date, .backline-row-lead)
		+ .wp-block-group
		> .wp-block-group {
		flex-basis: 100%;
	}

	/* A record's formats then stand under its title as one column of buttons of one width, not a ragged pile. */
	.backline-row-lead + .wp-block-group > .wp-block-buttons {
		flex-direction: column;
		flex-basis: 100%;
		align-items: stretch;
	}

	.backline-row-lead
		+ .wp-block-group
		> .wp-block-buttons
		.wp-block-button__link {
		width: 100%;
	}
}

/* A quote stands on a 4px rule in the text colour at its start, the right edge in a right-to-left language: the base
   layer's 2px rule, heavier, and on the press quotes too. Weightless like the base layer's, which it follows, so the
   Quote's border and padding in Styles still win. */
:where(
	.wp-block-quote:not(
		.is-style-plain,
		.has-text-align-center,
		.has-text-align-right
	)
) {
	padding-inline-start: var(--wp--preset--spacing--50);
	border-inline-start: 4px solid currentcolor;
}

/* The opened phone menu reads like the tour dates: its links start at the page's edge, each a row on a hairline in
   the Tour date face (Big Shoulders 800 caps, x-large), a submenu's links as Labels under their parent. Every link
   fills its row, so the whole row is the target. A Page List's pages are rows too (core wraps its list in the menu's,
   as on a fresh install's fallback menu). Only core's own overlay, as core's rules do: a custom overlay the buyer
   builds keeps its own design. Core's overlay rules weigh four or five classes; these weigh more. */
.wp-block-navigation__responsive-container.is-menu-open:where(
		:not(.disable-default-overlay)
	) {
	--navigation-layout-justification-setting: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open:where(
		:not(.disable-default-overlay)
	)
	.wp-block-navigation__responsive-container-content
	> ul:is(.wp-block-navigation__container, .wp-block-page-list) {
	gap: 0;
	border-top: var(--wp--custom--hairline);
}

.wp-block-navigation__responsive-container.is-menu-open:where(
		:not(.disable-default-overlay)
	)
	.wp-block-navigation__responsive-container-content
	> ul
	> .wp-block-page-list {
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open:where(
		:not(.disable-default-overlay)
	)
	.wp-block-navigation__responsive-container-content
	> ul
	> .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open:where(
		:not(.disable-default-overlay)
	)
	.wp-block-navigation__responsive-container-content
	> ul
	> :where(.wp-block-page-list)
	> .wp-block-navigation-item {
	border-bottom: var(--wp--custom--hairline);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 0.9;
}

.wp-block-navigation__responsive-container.is-menu-open:where(
		:not(.disable-default-overlay)
	)
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation-item
	> .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open:where(
		:not(.disable-default-overlay)
	)
	.wp-block-navigation__responsive-container-content
	.has-child
	> .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	gap: 0;
	padding: 0 0 var(--wp--preset--spacing--30);
	padding-inline-start: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open:where(
		:not(.disable-default-overlay)
	)
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.wp-block-navigation__responsive-container.is-menu-open:where(
		:not(.disable-default-overlay)
	)
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item
	> .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--30);
}

/* The browser's own surfaces take the palette too: selected text, the scrollbar, checkboxes and link underlines. */
:root {
	scrollbar-color: var(--wp--preset--color--muted)
		var(--wp--preset--color--base);
	accent-color: var(--wp--preset--color--contrast);
}

:where(a) {
	text-underline-offset: 0.15em;
}

/* The news, archives and search list their posts as rows on hairlines, like the tour dates, set off from the page's
   heading. */
.wp-block-query:has(> .backline-post-rows) {
	margin-block-start: var(--wp--preset--spacing--70);
}

.backline-post-rows > .wp-block-post {
	padding-block-start: var(--wp--preset--spacing--60);
	border-top: var(--wp--custom--hairline);
}

/* At the end of a post, "Filed under" and "Tagged" step back so the terms read first. */
.wp-block-post-terms__prefix {
	color: var(--wp--preset--color--muted);
}

/* A page's photo head sets its title low, where the stage fade is darkest, on the same column as the rows below. */
.wp-block-cover.backline-page-head {
	align-items: flex-end;
}

/* Show info: each question is a row on the hairlines, like the tour dates beside it. */
.backline-faq > .wp-block-details {
	margin-block-start: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.backline-faq > .wp-block-details:first-child {
	border-top: 1px solid var(--wp--preset--color--rule);
}