/* Page Hero — Figma node 59:1681 (breadcrumb + heading + intro text banner) */

/*
 * No default background photo — this banner is solid navy (matching the
 * overlay below) unless a page sets the "Page Hero" ACF group's optional
 * Background Image field, which injects a background-image override via
 * wp_add_inline_style() in functions.php.
 *
 * The same treatment is reused, unchanged, for two Events Calendar contexts
 * that have no Kadence Hero Title support of their own: the /events/
 * archive (.tribe_events-archive-hero-section, .tribe_events-archive-title)
 * and single event pages (.tribe_events-hero-section, .tribe_events-title).
 * See the "Events Calendar Hero" section at the bottom of this file for how
 * those two get wired into Kadence's hero pipeline.
 */
.entry-hero.page-hero-section .entry-hero-container-inner,
.entry-hero.tribe_events-hero-section .entry-hero-container-inner,
.entry-hero.tribe_events-archive-hero-section .entry-hero-container-inner {
	position: relative;
	overflow: hidden;
	background-color: #041f3d;
	background-size: cover;
	background-position: center 30%;
}

.entry-hero.page-hero-section .hero-section-overlay,
.entry-hero.tribe_events-hero-section .hero-section-overlay,
.entry-hero.tribe_events-archive-hero-section .hero-section-overlay {
	position: absolute;
	inset: 0;
	background-color: #041f3d;
	opacity: 0.93;
}

/*
 * This box also carries Kadence's generic `.site-container` class, whose
 * base padding is 24px — but real page content on this site isn't wrapped by
 * that generic container, it's wrapped by each page's own Kadence Blocks Row
 * Layout (.kt-row-column-wrap, max-width: 1200px), which this project already
 * pins to a deliberate, sitewide "16px side padding at all breakpoints"
 * convention (see query-cards.css's per-page .kt-row-column-wrap rules, e.g.
 * around the .kb-row-layout-id8714_73db0d-5b comment). Matching that same
 * 1200px/16px combination here (instead of Kadence's default 1200px/24px)
 * is what actually lines the hero heading up with the main content column —
 * confirmed live via getBoundingClientRect on both, at 1440px and 375px.
 */
.entry-hero.page-hero-section .hero-container,
.entry-hero.tribe_events-hero-section .hero-container,
.entry-hero.tribe_events-archive-hero-section .hero-container {
	position: relative;
	max-width: 1200px;
	padding-top: 64px;
	padding-right: 16px;
	padding-bottom: 64px;
	padding-left: 16px;
}

/*
 * Kadence's own base .entry-header rule (parent theme's content.min.css) sets
 * min-height:200px + justify-content:center — sized for its default
 * photographic hero, where a tall fixed band with vertically-centered text
 * makes sense. This compact solid-navy variant should size to its content
 * instead: Figma's hero frames (nodes 96:940, 94:4456, 532:3864) are all pure
 * "hug contents" auto layout with no minimum height, so a short Intro Text
 * (or none at all) should produce a shorter banner, not empty space below the
 * text. Overriding both properties here removes that inherited floor —
 * confirmed live: the long-intro Lesson Plans page (already 273px, past the
 * 200px floor) is completely unaffected, while the short-intro Contact Us /
 * Parent Account Resources pages shrink to match their actual content.
 */
.entry-hero.page-hero-section .entry-header,
.entry-hero.tribe_events-hero-section .entry-header,
.entry-hero.tribe_events-archive-hero-section .entry-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
	justify-content: flex-start;
}

/*
 * Text colors below use !important: this hero was never enabled anywhere on the
 * site before this prototype, so the sitewide heading/link color rules (which
 * assume a light page background) still win the cascade against Kadence's own
 * page-title color options here. Scoped tightly to .entry-hero so it can't
 * bleed into any other component.
 */

/* Breadcrumb — font-size/line-height set explicitly below (2026-08-12 fix pass).
 * The "Breadcrumb Font" Customizer option assumed in an earlier version of this
 * comment was wrong: Kadence's own inline CSS styles this element two different
 * ways depending on context. `.entry-hero .kadence-breadcrumbs` (from the
 * "Hero Title Above" typography option, a saved 10px theme_mod) always applies
 * here. On Pages only, Kadence *also* wraps the hero in an extra `.page-title`
 * ancestor class, adding a second, same-specificity `.page-title
 * .kadence-breadcrumbs` rule (from the separate "Page Title" Customizer option,
 * 13px) that happens to win by coming later in Kadence's generated <style> block
 * — so Pages rendered at 13px purely by accident of markup, while the Events
 * archive/single-event contexts (no `.page-title` class) fell through to the
 * 10px rule and looked too small, confirmed live via getComputedStyle on both
 * before writing this fix (13px on Pages vs 10px on Events, at both 375px and
 * 1280px — this option has no separate mobile value in Figma either).
 * Figma (node 59:1841/59:1843, "Home" breadcrumb) specs text-[13px] leading-normal,
 * matching the 13px/19.5px (1.5 line-height) Pages happened to already have.
 * Pinning both explicitly here for all three contexts removes the dependency on
 * that Kadence markup coincidence entirely — (0,3,0) beats Kadence's (0,2,0)
 * inline rule either way, no !important needed. */
.entry-hero.page-hero-section .kadence-breadcrumbs,
.entry-hero.tribe_events-hero-section .kadence-breadcrumbs,
.entry-hero.tribe_events-archive-hero-section .kadence-breadcrumbs {
	font-size: 13px;
	line-height: 1.5;
	color: #ffffff !important;
}

.entry-hero.page-hero-section .kadence-breadcrumbs a,
.entry-hero.tribe_events-hero-section .kadence-breadcrumbs a,
.entry-hero.tribe_events-archive-hero-section .kadence-breadcrumbs a {
	color: #ffffff !important;
	text-decoration: underline;
}

.entry-hero.page-hero-section .kadence-breadcrumbs .kadence-bread-current,
.entry-hero.tribe_events-hero-section .kadence-breadcrumbs .kadence-bread-current,
.entry-hero.tribe_events-archive-hero-section .kadence-breadcrumbs .kadence-bread-current {
	font-weight: 600;
	text-decoration: none;
}

.entry-hero.page-hero-section .kadence-breadcrumbs .bc-delimiter,
.entry-hero.tribe_events-hero-section .kadence-breadcrumbs .bc-delimiter,
.entry-hero.tribe_events-archive-hero-section .kadence-breadcrumbs .bc-delimiter {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	font-size: 0;
	color: inherit;
	vertical-align: middle;
}

/* Heading — font family/size/weight come from the native "Page Title Font"
 * Customizer option; only color needs overriding here. Pages/single events
 * render the heading as .entry-title (template-parts/title/title.php); the
 * Events archive renders it as .archive-title (the_archive_title(), via
 * template-parts/archive-title/title.php) — different markup, same banner. */
.entry-hero.page-hero-section .entry-title,
.entry-hero.tribe_events-hero-section .entry-title,
.entry-hero.tribe_events-archive-hero-section .archive-title {
	margin: 0;
	color: #ffffff !important;
}

/* Intro text */
.entry-hero.page-hero-section .title-entry-intro,
.entry-hero.tribe_events-hero-section .title-entry-intro,
.entry-hero.tribe_events-archive-hero-section .title-entry-intro {
	font-family: var( --accorbis-font-family-primary );
	font-size: 16px;
	line-height: 1.5;
	color: #ffffff !important;
}

.entry-hero.page-hero-section .title-entry-intro p,
.entry-hero.tribe_events-hero-section .title-entry-intro p,
.entry-hero.tribe_events-archive-hero-section .title-entry-intro p {
	margin: 0 0 16px;
}

.entry-hero.page-hero-section .title-entry-intro p:last-child,
.entry-hero.tribe_events-hero-section .title-entry-intro p:last-child,
.entry-hero.tribe_events-archive-hero-section .title-entry-intro p:last-child {
	margin-bottom: 0;
}

.entry-hero.page-hero-section .title-entry-intro a,
.entry-hero.tribe_events-hero-section .title-entry-intro a,
.entry-hero.tribe_events-archive-hero-section .title-entry-intro a {
	color: #ffffff !important;
	text-decoration: underline;
}

.entry-hero.page-hero-section .title-entry-intro a:hover,
.entry-hero.page-hero-section .title-entry-intro a:focus,
.entry-hero.tribe_events-hero-section .title-entry-intro a:hover,
.entry-hero.tribe_events-hero-section .title-entry-intro a:focus,
.entry-hero.tribe_events-archive-hero-section .title-entry-intro a:hover,
.entry-hero.tribe_events-archive-hero-section .title-entry-intro a:focus {
	color: #e7af5b !important;
}

/* CTA buttons — up to 3, from the "Page Hero" ACF group's page_hero_ctas repeater.
 * Only Pages and single events have CTAs (the Events archive has no repeater —
 * see the "Events Calendar Hero" section below). Color is the design's named
 * "CaliforniaColleges.edu Blue" (#2577BD), a token outside the --accorbis-*
 * palette — not one of ResourceHub's own brand colors. */
.entry-hero.page-hero-section .title-entry-cta-list,
.entry-hero.tribe_events-hero-section .title-entry-cta-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.entry-hero.page-hero-section .title-entry-cta,
.entry-hero.tribe_events-hero-section .title-entry-cta {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 6px;
	background-color: #ffffff;
	font-family: var( --accorbis-font-family-primary );
	font-size: 13px;
	font-weight: 700;
	color: #2577bd !important;
	text-decoration: none;
}

.entry-hero.page-hero-section .title-entry-cta:hover,
.entry-hero.page-hero-section .title-entry-cta:focus,
.entry-hero.tribe_events-hero-section .title-entry-cta:hover,
.entry-hero.tribe_events-hero-section .title-entry-cta:focus {
	color: #1c5a91 !important;
}

/* Foreground Image — optional, from the "Page Hero" ACF group's
 * page_hero_foreground_image field (+ optional page_hero_foreground_link
 * caption/link below it, e.g. "View Map").
 *
 * Mobile (node 532:3203, 390px reference frame): the intro text genuinely
 * wraps around the image rather than sitting in a separate column, so the
 * template renders .title-entry-foreground BEFORE .title-entry-text (which
 * wraps the intro text + CTA buttons) inside .title-entry-content — CSS
 * float only affects in-flow content that comes AFTER it in the DOM, so the
 * image has to be first. .title-entry-content and .title-entry-text are
 * both kept as plain blocks here (not flex/grid) specifically because a box
 * that establishes its own formatting context (flex, grid, flow-root)
 * computes a single width for its whole height relative to a float instead
 * of rewrapping line by line — that would stop the intro paragraph from
 * reclaiming full width once past the bottom of the image. Scoped via
 * `:has(.title-entry-foreground)` so pages with no Foreground Image (the
 * far more common case, this same intro/CTA markup used sitewide) are
 * completely unaffected — see the plain `.title-entry-content` rule below,
 * which stays exactly as it was for that case.
 *
 * Desktop (node 96:1415, "Partner Districts" variant) reverts to a
 * fixed-width side-by-side column instead — no wrap: flexbox `order` flips
 * the image back to the visual right without touching the DOM, since float
 * is simply ignored on flex items.
 */
.entry-hero.page-hero-section .title-entry-row,
.entry-hero.tribe_events-hero-section .title-entry-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.entry-hero.page-hero-section .title-entry-content,
.entry-hero.tribe_events-hero-section .title-entry-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/*
 * `flex: 1 1 0` only makes sense here as a HORIZONTAL sizing rule — sharing
 * width with the foreground image inside `.title-entry-row` (a flex row).
 * Previously this was on the bare `.title-entry-content` selector above, so
 * on pages with no foreground image it became a direct flex item of
 * `.entry-header`'s COLUMN layout instead, where `flex-grow: 1` means
 * something different: it force-stretched the whole content block
 * vertically to fill any leftover height from Kadence's inherited
 * min-height:200px floor, leaving dead space below a short Intro Text. This
 * scoped, row-only version keeps the original width-sharing behavior for the
 * foreground-image layout unchanged while fixing that regression.
 */
.entry-hero.page-hero-section .title-entry-row .title-entry-content,
.entry-hero.tribe_events-hero-section .title-entry-row .title-entry-content {
	flex: 1 1 0;
	min-width: 0;
}

.entry-hero.page-hero-section .title-entry-content:has(.title-entry-foreground),
.entry-hero.tribe_events-hero-section .title-entry-content:has(.title-entry-foreground) {
	display: block;
}

.entry-hero.page-hero-section .title-entry-content:has(.title-entry-foreground)::after,
.entry-hero.tribe_events-hero-section .title-entry-content:has(.title-entry-foreground)::after {
	content: "";
	display: table;
	clear: both;
}

.entry-hero.page-hero-section .title-entry-text > .title-entry-intro + .title-entry-cta-list,
.entry-hero.tribe_events-hero-section .title-entry-text > .title-entry-intro + .title-entry-cta-list {
	margin-top: 16px;
}

.entry-hero.page-hero-section .title-entry-foreground,
.entry-hero.tribe_events-hero-section .title-entry-foreground {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	float: right;
	width: 80px;
	margin: 0 0 16px 16px;
}

.entry-hero.page-hero-section .title-entry-foreground-image,
.entry-hero.tribe_events-hero-section .title-entry-foreground-image {
	display: block;
	width: 80px;
	height: 104px;
	border-radius: 6px;
	object-fit: cover;
}

.entry-hero.page-hero-section .title-entry-foreground-link,
.entry-hero.tribe_events-hero-section .title-entry-foreground-link {
	font-family: var( --accorbis-font-family-primary );
	font-size: 13px;
	line-height: 1.5;
	color: #ffffff !important;
	text-decoration: underline;
	white-space: nowrap;
}

.entry-hero.page-hero-section .title-entry-foreground-link:hover,
.entry-hero.page-hero-section .title-entry-foreground-link:focus,
.entry-hero.tribe_events-hero-section .title-entry-foreground-link:hover,
.entry-hero.tribe_events-hero-section .title-entry-foreground-link:focus {
	color: #e7af5b !important;
}

@media (min-width: 768px) {
	.entry-hero.page-hero-section .title-entry-row,
	.entry-hero.tribe_events-hero-section .title-entry-row {
		gap: 30px;
	}

	.entry-hero.page-hero-section .title-entry-content:has(.title-entry-foreground),
	.entry-hero.tribe_events-hero-section .title-entry-content:has(.title-entry-foreground) {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 30px;
	}

	.entry-hero.page-hero-section .title-entry-content:has(.title-entry-foreground)::after,
	.entry-hero.tribe_events-hero-section .title-entry-content:has(.title-entry-foreground)::after {
		content: none;
	}

	.entry-hero.page-hero-section .title-entry-text,
	.entry-hero.tribe_events-hero-section .title-entry-text {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
	}

	.entry-hero.page-hero-section .title-entry-foreground,
	.entry-hero.tribe_events-hero-section .title-entry-foreground {
		order: 2;
		float: none;
		flex-shrink: 0;
		width: 130px;
		margin: 0;
	}

	.entry-hero.page-hero-section .title-entry-foreground-image,
	.entry-hero.tribe_events-hero-section .title-entry-foreground-image {
		width: 130px;
		height: auto;
		aspect-ratio: 901 / 1176;
	}
}

/* ==========================================================================
   Events Calendar Hero — /events/ archive (List + Month views) and single
   event pages. Kadence's own Events Calendar integration only supports a
   hardcoded breadcrumb/back-link/title switch with no generic fallback, so
   these two contexts are routed through Kadence's *generic* Hero Title
   pipeline instead (theme option defaults registered in functions.php) —
   the same one the rules above already style for Pages. No new visual
   rules needed here; .tribe_events-hero-section / .tribe_events-archive-
   hero-section are just additional selectors on every rule above.
   ========================================================================== */

/* Fix pass (2026-08-12): no breathing room between the hero and the first
 * content below it — confirmed live via getBoundingClientRect the gap was a
 * flat 32px on both the archive and a single event, coming from Kadence's
 * own bare ".content-area{margin:var(--global-xxl-spacing) 0}" rule
 * (specificity 0,1,0), unrelated to this hero and applied site-wide at every
 * breakpoint. Figma specs a different, breakpoint-specific value for this
 * page: 60px desktop (node 952:3845 "Main - masthead", auto-layout
 * padding-top) and 24px mobile (node 532:3658 "Frame", same), confirmed via
 * get_design_context on both nodes rather than assumed. Overriding
 * margin-top only (not the shared --global-xxl-spacing variable, which also
 * drives this element's own margin-bottom above the footer) and scoping to
 * these two real, stable body classes — not the shared .content-area rule —
 * so no other archive/page on the site is affected, including the regular
 * Page Hero's own unrelated 0px gap (a separate, wider pre-existing issue,
 * out of scope here). Specificity (0,2,1) outranks the bare rule outright,
 * no !important needed. */
body.post-type-archive-tribe_events .content-area,
body.single-tribe_events .content-area {
	margin-top: 24px;
}

@media (min-width: 768px) {
	body.post-type-archive-tribe_events .content-area,
	body.single-tribe_events .content-area {
		margin-top: 60px;
	}
}