/*
Theme Name: SoulTrippers
Theme URI: https://soultrippers.com
Description: One-page band theme for SoulTrippers, built on Twenty Twenty-Five. Muted paisley palette, Fraunces and Archivo type, SoulTrippers lettering.
Author: SoulTrippers
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soultrippers
*/

:root {
	--st-ink: var(--wp--preset--color--ink, #1B1420);
	--st-wine: var(--wp--preset--color--wine, #4B2438);
	--st-panel: var(--wp--preset--color--panel, #241A2A);
	--st-cream: var(--wp--preset--color--cream, #F1E6D0);
	--st-haze: var(--wp--preset--color--haze, #C9BCC9);
	--st-saffron: var(--wp--preset--color--saffron, #E1C07F);
	--st-verdigris: var(--wp--preset--color--verdigris, #5E8C84);
	--st-line: #3A2C3E;
}

h1, h2, h3, h4, h5, h6, .wp-block-heading {
	font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* ---------- Header ---------- */
.st-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--st-ink);
	border-bottom: 1px solid var(--st-line);
	padding: 10px 32px;
	gap: 4px 24px;
	align-items: center;
}
body.admin-bar .st-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .st-header { top: 46px; } }
.st-header .st-logo { margin: 0; }
.st-header .st-logo img { width: 210px; height: auto; display: block; }
.st-nav { gap: 0 32px; }
.st-nav .wp-block-navigation-item__content {
	color: var(--st-cream);
	text-decoration: none;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.st-nav .wp-block-navigation-item__content:hover { color: var(--st-saffron); }

/* ---------- Hero ---------- */
.st-hero { padding-bottom: 56px; }
.st-hero-photo { position: relative; margin: 0 !important; }
.st-hero-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 760px;
	object-fit: cover;
	object-position: center 100%;
}
.st-hero-photo::after,
.st-photo-band::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 45%;
	background: linear-gradient(rgba(27, 20, 32, 0), var(--st-ink));
	pointer-events: none;
}
.st-hero-text {
	position: relative;
	margin-top: calc(-1 * clamp(48px, 9vw, 140px)) !important;
	padding: 0 24px;
	text-align: center;
}
.st-hero-wordmark { margin: 0 auto !important; }
.st-hero-wordmark img { width: min(1000px, 92vw); height: auto; display: block; margin: 0 auto; }
.st-tagline { font-size: 22px; font-weight: 500; margin-top: 20px !important; }

.st-nextgig {
	max-width: 880px;
	margin: 28px auto 0 !important;
	box-sizing: border-box;
	background: var(--st-saffron);
	color: var(--st-ink);
	border-radius: 8px;
	padding: 16px 24px;
	gap: 12px 24px;
	align-items: center;
	text-align: left;
}
.st-nextgig p { margin: 0; font-size: 20px; color: var(--st-ink); }
.st-nextgig strong {
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-right: 16px;
}
.st-btn-dark .wp-block-button__link {
	background: var(--st-ink);
	color: var(--st-cream);
	border-radius: 6px;
	font-weight: 700;
	padding: 10px 20px;
}
.st-btn-dark .wp-block-button__link:hover { background: var(--st-wine); color: var(--st-cream); }

/* ---------- Sections ---------- */
.st-section { padding: 88px 24px !important; margin-top: 0 !important; }
.st-section.st-alt { background: var(--st-panel); }
.st-section > * + * { margin-top: 32px; }
.st-section h2 { text-align: center; }
.st-muted { color: var(--st-haze); }

.st-photo-band { position: relative; margin: 0 !important; }
.st-photo-band img {
	display: block;
	width: 100%;
	height: clamp(200px, 26vw, 380px);
	object-fit: cover;
	object-position: center 50%;
}
.st-photo-band + .st-section { padding-top: 24px !important; }

/* Gigs */
.st-gig {
	gap: 28px !important;
	padding: 24px 0;
	border-top: 1px solid var(--st-line);
	align-items: flex-start !important;
	margin-top: 0 !important;
}
.st-gig:last-child { border-bottom: 1px solid var(--st-line); }
.st-gig-date { flex: 0 0 84px; text-align: center; margin: 0; }
.st-mon {
	display: block;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-saffron);
}
.st-day {
	display: block;
	font-family: var(--wp--preset--font-family--fraunces);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.1;
}
.st-gig-info { flex: 1 1 0; min-width: 0; }
.st-gig-info > * { margin: 2px 0 !important; }
.st-gig-info h3 { font-size: 24px; }

/* Band */
.st-members { gap: 16px !important; }
.st-members .wp-block-column {
	border: 1px solid var(--st-line);
	border-radius: 8px;
	padding: 18px 20px;
}
.st-members h3 { font-size: 20px; margin: 0; }
.st-members p { margin: 2px 0 0; }

/* Music */
.st-video { margin-bottom: 0 !important; }
.st-video figcaption { text-align: center; color: var(--st-haze); font-size: 16px; margin-top: 8px; }
.st-videos { gap: 24px !important; }
.st-more-videos { list-style: none; padding: 0; text-align: center; }
.st-more-videos li { padding: 6px 0; }
.st-more-videos a { font-weight: 700; }

/* Songs (unused) */
.st-songs { list-style: none; padding: 0; column-width: 240px; column-gap: 40px; }
.st-songs li { padding: 7px 0; border-bottom: 1px solid var(--st-line); break-inside: avoid; }

.st-center { text-align: center; }
.st-email { font-size: 22px; font-weight: 700; }
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--st-saffron);
	border: 2px solid var(--st-saffron);
}
.is-style-outline .wp-block-button__link:hover { background: var(--st-saffron); color: var(--st-ink); }
.st-ornament { margin: 0 auto !important; }
.st-ornament img { width: 64px; height: auto; display: block; }

/* ---------- Footer ---------- */
.st-footer {
	border-top: 1px solid var(--st-line);
	padding: 28px 32px;
	gap: 12px 24px;
	align-items: center;
	background: var(--st-ink);
}
.st-footer .st-badge { margin: 0; }
.st-footer .st-badge img { width: 56px; height: 56px; display: block; }
.st-footer p { margin: 0; color: var(--st-haze); font-size: 16px; }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
	.st-header { padding: 8px 16px; justify-content: center !important; }
	.st-header .st-logo img { width: 172px; }
	.st-nav { gap: 0 18px; justify-content: center; }
	.st-section { padding: 56px 16px !important; }
	.st-gig { gap: 16px !important; }
	.st-gig-date { flex-basis: 68px; }
	.st-day { font-size: 32px; }
	.st-nextgig { padding: 14px 16px; }
	.st-footer { justify-content: center !important; text-align: center; }
}