/*
Theme Name: Mindses
Theme URI: https://mindsesmusic.com
Author: Mindses
Description: Block theme for the Mindses ambient music label. Dark carton grain, nebula gradients and a daily NASA / ESA sky behind every page (the sky itself comes from the mindses-core MU-plugin).
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.2.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mindses
Tags: block-patterns, full-site-editing, dark, one-column, wide-blocks, block-styles
*/

/*
 * Only what theme.json cannot express lives here: pseudo-element textures,
 * blend modes, transitions. Every value points at a theme.json token
 * (var(--wp--preset--*) / var(--wp--custom--*)) so palette edits in the
 * Site Editor flow through automatically.
 */

/* Boxes measure their padding inside their width, so every box lines up. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------- Typography: one family, three weights ----------
   Light 300 (headings), Regular 400 (text), Semibold 600 (labels, buttons, emphasis).
   Mono (Sometype Mono) only for telemetry details. */
strong,
b,
.mindses-wordmark strong {
	font-weight: var(--wp--custom--typography--weight-strong, 600);
}
input,
button,
select,
textarea {
	font-family: inherit;
}

/* ---------- Carton grain: on the background only (the sky layer) ---------- */
.wp-block-mindses-cosmos__texture {
	background-image: url("assets/textures/carton.webp");
}

/* Panels printed on carton: stronger, local grain + a faint pressed edge. */
.is-style-section-carton,
.is-style-section-nebula,
.wp-block-mindses-cosmos-credit {
	position: relative;
	isolation: isolate;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.is-style-section-carton::before,
.is-style-section-nebula::before,
.wp-block-mindses-cosmos-credit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background-image: url("assets/textures/carton.webp");
	background-size: 384px 384px;
	mix-blend-mode: overlay;
	opacity: var(--wp--custom--texture--panel-opacity, 0.9);
}

/* Glass panel that lets the daily sky glow through. */
.is-style-section-eclipse {
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
}

/* ---------- Buttons: the nebula veil drifts on hover ---------- */
.wp-element-button,
.wp-block-button__link {
	background-size: 220% 100%;
	background-position: 0% 50%;
	transition:
		background-position var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	background-position: 100% 50%;
	box-shadow: var(--wp--preset--shadow--glow);
}

/* ---------- Record sleeve: a vinyl slides out on hover ---------- */
.is-style-image-sleeve {
	position: relative;
	isolation: isolate;
}
.is-style-image-sleeve::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 4% 4% 4% auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--wp--preset--color--peach) 0 9%, #0b0b0d 9.5% 12%, transparent 12.5%),
		repeating-radial-gradient(circle, #101012 0 1px, #18171b 1.5px 3px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
	transform: translateX(0);
	transition: transform 700ms var(--wp--custom--motion--ease);
}
.is-style-image-sleeve:hover::before,
a:focus-visible .is-style-image-sleeve::before,
.wp-block-post:hover .is-style-image-sleeve::before {
	transform: translateX(22%);
}

/* ---------- Nebula print: photos tinted like the sky (deep teal -> wine) with the carton grain ---------- */
.wp-block-image.is-style-image-nebula {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0;
	background: var(--wp--preset--color--void);
}
.wp-block-image.is-style-image-nebula img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Anchored right so the performer (right side of the live photo) stays in frame when the column is narrow. */
	object-position: var(--mindses-photo-focus, 100% 50%);
	filter: grayscale(1) contrast(1.12) brightness(0.92);
}
.wp-block-image.is-style-image-nebula::before,
.wp-block-image.is-style-image-nebula::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.wp-block-image.is-style-image-nebula::before {
	background-image: var(--wp--preset--gradient--nebula-overlay);
	mix-blend-mode: color;
}
.wp-block-image.is-style-image-nebula::after {
	background-image: url("assets/textures/carton.webp"), var(--wp--preset--gradient--nebula-overlay);
	background-size: 384px 384px, cover;
	mix-blend-mode: overlay;
	opacity: 0.9;
}
/* A photo column is the box itself: it fills the row height next to its text box. */
.wp-block-column.mindses-photo-column {
	display: flex;
	min-height: 18rem;
}
.wp-block-column.mindses-photo-column > .wp-block-image {
	flex: 1;
}

/* ---------- Wordmark: "mind" bold, "ses" light, like the original logo ---------- */
.mindses-wordmark {
	font-weight: 300;
	letter-spacing: 0.01em;
}
.mindses-wordmark a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.mindses-wordmark img {
	width: 2.4rem;
	height: auto;
	flex: none;
}

/* ---------- Header ---------- */
.mindses-header {
	position: sticky;
	top: 0;
	z-index: 80;
}
/* Glass lives on a pseudo-element: a backdrop-filter on the header itself would
   trap the fixed-position mobile menu overlay inside the header box. */
.mindses-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--wp--preset--color--void) 62%, transparent);
	-webkit-backdrop-filter: blur(12px) saturate(1.15);
	backdrop-filter: blur(12px) saturate(1.15);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--moonlight) 6%, transparent);
}
.admin-bar .mindses-header { top: var(--wp-admin--admin-bar--height, 0px); }

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--void) !important;
	background-image: var(--wp--preset--gradient--nebula-horizon);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--60);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	letter-spacing: 0.18em;
}

/* Menu: a thin peach line draws in under the hovered item and stays under the current page. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.45em;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0.22em; /* compensates the trailing letter-spacing */
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--peach);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--moonlight);
}

/* Page titles are for screen readers only (the menu shows where you are). */
.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
main > .screen-reader-text + * {
	margin-block-start: 0 !important;
}

/* ---------- Even rhythm: boxes in page content sit one gap apart ---------- */
/* The footer follows main's own bottom padding (one rhythm gap), not gap + root gap. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}
/* A small kicker heading belongs to the box below it: half the usual gap after it. */
.wp-block-post-content.wp-block-post-content > .is-style-text-kicker + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.wp-block-post-content.wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* ---------- Release cards ---------- */
.mindses-release-card { overflow: clip; }

/* Release grids: one column on phones, three from tablets up - no orphaned
   half-rows - and every card in a row is the same height. */
.wp-block-query .wp-block-post-template.columns-3.is-layout-grid {
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
	.wp-block-query .wp-block-post-template.columns-3.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}
.wp-block-post-template.is-layout-grid > li > .mindses-release-card {
	flex: 1;
}
.mindses-release-card .wp-block-post-featured-image img { aspect-ratio: 1; object-fit: cover; }
.mindses-release-card .wp-block-post-title a:hover { color: var(--wp--preset--color--peach); }

/* ---------- Embeds (Bandcamp / Spotify / SoundCloud) sit on carton ---------- */
.mindses-embed iframe + iframe { margin-top: var(--wp--preset--spacing--20); }
.mindses-embed iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--wp--custom--radius--base);
	background: var(--wp--preset--color--carton);
}

/* ---------- Legibility over the sky ---------- */
:where(main) :where(h1, h2, h3, .is-style-text-kicker) {
	text-shadow: 0 1px 2px rgba(5, 5, 7, 0.45), 0 0 28px rgba(5, 5, 7, 0.55);
}
.is-style-section-carton :where(h1, h2, h3, .is-style-text-kicker),
.is-style-section-nebula :where(h1, h2, h3, .is-style-text-kicker) {
	text-shadow: none;
}

/* Taxonomy links styled as kickers/telemetry read as labels, not links. */
:is(.is-style-text-kicker, .is-style-text-telemetry).wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}
:is(.is-style-text-kicker, .is-style-text-telemetry).wp-block-post-terms a:hover {
	color: var(--wp--preset--color--peach);
}

.mindses-plain-list { list-style: none; }

/* Social link labels sit on the type scale (Small, semibold). */
.wp-block-social-links .wp-social-link span.wp-block-social-link-label:not(.screen-reader-text) {
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--typography--weight-strong, 600);
	letter-spacing: 0.08em;
}

/* Portraits on the About page stay portrait-sized. */
.wp-block-image.is-style-rounded {
	max-width: 14rem;
	margin-inline: auto;
}

/* ---------- Small things ---------- */
::selection { background: var(--wp--preset--color--orchid); color: var(--wp--preset--color--moonlight); }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.wp-block-navigation .wp-block-navigation-item__content::after { transition: none; }
	.wp-element-button,
	.wp-block-button__link,
	.is-style-image-sleeve::before { transition: none; }
}