/* ==========================================================================
   CAHPS 5-Star badge + "Held to the Highest Standard" section —
   Location post type (ACF-driven, see inc/location-cahps.php).

   SCOPE: enqueued ONLY on a `location` singular page where the location
   has actually enabled the hero badge and/or the section via ACF (see
   inc/location-cahps.php: cahps_hero_badge_enabled() /
   cahps_section_is_enabled()). For every location that hasn't enabled
   either, this file is never loaded and cannot affect anything.

   NOT part of the Tailwind/webpack build (this checkout has no build
   tooling to regenerate dist/css/app.css from src/css/sections/*.css).
   Written as plain, dependency-free CSS and enqueued directly — same
   pattern as src/css/marketing-landing.css.

   Figma reference: "LUMI - Website - R2.4" (gioqXN99hoW20BcuOWJg9y),
   node 25817:7596 (desktop, 1920px canvas) / 25817:7382 (mobile).
   ========================================================================== */

/* --------------------------------------------------------------------
   1) HERO BADGE
   Figma desktop badge: x=1658.72 y=393.44 w=225.33 h=199.49 inside a
   1920×640.1 hero frame → right offset ≈ 36px, bottom offset ≈ 47px,
   width ≈ 11.7% of viewport width.

   Two separate elements are rendered by parts/modules/hero.php
   (`.cahps-badge--hero` for desktop, `.cahps-badge--hero-mobile` for
   mobile/tablet) — NOT one element repositioned by media query. #hero
   is a fixed `h-[400px]` on mobile (`h-[600px]` on `lg:`+), which does
   NOT match the Figma mobile mockup's own 624px-tall hero frame, so a
   `bottom` offset computed as a % of Figma's mockup height doesn't
   transfer to the real render and can overlap the heading. The mobile
   badge is instead rendered IN NORMAL FLOW immediately above the H1,
   inside the same bottom-docked wrapper — see hero.php — which is
   correct regardless of container height or heading line count.
   -------------------------------------------------------------------- */

.cahps-badge--hero {
	position: absolute;
	z-index: 5;
	right: 24px;
	bottom: 32px;
	/* Floor at 190px so 1024–1600 does not shrink toward 120px.
	   Cap at 225px — the approved asset is 226×200, and drawing it
	   larger than that is what makes the hero badge look soft. */
	width: clamp(190px, 11.7vw, 225px);
	display: block;
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
}

.cahps-badge--hero img,
.cahps-badge--hero-mobile img {
	width: 100%;
	height: auto;
	max-width: 225px;
	display: block;
}

.cahps-badge--hero:focus-visible,
.cahps-badge--hero-mobile:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	border-radius: 4px;
}

@media (min-width: 1024px) {
	.cahps-badge--hero {
		right: 40px;
		bottom: 47px;
	}
}

/* Below the desktop hero, the in-flow badge is hidden until the phone
   layout. Tablet (640–1023) keeps the absolute badge, but on the right
   and below the 70px mobile header. The in-flow badge plus the H1 is
   taller than the 400px hero in that range, so it was sliding up under
   the sticky nav (z-index 40). */
.cahps-badge--hero-mobile {
	display: none;
}

@media (min-width: 640px) and (max-width: 1023px) {
	.cahps-badge--hero {
		left: auto;
		right: 32px;
		top: calc(var(--spacing-header-mobile) + 16px);
		bottom: auto;
		width: 160px;
	}

	.cahps-badge--hero-mobile {
		display: none;
	}
}

@media (max-width: 639px) {
	.cahps-badge--hero {
		display: none;
	}

	.cahps-badge--hero-mobile {
		display: block;
		width: 160px;
		margin: 0 0 12px;
		line-height: 0;
		-webkit-tap-highlight-color: transparent;
	}
}

/* --------------------------------------------------------------------
   2) "HELD TO THE HIGHEST STANDARD" section
   Desktop: reuse render_split_content() exactly as the live site does
   (see parts/components/split-content.php / locations_promise.php for
   the identical <section class="split-content my-section"> pattern —
   this section's PHP mirrors it exactly, no extra padding wrapper).

   Badge size (desktop): Figma places the SAME "Badge" symbol/instance
   used in the hero (25823:9217/9294) at the SAME absolute size in this
   section — x=210 y=6371 w=225.33 h=199.49 @ 1920px canvas — i.e. the
   section badge is NOT a smaller variant. Sized identically to
   .cahps-badge--hero (clamp(..., 11.7vw, 225px)) below.

   Mobile: match Figma node 25817:7384 / 430px frame composition:
     heading 32/38 centered, 390px text frame
     lead 21px centered gradient
     body 18/28 centered
     source 16/24 italic centered
     badge LAST, centered
   -------------------------------------------------------------------- */

.cahps-standard__mobile {
	display: none;
}

.cahps-standard .col-left {
	display: flex;
	flex-direction: column;
}

.cahps-standard__badge {
	display: inline-block;
	width: clamp(190px, 11.7vw, 225px);
	margin-top: 8px;
	line-height: 0;
}

.cahps-standard__badge img,
.cahps-standard__mobile-badge img {
	width: 100%;
	height: auto;
	display: block;
}

.cahps-standard__badge:focus-visible,
.cahps-standard__mobile-badge:focus-visible {
	outline: 3px solid var(--color-teal, #3591b0);
	outline-offset: 3px;
	border-radius: 4px;
}

.cahps-standard__footnote {
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	font-style: italic;
	color: var(--color-navy, #162537);
	margin-top: 24px;
}

/* Underline spec matches Figma's inspect panel exactly (node
   25817:7603, "Medicare.gov" run): text-decoration-style: solid,
   text-decoration-skip-ink / thickness: auto, text-underline-offset:
   auto, text-underline-position: from-font — i.e. the browser default
   underline metrics tied to the font, not a manually nudged offset. */
.cahps-standard__footnote a,
.cahps-standard__mobile-footnote a,
.cahps-standard__mobile-lead a {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}

/* 768–1023 uses the same stacked order as mobile: heading, lead,
   body, source, then badge. Section spacing stays on `my-section`
   and the shared `.container` — no extra padding, so it matches the
   other location sections. */
@media (max-width: 1023px) {
	.cahps-standard__desktop {
		display: none;
	}

	.cahps-standard__mobile {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		color: var(--color-navy, #162537);
	}

	.cahps-standard__mobile-heading {
		width: 100%;
		margin: 0 0 20px;
		font-family: "General Sans Variable", "General Sans", sans-serif;
		font-size: 32px;
		font-weight: 400;
		font-style: normal;
		line-height: 38px;
		letter-spacing: 0;
		text-align: center;
		color: var(--color-navy, #162537);
	}

	.cahps-standard__mobile-lead {
		width: 100%;
		margin: 0 0 22px;
		font-family: "General Sans Variable", "General Sans", sans-serif;
		font-size: 21px;
		font-weight: 500;
		font-style: normal;
		line-height: 1.2;
		letter-spacing: 0;
		text-align: center;
	}

	.cahps-standard__mobile-copy {
		width: 100%;
		margin: 0;
		text-align: center;
	}

	.cahps-standard__mobile-body,
	.cahps-standard__mobile-body p {
		margin: 0;
		font-family: "General Sans Variable", "General Sans", sans-serif;
		font-size: 18px;
		font-weight: 500;
		font-style: normal;
		line-height: 28px;
		letter-spacing: 0;
		text-align: center;
		color: var(--color-navy, #162537);
	}

	.cahps-standard__mobile-footnote {
		width: 100%;
		margin: 15px 0 0;
		font-family: "General Sans Variable", "General Sans", sans-serif;
		font-size: 16px;
		font-weight: 400;
		font-style: italic;
		line-height: 24px;
		letter-spacing: 0;
		text-align: center;
		color: var(--color-navy, #162537);
	}

	.cahps-standard__mobile-badge {
		display: block;
		width: 170px;
		margin: 30px auto 0;
		line-height: 0;
	}
}