/**
 * Heading Styles (ported from Condor FSE theme)
 *
 * CSS for heading blocks and typography variants.
 * Scoped under .championship-content where needed so selectors beat
 * legacy style.css `.wp-block-group h*` rules at (0,1,1).
 *
 * Original: condor/assets/css/blocks/core/heading.css
 * @package USA Ultimate (Legacy)
 */

/* ==========================================================================
   Sub-headline Typography
   ========================================================================== */

.sub-headline {
	color: var(--wp--preset--color--bright-red);
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;

	&.red {
		color: var(--wp--preset--color--bright-red);
	}
}

/* ==========================================================================
   Main Headline Typography
   ========================================================================== */

.main-headline {
	font-family: var(--wp--preset--font-family--heading-condensed, var(--wp--preset--font-family--heading));
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.015em;
	font-size: var(--wp--preset--font-size--4-x-large);
	line-height: 1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);

	&.blue {
		color: var(--wp--preset--color--blue);
	}
}

/* ==========================================================================
   Headline Underline Accent (.headline.underline) - SHORT accent line
   ========================================================================== */

/* Headline wrapper with short underline accent */
.headline.underline,
.main-headline.underline {
	position: relative;

	&::after {
		content: '';
		display: block;
		width: 2.5rem;
		height: var(--wp--preset--spacing--10);
		margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--40) 0;
		background: currentColor;
	}
}

/* WordPress block group with headline underline - ensure ::after displays */
/* Using higher specificity selectors to override WordPress defaults */
.wp-block-group.headline.underline {
	display: block !important;
	position: relative;

	&::after {
		content: '';
		display: block;
		width: 2.5rem;
		height: var(--wp--preset--spacing--10);
		margin-top: var(--wp--preset--spacing--20);
		background-color: currentColor;
	}

	&.white::after {
		background-color: var(--wp--preset--color--white);
	}

	&.blue::after {
		background-color: var(--wp--preset--color--blue);
	}

	&.red::after {
		background-color: var(--wp--preset--color--bright-red);
	}
}

/* Color variants for headline underline */
.headline.blue.underline::after,
.main-headline.blue.underline::after,
.wp-block-group.headline.blue.underline::after {
	background: var(--wp--preset--color--blue);
}

.headline.red.underline::after,
.main-headline.red.underline::after,
.wp-block-group.headline.red.underline::after {
	background: var(--wp--preset--color--bright-red);
}

.headline.white.underline::after,
.main-headline.white.underline::after,
.wp-block-group.headline.white.underline::after {
	background: var(--wp--preset--color--white);
}

/* Centered headline underline */
.headline.align-center.underline::after,
.main-headline.align-center.underline::after {
	margin: var(--wp--preset--spacing--20) auto var(--wp--preset--spacing--40) auto;
}

/* ==========================================================================
   Dark Section Color Inheritance
   Heading block styles hardcode color (blue, bright-red). When inside a
   group with textColor:"white" (has-white-color), headings must inherit
   the parent's white. Specificity (0,2,0) beats :root :where() (0,1,0).
   ========================================================================== */

.has-white-color .is-style-main-headline-accent,
.has-white-color .is-style-main-headline,
.has-white-color .is-style-main-headline-accent-sm,
.has-white-color .is-style-sub-headline {
	color: inherit;
}

/* ==========================================================================
   Heading Color Classes
   ========================================================================== */

/* Color classes for headings and text */
.wp-block-heading.red,
h1.red,
h2.red,
h3.red,
h4.red,
h5.red,
h6.red,
.red {
	color: var(--wp--preset--color--bright-red);
}

.wp-block-heading.blue,
h1.blue,
h2.blue,
h3.blue,
h4.blue,
h5.blue,
h6.blue,
.blue {
	color: var(--wp--preset--color--blue);
}

.wp-block-heading.gold,
h1.gold,
h2.gold,
h3.gold,
h4.gold,
h5.gold,
h6.gold,
.gold {
	color: var(--wp--preset--color--gold);
}

.wp-block-heading.white,
h1.white,
h2.white,
h3.white,
h4.white,
h5.white,
h6.white {
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Cover Title
   ========================================================================== */

.cover-title {
	font-size: var(--wp--preset--font-size--5-x-large);
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading-condensed, var(--wp--preset--font-family--heading));
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1em;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   WordPress Block Style Variations
   Scoped under .championship-content so selectors reach (0,2,0+)
   and beat legacy `.wp-block-group h*` at (0,1,1).
   Original Condor uses `:root :where()` at (0,1,0) — too weak for legacy.
   ========================================================================== */

/* Heading: Sub-headline (small red eyebrow text) */
.championship-content .wp-block-heading.is-style-sub-headline {
	color: var(--wp--preset--color--bright-red);
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
}

/* Heading: Sub-headline Blue (blue eyebrow text) */
.championship-content .wp-block-heading.is-style-sub-headline-blue {
	color: var(--wp--preset--color--blue);
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.05em;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Heading: Main Headline (large blue italic condensed) */
.championship-content .wp-block-heading.is-style-main-headline {
	font-family: var(--wp--preset--font-family--heading-condensed, var(--wp--preset--font-family--heading));
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	font-size: var(--wp--preset--font-size--4-x-large);
	line-height: 1em;
}

/* Heading: Main Headline + Accent (with short underline) */
.championship-content .wp-block-heading.is-style-main-headline-accent {
	font-family: var(--wp--preset--font-family--heading-condensed, var(--wp--preset--font-family--heading));
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	font-size: var(--wp--preset--font-size--4-x-large);
	line-height: 1em;
	position: relative;
	display: block;
	padding-bottom: var(--wp--preset--spacing--50);

	&::after {
		content: '';
		display: block;
		width: 2.5rem;
		height: var(--wp--preset--spacing--10);
		margin-top: var(--wp--preset--spacing--20);
		background: var(--wp--preset--color--bright-red);
	}

	/* Center the accent bar when heading is text-aligned center */
	&.has-text-align-center::after {
		margin-inline: auto;
	}
}

/* Heading: Main Headline Accent -- Small variant */
.championship-content .wp-block-heading.is-style-main-headline-accent-sm {
	font-family: var(--wp--preset--font-family--heading-condensed, var(--wp--preset--font-family--heading));
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--blue);
	font-size: var(--wp--preset--font-size--2-x-large);
	line-height: 1em;
	position: relative;
	display: block;
	padding-bottom: var(--wp--preset--spacing--40);

	&::after {
		content: '';
		display: block;
		width: 1.75rem;
		height: 3px;
		margin-top: var(--wp--preset--spacing--20);
		background: var(--wp--preset--color--bright-red);
	}

	&.has-text-align-center::after {
		margin-inline: auto;
	}
}

/* Heading: Cover Title (white uppercase for hero images) */
.championship-content .wp-block-heading.is-style-cover-title {
	font-size: var(--wp--preset--font-size--5-x-large);
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading-condensed, var(--wp--preset--font-family--heading));
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1em;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Accent Bar -- Short ::after line below heading. No typography changes.
   Composable: pair with any heading level/color. Color comes from the bar,
   not the heading text.
   ========================================================================== */

.championship-content .wp-block-heading.is-style-accent-blue,
.championship-content .wp-block-heading.is-style-accent-white,
.championship-content .wp-block-heading.is-style-accent-red {
	display: block;
	padding-bottom: var(--wp--preset--spacing--40);
}

.championship-content .wp-block-heading.is-style-accent-blue::after,
.championship-content .wp-block-heading.is-style-accent-white::after,
.championship-content .wp-block-heading.is-style-accent-red::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--20);
}

.championship-content .wp-block-heading.is-style-accent-blue::after {
	background: var(--wp--preset--color--blue);
}

.championship-content .wp-block-heading.is-style-accent-white::after {
	background: var(--wp--preset--color--white);
}

.championship-content .wp-block-heading.is-style-accent-red::after {
	background: var(--wp--preset--color--bright-red);
}

/* Heading: Underline Red */
.championship-content .wp-block-heading.is-style-underline-red {
	border-bottom: 3px solid var(--wp--preset--color--bright-red);
	padding-bottom: var(--wp--preset--spacing--20);
	display: inline-block;
}

/* Heading: Underline Blue */
.championship-content .wp-block-heading.is-style-underline-blue {
	border-bottom: 3px solid var(--wp--preset--color--blue);
	padding-bottom: var(--wp--preset--spacing--20);
	display: inline-block;
}