/*
 * Provident Research theme styles.
 * Colours, type and spacing come from theme.json; this file holds only what theme.json
 * cannot express: block style variations, hover/focus states and the header layout.
 * Contrast pairs used here are listed in plan-phase1.md (all WCAG AA).
 */

/* ---------- Accessibility ---------- */

/* Skip link: WordPress adds it automatically for block themes (#wp-skip-link). Genesis Page
   Builder's stylesheet clips .screen-reader-text with the old `clip` property, which core's
   focus style does not reset, so the link stayed invisible when focused. */
.skip-link.screen-reader-text:focus {
	clip: auto !important;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Page layout ---------- */

/* Short pages (Coming soon, 404): main grows so the footer sits at the bottom of the window.
   The admin bar offsets the page, so subtract it to avoid a needless scrollbar. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* ---------- Header ---------- */

.provident-header {
	border-bottom: 1px solid #dfe3e6;
}

/* Sticky header, so "Discuss a Staffing Need" stays in reach on long pages. Off on short
   windows (phone landscape, 200% zoom) where it would take too much of the view.
   scroll-padding keeps jump-link targets and keyboard focus clear of it (WCAG 2.4.11).
   Header height: about 134px on phones (CTA on its own line), 98px wider. */
:root {
	--provident-header-room: 9rem;
}

@media (min-width: 600px) {
	:root {
		--provident-header-room: 7rem;
	}
}

@media (min-height: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 100;
	}

	html {
		scroll-padding-top: calc(var(--provident-header-room) + var(--wp-admin--admin-bar--height, 0px));
	}
}

/* Below 601px the WordPress admin bar scrolls away with the page instead of staying put. */
@media (min-height: 600px) and (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}

	html {
		scroll-padding-top: var(--provident-header-room);
	}
}

/* The link is inline-block, so it would sit on a text line and add space under the logo. */
.provident-header__logo a {
	display: block;
}

.provident-header__logo img {
	display: block;
	width: clamp(150px, 18vw, 190px);
	height: auto;
}

.provident-header .wp-block-navigation {
	font-weight: 500;
}

.provident-header .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.provident-header .wp-block-navigation a:hover,
.provident-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.provident-header__cta .wp-block-button__link {
	white-space: nowrap;
}

/* "Specialties • Why Provident • Jobs • FAQs": bullets are decoration, hidden from screen readers.
   Only on wide screens; between 600px and 1100px there isn't room for them. */
@media (min-width: 1100px) {
	.provident-header .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item::before {
		content: "\2022" / "";
		margin-right: var(--wp--style--block-gap, 1rem);
		color: var(--wp--preset--color--grey);
	}
}

@media (max-width: 1099px) {
	.provident-header .wp-block-navigation__container {
		gap: 1.25rem;
	}

	.provident-header__cta .wp-block-button__link {
		padding: 0.7em 1.1em;
	}
}

/* Core shows the full menu from 600px, but five links and the CTA only fit on one row
   from about 1015px. Keep the menu button until 1024px so the links never wrap. */
@media (min-width: 600px) and (max-width: 1023px) {
	.provident-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.provident-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Phones: logo with the menu button flush right, then the CTA on its own line, full width.
   The nav and CTA's wrapper steps aside (display: contents) so both join the logo's row
   and the CTA can wrap. */
@media (max-width: 599px) {
	.provident-header > .wp-block-group {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.provident-header > .wp-block-group > .wp-block-group {
		display: contents;
	}

	.provident-header .wp-block-navigation {
		margin-inline-start: auto;
	}

	/* The image block sets its width inline; max-width still caps it. */
	.provident-header__logo img {
		max-width: 140px;
	}

	.provident-header__cta {
		flex-basis: 100%;
	}

	.provident-header__cta .wp-block-button,
	.provident-header__cta .wp-block-button__link {
		width: 100%;
	}

	.provident-header__cta .wp-block-button__link {
		padding: 0.6em 0.75em;
		font-size: var(--wp--preset--font-size--x-small);
	}
}

/* ---------- Eyebrow labels and lead text ---------- */

.is-style-provident-eyebrow {
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	line-height: 1.4 !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.has-brand-blue-background-color .is-style-provident-eyebrow,
.is-style-provident-hero .is-style-provident-eyebrow {
	color: var(--wp--preset--color--tint);
}

.is-style-provident-lead {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.45;
}

/* ---------- Cards ---------- */

.is-style-provident-card {
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--tint);
	border-top: 3px solid var(--wp--preset--color--sky);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.is-style-provident-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(27, 42, 56, 0.1);
	border-top-color: var(--wp--preset--color--primary);
}

.is-style-provident-card > * + * {
	margin-block-start: 0.6rem;
}

.is-style-provident-card h3 {
	margin-block-start: 0.85rem;
}

.provident-card__summary {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.provident-card__roles {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* Image cards: the image runs edge to edge under the sky-blue top border. */
.is-style-provident-card.provident-card--image {
	display: flex;
	flex-direction: column;
}

.provident-card--image > .wp-block-image:first-child {
	margin: calc(-1 * var(--wp--preset--spacing--50)) calc(-1 * var(--wp--preset--spacing--50)) 0.4rem;
}

.provident-card--image > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Push the "Explore" link to the bottom so links line up across a row. */
.provident-card__link {
	margin-top: auto !important;
	padding-top: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.provident-card__link a {
	text-underline-offset: 0.25em;
}

/* ---------- Hero ---------- */

.is-style-provident-hero {
	color: var(--wp--preset--color--white);
}

/* Sized so "Medical Device Clinical Research Staffing." fits one line on desktop, as in the draft. */
.is-style-provident-hero h1 {
	color: var(--wp--preset--color--white);
	font-size: clamp(1.875rem, 1.1rem + 1.9vw, 2.375rem);
	font-weight: 300;
}

/* The desktop line break in a hero heading can strand a word on phones ("for" alone on a
   line), so phones let the heading wrap naturally. Headings keep a space before each break. */
@media (max-width: 599px) {
	.is-style-provident-hero h1 br {
		display: none;
	}

	/* Phones: the hero is only as tall as its content. The block's minimum height (440px, the
	   same on every page) is for wider screens; core saves it inline, hence !important. */
	.is-style-provident-hero {
		min-height: 0 !important;
	}
}

/* ---------- Dark sections (hero, Questions band) ---------- */

/* Outline button: white text and border (5.77:1 worst case on the hero overlay, 6.98:1 on
   brand blue). Hover fills white with primary blue text (5.79:1). Preset colour classes are
   !important, so the hover needs it too. */
:is(.is-style-provident-hero, .has-brand-blue-background-color) .is-style-outline > .wp-block-button__link {
	border: 1.5px solid currentColor;
	background: transparent;
}

:is(.is-style-provident-hero, .has-brand-blue-background-color) .is-style-outline > .wp-block-button__link:hover,
:is(.is-style-provident-hero, .has-brand-blue-background-color) .is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary) !important;
}

:is(.is-style-provident-hero, .has-brand-blue-background-color) .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Text links on brand blue: white (6.98:1), underlined. */
.has-brand-blue-background-color a:where(:not(.wp-block-button__link)) {
	color: var(--wp--preset--color--white);
	text-underline-offset: 0.25em;
}

.has-brand-blue-background-color a:where(:not(.wp-block-button__link)):hover {
	color: var(--wp--preset--color--tint);
}

.provident-cta-band h2 {
	color: var(--wp--preset--color--white);
}

/* Button and FAQ link: shrink the stack to the button's width so the link centres under it. */
.provident-cta-band .wp-block-group.is-vertical {
	width: fit-content;
}

/* On narrow screens the text runs full width, so the overlay goes uniform (92%: white text 5.77:1 worst case). */
@media (max-width: 781px) {
	.is-style-provident-hero .wp-block-cover__background {
		background: rgba(45, 90, 149, 0.92) !important;
	}
}

/* Function / Device / Program boxes: the whole box is the link. */
.is-style-provident-fdp {
	position: relative;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--primary);
	border-left: 3px solid var(--wp--preset--color--teal-light);
	transition: background-color 0.2s ease;
}

.is-style-provident-fdp p {
	margin: 0;
}

/* Phones: compact boxes, so the hero does not run past the first screen. */
@media (max-width: 599px) {
	.is-style-provident-fdp {
		padding: 0.6rem 1rem;
	}

	.is-style-provident-fdp + .is-style-provident-fdp {
		margin-block-start: 0.5rem;
	}
}

/* Tint on primary blue: 5.21:1, above the 3:1 needed for graphics. */
.is-style-provident-fdp .provident-icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--wp--preset--color--tint);
}

.is-style-provident-fdp a {
	display: block;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
}

.is-style-provident-fdp a strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tint);
}

.is-style-provident-fdp a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.is-style-provident-fdp:hover {
	background: var(--wp--preset--color--brand-blue);
}

.is-style-provident-fdp:hover a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.is-style-provident-fdp:focus-within {
	outline: 3px solid var(--wp--preset--color--teal-light);
	outline-offset: 2px;
}

.is-style-provident-fdp a:focus-visible {
	outline: none;
}

/* ---------- Footer ---------- */

/* Footer links are all set apart from plain text by layout (menu column, LinkedIn, legal row),
   so none is underlined until hover or keyboard focus, matching the Navigation block. */
.provident-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	text-underline-offset: 0.25em;
}

.provident-footer a:hover,
.provident-footer a:focus-visible {
	color: var(--wp--preset--color--tint);
	text-decoration: underline;
}

.provident-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

.provident-footer__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.provident-footer__linkedin svg {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

/* ---------- Jobs (Top Echelon board) ---------- */

/* The text-message note under the phone number is #949494 (3.03:1) even when the row is
   active; slate on white is 7.61:1. The greyed row while it is disabled is left alone
   (inactive controls are exempt, and the grey shows it is inactive). */
#jb--job-board .jb--consent-to-text-row:not(.disabled) .jb--consent-to-text-note {
	color: var(--wp--preset--color--slate);
}

/* ---------- Contact popup ---------- */

/* Stop the page behind from scrolling while the popup is open (needed on iOS). */
html:has(dialog.provident-dialog[open]) {
	overflow: hidden;
}

dialog.provident-dialog[open] {
	box-sizing: border-box;
	width: min(640px, calc(100% - 2rem));
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 0;
	border-top: 4px solid var(--wp--preset--color--sky);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 20px 60px rgba(27, 42, 56, 0.3);
	overflow: auto;
	overscroll-behavior: contain;
}

dialog.provident-dialog::backdrop {
	background: rgba(27, 42, 56, 0.65);
}

.provident-dialog__inner {
	position: relative;
	padding: var(--wp--preset--spacing--50);
}

.provident-dialog__title {
	margin: 0 3rem 1.25rem 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.provident-dialog__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.provident-dialog__close svg {
	width: 1.375rem;
	height: 1.375rem;
}

.provident-dialog__close:hover {
	background: var(--wp--preset--color--tint);
}

/* Phones: near full screen, scrolls inside so the keyboard can't hide the Send button. */
@media (max-width: 599px) {
	dialog.provident-dialog[open] {
		width: 100%;
		max-width: none;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
	}
}

/* Browsers without <dialog>: shown inline at the end of the page. */
dialog.provident-dialog:not([open]):not(:modal) {
	display: none;
}

@supports not selector(:modal) {
	dialog.provident-dialog {
		display: block;
		position: static;
		width: auto;
		margin: var(--wp--preset--spacing--60) auto;
		max-width: 640px;
	}
}

/* ---------- Tinted list panel (Group) ---------- */

/* Eyebrow, then items (Groups of H3 + text) separated by hairlines. */
.is-style-provident-panel {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--tint);
}

/* Specialties: description and image side by side, then the technology list at full width.
   Its items sit four across on desktop, two on tablets, stacked on phones. */
.provident-specialty > .is-style-provident-panel {
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (min-width: 600px) {
	.provident-specialty > .is-style-provident-panel {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem var(--wp--preset--spacing--50);
	}

	.provident-specialty > .is-style-provident-panel > * {
		margin: 0;
	}

	.provident-specialty > .is-style-provident-panel > .is-style-provident-eyebrow {
		grid-column: 1 / -1;
	}

	.provident-specialty > .is-style-provident-panel > .wp-block-group + .wp-block-group {
		margin-block-start: 0;
		padding-block-start: 0;
		border-top: 0;
	}
}

@media (min-width: 1024px) {
	.provident-specialty > .is-style-provident-panel {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Light rules between the four items, like the separators they replace. */
	.provident-specialty > .is-style-provident-panel > .wp-block-group + .wp-block-group {
		margin-inline-start: calc(-0.5 * var(--wp--preset--spacing--50));
		padding-inline-start: calc(0.5 * var(--wp--preset--spacing--50));
		border-left: 1px solid #cfe0e5;
	}
}

.is-style-provident-panel > .wp-block-group + .wp-block-group {
	margin-block-start: 0.9rem;
	padding-block-start: 0.9rem;
	border-top: 1px solid #cfe0e5;
}

.is-style-provident-panel h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	letter-spacing: 0;
}

.is-style-provident-panel h3 + p {
	margin-block-start: 0.25rem;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* ---------- Jump links and tags (List) ---------- */

.is-style-provident-jump,
.is-style-provident-chips {
	display: flex;
	flex-wrap: wrap;
	margin-inline: 0;
	margin-block-end: 0;
	padding: 0;
	list-style: none;
}

.is-style-provident-jump {
	gap: 0.5rem 1.75rem;
	font-weight: 500;
}

.is-style-provident-jump a {
	text-decoration: none;
}

.is-style-provident-jump a:hover,
.is-style-provident-jump a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.is-style-provident-chips {
	gap: 0.6rem;
}

.is-style-provident-chips li {
	padding: 0.4em 0.95em;
	border: 1px solid #cfe0e5;
	border-radius: 999px;
	background: var(--wp--preset--color--tint);
	font-size: var(--wp--preset--font-size--small);
}

/* Link list: bold links separated by hairlines (Device Lifecycle "Two kinds of fit"). */
.is-style-provident-links {
	margin-inline: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #cfe0e5;
}

.is-style-provident-links li {
	margin: 0;
	padding: 0.6rem 0;
	border-bottom: 1px solid #cfe0e5;
	font-weight: 600;
}

.is-style-provident-links a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.is-style-provident-links a:hover,
.is-style-provident-links a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ---------- Device lifecycle ---------- */

/* Two kinds of fit, kept apart by shape as well as colour so they read on phones, where the
   columns stack: specialty / indication-aligned is solid (brand blue bar, tinted box),
   functional & lifecycle support is outlined (soft outline, white box). One accent colour,
   brand blue, on both so neither column outweighs the other; the fill tells them apart.
   Brand blue on white or tint 6.28:1 or better (non-text, 3:1). */
.provident-fit-dot::before,
.provident-fit-dot--outline::before {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.5em;
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: 2px;
	vertical-align: -0.02em;
	box-sizing: border-box;
}

.provident-fit-dot::before {
	background: var(--wp--preset--color--brand-blue);
}

.provident-fit-dot--outline::before {
	background: var(--wp--preset--color--white);
}

/* The key panels at the top of the page match the boxes they explain. */
.is-style-provident-panel:has(> .provident-fit-dot) {
	background: var(--wp--preset--color--tint) !important;
	border: 1px solid var(--wp--preset--color--tint);
	border-top: 4px solid var(--wp--preset--color--brand-blue);
}

.is-style-provident-panel:has(> .provident-fit-dot--outline) {
	background: var(--wp--preset--color--white) !important;
	border: 1px solid #b5ccd9;
	border-top: 4px solid var(--wp--preset--color--brand-blue);
}

/* Column labels in each stage become bars: solid for specialty, outlined for functional.
   White on brand blue 6.98:1; brand blue on white 6.98:1. */
.wp-block-column > .is-style-provident-eyebrow:is(.provident-fit-dot, .provident-fit-dot--outline) {
	margin-block-end: 0.75rem;
	padding: 0.45rem 0.75rem;
	border: 2px solid var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--brand-blue) !important;
}

.wp-block-column > .is-style-provident-eyebrow.provident-fit-dot {
	background: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--white) !important;
}

.wp-block-column > .is-style-provident-eyebrow.provident-fit-dot::before {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

/* Columns stack below 782px: start the second group a little further down. */
@media (max-width: 781px) {
	.wp-block-column + .wp-block-column > .is-style-provident-eyebrow.provident-fit-dot--outline:first-child {
		margin-block-start: 1rem;
	}
}

/* Role boxes: title, what the work is, then the roles. */
.is-style-provident-role,
.is-style-provident-role-outline {
	box-sizing: border-box;
	padding: 0.9rem 1rem;
}

/* Same border width on both kinds, so the boxes are the same size. Tinted boxes need no
   visible outline (like the cards elsewhere); white boxes do. */
.is-style-provident-role {
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--tint);
}

.is-style-provident-role-outline {
	background: var(--wp--preset--color--white);
	border: 1px solid #b5ccd9;
}

/* Side by side, each box in a stage is only as tall as its text, as in the Oct 19 draft
   (Provident chose this, mockup A, 29 Oct 2026). */
@media (min-width: 782px) {
	.wp-block-columns:has(> .wp-block-column > .is-style-provident-role) {
		align-items: flex-start;
	}

	.wp-block-columns:has(> .wp-block-column > .is-style-provident-role) > .wp-block-column {
		display: flex;
		flex-direction: column;
		gap: var(--wp--style--block-gap, 1.25rem);
	}

	.wp-block-columns:has(> .wp-block-column > .is-style-provident-role) > .wp-block-column > * {
		margin: 0;
	}
}

:is(.is-style-provident-role, .is-style-provident-role-outline) > * {
	margin-block: 0;
}

:is(.is-style-provident-role, .is-style-provident-role-outline) h4 {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: 0;
}

:is(.is-style-provident-role, .is-style-provident-role-outline) > * + * {
	margin-block-start: 0.25rem;
}

/* Stage chevrons: name in a chevron, caption underneath. White on ink, brand blue and primary
   (14.64, 6.98, 5.79:1); ink on light teal for the last (7.33:1). */
.is-style-provident-stages {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem 0.3rem;
}

.is-style-provident-stages > .wp-block-group {
	margin: 0;
}

.is-style-provident-stages > .wp-block-group > p:first-child {
	display: flex;
	align-items: center;
	min-height: 4.25rem;
	margin: 0;
	padding: 0.5rem 1.1rem 0.5rem 0.9rem;
	clip-path: polygon(0 0, calc(100% - 0.8rem) 0, 100% 50%, calc(100% - 0.8rem) 100%, 0 100%, 0.8rem 50%);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.is-style-provident-stages > .wp-block-group:first-child > p:first-child {
	clip-path: polygon(0 0, calc(100% - 0.8rem) 0, 100% 50%, calc(100% - 0.8rem) 100%, 0 100%);
}

.is-style-provident-stages > .wp-block-group:nth-child(2) > p:first-child {
	background: var(--wp--preset--color--brand-blue);
	padding-left: 1.4rem;
}

.is-style-provident-stages > .wp-block-group:nth-child(3) > p:first-child {
	background: var(--wp--preset--color--primary);
	padding-left: 1.4rem;
}

.is-style-provident-stages > .wp-block-group:nth-child(4) > p:first-child {
	background: var(--wp--preset--color--teal-light);
	color: var(--wp--preset--color--ink);
	padding-left: 1.4rem;
}

.is-style-provident-stages > .wp-block-group > p + p {
	margin: 0.6rem 0 0;
	padding-left: 0.6rem;
	border-left: 2px solid var(--wp--preset--color--sky);
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.45;
}

@media (max-width: 599px) {
	.is-style-provident-stages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Jump-link targets: leave a little room above the section. */
.provident-specialty {
	scroll-margin-top: 1rem;
}

/* ---------- FAQ list (Accordion block) ---------- */

/* Questions are H3 buttons separated by hairlines; the icon is primary blue (5.79:1 on white). */
.is-style-provident-faq {
	border-top: 1px solid #dfe3e6;
}

.is-style-provident-faq > .wp-block-accordion-item {
	margin-block-start: 0;
	border-bottom: 1px solid #dfe3e6;
}

.is-style-provident-faq .wp-block-accordion-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.45;
}

.is-style-provident-faq .wp-block-accordion-heading__toggle {
	gap: 1.5rem;
	padding: 1.1rem 0;
}

.is-style-provident-faq .wp-block-accordion-heading__toggle:hover {
	color: var(--wp--preset--color--primary);
}

.is-style-provident-faq .wp-block-accordion-heading__toggle-icon {
	flex: none;
	color: var(--wp--preset--color--primary);
	font-size: 1.5rem;
	font-weight: 300;
}

.is-style-provident-faq .wp-block-accordion-panel {
	max-width: 900px;
	padding-bottom: 1.25rem;
}

/* Core prints every answer open and closes them when its script runs, so the page jumped
   (layout shift 0.30 on phones). Keep closed answers shut from the start. Only until the script
   adds hidden="until-found" (which keeps answers findable with the browser's find), and only
   when scripts can run, so without JavaScript every answer stays readable. */
@media (scripting: enabled) {
	.is-style-provident-faq .wp-block-accordion-item:not(.is-open) > .wp-block-accordion-panel:not([hidden]) {
		display: none;
	}
}

.is-style-provident-faq .wp-block-accordion-panel > :first-child {
	margin-top: 0;
}

/* Links to a question target its answer's first paragraph (core opens the panel for it);
   leave room above so the question stays in view. */
.is-style-provident-faq .wp-block-accordion-panel > [id] {
	scroll-margin-top: 6rem;
}

/* ---------- Placeholders ---------- */

.provident-tbd {
	display: inline-block;
	padding: 0.1em 0.4em;
	background: #fff3cd;
	color: #533f03;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}

/* ---------- Windows high contrast (forced colours) ---------- */

@media (forced-colors: active) {
	/* Tinted boxes lose their background, so outline them to keep them reading as boxes. */
	.is-style-provident-panel,
	.is-style-provident-role {
		border: 1px solid CanvasText;
	}

	/* The specialty label bar loses its fill; outline it like the functional one. */
	.wp-block-column > .is-style-provident-eyebrow:is(.provident-fit-dot, .provident-fit-dot--outline) {
		border-color: CanvasText;
	}

	/* Fills and edge colours are gone here, so only specialty boxes keep the thick left edge. */
	.is-style-provident-role {
		border-left-width: 5px;
	}

	.is-style-provident-role-outline {
		border-left-width: 1px;
	}

	/* Keep the specialty square filled so the two legends stay different. */
	.provident-fit-dot::before,
	.wp-block-column > .is-style-provident-eyebrow.provident-fit-dot::before {
		forced-color-adjust: none;
		background: CanvasText;
		border-color: CanvasText;
	}

	.provident-fit-dot--outline::before {
		forced-color-adjust: none;
		border-color: CanvasText;
	}

	/* Filled buttons have no border and would read as plain text. */
	.wp-block-button__link {
		border: 1px solid ButtonText;
	}
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.is-style-provident-card,
	.is-style-provident-fdp {
		transition: none;
	}

	.is-style-provident-card:hover {
		transform: none;
	}
}