/*
Theme Name: MAG Child
Description: Child theme of Twenty Twenty-Five for Michael August Music, built via the Gutenberg/ACF track of the WP spinup pipeline.
Author: Bold Move
Template: twentytwentyfive
Version: 1.0
Text Domain: mag-child
*/

/* Signature "soundhole" motif: a circular, ringed photo crop echoing the
   guitar's own rosette. Used for portraits and the hero performance shot. */
.mag-circle-frame {
	max-width: 20rem;
	margin-inline: auto;
}

.mag-circle-frame img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 6px var(--wp--preset--color--ink), 0 0 0 9px var(--wp--preset--color--sunburst);
}

/* Columns stack on mobile by default, but tighten the gap so the hero and
   two-column sections don't feel sparse at narrow widths. */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		gap: var(--wp--preset--spacing--40, 2.5rem);
	}
	.mag-circle-frame {
		max-width: 14rem;
	}
}

.wp-block-gallery.is-cropped .wp-block-image img {
	border-radius: 0.5rem;
}

/* WP core's per-block generated layout rules (.wp-container-core-columns-*)
   can set flex-wrap:nowrap with higher cascade-layer priority than core's
   own responsive "wrap on mobile" rule, which combined with the mobile
   flex-basis:100% !important on each column forces a horizontal overflow
   instead of stacking. Force it back below the columns breakpoint. */
@media (max-width: 781px) {
	.wp-block-columns {
		flex-wrap: wrap !important;
	}
}

/* Restyle WPForms' default blue submit button to match the site palette. */
.wpforms-container .wpforms-submit-container button[type="submit"] {
	background-color: var(--wp--preset--color--sunburst) !important;
	border-color: var(--wp--preset--color--sunburst) !important;
	color: var(--wp--preset--color--ink) !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 600 !important;
	padding: 0.75rem 1.75rem !important;
}
.wpforms-container .wpforms-submit-container button[type="submit"]:hover {
	background-color: var(--wp--preset--color--ember) !important;
	border-color: var(--wp--preset--color--ember) !important;
	color: var(--wp--preset--color--paper) !important;
}
.wpforms-container label.wpforms-field-label,
.wpforms-container .wpforms-field-label {
	color: var(--wp--preset--color--parchment) !important;
}