/*
Theme Name:   Astra Child - Central Square Music Boosters
Theme URI:    https://plump-orange-turtle.184-154-70-198.cpanel.site/
Description:  Child theme for Central Square Music Boosters. Adds the reusable "Group Page" template used by Redhawk Regiment, Parade Band, Jazz Band, Indoor Percussion, Indoor Percussion Ensemble, Varsity Winter Guard and JV Winter Guard.
Author:       Central Square Music Boosters
Template:     astra
Version:      1.10.2
Text Domain:  astra-child
*/

/* Component styles live in assets/css/group-pages.css and are enqueued
   only on pages using the Group Page template. */

/* ==========================================================================
   Header layout
   --------------------------------------------------------------------------
   Kept deliberately minimal. The gradient, the logo size and the menu position
   are all Customizer settings again — do NOT reintroduce overrides for them
   here, or the Customizer stops working.

   The only things below are the two Astra behaviors the Customizer cannot
   express: stacking the title above the logo, and the trimmed spacing.
   ========================================================================== */

/*
 * column-reverse puts the title above the logo without reordering the markup,
 * so the heading still comes first for screen readers and search.
 */
.site-header .ast-site-identity .site-branding,
.site-header .site-branding {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 0.35rem;
}

.site-header .site-title {
	margin: 0;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.site-header .site-title a {
	text-decoration: none;
}

.site-header .site-logo-img img {
	display: block;
	height: auto;
}

/* The logo wrapper is inline, so its line box added dead height under the mark. */
.site-header .site-logo-img,
.site-header .custom-logo-link {
	display: block;
	line-height: 0;
	margin: 0;
	padding: 0;
}

/* Astra pads the identity block 16px top and bottom; a bare rule loses to it,
   so scope under .site-header to win. */
.site-header .ast-site-identity,
.site-header .site-branding {
	padding-top: 0;
	padding-bottom: 0;
}

.ast-primary-header-bar .site-primary-header-wrap {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/*
 * Astra's own rule is `.ast-plain-container.ast-no-sidebar #primary` at
 * specificity (1,2,0) inside a min-width:1200px query, setting margin-top:60px.
 * That was the large empty band between the header and the hero. Prefixing with
 * the `body` element reaches (1,2,1) and wins at every width.
 */
body.ast-plain-container.ast-no-sidebar #primary,
body.ast-plain-container #primary {
	margin-top: 20px;
}

@media (max-width: 921px) {
	body.ast-plain-container.ast-no-sidebar #primary,
	body.ast-plain-container #primary {
		margin-top: 14px;
	}
}

/*
 * Mobile menu trigger.
 *
 * Astra colors the toggle from the Customizer as
 *   [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon
 * at specificity (0,3,0), which beats a plain descendant rule. The trigger sits
 * on the dark end of the header gradient, where the brand-colored icon is
 * effectively invisible. Prefixing with .site-header reaches (0,4,0).
 */
.site-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-svg,
.site-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon,
.site-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle,
.site-header .menu-toggle .ast-mobile-svg,
.site-header .menu-toggle {
	color: #fff;
	fill: #fff;
}

.site-header .menu-toggle:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/*
 * Menu row sits under the title inside the same header. No background of its
 * own, so the gradient runs straight through and it reads as one header rather
 * than a separate bar.
 */
/* ==========================================================================
   Title placement
   --------------------------------------------------------------------------
   Logo sits left. The title is centered in the header both ways: horizontally
   across the full width, and vertically against the logo's height (it was
   sitting at the top because it was stacked above the logo).

   Color is left to the Customizer — the gradient is light on the left half,
   so the title must stay dark. White measured 1.7:1 here.
   ========================================================================== */

@media (min-width: 922px) {
	/*
	 * Logo left; title and menu centered together in the space BESIDE the logo.
	 *
	 * Both must be bound to the same region or they drift apart: the title used
	 * to center on the whole page while the menu centered in Astra's middle grid
	 * column, which put them hundreds of pixels out of line on wide screens.
	 *
	 * --csmb-logo-col is the width of the logo column. It must match the
	 * Customizer logo width (Appearance -> Customize -> Header -> Site Identity)
	 * plus about 20px of breathing room. Logo is currently 400px.
	 */
	.ast-primary-header-bar {
		--csmb-logo-col: 420px;
	}

	.ast-primary-header-bar .ast-builder-grid-row {
		position: relative;
		grid-template-columns: var(--csmb-logo-col) 1fr 0px;
	}

	.site-header .ast-site-identity,
	.site-header .site-branding {
		flex-direction: row;
		align-items: center;
	}

	/*
	 * Positioned against the grid row (not the header wrap) and inset by the
	 * logo column, so its center is the center of the region beside the logo —
	 * exactly where the menu centers.
	 */
	.site-header .ast-site-title-wrap {
		position: absolute;
		left: var(--csmb-logo-col);
		right: 0;
		width: auto;
		text-align: center;
		top: 50%;
		transform: translateY(calc(-50% - 46px));
		pointer-events: none;
	}

	.site-header .ast-site-title-wrap a {
		pointer-events: auto;
	}

	.site-header .site-logo-img {
		align-self: center;
		position: relative;
		z-index: 1;
	}

	/* Drops the menu just below the title. One element only — applying this to
	   the menu inside it as well compounds and doubles the gap. */
	.ast-primary-header-bar .site-header-primary-section-center {
		justify-content: center;
		transform: translateY(34px);
	}

	.ast-primary-header-bar .main-header-menu {
		justify-content: center;
	}
}

/*
 * No rule above or below the menu. Astra puts a bottom border on the primary
 * header bar; with the menu sitting at the bottom of that bar it reads as a
 * line under the menu.
 */
.site-header .ast-primary-header-bar,
.ast-primary-header-bar {
	border-bottom-width: 0;
	border-top-width: 0;
	box-shadow: none;
}

/*
 * Footer links.
 *
 * The below-footer bar is solid brand burgundy. Astra's footer builder exposes
 * a color setting for the copyright TEXT (footer-copyright-color, set to white
 * in the Customizer) but none for links inside it, so links fall back to the
 * global link color - which is the same burgundy as the bar, giving 1:1
 * contrast and an invisible link. This is the one footer rule the Customizer
 * cannot express.
 *
 * White on #8b2332 measures 8.78:1, comfortably past the 4.5:1 AA floor.
 * Underlined so the link is not signaled by color alone, and given a visible
 * focus ring, which the default outline does not provide against burgundy.
 */
.site-below-footer-wrap a,
.site-above-footer-wrap a,
.ast-footer-copyright a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.site-below-footer-wrap a:hover,
.site-above-footer-wrap a:hover,
.ast-footer-copyright a:hover {
	color: #fff;
	text-decoration-thickness: 2px;
}

.site-below-footer-wrap a:focus-visible,
.site-above-footer-wrap a:focus-visible,
.ast-footer-copyright a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 2px;
}