/**
 * START Center accessibility fixes and program-template design parity.
 * WCAG 2.1 AA, ratios measured live.
 *
 * SCOPED BUILD. Every rule is scoped to body.postid-1587 so installing
 * this plugin changes only the program pages, not the live site around
 * them. Sections 2 and 3 are genuine site-wide fixes held back by that
 * scope; remove it once the client has signed the template off.
 * The unscoped equivalent is 0.4.0, which is what staging runs.
 */

/* 1. FOOTER TO MATCH THE DESIGN
   Built to the approved Figma: radial gradient from the top-left, white
   text, no scrim. Radial, not linear - the Figma names it a radial
   gradient, so white is a corner highlight rather than an 18% band.

   ACCESSIBILITY NOTE, flagged and overruled: white text over the pale
   left of this gradient measures about 1.07:1 against a 4.5:1
   requirement. The scrim this replaces existed to fix exactly that.
   Built as the client asked; logged so it is not read as an oversight. */
body.postid-1587 footer#colophon {
	position: relative;
	isolation: isolate;
	background: radial-gradient(
		120% 160% at 0% 0%,
		#ffffff 0%,
		#e9fde0 12%,
		#7ec4ab 38%,
		#71b1b4 55%,
		#5d7fae 80%,
		#44699d 100%
	);
	padding: 48px 80px 16px;
}

body.postid-1587 footer#colophon::before {
	content: none;
}

body.postid-1587 footer#colophon,
body.postid-1587 footer#colophon :is(p, a, li, span, strong, h2, h3, h4) {
	color: #fff;
}

/* 2. PROGRAM ACCENTS AS HEADING TEXT ON WHITE
   Failing: gray #F1F1F2 1.13, light-blue #BBBBF3 1.82, pink #F3A0C5 1.97.
   Passing and left alone: purple 5.36, red 6.94, dark-blue 7.98,
   default 10.72, black 16.67. The accent still appears on the
   surrounding band, so per-program branding survives. */
body.postid-1587 .text-program-pink,
body.postid-1587 .text-program-light-blue,
body.postid-1587 .text-program-gray {
	color: #1E1E1E;
}

/* 3. CLINICAL TRIALS CARD ICON
   Green #85D469 on #15478A is 4.76:1, which passes the 3:1 requirement
   for graphics. The theme tints it with the program colour instead. */
body.postid-1587 .bg-start-bright-blue svg path:not([fill="none"]),
body.postid-1587 .bg-start-bright-blue svg rect:not([fill="none"]),
body.postid-1587 .bg-start-bright-blue svg circle:not([fill="none"]),
body.postid-1587 .bg-start-bright-blue svg ellipse:not([fill="none"]) {
	fill: #85d469;
}

body.postid-1587 .bg-start-bright-blue svg [stroke]:not([stroke="none"]) {
	stroke: #85d469;
}

/* 4. PROGRAM HEADER TO MATCH THE DESIGN
   The theme keys the program header to --program-color, so the gradient
   and nav differ per program. The approved Figma uses one fixed gradient
   for every program - the same stops the site already uses elsewhere.

   Nav bar navy with white links: 9.13:1.
   Phone and Contact Us sit over the dark end, #44699D: 5.60:1. */
body.postid-1587 #masthead.bg-program-gradient {
	background: linear-gradient(
		to right,
		#ffffff 0%,
		#e9fde0 18%,
		#7ec4ab 42%,
		#71b1b4 58%,
		#5d7fae 80%,
		#44699d 100%
	);
}

/* Top row sits over the dark end of the gradient. */
body.postid-1587 #top-menu .menu > li > a {
	color: #fff;
}

/* 5. PROGRAM NAV AND HERO TO MATCH THE DESIGN
   Nav items wrapped onto two and three lines at 1440. nowrap plus
   space-between spreads them across the bar as the Figma does. Desktop
   only: below lg, #site-navigation is the hamburger panel. */
@media (min-width: 1024px) {
	body.postid-1587 #site-navigation {
		background-color: #15478a;
	}

	body.postid-1587 #site-navigation .menu > li > a:not(.submenu-carat) {
		color: #fff;
	}

	body.postid-1587 #site-navigation .menu > li > a {
		white-space: nowrap;
	}

	body.postid-1587 #site-navigation .menu {
		justify-content: space-between;
		gap: 24px;
		width: 100%;
	}

	body.postid-1587 #site-navigation .menu > li {
		flex: 0 0 auto;
		min-width: 0;
		width: auto;
	}

	/* Hero title is capped at 400px inside a 1425px header, so it breaks
	   onto three lines. The Figma runs it to two. */
	body.postid-1587 .entry-header .lg\:max-w-\[400px\] {
		max-width: 780px;
	}
}

/* Hero overlay. The theme darkens the left side and sets the text white;
   the Figma lightens it and sets the text black. Both change together or
   the text disappears. 0.94 held to 42% covers the full 780px title. */
body.postid-1587 .entry-header::before {
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.94),
		rgba(255, 255, 255, 0.94) 42%,
		rgba(255, 255, 255, 0) 78%
	);
}

body.postid-1587 .entry-header :is(h1, h2, p) {
	color: #1e1e1e;
}

/* NOT FIXED HERE
   Clinical Trials icon on mobile. Below md the theme swaps the inline
   SVG for an <img>, which fill cannot reach; start-block-styles inverts
   it to white. An <img> cannot be recoloured to an arbitrary green with
   filters, so this needs either a green SVG file in the media library or
   the inline SVG kept at mobile widths.
   Logo shrinks at narrow desktop widths. The box is basis-[170px] with
   flex-shrink 1, so the nav squeezes it to 51px around 1100. Pinning it
   with flex-shrink 0 works but leaves the nav too tight; reverted.
   Buttons and CTAs - start-center-button-styles.
   Cookie banner links, 3.87:1 - Enzuzo vendor markup.
   Two consent banners firing at once (Complianz + Enzuzo).
   Headings marked up as <p> - needs markup, not CSS. */