/**
 * Site-wide accordion (Additional CSS class: accordion-wrapper or accordion-layer).
 */

:is( .accordion-wrapper, .accordion-layer ) {
	--accordion-gap: var(--wp--preset--spacing--40, 1.5rem);
	--accordion-icon-size: 1.125rem;
	--accordion-icon-pad: 2rem;
	--accordion-ink: #231f20;
	--accordion-transition: grid-template-rows var(--vm-default-transition-duration, 150ms)
		var(--vm-default-transition-timing, cubic-bezier(0.3, 0, 0.14, 1));
	/* Block/flex gap between heading and panel must not leave space when closed. */
	gap: 0 !important;
	row-gap: 0 !important;
}

:is( .accordion-wrapper, .accordion-layer ) [data-accordion-trigger] {
	position: relative;
	cursor: pointer;
	outline-offset: 3px;
	/* Room for the collapsed plus on the far right. */
	padding-right: var(--accordion-icon-pad);
	/* No margin below trigger — gap lives as padding inside the collapsing panel. */
	margin-bottom: 0 !important;
	opacity: 1;
	/*
	 * Solid brand black. color: inherit beat .vm-hof-list__title and
	 * picked up .vm-hof-list's muted grey (#545454).
	 */
	color: var(--vm-black, #231F20);
	/* Myriad Pro Black Italic, same face as heading rules. */
	font-style: italic;
	font-weight: 900;
	transition: opacity var(--vm-default-transition);
}

/*
 * FAQ page: questions are h3 (40px) — one step down to h4 for readable accordion titles.
 * Scoped so Hall of Fame and other accordion pages keep their heading scale.
 * Use page-id-* (WP body_class); page-slug-* is not emitted by core.
 */
body.page-id-55 :is( .accordion-wrapper, .accordion-layer ) [data-accordion-trigger] {
	font-size: var(--text-h4, 32px);
	line-height: 1;
	letter-spacing: -0.02em;
}

/*
 * Scholarships & Funds (page 26): titles are h2 (55px) — one step down to h3 visually.
 * Heading level stays h2 for a11y/SEO.
 */
body.page-id-26 :is( .accordion-wrapper, .accordion-layer ) [data-accordion-trigger] {
	font-size: var(--text-h3, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

:is( .accordion-wrapper, .accordion-layer ) [data-accordion-trigger]:hover,
:is( .accordion-wrapper, .accordion-layer ) [data-accordion-trigger]:focus-visible {
	opacity: 1;
	color: var(--vm-black, #231F20);
}

:is( .accordion-wrapper, .accordion-layer ) [data-accordion-trigger]:focus-visible {
	outline: 2px solid var(--vm-gold-aa, #987028);
}

/*
 * Collapsed: plus on the far right of the trigger heading (decorative).
 * Drawn with two currentColor strokes so it inherits heading color / #231F20.
 */
:is( .accordion-wrapper, .accordion-layer ):not( .is-open ) > [data-accordion-trigger]::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: var(--accordion-icon-size);
	height: var(--accordion-icon-size);
	transform: translateY( -50% );
	pointer-events: none;
	color: var(--accordion-ink, currentColor);
	background:
		linear-gradient( currentColor, currentColor ) center / 100% 2px no-repeat,
		linear-gradient( currentColor, currentColor ) center / 2px 100% no-repeat;
}

:is( .accordion-wrapper, .accordion-layer ).is-open > [data-accordion-trigger]::after {
	content: none;
	display: none;
}

/*
 * Height animation + clip on the outer panel.
 * No margin/padding on the panel itself (WP block-gap often adds margin-block-start).
 */
:is( .accordion-wrapper, .accordion-layer ) > .accordion-wrapper__panel,
:is( .accordion-wrapper, .accordion-layer ) .accordion-wrapper__panel {
	display: grid;
	grid-template-rows: 0fr;
	margin: 0 !important;
	margin-block-start: 0 !important;
	padding: 0;
	border: 0;
	min-height: 0;
	overflow: hidden;
	transition: var(--accordion-transition);
}

/* Closed: force paint height to 0 (kills residual gap from 0fr/subpixels/pseudos). */
:is( .accordion-wrapper, .accordion-layer ):not( .is-open ) > .accordion-wrapper__panel {
	grid-template-rows: 0fr;
	height: 0;
	min-height: 0;
	max-height: 0;
	visibility: hidden;
}

:is( .accordion-wrapper, .accordion-layer ).is-open > .accordion-wrapper__panel {
	grid-template-rows: 1fr;
	height: auto;
	max-height: none;
	visibility: visible;
}

/*
 * Medium open gap = padding-top on the inner (inside the clipped/animated region).
 * Always set so it collapses with the panel — never margin on the panel.
 */
.accordion-wrapper__panel-inner {
	display: block;
	width: 100%;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding-top: var(--accordion-gap, var(--wp--preset--spacing--40, 1.5rem));
	overflow: hidden;
}

:is( .accordion-wrapper, .accordion-layer ).is-open > .accordion-wrapper__panel > .accordion-wrapper__panel-inner {
	overflow: visible;
}

/*
 * Clearfix only when open — `display: table` ::after can leave residual
 * min content height inside a 0fr track when closed.
 */
.accordion-wrapper__panel-inner::after {
	content: none;
}

:is( .accordion-wrapper, .accordion-layer ).is-open > .accordion-wrapper__panel > .accordion-wrapper__panel-inner::after {
	content: '';
	display: table;
	clear: both;
}

/* Match core image alignment inside the panel (floats need a normal block BFC). */
.accordion-wrapper__panel-inner > .alignleft,
.accordion-wrapper__panel-inner > .wp-block-image.alignleft,
.accordion-wrapper__panel-inner .alignleft {
	float: left;
	margin-inline: 0 1em;
	margin-bottom: 1em;
}

.accordion-wrapper__panel-inner > .alignright,
.accordion-wrapper__panel-inner > .wp-block-image.alignright,
.accordion-wrapper__panel-inner .alignright {
	float: right;
	margin-inline: 1em 0;
	margin-bottom: 1em;
}

.accordion-wrapper__panel-inner > .aligncenter,
.accordion-wrapper__panel-inner > .wp-block-image.aligncenter,
.accordion-wrapper__panel-inner .aligncenter {
	float: none;
	display: block;
	margin-inline: auto;
}

.accordion-wrapper__panel-inner .wp-block-image.alignleft img,
.accordion-wrapper__panel-inner .wp-block-image.alignright img,
.accordion-wrapper__panel-inner .alignleft img,
.accordion-wrapper__panel-inner .alignright img {
	width: auto;
	max-width: 100%;
	height: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	:is( .accordion-wrapper, .accordion-layer ) > .accordion-wrapper__panel,
	:is( .accordion-wrapper, .accordion-layer ) .accordion-wrapper__panel {
		transition: none;
	}
}