/*
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.0.3
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;
}

/* Form fields follow the palette, so a dark theme never shows white boxes. */
:where(
	input:not(
		[type="checkbox"],
		[type="radio"],
		[type="submit"],
		[type="button"]
	),
	textarea,
	select
) {
	border: 1px solid currentcolor;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* 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;
}

/* 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;
}

/* 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. */
.wp-site-blocks:has(.wp-block-post-content > .alignfull:first-child h1)
	.wp-block-post-title {
	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; a theme restyles it to match its own hover. */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, 0.08em);
	text-underline-offset: 0.3em;
}

/* 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,
		color 0.15s ease-out,
		translate 0.15s ease-out;
}

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

/* 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;
	}
}

/* Pause button on Cover background videos (inc/cover-video.php), above the overlay and the content. */
.backline-video-toggle {
	position: absolute;
	z-index: 2;
	inset-inline-end: 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--preset--color--base);
	color: 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);
}

@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;
}

.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;
}

/* 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%;
}

/* Tour dates: the Sold out style on a row swaps its ticket button for the Sold out note. */
.backline-sold-out-note {
	display: none;
}

.is-style-sold-out .backline-sold-out-note {
	display: block;
}

.is-style-sold-out .wp-block-buttons {
	display: none;
}

/* The hero's pause button lines up with the header's edge, and its line keeps a readable measure. */
.backline-hero .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;
}

/* 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 hero video's pause button belongs to the stage, which stays dark in every variation. */
.wp-block-cover .backline-video-toggle {
	background-color: var(--wp--preset--color--stage);
	color: var(--wp--preset--color--on-stage);
}

/* The opened mobile menu sets its links large enough to hit with a thumb. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--large);
}

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

: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;
}

/* 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);
}