/* ============================================================
   3Q Pavo Real ONLINE - hero
   Loaded only by pavo-real-three-quarter-online.xsl , so nothing
   here can reach the base three-quarter or full-width templates.
   Scoped to .main-hero--online, #heroRfiPanel, and the .form-fir /
   .page-format classes this template alone emits.
   ============================================================ */

/* ---------- hero shell ---------- */
.main-hero--online {
	position: relative;
	overflow: hidden;
}

/* The shared program-25-style.css paints .main-hero::before as a half-width
   panel on the right (left:50%; width:50%) and constrains .block-title to 50%.
   The Global-Centre treatment is full-bleed, so both are overridden here.
   Doubled class keeps specificity above the shared rules regardless of order. */
.main-hero.main-hero--online::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 0;
}

.main-hero.main-hero--online .block-title {
	width: auto;
}

/* Navy gradient over the photo: darkest on the left where the copy
   sits, fading right so the image still reads. The photo itself is
   painted on ::before by the scoped style the XSL emits. */
.main-hero.main-hero--online::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: linear-gradient(
		to right,
		rgba(4, 30, 65, 0.96) 0%,
		rgba(4, 30, 65, 0.93) 40%,
		rgba(4, 30, 65, 0.60) 70%,
		rgba(4, 30, 65, 0.15) 100%
	);
}

.main-hero--online > .inner {
	position: relative;
	z-index: 2;
	/* Editorial hero proportions: tall enough to feel deliberate, capped in vh
	   so it never eats a short laptop screen. clamp() scales between them. */
	min-height: clamp(26rem, 46vh, 34rem);
	display: flex;
	align-items: center;
	padding-top: clamp(3rem, 6vh, 5rem);
	padding-bottom: clamp(3rem, 6vh, 5rem);
}

.main-hero--online .main-hero-copy {
	min-width: 0;
	flex: 1 1 auto;
	max-width: 46rem;
}

/* ---------- headline ---------- */
.main-hero--online .block-title {
	display: flex;
	flex-direction: column;
	/* Base gap is tight; the degree line adds its own margin-top below so it
	   groups with the program name rather than with ONLINE. */
	gap: 0.15rem;
	margin-bottom: 2rem;
}

/* The degree line belongs to the program name, not to ONLINE: push it away
   from the line above and let it sit tight against the title below. */
.main-hero--online .main-hero-subtitle {
	margin-top: 0.65rem;
	margin-bottom: 0;
}

.main-hero--online .main-hero-online {
	display: block;
	color: var(--brand-secondary-tan, #C39236);
	text-transform: uppercase;
	/* Same tracking as the program name below it, so the three lines read as
	   one lockup rather than three unrelated treatments. */
	letter-spacing: 0.01em;
	font-size: 2.1rem;
	line-height: 1;
}

.main-hero--online .main-hero-subtitle {
	display: block;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

.main-hero--online .main-hero-title {
	display: block;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 3rem;
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

/* ---------- SEO key phrases ----------
   These are keywords for search relevance, NOT controls. No link,
   no pointer, no hover affordance - anything that reads as clickable
   here is a bug, not a style choice. */
.main-hero--online .main-hero-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* SEO key phrases. Real page text, never controls - no link, no pointer,
   no hover affordance.
   inline-flex + align-items keeps the label optically centred whatever the
   pill's height; clamp() scales the type instead of needing a breakpoint;
   the translucent navy fill keeps white text readable where the hero photo
   is bright, which an outline alone does not. */
.main-hero--online .main-hero-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.9rem;
	border: 1px solid rgba(196, 178, 130, 0.8);
	border-radius: 999px;
	background-color: rgba(4, 30, 65, 0.3);
	color: #ffffff;
	font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.78rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.025em;
	white-space: nowrap;
}

/* ---------- RFI ----------
   Rendered ONCE, in the sticky sidebar slot that used to hold Apply Now and
   Helpful Links. It never moves in the DOM: on desktop #sidebar's negative
   margin-top lifts it into the hero, below lg the same element is
   re-positioned as a fixed slide-up panel. One element, one form load. */
#heroRfiPanel {
	width: 100%;
}

/* RFI card. Three layers, deliberately:
     .form-fir        transparent shell - carries only the edge and the shadow
     .page-format     opaque navy header
     .form-fir__body  frosted glass
   The shell MUST stay transparent: anything painted here sits behind the glass
   and cancels the blur.
   Hairline outline plus a tan cap. The 1px rgba(255,255,255,0.22) is the edge
   from the frosted-glass treatment - enough to define the card against a navy
   section without reading as a hard white frame. A solid 2px white was too
   heavy; no border at all let the card dissolve into the navy bands.
   NOTE: the "Start Here" button and the privacy link live inside a
   cross-origin iframe (go.oru.edu) and cannot be styled from here. */
.form-fir {
	padding: 0;
	background-color: transparent;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-top: 4px solid var(--brand-secondary-tan, #C39236);
	box-shadow: 0 6px 18px rgba(4, 30, 65, 0.28);
}

/* Dark header over the glass body below it. */
.page-format {
	margin: 0;
	padding: 1rem 1.25rem;
	background-color: var(--brand-primary-blue, #041E41);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	text-align: center;
}

.page-format__title {
	margin-bottom: 0;
	font-family: var(--font-bebas-neue, 'Bebas Neue', 'Barlow Condensed', Impact, sans-serif) !important;
	letter-spacing: 0.01em;
	font-size: 28px;
	line-height: 1.1;
	color: var(--brand-secondary-tan, #C39236);
}

.page-format__copy {
	display: block;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: #ffffff;
}

/* Frosted glass, tinted with #364B67 - the first tint on the ORU Primary Blue
   ramp - so the two-tone against the dark header survives.
   0.78 alpha is the floor: over the brightest part of a hero photo the white
   text still measures 5.63:1, and it climbs to 10.29:1 over dark ground.
   Below about 0.68 it fails AA on a light photo. */
.form-fir__body {
	padding: 1.25rem 1rem;
	background-color: rgba(54, 75, 103, 0.78);
	-webkit-backdrop-filter: blur(12px) saturate(115%);
	backdrop-filter: blur(12px) saturate(115%);
	color: #fff;
	text-align: center;
}

.form-fir__title {
	margin-bottom: 10px;
	font-size: 17px;
	line-height: 1.3;
	text-align: center;
	color: #fff;
}

.form-fir__content {
	margin: 0;
}

.form-fir__content iframe {
	display: block;
	width: 100%;
	border: 0;
}

@media (min-width: 768px) {
	.page-format__title {
		font-size: 34px;
	}

	.page-format__copy {
		font-size: 16px;
	}
}

/* How high the RFI card rides into the hero.
   The shared program-25-style.css sets #sidebar { margin-top: -123px } at
   >=992px. This template needs the card further up, overlapping the hero the
   way the mockup shows. Change the one number below - more negative = higher.
   Only online pages load this file, so no other template is affected. */
:root {
	--rfi-offset: -350px;
}

@media (min-width: 992px) {
	#sidebar {
		margin-top: var(--rfi-offset, -350px);
	}
}

/* The mobile Request Info button IS ours (the iframe's Start Here is not),
   so this is the CTA we can actually style.
   Contrast, all passing AA:
     white on #041E41            16.57:1
     navy  on #7BAFD4 (hover)     7.04:1
     button vs the white bar     16.57:1
   Hover follows the site's own .btn-program-page convention in
   program-25-style.css - accent blue with a navy label. */
/* The sticky bar's white slab made the button look like part of the chrome.
   Dropping it lets the navy button float over the page as a single clear
   action, with a shadow to keep it legible over whatever scrolls beneath. */
#myStickyMobile > .bg-white {
	background-color: transparent !important;
	/* Vertical gap only: the button runs edge to edge, so the transparent
	   strip shows above and below it and nowhere else. Any horizontal margin
	   on the button itself would overflow, because the markup carries
	   Bootstrap's w-100 (width:100% !important). */
	padding: 4px 0;
}

#rfiBtnMobile.btn-program-page {
	font-family: 'MuseoSlab-700', 'Roboto Slab', Georgia, serif !important;
	letter-spacing: 0.05em;
	margin: 0;
	background-color: var(--brand-primary-blue, #041E41);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(4, 30, 65, 0.4);
}

#rfiBtnMobile.btn-program-page:hover,
#rfiBtnMobile.btn-program-page:focus-visible {
	background-color: var(--brand-accent-blue, #7BAFD4);
	color: var(--brand-primary-blue, #041E41);
}

/* Ring sits outside the button, on the white bar, so it stays visible in
   both the navy and the accent-blue state. */
#rfiBtnMobile.btn-program-page:focus-visible {
	outline: 3px solid var(--brand-primary-blue, #041E41);
	outline-offset: 2px;
}

/* Collapse on scroll, mirroring how Helpful Links used to behave: the header
   stays put and the body animates its max-height to 0. Same mechanism as
   #collapseBlock in program-25-style.css, so the motion matches the rest of
   the sidebar. Driven by .is-collapsed from program-25-online.js. */
@media (min-width: 992px) {
	#heroRfiPanel .form-fir {
		transition: padding 0.3s ease;
	}

	#heroRfiPanel .form-fir__body {
		overflow: hidden;
		max-height: calc(100vh - 300px);
		transition: max-height 0.3s ease, opacity 0.3s ease;
	}

	/* Zero the padding as well as the height, or the body leaves a
	   residual block under the header when collapsed. */
	#heroRfiPanel.is-collapsed .form-fir__body {
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		opacity: 0;
	}

	#heroRfiPanel.is-collapsed .page-format {
		border-bottom: 0;
	}

	/* Reaching for the card re-opens it without needing to scroll back up.
	   :focus-within covers keyboard users, who never trigger :hover. */
	#heroRfiPanel.is-collapsed:hover .form-fir__body,
	#heroRfiPanel.is-collapsed:focus-within .form-fir__body {
		max-height: calc(100vh - 300px);
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
		opacity: 1;
	}

	#heroRfiPanel.is-collapsed:hover .page-format,
	#heroRfiPanel.is-collapsed:focus-within .page-format {
		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	}
}

/* ---------- mobile ----------
   Below lg the hero is copy only: the form leaves the hero and is
   shown by the sticky slide-up panel instead, so a 475px frame never
   sits between the headline and the page content. */
@media (max-width: 991.98px) {
	.main-hero--online > .inner {
		display: flex;
		align-items: center;
		/* More breathing room than the old flat 2.5rem: the mobile hero was
		   cramped against the header and the breadcrumb. */
		min-height: 60vh;
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}

	.main-hero--online .block-title {
		margin-bottom: 1.5rem;
	}


	/* M5 - the card lives at the END of the page on mobile.
	   #sidebar already falls after the content in the DOM, but
	   .sidebar-wrapper is position:absolute at every breakpoint, so it has to
	   be released into the flow before the card can sit inline. */
	.main-wraper .sidebar-wrapper {
		position: static;
		height: auto;
	}

	.my-sticky {
		position: static;
	}

	#heroRfiPanel {
		width: 100%;
		margin-top: 2rem;
	}

	/* d-block on the markup is display:block !important, so hiding the close
	   control needs !important of its own. */
	#closeRfiMobile.btn-close-menu {
		display: none !important;
	}

	/* Invoked from the sticky Request Info button: the SAME element becomes a
	   full-screen overlay. One element, one form load, either way. */
	#heroRfiPanel.is-active {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1040;
		width: 100%;
		/* dvh tracks the viewport as the mobile URL bar shows and hides; vh
		   does not, and leaves the card sitting low behind the browser chrome.
		   The vh line stays first as the fallback. */
		height: 100vh;
		height: 100dvh;
		box-sizing: border-box;
		padding: 1rem 0;
		margin-top: 0;
		overflow-y: auto;
		/* Solid equivalent of the card's translucent body, so the space above
		   and below the form matches it instead of dropping back to navy.
		   Only in the open state - the inline card at the foot of the page is
		   untouched. */
		background-color: #364B67;
		display: flex;
		flex-direction: column;
	}

	/* auto margins, not justify-content: a form taller than the viewport still
	   scrolls to its top instead of being clipped.
	   No side or bottom edge and no shadow while open: the card fills the
	   screen, so an outline just draws a box round the whole viewport. The tan
	   cap stays - it is what marks the top of the card. */
	#heroRfiPanel.is-active .form-fir {
		margin-top: auto;
		margin-bottom: auto;
		width: 100%;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		box-shadow: none;
	}

	/* Absolute, NOT a flex child. As a child it occupied 3rem at the top of the
	   column, so the card centred in the space below it and sat low. Out of
	   flow, the card is the only item and the auto margins centre it properly. */
	#heroRfiPanel.is-active #closeRfiMobile.btn-close-menu {
		display: flex !important;
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		z-index: 2;
		width: 3rem;
		height: 3rem;
		padding: 0;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		color: #ffffff;
		cursor: pointer;
		font-size: 1.75rem;
	}

	/* No hero photo on mobile: at this width the image is mostly cropped
	   away and only competes with the headline. Solid navy instead. */
	.main-hero.main-hero--online::before {
		display: none;
	}

	/* Gradient goes top-to-bottom on narrow screens - a left-to-right
	   fade leaves the copy sitting on bare photo. */
	.main-hero--online::after {
		background-image: linear-gradient(
			to bottom,
			rgba(4, 30, 65, 0.86) 0%,
			rgba(4, 30, 65, 0.94) 60%,
			rgba(4, 30, 65, 0.97) 100%
		);
	}
}

@media (min-width: 992px) {
	/* Desktop: no panel chrome, no close control. */
	#closeRfiMobile {
		display: none;
	}

	.main-hero--online .main-hero-title {
		font-size: 4rem;
	}

	.main-hero--online .main-hero-online {
		font-size: 2.6rem;
	}
}

@media (min-width: 1400px) {
	.main-hero--online .main-hero-title {
		font-size: 4.75rem;
	}
}

/* The sitewide non-discrimination notice renders too large above 1920px.
   program-25-style.css has:
       @media (min-width: 1920px) { #maincontent p, ... { font-size: 1.15rem } }
   and the footer's notice block sits six levels inside #maincontent, so it is
   swept up by that rule and prints at 18.4px instead of the 11.2px it has
   everywhere else on oru.edu.
   The site's own rule sets 0.7rem on the wrapping DIV, and an INHERITED value
   can never beat a declaration made directly on the element - so restating it
   on the paragraph is the only thing that works. Specificity here is (1,1,1)
   against that rule's (1,0,1), and this file loads afterwards.
   Only affects >=1920px; below that the shared rule is not in play.
   NOTE: the base pavo-real-three-quarter template has the identical problem,
   since it loads the same program-25-style.css and nests the footer the same
   way. Fixing it there means editing the shared sheet - not done here. */
@media (min-width: 1920px) {
	#maincontent .non-discriminatory-policy-text p {
		font-size: 0.7rem;
	}
}

/* ---------- RFI card as a link target ----------
   handleRfiLinks() focuses the card (tabindex=-1) so :focus-within re-opens
   it. The card is not a control, so it gets no focus ring of its own. */
#heroRfiPanel:focus {
	outline: none;
}

/* ---------- contact tiles (pavo-real-contactus) ----------
   The component gives every tile flex:1, which suits three tiles on a
   full-width page. This template's main column is only col-lg-8, so four
   tiles in a row would be about 150-210px wide with 13px copy. Four tiles go
   2x2 until the column is wide enough; three tiles are left alone.
   Without :has() support the tiles simply stay in one row. */
@media (min-width: 768px) and (max-width: 1399.98px) {
	.santi-contact-grid:has(> .santi-contact-grid__item:nth-child(4)) > .santi-contact-grid__item {
		flex: 0 0 50%;
		margin-bottom: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#heroRfiPanel {
		transition: none;
	}
}