/*
Theme Name: Soft Geometry
Description: Soft Geometry Records brand on top of Twenty Twenty-Five. Colors, type weights, links, buttons, header, footer and page patterns are set here; everything else comes from the parent theme.
Author: Soft Geometry Records
Template: twentytwentyfive
Version: 2.5.3
Requires at least: 6.7
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: soft-geometry
*/

/* Colors, type and spacing live in theme.json. The rules below handle what
   theme.json cannot: one shared left edge, cover sizes and small details. */

/* One left edge. Twenty Twenty-Five centers narrow text inside the wider
   layout, so page titles, text and covers each start at a different place.
   This lines narrow blocks up with the left edge of the wide column. */
.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

/* A cover placed on its own (not in columns) stays cover-sized too. */
.wp-block-post-content > .wp-block-image.size-full:not(.alignwide):not(.alignfull) {
	max-width: 380px;
}

/* Covers and photos beside text: a fixed, modest width instead of half the page. */
@media (min-width: 782px) {
	.wp-block-columns > .wp-block-column:has(> .wp-block-image:only-child) {
		flex: 0 0 380px !important;
	}
	.wp-block-columns:has(> .wp-block-column > .wp-block-image:only-child) > .wp-block-column:not(:has(> .wp-block-image:only-child)) {
		flex: 1 1 0 !important;
	}
}

/* Record and artist grids: small tiles, two across on phones. */
.wp-block-columns:has(> .wp-block-column > .wp-block-image + .wp-block-heading) {
	flex-wrap: wrap !important;
	justify-content: flex-start;
}
.wp-block-columns:has(> .wp-block-column > .wp-block-image + .wp-block-heading) > .wp-block-column {
	flex: 0 1 260px !important;
	min-width: 0;
}
.wp-block-columns:has(> .wp-block-column > .wp-block-image + .wp-block-heading) > .wp-block-column:empty,
.wp-block-columns:has(> .wp-block-column > .wp-block-image + .wp-block-heading) > .wp-block-column:not(:has(*)) {
	display: none;
}
@media (max-width: 781px) {
	.wp-block-columns:has(> .wp-block-column > .wp-block-image + .wp-block-heading) > .wp-block-column {
		flex: 0 1 calc(50% - var(--wp--preset--spacing--30)) !important;
	}
	.wp-block-columns:has(> .wp-block-column > .wp-block-image + .wp-block-heading) {
		column-gap: var(--wp--preset--spacing--30) !important;
	}
}
.wp-block-column > .wp-block-image + .wp-block-heading {
	margin-top: 0.9rem;
	font-size: var(--wp--preset--font-size--medium) !important;
}
.wp-block-column > .wp-block-image + .wp-block-heading + p {
	margin-top: 0.15rem;
}

/* Covers: flat, with a hairline so pale artwork still has an edge. */
.wp-block-column > .wp-block-image img,
.entry-content .wp-block-image img {
	border-radius: 2px;
	outline: 1px solid var(--wp--preset--color--accent-6);
	outline-offset: -1px;
}
.wp-block-image a img { transition: opacity 0.2s ease; }
.wp-block-image a:hover img { opacity: 0.85; }

/* Tracklists: hairline between tracks, quiet numbers. */
ol.wp-block-list {
	padding-left: 0;
	list-style: none;
	counter-reset: track;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}
ol.wp-block-list > li {
	counter-increment: track;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
ol.wp-block-list > li::before {
	content: counter(track, decimal-leading-zero);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	display: inline-block;
	width: 2.25rem;
}

/* Section headings under a hairline, so long pages read in chapters. */
.entry-content > .wp-block-group > h2.wp-block-heading,
.wp-block-post-content > .wp-block-group > h2.wp-block-heading,
.wp-block-post-content > h2.wp-block-heading {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

/* Footer: Paper, under a hairline. */
footer.wp-block-template-part {
	margin-top: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--preset--color--accent-6);
}
footer.wp-block-template-part a:hover { text-decoration: none; }
footer.wp-block-template-part > .wp-block-group {
	padding-top: var(--wp--preset--spacing--40) !important;
	padding-bottom: var(--wp--preset--spacing--40) !important;
}

/* Long words (an email address) wrap instead of running off a phone screen. */
.wp-block-post-content p { overflow-wrap: break-word; }

/* Filled and outline buttons share one size. */
.wp-block-button .wp-block-button__link {
	padding: 0.65em 1.2em !important;
	border: 1px solid currentColor;
	line-height: 1.3;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link { border-color: transparent; }

/* A little air between a page title and what follows it. */
.wp-block-post-title { margin-bottom: var(--wp--preset--spacing--40); }

/* Home: the intro starts the same distance under the header as page titles. */
.home .wp-block-post-content > .wp-block-group.alignfull:first-child {
	padding-top: var(--sg-gap-top) !important;
}

/* Separator block: the same hairline used above section headings. */
.wp-block-separator {
	border: none !important;
	border-top: 1px solid var(--wp--preset--color--accent-6) !important;
	background: none !important;
	color: var(--wp--preset--color--contrast) !important;
	height: 0;
	width: 100% !important;
	max-width: var(--wp--style--global--content-size) !important;
	opacity: 1 !important;
	margin-top: var(--wp--preset--spacing--70) !important;
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* Compact columns (Block style "Compact", or className sg-feature): a 260px
   image, the size of the record tiles, with the text beside it tightened so it
   fits the image's height. Text that is still longer than the image simply runs
   on below it rather than being cut off. */
:is(.is-style-compact, .sg-feature) .wp-block-image { max-width: 260px; }
@media (min-width: 782px) {
	.wp-block-columns:is(.is-style-compact, .sg-feature) > .wp-block-column:has(> .wp-block-image:only-child) {
		flex: 0 0 260px !important;
		align-self: flex-start !important;
	}
	.wp-block-columns:is(.is-style-compact, .sg-feature) > .wp-block-column:not(:has(> .wp-block-image:only-child)) {
		min-height: 260px;
	}
	.wp-block-columns:is(.is-style-compact, .sg-feature) > .wp-block-column > * {
		margin-top: 0.5rem;
		margin-bottom: 0;
	}
	.wp-block-columns:is(.is-style-compact, .sg-feature) > .wp-block-column > :first-child { margin-top: 0; }
	.wp-block-columns:is(.is-style-compact, .sg-feature) > .wp-block-column > .wp-block-heading { margin-top: 0.35rem; line-height: 1.25; }
	.wp-block-columns:is(.is-style-compact, .sg-feature) .wp-block-quote {
		margin-top: 0.9rem;
		padding-top: 0.1rem;
		padding-bottom: 0.1rem;
		font-size: 0.875rem;
		line-height: 1.55;
	}
	.wp-block-columns:is(.is-style-compact, .sg-feature) .wp-block-quote p { margin: 0; }
	.wp-block-columns:is(.is-style-compact, .sg-feature) .wp-block-quote cite { display: block; margin-top: 0.35rem; }
	.wp-block-columns:is(.is-style-compact, .sg-feature) > .wp-block-column > .wp-block-buttons {
		padding-top: var(--wp--preset--spacing--30);
	}
	.wp-block-columns:is(.is-style-compact, .sg-feature) > .wp-block-column > .wp-block-buttons + p {
		margin-top: 0.75rem;
		font-family: var(--sg-font-heading);
		font-size: var(--wp--preset--font-size--small);
	}
}


/* Header: Paper, a standard 80px tall, pinned to the top with a hairline
   along its bottom edge. */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
header.wp-block-template-part .wp-block-group.alignwide {
	min-height: 80px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: center;
}
header .wp-block-navigation__responsive-container:not(.is-menu-open) a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}
header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--accent-6) !important;
}
@media (max-width: 600px) {
	/* The admin bar scrolls away on phones, so the header pins to the very top. */
	header.wp-block-template-part { top: 0; }
}

/* Page titles in spaced capitals, like the small labels. */
.wp-block-post-title {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 600;
	line-height: 1.3;
}

/* Two colors: secondary text is Ink too, set apart by size rather than grey. */
.has-accent-4-color { color: var(--wp--preset--color--contrast) !important; }
a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--contrast);
}
.wp-block-quote { padding-left: 1.25rem; }
.wp-block-quote cite { font-size: var(--wp--preset--font-size--small); font-style: normal; }

/* Headings and body each read from one variable, so a font swap is one line. */
:root {
	--sg-font-heading: var(--wp--preset--font-family--instrument-sans);
	--sg-font-body: var(--wp--preset--font-family--source-serif);
}
body { font-family: var(--sg-font-body); }
h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-site-title,
p[style*="text-transform:uppercase"], .wp-block-navigation, .wp-element-button,
.has-small-font-size, .wp-block-quote cite, ol.wp-block-list > li::before, footer.wp-block-template-part {
	font-family: var(--sg-font-heading);
}

/* Empty leftovers in page content (a stray paragraph, an emptied column) take no space. */
.wp-block-post-content p:empty { display: none; }
.wp-block-columns > .wp-block-column:empty { display: none; }

/* Spotify embeds keep their own height instead of a tall widescreen box. */
.wp-block-embed.is-provider-spotify .wp-block-embed__wrapper::before { content: none; }
.wp-block-embed.is-provider-spotify .wp-block-embed__wrapper iframe { position: static; }

/* "Appears On" tiles say where the link goes. */
.sg-appears-on .wp-block-heading a::after { content: " \2197"; font-weight: 400; }


/* Cover or photo beside text (release and artist pages): the text starts level
   with the top of the image and the buttons (with their "Listen" heading) sit
   along its bottom edge. Text longer than the image pushes the buttons below it. */
@media (min-width: 782px) {
	.wp-block-columns:has(> .wp-block-column > .wp-block-image:only-child) {
		align-items: stretch !important;
	}
	.wp-block-columns:has(> .wp-block-column > .wp-block-image:only-child) > .wp-block-column:not(:has(> .wp-block-image:only-child)) {
		display: flex;
		flex-direction: column;
		align-self: stretch !important;
	}
	.wp-block-columns:has(> .wp-block-column > .wp-block-image:only-child) > .wp-block-column:not(:has(> .wp-block-image:only-child)) > :first-child {
		margin-top: 0;
	}
	.wp-block-columns:has(> .wp-block-column > .wp-block-image:only-child) > .wp-block-column > :is(h3:has(+ .wp-block-buttons), :not(h3) + .wp-block-buttons) {
		margin-top: auto;
		padding-top: var(--wp--preset--spacing--40);
	}
	.wp-block-columns:has(> .wp-block-column > .wp-block-image:only-child) > .wp-block-column > h3:has(+ .wp-block-buttons) + .wp-block-buttons {
		margin-top: 0.75rem;
	}
	.wp-block-columns:has(> .wp-block-column > .wp-block-image:only-child) .wp-block-image { margin: 0; }
}
.wp-block-buttons { flex-wrap: wrap; }
.wp-block-column > p, .wp-block-column > .wp-block-quote { max-width: 34em; }

/* Artist login, after the © line (or on its own line under the footer). */
div.sg-footer-login {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	box-sizing: content-box;
	text-align: right;
	font-size: var(--wp--preset--font-size--small);
	font-family: var(--sg-font-heading);
}
.sg-footer-login a { text-decoration: none; }
.sg-footer-login a:hover { text-decoration: underline; }

/* Vertical rhythm. Three gaps used everywhere, so every page reads the same:
   header to first line of content, space above a hairline (and above the
   footer), and space between a hairline and what sits under it. */
:root {
	--sg-gap-top: var(--wp--preset--spacing--60);
	--sg-gap-section: var(--wp--preset--spacing--70);
	--sg-gap-under-line: var(--wp--preset--spacing--50);
}
main > .wp-block-group.alignfull:first-child { padding-top: var(--sg-gap-top) !important; padding-bottom: 0 !important; }

/* Hairline headings and separators: the same space above every one. */
.wp-block-post-content > .wp-block-group > h2.wp-block-heading,
.wp-block-post-content > h2.wp-block-heading {
	margin-top: var(--sg-gap-section) !important;
	padding-top: var(--sg-gap-under-line);
}
.wp-block-separator {
	margin-top: var(--sg-gap-section) !important;
	margin-bottom: var(--sg-gap-under-line) !important;
}
/* Whatever sits right before a hairline adds no space of its own. */
.wp-block-post-content :is(*):has(+ h2.wp-block-heading, + .wp-block-separator) { margin-bottom: 0 !important; }
.wp-block-post-content > .wp-block-group:has(+ .wp-block-group > h2.wp-block-heading:first-child) { padding-bottom: 0 !important; }
.wp-block-post-content > .wp-block-group:has(> h2.wp-block-heading:first-child) { padding-top: 0 !important; margin-top: 0 !important; }
.wp-block-post-content > .wp-block-group:has(> .wp-block-separator) { padding-bottom: 0 !important; }

/* The end of every page sits the same distance above the footer. */
.wp-block-post-content > :last-child,
.wp-block-post-content > :last-child > :last-child,
.wp-block-post-content > :last-child > :last-child > :last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
footer.wp-block-template-part { margin-top: var(--sg-gap-section) !important; }
/* Embedded players sit on their own line, with no stray gap beneath them. */
.wp-block-post-content iframe { display: block; }

/* Hero (Cover block, style "Hero"): a full-width photo that opens the page,
   filling the screen under the header, with the heading and intro on the open
   sky, lined up with the site's left edge. */
.wp-block-cover.is-style-hero {
	min-height: min(calc(100svh - 80px), 66vw) !important;
	padding: var(--wp--preset--spacing--70) var(--wp--style--root--padding-right) var(--wp--preset--spacing--70) var(--wp--style--root--padding-left);
	margin-top: 0 !important;
	margin-bottom: 0;
	color: var(--wp--preset--color--contrast);
}
.wp-block-cover.is-style-hero .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto !important;
	color: var(--wp--preset--color--contrast);
}
.wp-block-cover.is-style-hero .wp-block-cover__inner-container > * {
	max-width: 30rem;
	margin-left: 0 !important;
}
/* The hero line is set like body text: the body font, size and weight. */
.wp-block-cover.is-style-hero h1 {
	font-family: var(--sg-font-body);
	font-size: 1rem !important;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	margin-bottom: 0;
}
.wp-block-cover.is-style-hero h1 + p {
	margin-top: var(--wp--preset--spacing--30);
	max-width: 26rem;
	line-height: 1.55;
}
/* What follows the hero starts the usual distance below it. */
.wp-block-post-content > .wp-block-cover.is-style-hero + * {
	padding-top: var(--sg-gap-top) !important;
	margin-top: 0 !important;
}
/* Phones: the photo fills most of the screen and the line sits on the sky at
   its bottom-left, inside the photo, the same as on desktop. */
@media (max-width: 781px) {
	.wp-block-cover.is-style-hero {
		min-height: 90svh !important;
		padding: var(--wp--preset--spacing--50) var(--wp--style--root--padding-right) var(--wp--preset--spacing--50) var(--wp--style--root--padding-left);
	}	/* Frame the photo a little further left so the pole sits right of the line. */
	.wp-block-cover.is-style-hero .wp-block-cover__image-background {
		object-position: 70% 30% !important;
	}
}

/* Header over the hero: when a hero opens the page, the photo runs up under
   the header, which starts clear and turns to frosted Paper once you scroll
   (functions.php adds sg-scrolled). Over Paper content the frosted header
   looks like plain Paper; over the photo it softly blurs it. */
body:has(.wp-block-post-content > .wp-block-cover.is-style-hero:first-child) header.wp-block-template-part {
	background: transparent;
	border-bottom-color: transparent;
	transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
body.sg-scrolled:has(.wp-block-post-content > .wp-block-cover.is-style-hero:first-child) header.wp-block-template-part {
	background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	backdrop-filter: blur(18px) saturate(1.2);
	border-bottom-color: var(--wp--preset--color--accent-6);
}
.wp-block-post-content > .wp-block-cover.is-style-hero:first-child {
	margin-top: -81px !important;
	min-height: min(100svh, 66vw) !important;
	padding-top: calc(81px + var(--wp--preset--spacing--70));
}
/* On the clear header, the menu and logo get a touch more weight so they hold
   up against the photo. */
body:not(.sg-scrolled):has(.wp-block-post-content > .wp-block-cover.is-style-hero:first-child) header .wp-block-navigation {
	font-weight: 600;
}
body:not(.sg-scrolled):has(.wp-block-post-content > .wp-block-cover.is-style-hero:first-child) header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content,
body:not(.sg-scrolled):has(.wp-block-post-content > .wp-block-cover.is-style-hero:first-child) header .wp-block-site-logo img {
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent));
}
/* The logo's grey "RECORDS" line gets lost on the photo, so the clear header
   shows a version with it in Ink. */
body:not(.sg-scrolled):has(.wp-block-post-content > .wp-block-cover.is-style-hero:first-child) header .wp-block-site-logo img {
	content: url(assets/logo-on-photo.svg);
}
@media (max-width: 781px) {
	.wp-block-post-content > .wp-block-cover.is-style-hero:first-child {
		min-height: 92svh !important;
		padding-top: calc(81px + var(--wp--preset--spacing--50));
	}
}

/* Sky, taken from the hero photo: the footer, and the text highlight. */
footer.wp-block-template-part {
	background: var(--wp--preset--color--sky);
	border-top-color: transparent;
}
::selection { background: var(--wp--preset--color--sky); color: var(--wp--preset--color--contrast); }

/* Short pages: the footer sits at the bottom of the screen, not halfway up. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks > main { flex: 1 0 auto; }