/*
 * Hero styles — brand-templated for engagement isjac.
 *
 * Source: vendor/zysys/wp-runtime/assets/css/hero.css.template
 * Built:  wp-content/zysys-generated/isjac/css/hero.css
 *
 * The template substitutes isjac at composer install. To change
 * a rule, edit this template and re-run `composer install` (or
 * `composer update`) in the consumer repo.
 *
 * Naming convention: <brand>-<class> per ADR-002.
 */

/*
 * Hero — full-bleed group block with a Customizer-driven background image
 * + brand-deep gradient overlay.
 *
 * Visual layering (top → bottom on z-axis):
 *   1. Inner content (h1, p) — white text
 *   2. Navy gradient overlay at --isjac-hero-overlay-opacity
 *   3. Background image at --isjac-hero-bg-image (cover, centered)
 *
 * Both vars are owned by Appearance → Customize → ISJAC Brand. See
 * inc/customizer.php — never edit values inline on a page or in seed
 * content. Per-page overrides go via the marker class
 * `is-style-isjac-hero-<variant>` if/when we add variants.
 */

/* Hero starts at viewport top so the transparent header floats over it.
 * `var(--header-height-overlap)` (default 80px) compensates so content
 * (h1, p) doesn't crash into the nav.
 *
 * Inline padding aligns the hero's CONTENT with `.site-container` (i.e.,
 * with the logo and primary nav in the floating header above). The
 * background still bleeds full-width because the block is `.alignfull`;
 * only the inner box is gutter-aligned. The fallback values mirror
 * Kadence's `--global-content-width` (1290px) and
 * `--global-content-edge-padding` (1.5rem) so the rule works even if a
 * future theme reset clears those vars. */
/* Specificity note: Kadence Blocks ships
   `.entry-content .wp-block-group.has-background { padding: 20px 30px }`
   in content.min.css at (0,3,1). To win without `!important`, our
   selectors must reach (0,4,1) or higher — both branches add an extra
   class beyond what Kadence targets. */
.entry-content > .wp-block-group.alignfull.is-style-isjac-hero.has-background,
.entry-content > .wp-block-group.alignfull.has-background.has-global-padding:first-child {
	/* `100vw` (not `100%`) because `.entry-content` is itself constrained
	   to the global content width — using `100%` makes the calc resolve
	   to (1290 - 1290)/2 + 24 = 24px, defeating the gutter alignment. */
	--isjac-hero-gutter: max(
		var(--global-content-edge-padding, 1.5rem),
		calc((100vw - var(--global-content-width, 1290px)) / 2 + var(--global-content-edge-padding, 1.5rem))
	);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--isjac-pad-md);
	padding: calc(var(--isjac-section-xl) + var(--header-height-overlap, 5rem))
		var(--isjac-hero-gutter)
		var(--isjac-section-xl);
	color: var(--isjac-color-paper);
	overflow: hidden;
	isolation: isolate;
	background-image: var(--isjac-hero-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Navy gradient overlay — stacked above the image, below the content. */
.entry-content > .alignfull.is-style-isjac-hero::before,
.entry-content > .wp-block-group.alignfull.has-background:first-child::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* Brand-guide §05 hero panel — canonical 135° ink → brand-deep recipe.
	 * The full gradient lives in --isjac-hero-overlay-gradient (tokens.css.template)
	 * so the hero, bottom CTA, and any future dark-image surface share one
	 * source of truth. Edit there. */
	background: var(--isjac-hero-overlay-gradient);
}

/* Scrim under the floating nav — only at the top of the hero. Guarantees
 * 4.5:1 contrast between paper-white nav text and the underlying image
 * regardless of what hero photo is loaded. Fades to transparent below
 * 8rem so it doesn't compete with the hero headline. */
.entry-content > .alignfull.is-style-isjac-hero::after,
.entry-content > .wp-block-group.alignfull.has-background:first-child::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 8rem;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--isjac-color-ink) 55%, transparent) 0%,
		color-mix(in srgb, var(--isjac-color-ink) 25%, transparent) 60%,
		color-mix(in srgb, var(--isjac-color-ink) 0%,  transparent) 100%
	);
}

.entry-content > .alignfull.is-style-isjac-hero h1,
.entry-content > .wp-block-group.alignfull.has-background:first-child h1 {
	color: var(--isjac-color-paper);
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	margin: 0 0 var(--isjac-pad-md);
	line-height: 0.95;
	max-width: min(28ch, 100%);
	text-align: left;
	position: relative;
	z-index: 1;
}

.entry-content > .alignfull.is-style-isjac-hero.isjac-hero--center {
	align-items: center;
	text-align: center;
}

.entry-content > .alignfull.is-style-isjac-hero.isjac-hero--center h1,
.entry-content > .alignfull.is-style-isjac-hero.isjac-hero--center p {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* :not() excludes per-page paragraphs that own their own font-size (donate
 * trustline, cta tertiary, patrons anchor) so this hero rule is no longer
 * a cascade boss to fight from a sibling stylesheet — those nodes simply
 * fall through to their per-element rule. */
.entry-content > .alignfull.is-style-isjac-hero p:not(.isjac-donate-hero__trustline):not(.isjac-donate-cta__tertiary):not(.isjac-donate-anchor):not(.isjac-hero__signin),
.entry-content > .wp-block-group.alignfull.has-background:first-child p:not(.isjac-donate-hero__trustline):not(.isjac-donate-cta__tertiary):not(.isjac-donate-anchor):not(.isjac-hero__signin) {
	color: color-mix(in srgb, var(--isjac-color-paper) 85%, transparent);
	/* Hero subhead is body running prose on a dark surface — pin the body
	 * face explicitly so Kadence's Advanced Heading block (which wraps
	 * the subhead in .wp-block-kadence-advancedheading and inherits its
	 * display family) doesn't render this in DM Sans. Brand-guide §06: body
	 * is Inter at --isjac-font-size-body (17px). */
	font-family: var(--isjac-font-body);
	font-size: var(--isjac-font-size-body);
	font-weight: var(--isjac-font-weight-regular);
	margin: 0;
	max-width: min(50ch, 100%);
	text-align: left;
	line-height: var(--isjac-baseline);
	position: relative;
	z-index: 1;
}