/*
Theme Name: Reunion Band
Theme URI: https://github.com/kbarkins/reunionband
Author: kbarkins
Author URI: https://github.com/kbarkins
Description: Block theme for the Reunion Band website. A three-ink letterpress show bill: wood-type display, ink-on-stock body serif, and a condensed face for billing data. Presentation is defined in theme.json; this file carries the theme header and the few primitives theme.json cannot express.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.6.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reunionband
Tags: full-site-editing, block-patterns, one-column, wide-blocks, accessibility-ready
*/

/* Visible only to screen readers, but focusable for skip links. */
.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--ink);
	clip-path: none;
	color: var(--wp--preset--color--page);
	display: block;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--large);
	height: auto;
	left: 5px;
	letter-spacing: 0.15em;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	text-transform: uppercase;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/*
 * Wordmark. The two-tone REUNION is brand rather than content, so it lives in
 * the header template part instead of the Site Title block - the Site Title
 * block renders one flat string and cannot colour part of a word.
 */
.rb-wordmark {
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--wood);
	font-size: clamp(3rem, 8.5vw, 6.25rem);
	font-weight: 800;
	letter-spacing: -0.005em;
	line-height: 0.8;
	text-decoration: none;
	text-transform: uppercase;
}

.rb-wordmark span {
	color: var(--wp--preset--color--oxblood);
}

.rb-masthead-tag {
	margin: 0;
	max-width: 22ch;
}

/*
 * Navigation: the nav is a row of billing lines, underscored on approach.
 * The gap is set on the container rather than through blockGap, which the
 * navigation block does not honour for its top-level row.
 */
.rb-nav .wp-block-navigation__container {
	gap: clamp(1rem, 3vw, 2.75rem);
}

/*
 * Between the mobile overlay breakpoint and the point where the full nav fits
 * comfortably, seven uppercase labels are a few pixels too wide and drop to a
 * second row. Tightening the tracking buys back more than enough width without
 * shrinking the type, which would be the more noticeable compromise.
 */
@media (max-width: 820px) {

	.rb-nav .wp-block-navigation__container {
		gap: clamp(0.85rem, 2.2vw, 1.5rem);
	}

	.rb-nav .wp-block-navigation-item__content {
		letter-spacing: 0.08em;
	}
}

/*
 * A ten-pixel window just above the mobile-overlay breakpoint where the row is
 * still eight pixels too wide. Dropping the gap floor closes it, so there is no
 * width at which the navigation wraps.
 */
@media (max-width: 620px) {

	.rb-nav .wp-block-navigation__container {
		gap: 0.7rem;
	}
}

.rb-nav .wp-block-navigation-item__content {
	align-items: center;
	border-bottom: 3px solid transparent;
	display: inline-flex;
	min-height: 44px;
	padding-block: 0.7rem;
	text-decoration: none;
}

.rb-nav .wp-block-navigation-item__content:hover,
.rb-nav .wp-block-navigation-item__content:focus,
.rb-nav .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--oxblood);
	color: var(--wp--preset--color--oxblood);
}

.rb-footer-list {
	list-style: none;
	padding-left: 0;
}

.rb-footer-list li {
	border-bottom: 1px solid var(--wp--preset--color--ink-soft);
}

.rb-footer-list a {
	display: inline-block;
	min-height: 44px;
	padding-block: 0.6rem;
	text-decoration: none;
}

.rb-footer-list a:hover,
.rb-footer-list a:focus {
	text-decoration: underline;
}

/*
 * Letterpress rules. A press sets a thick rule over a hairline; a single
 * border cannot express the pair, so it gets a primitive here and the
 * patterns reuse it rather than each restating two borders.
 */
.rb-rule-pair {
	border-bottom: 1px solid var(--wp--preset--color--ink);
	border-top: 5px solid var(--wp--preset--color--ink);
	height: 4px;
}

.rb-rule-hair {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.is-style-inked-band .rb-rule-pair {
	border-color: var(--wp--preset--color--page);
}

.is-style-inked-band .rb-rule-hair {
	border-top-color: var(--wp--preset--color--ink-soft);
}

/*
 * Guests and the band's late members, billed as a pair under the line-up.
 *
 * Each is a group of one or two portraits. Left stacked full-width they read
 * as a five-across grid that ran out of people; set beside each other, each
 * column holds its portrait next to its own line of copy. The columns block
 * already stacks these below its own breakpoint, so this only has to size and
 * place the two children within a column.
 */
.rb-kin .wp-block-column {
	flex-basis: 0;
	flex-grow: 1;
}

/*
 * Centred within the column rather than packed against its left edge. One
 * portrait and two lines of copy do not fill a half-width column, so packed
 * left they sat in the corner with the dead space all on one side; centred,
 * the pair balances under its own rule. The heading centres with them, or it
 * reads as a label for something no longer beneath it.
 */
.rb-kin .wp-block-column > h6 {
	text-align: center;
}

.rb-kin__body {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
}

/*
 * 13rem is the narrowest the portrait goes before the billing under it starts
 * breaking badly: below it the longest player name wraps onto two lines and the
 * instrument list onto three, which reads as a squeezed card rather than a
 * deliberately small one.
 */
.rb-kin__body .rb-lineup {
	flex: 0 0 auto;
	width: 13rem;
}

/* Capped, so a two-line note does not set itself across the whole column. */
.rb-kin__body p {
	flex: 1 1 12ch;
	margin-block: 0;
	max-width: 30ch;
}

/*
 * The hero headline is one h1. Its second line is core's inline colour format,
 * set on its own line at its own size, so the two-tone reads exactly as it did
 * when it was a separate h2 while the page keeps a single, whole title.
 */
.rb-hero-title mark {
	background: transparent;
	display: block;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 0.85;
}

/*
 * Poster billing: the roster set as one centred line, the way a bill credits
 * the players under the headline.
 */
.rb-billing {
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: clamp(0.85rem, 1.5vw, 1.05rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.7;
	text-align: center;
	text-transform: uppercase;
}

/*
 * Ticket stub: the primary call to action, cut with a perforated edge out of
 * the block itself so it reads as a torn stub rather than a rounded button.
 */
.rb-stub {
	--rb-notch: 14px;

	background: var(--wp--preset--color--brass);
	color: var(--wp--preset--color--ink);
	display: block;
	mask:
		radial-gradient(var(--rb-notch) at 0 50%, transparent 98%, #000) left / 100% 100% no-repeat,
		radial-gradient(var(--rb-notch) at 100% 50%, transparent 98%, #000) right / 100% 100% no-repeat;
	mask-composite: intersect;
	padding: 1.35rem 1.5rem;
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.rb-stub:hover,
.rb-stub:focus {
	background: var(--wp--preset--color--oxblood);
	color: var(--wp--preset--color--page);
}

/*
 * These inherit the stub's own colour rather than setting one. Soft ink on
 * brass measured 2.60:1, the worst reading on the site and on its primary
 * booking call to action; brass-light on the oxblood hover state measured
 * 3.59:1. Both
 * needed 4.5:1. Inheriting gives ink on brass at 4.57:1 and bone on oxblood at
 * 7.66:1, in both states, and the hierarchy against the main line survives on
 * size and tracking alone - 13px letterspaced caps against 44px wood type does
 * not need a colour difference to read as subordinate.
 */
.rb-stub__kicker,
.rb-stub__meta {
	display: block;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.rb-stub__meta {
	letter-spacing: 0.1em;
	margin-top: 0.55rem;
}

.rb-stub__main {
	display: block;
	font-family: var(--wp--preset--font-family--wood);
	font-size: clamp(1.9rem, 4.2vw, 2.75rem);
	font-weight: 800;
	line-height: 0.9;
	margin-top: 0.3rem;
	text-transform: uppercase;
}

/* Honour a reduced-motion preference for anything the editor may animate. */
@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;
	}
}

/*
 * Video. A plain iframe keeps its aspect ratio here rather than relying on the
 * embed block's wrapper classes, which a theme-shipped pattern never gets.
 */
.rb-video {
	margin: 0;
}

.rb-video iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	width: 100%;
}

.rb-video figcaption {
	color: var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.1em;
	margin-top: 0.6rem;
	text-transform: uppercase;
}

/*
 * Playlist. Two columns of song and artist, set as a bill rather than a table,
 * so it reflows to one column on a phone without a horizontal scroll.
 */
.rb-songs {
	columns: 2 20rem;
	column-gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rb-songs li {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	break-inside: avoid;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	justify-content: space-between;
	padding-block: 0.45rem;
}

.rb-songs b {
	font-weight: 600;
}

/* Soft ink, not quiet: 15px on bone stock needs 4.5:1 and quiet gives 3.79:1.
   The artist is the half of each row a visitor scans for, so it is the last
   place on the site to be set in the lightest grey available. */
.rb-songs span {
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.88em;
	text-align: right;
}

.rb-songs .rb-song__new {
	background: var(--wp--preset--color--brass);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin-left: 0.5rem;
	padding: 0.1em 0.45em;
	text-transform: uppercase;
}