/*
 * Deliberate design changes on top of the CSS carried over from WordPress.
 * Loaded last, so these rules win. Everything else matches the original site.
 */

/* Phones and tablets: Astra's header padding is set to 0, which puts the site title and menu
   button against the screen edges. Give the header the same 20px side padding as the page. */
.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar.main-header-bar {
	padding-left: 20px;
	padding-right: 20px;
}

/* Home page on phones: keep Juan in frame and give the album cover room to breathe. */
@media (max-width: 767px) {
	/* Photo is cropped around Juan rather than the centre of the frame. */
	.elementor-12 .elementor-element.elementor-element-733289f:not(.elementor-motion-effects-element-type-background) {
		background-position: 67% top;
	}

	/* Album cover: narrower and centred instead of edge to edge. */
	.elementor-12 .elementor-element.elementor-element-6e32a65 {
		--width: 72%;
		align-self: center;
	}

	/* Spacers above and below the cover: lower it so it clears Juan's face and guitar. */
	.elementor-12 .elementor-element.elementor-element-682fbe4 {
		--spacer-size: 300px;
	}
	.elementor-12 .elementor-element.elementor-element-af6e89e {
		--spacer-size: 200px;
	}
}

/* Store: one even, centred grid of covers across every section.
   - Covers come in different shapes (US Letter, A4, 3:4); show them all in the same 3:4 frame,
     trimming the odd ones by a few percent, so each row's tops and bottoms line up.
   - Same cover width in every section, rows centred, empty spacer columns hidden.
   - Phones: two covers per row instead of one full-width cover per screen.
   Image `sizes` in src/data/pages/store.json match these widths. */
.page-id-126 .entry-content .wp-block-columns {
	justify-content: center;
	gap: 24px;
	max-width: none;
	margin: 0 0 24px;
	padding: 0;
}
.page-id-126 .entry-content .wp-block-columns > .wp-block-column {
	flex: 0 0 220px !important;
	max-width: 220px;
}
.page-id-126 .entry-content .wp-block-columns > .wp-block-column:empty {
	display: none;
}
.page-id-126 .entry-content .wp-block-column .wp-block-image {
	margin: 0;
}
.page-id-126 .entry-content .wp-block-column .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	/* Soft shadow so covers with white edges (Spread Triads, Fundamentals) don't blend into the page. */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 10px 24px rgba(0, 0, 0, 0.28);
}
.page-id-126 .entry-content h2.wp-block-heading {
	margin-top: 1.5em;
}
@media (max-width: 781px) {
	.page-id-126 .entry-content .wp-block-columns {
		flex-wrap: wrap !important;
		gap: 16px;
		margin-bottom: 16px;
	}
	.page-id-126 .entry-content .wp-block-columns > .wp-block-column {
		flex: 0 0 calc(50% - 8px) !important;
		max-width: calc(50% - 8px);
	}
}

/* Aether: the Purchase / Spotify / Apple Music buttons sit at the top of the text column, spanning
   the text's width (left edge, centre, right edge). On phones they become three equal buttons on
   one line. */
/* Even 32px rhythm between every block (videos, buttons, cover, text column). Astra pads each
   columns row 3em top and bottom, which left 80px under the buttons but 24px under the cover. */
.page-id-120 .entry-content > .wp-block-columns {
	padding-top: 0;
	padding-bottom: 0;
	margin: 0;
	row-gap: 32px;
}
.page-id-120 .entry-content > .wp-block-columns + .wp-block-columns {
	margin-top: 32px;
}
.page-id-120 .entry-content > .wp-block-columns:first-child {
	padding-top: var(--wp--custom--ast-default-block-top-padding);
}
.page-id-120 .entry-content > .wp-block-columns:last-of-type {
	padding-bottom: var(--wp--custom--ast-default-block-bottom-padding);
}
.page-id-120 .entry-content .wp-block-columns > .wp-block-column {
	margin-bottom: 0; /* Astra adds 20px under stacked columns on top of the gap */
}
.page-id-120 .entry-content .wp-block-column > figure {
	margin: 0 0 32px;
}
.page-id-120 .entry-content .wp-block-column > figure:last-child {
	margin-bottom: 0;
}
.page-id-120 .entry-content .wp-block-buttons.aether-links {
	margin: 0 0 1.5em;
}
@media (max-width: 781px) {
	.page-id-120 .entry-content .wp-block-buttons.aether-links {
		gap: 10px;
		flex-wrap: nowrap;
	}
	.page-id-120 .entry-content .wp-block-buttons.aether-links > .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}
	.page-id-120 .entry-content .wp-block-buttons.aether-links .wp-block-button__link {
		display: block;
		width: 100%;
		padding-left: 0.5em;
		padding-right: 0.5em;
		white-space: nowrap;
		text-align: center;
	}
}

/* Header menu: between Astra's mobile breakpoint (921px) and ~1100px the ten menu items didn't fit
   on one line and wrapped to two. Tighten the item padding in that range only. */
@media (min-width: 922px) and (max-width: 1099px) {
	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		padding-left: 9px;
		padding-right: 9px;
	}
	.ast-builder-menu-1 .main-header-menu {
		flex-wrap: nowrap;
	}
}

/* Site title: Astra sizes it in rem and shrinks the root font to 91.2% below 922px, so the title
   jumped from 26px to 23.7px the moment the desktop header swapped for the mobile one. Keep it 26px
   at every width. */
.site-title {
	font-size: 26px;
}
/* The mobile header bar counted its 1px bottom border inside its 80px, the desktop one outside,
   so the header was 1px shorter and the title 0.5px higher after the swap. Match the desktop. */
.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar.main-header-bar {
	min-height: 81px;
}

/* Contact: the form on the left, Facebook / YouTube / Instagram links in a column on the right.
   On phones the links sit below the form. */
.page-id-127 .contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
.page-id-127 .contact-social-title {
	margin: 0 0 0.75em;
}
.page-id-127 .contact-social ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.page-id-127 .contact-social li {
	margin: 0 0 0.9em;
}
.page-id-127 .contact-social a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.page-id-127 .contact-social-icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
}
.page-id-127 .contact-social-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}
@media (max-width: 767px) {
	.page-id-127 .contact-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}
/* Contact form: shorter message box and slightly tighter spacing between fields. */
.page-id-127 .wpcf7-form textarea {
	height: 150px;
	min-height: 100px;
}
.page-id-127 .wpcf7-form p {
	margin-bottom: 1em;
}