/*
 * START Block Styles - variant styles
 *
 * .is-style-program lands on each block's outer element via the render_block
 * filter. The class is doubled to outrank the theme's Tailwind utilities.
 * Everything nests inside the one rule below; a & outside it is ignored.
 */

.is-style-program.is-style-program {
	--sbs-action: var(--start-color-action-primary, #15478a);
	--sbs-surface-subtle: var(--start-color-background-subtle, #f1f8ff);
	--sbs-surface-section: var(--start-color-background-section, #e7ecf4);
	--sbs-green: var(--start-brand-green-500, #85d469);
	--sbs-blue: var(--start-brand-blue-600, #2a5b96);
	--sbs-radius-button: var(--start-component-button-radius, 8px);

	/* clinical-trials */
	& .rounded-2xl {
		border-color: transparent;
	}

	& .rounded-2xl svg g {
		fill: var(--sbs-green);
	}

	& .rounded-2xl a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: end;
		width: fit-content;
		min-height: 52px;
		padding: 8px 20px;
		background-color: #fff;
		border: 2px solid var(--sbs-green);
		border-radius: var(--sbs-radius-button);
		color: var(--sbs-blue);
		transition: background-color 250ms ease-out, color 250ms ease-out;
	}

	& .rounded-2xl a:hover,
	& .rounded-2xl a:focus-visible {
		background-color: var(--sbs-green);
		color: var(--sbs-action);
	}

	/* Below md the theme swaps the SVG for an <img>; fill cannot recolour it. */
	& .rounded-2xl img[src$=".svg"] {
		filter: brightness(0) invert(1);
	}

	/* partner-logos. :has(a img) pins this to the logo row - a bare
	   .flex.flex-wrap also catches other blocks' button rows. */
	& .flex.flex-wrap:has(a img) {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32px 24px;
		justify-items: center;
		align-items: center;
		padding-inline: 10px;
	}

	& .flex.flex-wrap:has(a img) a {
		min-width: 0;
	}

	& .flex.flex-wrap:has(a img) img {
		height: 50px;
		width: auto;
		max-width: 110px;
		object-fit: contain;
	}

	@media (min-width: 768px) {
		& .flex.flex-wrap:has(a img) {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}

		& .flex.flex-wrap:has(a img) img {
			height: 56px;
			max-width: 100%;
		}
	}

	/* testimonials - stars back to the green their markup already declares */
	& .rating svg g.stars,
	& .rating svg g.stars path {
		fill: var(--sbs-green);
	}

	/* Swiper's default active bullet is its own blue; QA wants brand navy. */
	& .swiper-pagination {
		--swiper-pagination-color: var(--sbs-action);
		--swiper-pagination-bullet-inactive-color: var(--sbs-action);
		--swiper-pagination-bullet-inactive-opacity: 0.25;
	}

	/* meet-the-experts */
	&.breakout {
		background-color: var(--sbs-surface-section);
		color: #000;
	}

	&.breakout [class*="aspect-"] {
		border-radius: 24px;
		overflow: hidden;
	}

	/* check-list. .flex distinguishes this section from the other blocks. */
	&.flex {
		padding-block: 24px;
	}

	&.flex h2 {
		text-align: left;
	}

	& .space-y-6 > .flex {
		align-items: flex-start;
	}

	& .space-y-6 > .flex > svg {
		margin-top: 8px;
	}

	@media (min-width: 768px) {
		& .flex.flex-wrap:has(a.primary-button) {
			justify-content: flex-start;
		}
	}

	/* program-tabs */
	& .tab-header .icon {
		min-height: 62px;
		padding: 12px;
		gap: 16px;
		color: var(--sbs-action);
	}

	/* 36px makes room for the notch, which only renders from md up. */
	@media (min-width: 768px) {
		& .tab-header .icon {
			min-height: 0;
			padding: 16px 16px 36px;
			gap: 8px;
		}
	}

	/* Theme sets these inline with !important; specificity cannot win. */
	& .program-detail-tabs .tab-header a.active {
		background-color: var(--sbs-action) !important;
		color: #fff !important;
	}

	/* Notch is a separate svg; scoped to the active tab so others stay hidden. */
	& .tab-header a.active ~ svg g,
	& .tab-header a.active ~ svg path {
		fill: var(--sbs-action) !important;
	}

	& .tab-header .icon svg .primary-fill {
		fill: var(--sbs-green);
	}

	& .program-detail-tabs .tab-header a.active svg .white-stroke {
		stroke: #fff !important;
	}

	& .program-detail-tabs .tab-header a.active svg .white-fill {
		fill: #fff !important;
	}

	&:has(.tab-header) h2 {
		color: var(--sbs-action);
	}

	&:has(.tab-header) [class*="aspect-"] {
		aspect-ratio: 4 / 3;
		border-radius: 24px;
		overflow: hidden;
	}

	@media (min-width: 768px) {
		&:has(.tab-header) [class*="aspect-"] {
			aspect-ratio: auto;
		}
	}

	/* Tab panels use a core Gutenberg button, and sit outside
	   .program-detail-tabs rather than inside it. */
	& .program-detail-tab-content .wp-block-button__link {
		background-color: var(--sbs-action);
		color: #fff;
		transition: background-color 250ms ease-out, color 250ms ease-out;
	}

	& .program-detail-tab-content .wp-block-button__link:hover,
	& .program-detail-tab-content .wp-block-button__link:focus-visible {
		background-color: var(--sbs-green);
		color: var(--sbs-action);
	}

	& .program-detail-tab-content a:not(.wp-block-button__link) {
		color: var(--sbs-action);
		transition: color 250ms ease-out;
	}

	& .program-detail-tab-content a:not(.wp-block-button__link):hover,
	& .program-detail-tab-content a:not(.wp-block-button__link):focus-visible {
		color: #0e2f5c;
	}
}

/* start/jump-to-section. Our own block, so real class names and no
   .is-style-program nesting - it has no Default variant.
   Below md a <details> dropdown; from md up the inline script in
   render.php opens it and these rules make it a flat row. */

.sbs-jump-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	left: 0;
	margin-inline: 0;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	background-color: var(--start-color-background-subtle, #f1f8ff);
}

/* Below lg the theme's header is fixed, so the bar sits under it rather
   than at the viewport top. The header's height is not constant - it
   reflows with the viewport (72px at 361, 92px at 500) - so the inline
   script in render.php measures it and publishes --sbs-jump-top. That
   measurement already includes the WP admin bar, which is why there are
   no .admin-bar rules here. The fallback covers the first paint. */
@media (max-width: 1023px) {
	.sbs-jump-nav {
		top: var(--sbs-jump-top, 92px);
	}
}

/* Above lg the header is static, so only the admin bar is in the way. */
@media (min-width: 1024px) {
	.admin-bar .sbs-jump-nav {
		top: 32px;
	}
}

.sbs-jump-nav__inner {
	max-width: 1216px;
	margin-inline: auto;
	padding: 0 18px;
}

.sbs-jump-nav__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	min-height: 68px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.56px;
	text-transform: uppercase;
	color: #000;
	cursor: pointer;
	list-style: none;
}

/* Safari paints a disclosure triangle without this. */
.sbs-jump-nav__label::-webkit-details-marker {
	display: none;
}

.sbs-jump-nav__chevron {
	flex: none;
	color: var(--start-color-action-primary, #15478a);
	transition: transform 150ms ease;
}

.sbs-jump-nav__inner[open] .sbs-jump-nav__chevron {
	transform: rotate(180deg);
}

.sbs-jump-nav__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 4px 0 8px;
	list-style: none;
}

.sbs-jump-nav__item {
	margin: 0;
}

.sbs-jump-nav__link {
	display: block;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.28px;
	color: var(--start-color-action-primary, #15478a);
	text-decoration: none;
	transition: color 250ms ease-out;
}

.sbs-jump-nav__link:hover,
.sbs-jump-nav__link:focus-visible {
	color: #0e2f5c;
}

.sbs-jump-nav__empty {
	margin: 0;
	padding: 8px 16px;
	font-size: 14px;
	font-style: italic;
	opacity: 0.7;
}

/* From md up the nav itself is the row and the details collapses out of the
   box model: Firefox ignores display on <details>, Chrome wraps content in
   ::details-content, so neither can be relied on as the flex container.
   padding-inline keeps the 1216px cap without an extra element. */
@media (min-width: 768px) {
	/* nav. qualifier: the theme's stylesheet loads after ours, so .breakout
	   would win the padding at equal specificity. vw not %, because the
	   containing block is the content column, not the full-bleed width. */
	nav.sbs-jump-nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 24px;
		min-height: 48px;
		padding: 8px max(16px, calc((100vw - 1216px) / 2));
	}

	.sbs-jump-nav__inner,
	.sbs-jump-nav__inner::details-content {
		display: contents;
	}

	.sbs-jump-nav__label {
		min-height: 0;
		padding: 0;
		cursor: default;
		pointer-events: none;
	}

	.sbs-jump-nav__chevron {
		display: none;
	}

	.sbs-jump-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 24px;
		padding: 0;
	}

	.sbs-jump-nav__link {
		padding: 0;
	}
}

/* Emitted by render_block when a block's outer element already has an id. */
.sbs-anchor {
	display: block;
	height: 0;
	overflow: hidden;
}

/* Header is fixed at 92px below lg and the sticky jump nav sits under it,
   so a target has to clear both. */
body.postid-1587 :target {
	scroll-margin-top: 160px;
}

@media (min-width: 1024px) {
	body.postid-1587 :target {
		scroll-margin-top: 64px;
	}
}

/* Hero. The 12px program-colour border under it isn't in the Figma. Mobile
   also needs the aspect ratio dropped, since 5/2 leaves no room for the
   38px inset, and the picture pinned to fill the taller box. */
body.postid-1587 .entry-header {
	border-bottom-width: 0;
	padding-block: 38px;
}

@media (max-width: 767px) {
	body.postid-1587 .entry-header {
		aspect-ratio: auto;
	}

	body.postid-1587 .entry-header > picture,
	body.postid-1587 .entry-header > picture img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Appointment section carries the same 11px program-colour line; the Figma
   has neither. The wrapper sits outside #content. */
body.postid-1587 div:has(> #appointment) {
	border-top-width: 0;
}

/* Appointment form column carries px-8 while the image above it has none,
   so on mobile the form is inset while the image is flush. */
@media (max-width: 767px) {
	body.postid-1587 #appointment > .px-8 {
		padding-inline: 0;
	}
}

/* Intro section doubles up: an outer 32px and the inner px-8's 32px,
   leaving the copy 64px in against the Figma's 32px. */
@media (max-width: 767px) {
	body.postid-1587 .max-w-3xl.px-8 {
		padding-inline: 0;
	}
}

/* Sections sit at different depths, so their shared px-4 lands at 48, 16
   or 32. Normalise every mobile section to 32px from the viewport edge. */
@media (max-width: 767px) {
	/* Inside entry-content, the article already supplies 32. */
	body.postid-1587 .entry-content > section.px-4,
	body.postid-1587 #appointment > .px-4 {
		padding-inline: 0;
	}

	/* These two sections sit outside entry-content, so they get nothing. */
	body.postid-1587 #content > section.px-4 {
		padding-inline: 32px;
	}
}