/*
Theme Name: RPh Labs
Theme URI: https://rphlabs.leadcroc.dev
Author: LeadCroc
Author URI: https://leadcroc.com
Description: Native Gutenberg block child theme of Twenty Twenty-Five for RPh Labs, pharmacogenomic testing. Full Site Editing with the RPh Labs brand palette (brand green, ink, paper and shell neutrals) and Open Sans typography, all managed in theme.json so every color and style is editable in the Site Editor.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rph-labs
Tags: block-theme, full-site-editing, child-theme, custom-colors, editor-style
*/

/* Brand styles live in theme.json. Keep this file for small refinements only. */

/* Open Sans everywhere, including form controls and code, which browsers
   otherwise draw in their own system and monospace fonts. */
body,
button,
input,
select,
optgroup,
textarea,
code,
kbd,
pre,
samp {
	font-family: var(--wp--preset--font-family--open-sans);
}

/* The signature add-on's typed mode sets handwriting fonts inline. */
.gfield_signature_text_input,
.gfield_signature_text_input::placeholder,
.gfield_signature_font_select_button,
.gfield_signature_font_option {
	font-family: var(--wp--preset--font-family--open-sans) !important;
}

::selection {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

/* A click should never leave a focus ring behind. Keyboard focus still gets
   one, because :focus-visible stays untouched. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
	outline: none;
}

/* Menu links keep a brand-colored ring for keyboard users. */
.rph-nav .wp-block-navigation-item__content:focus-visible,
.rph-nav .wp-block-navigation-submenu__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ==========================================================================
   Site header
   Structure lives in parts/header.html as native Gutenberg blocks.
   This file only carries what block supports cannot express:
   the desktop/mobile source order and the overlay breakpoint.
   ========================================================================== */

.rph-header {
	position: relative;
	z-index: 20;
}

/* The two bands stack flush; flow layout would otherwise space them. */
.rph-header > * {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

.rph-topbar-inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: 9px clamp(20px, 5vw, 64px);
	gap: 6px 28px;
	align-items: baseline;
}

.rph-topbar-text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.571;
}

.rph-topbar a {
	color: inherit;
	text-decoration: underline;
	font-variant-numeric: proportional-nums;
}

/* --------------------------------------------------------------------------
   Nav bar
   -------------------------------------------------------------------------- */

.rph-navbar-inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: 16px clamp(20px, 5vw, 64px);
	/* Tight row gap pairs Provider Portal with Order a kit; the text links
	   keep their own 22px spacing inside the navigation container. */
	gap: 10px;
	align-items: center;
}

.rph-logo {
	line-height: 0;
	/* The row is nowrap, so the logo must never be the item that gives way. */
	flex: 0 0 auto;
}

.rph-logo img {
	display: block;
	height: 26px;
	width: auto;
	mix-blend-mode: multiply;
}

/* Menu and buttons sit to the right of the logo. */
.rph-navbar-inner > .rph-nav {
	margin-left: auto;
}

.rph-nav .wp-block-navigation__container {
	gap: 22px;
}

.rph-nav .wp-block-navigation-item__content {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	white-space: nowrap;
}

.rph-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand);
}

/* Provider Portal reads as a button while the menu is inline. */
.rph-nav .rph-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	border-radius: 6px;
	padding: 9px 18px;
	font-weight: 600;
	line-height: 1.333;
}

.rph-nav .rph-nav-cta > .wp-block-navigation-item__content {
	transition: background-color 120ms ease;
}

.rph-nav .rph-nav-cta > .wp-block-navigation-item__content:hover,
.rph-nav .rph-nav-cta > .wp-block-navigation-item__content:focus {
	background: #0F4740;
	color: var(--wp--preset--color--base);
}

/* A click should not leave a ring on the button; keyboard focus still gets one. */
.rph-nav .rph-nav-cta > .wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.rph-nav .rph-nav-cta > .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.rph-nav-order {
	margin: 0;
}

.rph-nav-order .wp-block-button__link {
	border-radius: 6px;
	padding: 9px 18px;
	font-size: 0.9375rem;
	line-height: 1.333;
	font-weight: 600;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Nav dropdown panel
   Support & Forms is a core navigation submenu; these rules give it the
   floating panel from the mockup plus Phosphor duotone row icons. The icons
   are masks, so they take their colour from background-color.
   -------------------------------------------------------------------------- */

.rph-nav .rph-nav-i > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rph-nav .rph-nav-i > .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 21px;
	height: 21px;
	background-color: #1a645f;
	-webkit-mask: var(--rph-nav-icon) center / contain no-repeat;
	mask: var(--rph-nav-icon) center / contain no-repeat;
}

.rph-nav-i--forms { --rph-nav-icon: url("assets/icons/read-cv-logo.svg"); }
.rph-nav-i--insurance { --rph-nav-icon: url("assets/icons/shield-check.svg"); }
.rph-nav-i--serve { --rph-nav-icon: url("assets/icons/usa-map.svg"); }
.rph-nav-i--support { --rph-nav-icon: url("assets/icons/headset.svg"); }

/* Panel chrome applies only while the menu is inline. Below 1160px the same
   items sit in the overlay column and keep the overlay styling further down. */
@media (min-width: 1160px) {

	.rph-header .rph-navbar .rph-nav .wp-block-navigation__submenu-container {
		min-width: 286px;
		margin-top: 8px;
		padding: 8px 0;
		left: -14px;
		border: 0;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 18px 44px rgba(32, 30, 29, 0.16), 0 2px 6px rgba(32, 30, 29, 0.08);
		transform: translateY(-4px);
		transition: opacity 120ms ease, transform 120ms ease;
	}

	/* The 8px offset below the label is dead space the pointer would cross on
	   its way into the panel, and leaving the item closes it. This transparent
	   strip belongs to the panel, so the pointer never leaves the menu item. */
	.rph-header .rph-navbar .rph-nav .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		inset: -12px 0 auto 0;
		height: 12px;
	}

	/* Core flips visibility on hover/focus; the slide is ours. */
	.rph-header .rph-nav .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
	.rph-header .rph-nav .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
		transform: translateY(0);
	}

	.rph-header .rph-navbar .rph-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		margin: 0 8px;
		padding: 11px 18px;
		border-radius: 10px;
		font-size: 1rem;
		line-height: 1.5;
		color: var(--wp--preset--color--contrast);
	}

	.rph-header .rph-navbar .rph-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.rph-header .rph-navbar .rph-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
		background: #e9e7e6;
		color: var(--wp--preset--color--contrast);
	}
}

/* --------------------------------------------------------------------------
   Below 1160px: logo, then Order a kit, then the hamburger.
   Core collapses the navigation at 600px, but the inline row needs about
   1140px before the logo starts losing width to the menu, so these two
   rules move that threshold up to where the row actually stops fitting.
   -------------------------------------------------------------------------- */

@media (max-width: 1159.98px) {

	.rph-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

	.rph-navbar-inner {
		gap: 12px;
		padding-block: 12px;
	}

	.rph-navbar-inner > .rph-logo {
		order: 1;
	}

	.rph-navbar-inner > .rph-nav-order {
		order: 2;
		margin-left: auto;
	}

	.rph-navbar-inner > .rph-nav {
		order: 3;
		margin-left: 0;
	}

	.rph-logo img {
		height: 22px;
	}

	.rph-nav-order .wp-block-button__link {
		padding: 8px 14px;
		font-size: 0.875rem;
	}

	/* Inside the overlay the CTA is just another row. */
	.rph-nav .is-menu-open .rph-nav-cta > .wp-block-navigation-item__content {
		background: none;
		color: var(--wp--preset--color--contrast);
		padding: 0;
	}

	/* The overlay is a column: left-align it rather than inheriting
	   the desktop row's right justification. */
	.rph-nav .is-menu-open .wp-block-navigation__container {
		align-items: flex-start;
		gap: 18px;
	}

	.rph-nav .is-menu-open .wp-block-navigation-item__content {
		font-size: 1.0625rem;
	}

	.rph-nav .is-menu-open .wp-block-navigation__submenu-container {
		gap: 14px;
		padding-left: 16px;
		border-left: 1px solid var(--wp--preset--color--shell);
		margin-top: 14px;
	}

	.rph-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 0.9375rem;
		color: rgba(32, 30, 29, 0.7);
	}
}

@media (max-width: 599.98px) {

	.rph-topbar-inner {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Site footer
   Structure lives in parts/footer.html as native Gutenberg blocks.
   The column track is a core grid layout, so it reflows on its own;
   the rules here cover colour inversion and the export's spacing.
   ========================================================================== */

.rph-footer-wrap > * {
	margin-block: 0;
}

.rph-footer-wrap a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.rph-footer-wrap a:hover {
	color: rgba(255, 255, 255, 0.75);
}

.rph-footer-wrap a:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Column track
   Core emits repeat(auto-fill, ...), which leaves empty trailing tracks and
   squeezes the four columns on a wide screen. auto-fit collapses those so the
   columns share the full width, which is what the design does.
   -------------------------------------------------------------------------- */

.rph-footer.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	max-width: 1440px;
	margin-inline: auto;
	gap: 28px clamp(28px, 5vw, 64px);
	padding: 36px clamp(20px, 5vw, 64px) 20px;
}

.rph-footer-col > * {
	margin-block: 0;
}

.rph-footer-heading {
	font-size: 0.9375rem;
	line-height: 1.733;
	margin: 0 0 6px;
	letter-spacing: -0.015em;
}

.rph-footer-text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.857;
}

.rph-footer-logo {
	line-height: 0;
	margin-bottom: 12px;
}

.rph-footer-logo img {
	display: block;
	height: 28px;
	width: auto;
	/* The logo file is dark ink; flatten it to white for the green field. */
	filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   Badge and legal line
   -------------------------------------------------------------------------- */

.rph-footer-badge {
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 clamp(20px, 5vw, 64px);
}

.rph-hipaa {
	margin: 0;
}

.rph-hipaa img {
	display: block;
	height: 52px;
	width: auto;
}

.rph-footer-legal {
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 clamp(20px, 5vw, 64px) 14px;
	column-gap: 24px;
	row-gap: 4px;
}

.rph-footer-legal-links a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rph-footer-legal-links span {
	margin-inline: 10px;
	opacity: 0.7;
}

.rph-footer-legal-text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.846;
}

@media (max-width: 599.98px) {

	.rph-footer.is-layout-grid {
		gap: 24px;
		padding-top: 28px;
	}

	.rph-hipaa img {
		height: 44px;
	}
}
/* ==========================================================================
   Home hero
   Structure is a native core/cover on the Home page. The gradient scrim,
   image focal point and min-height are block attributes; this file carries
   the fluid gutters, the measure and the type scale that block supports
   cannot express as clamp().
   ========================================================================== */

/* The cover's own container is constrained; the hero uses its own gutter. */
.rph-hero .wp-block-cover__inner-container {
	max-width: none;
	width: 100%;
}

.rph-hero-inner {
	max-width: 1440px;
	margin-inline: auto;
	width: 100%;
	padding: 48px clamp(20px, 5vw, 64px);
}

/* Roughly 52 characters keeps the lede readable over the photograph. */
.rph-hero-copy {
	max-width: 52ch;
}

.rph-hero-copy > * {
	margin-block: 0;
}

.rph-hero-title {
	font-size: clamp(2.125rem, 3.8vw, 3.625rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	/* Optical alignment: pull the cap stem flush with the copy below. */
	margin: 0 0 0 -0.035em;
	/* Each authored line stays whole; the measure above governs the lede only. */
	white-space: nowrap;
}

@media (max-width: 899.98px) {

	.rph-hero-title {
		white-space: normal;
	}

	/* The scrim is a left-to-right wipe on wide screens; once the copy sits
	   on top of the photograph it has to fall top-to-bottom instead, or the
	   kit carton reads straight through the paragraph. The cover writes its
	   custom gradient inline, so this override needs the weight. */
	.rph-hero .wp-block-cover__gradient-background {
		background: linear-gradient(180deg, rgba(243, 242, 242, 0.97) 0%, rgba(243, 242, 242, 0.93) 60%, rgba(243, 242, 242, 0.72) 100%) !important;
	}
}

.rph-hero-lede {
	font-size: 1.0625rem;
	line-height: 1.647;
	margin-top: 22px;
}

.rph-hero-actions {
	margin-top: 26px;
}

.rph-hero-actions .wp-block-button__link {
	padding: 9px 18px;
	font-size: 0.9375rem;
	line-height: 1.333;
	white-space: nowrap;
}

/* Ghost button: ink outline on the paper side of the scrim. */
.rph-hero-actions .is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.rph-hero-actions .is-style-outline > .wp-block-button__link:hover,
.rph-hero-actions .is-style-outline > .wp-block-button__link:focus {
	background: rgba(32, 30, 29, 0.06);
	color: var(--wp--preset--color--contrast);
}

.rph-hero-fineprint {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-top: 16px;
}

@media (max-width: 599.98px) {

	.rph-hero-inner {
		padding-block: 36px;
	}
}
/* ==========================================================================
   Site shell
   Short pages should still put the footer's bottom edge on the bottom of the
   viewport rather than leaving paper below it. The site wrapper becomes a
   column and main takes the slack, so the footer is pushed down but never
   overlaps content on a long page.
   ========================================================================== */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

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

/* The root block gap otherwise prints a paper band between the header, the
   hero and the footer; the export runs those three flush. Templates that set
   their own margin inline (Twenty Twenty-Five's page.html) keep it. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}
/* ==========================================================================
   Home sections
   The sections are full-bleed core/group blocks; .rph-shell is the 1440px
   measure and fluid gutter they share, which block layout cannot express
   as clamp(). Card and grid geometry follows.
   ========================================================================== */

.rph-shell {
	max-width: 1440px;
	margin-inline: auto;
	width: 100%;
	padding-inline: clamp(20px, 5vw, 64px);
}

.rph-split {
	gap: clamp(32px, 5vw, 72px);
}

.rph-split > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* --------------------------------------------------------------------------
   Order section: kit carousel
   Two slides on a scroll-snap track, so a swipe works with no JavaScript;
   theme JS adds the arrows on top of that.
   -------------------------------------------------------------------------- */

.rph-kit-carousel {
	position: relative;
	flex: 1 1 auto;
	min-height: 380px;
	background: #e8e6e6;
	border-radius: 14px;
	overflow: hidden;
}

.rph-kit-track {
	display: flex;
	height: 100%;
	min-height: inherit;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.rph-kit-track::-webkit-scrollbar {
	display: none;
}

.rph-kit-track > .wp-block-image {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
	height: auto;
}

.rph-kit-track > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
}

.rph-kit-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: #007518;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	transition: color 200ms ease;
}

.rph-kit-arrow:hover {
	color: var(--wp--preset--color--brand);
}

.rph-kit-arrow[data-carousel="prev"] { left: 14px; }
.rph-kit-arrow[data-carousel="next"] { right: 14px; }

/* --------------------------------------------------------------------------
   Order section: card grids
   -------------------------------------------------------------------------- */

.rph-trust-grid,
.rph-feature-grid {
	display: grid;
	gap: 14px;
	align-items: stretch;
	min-height: 152px;
}

.rph-trust-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 18px;
}

.rph-feature-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Pins the row to the bottom of the column so both columns end level. */
	margin-top: auto;
	padding-top: 26px;
}

.rph-trust-card,
.rph-feature-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	border: 1px solid #dedbdb;
	border-radius: 12px;
	transition: border-color 200ms ease;
}

.rph-trust-card {
	justify-content: center;
	padding: 18px;
}

.rph-feature-card {
	padding: 20px 14px;
}

.rph-trust-card:hover,
.rph-feature-card:hover {
	border-color: #007518;
}

.rph-trust-card .wp-block-image,
.rph-trust-card p,
.rph-feature-card p {
	margin: 0;
}

.rph-trust-card img {
	display: block;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.rph-trust-card-clia img { height: 54px; }
.rph-trust-card-cola img { height: 44px; }

.rph-trust-card p,
.rph-feature-card p {
	font-size: 0.9375rem;
	line-height: 1.467;
}

/* Phosphor duotone marks, masked so they take the brand colour and stay
   crisp; the 20% layer in each file gives the duotone reading. */
.rph-feature-card::before {
	content: "";
	display: block;
	width: 30px;
	/* 32px matches the line box the 30px icon font occupied in the export. */
	height: 32px;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.rph-icon-seal-check::before { -webkit-mask-image: url(assets/icons/seal-check.svg); mask-image: url(assets/icons/seal-check.svg); }
.rph-icon-package::before { -webkit-mask-image: url(assets/icons/package.svg); mask-image: url(assets/icons/package.svg); }
.rph-icon-shield-check::before { -webkit-mask-image: url(assets/icons/shield-check.svg); mask-image: url(assets/icons/shield-check.svg); }
.rph-icon-lock-key::before { -webkit-mask-image: url(assets/icons/lock-key.svg); mask-image: url(assets/icons/lock-key.svg); }

/* --------------------------------------------------------------------------
   Order section: copy column
   -------------------------------------------------------------------------- */

.rph-section-title {
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0;
}

.rph-price {
	font-weight: 700;
	font-size: 2.375rem;
	line-height: 1.1;
	margin: 18px 0 0;
}

.rph-price-note {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 8px 0 0;
}

.rph-order-copy {
	font-size: 1rem;
	line-height: 1.75;
	margin: 26px 0 0;
}

.rph-order-copy + .rph-order-copy {
	margin-top: 14px;
}

.rph-order-cta {
	margin-top: 28px;
	gap: 15px;
}

.rph-order-cta p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.467;
}

.rph-btn-lg .wp-block-button__link {
	padding: 13px 28px;
	font-size: 1rem;
	line-height: 1.25;
	border-radius: 6px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Why PGx section
   -------------------------------------------------------------------------- */

.rph-why-copy {
	max-width: 64ch;
}

.rph-why-title {
	font-size: clamp(2rem, 3.4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
}

.rph-why-copy p {
	font-size: 1.0625rem;
	line-height: 1.765;
	margin: 22px 0 0;
}

.rph-why-lead {
	font-weight: 600;
}

.rph-why-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: 14px;
}

@media (max-width: 899.98px) {

	.rph-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* The home sections are colour bands that meet edge to edge; the root block
   gap would otherwise print a strip of paper between them. */
.entry-content > .rph-hero,
.entry-content > .rph-order,
.entry-content > .rph-why,
.entry-content > .rph-matters,
.entry-content > .rph-how,
.entry-content > .rph-precision,
.entry-content > .rph-quality,
.entry-content > .rph-coverage,
.entry-content > .rph-faq,
.entry-content > .rph-home-latest {
	margin-block-start: 0;
}
/* Core marks a light cover with .is-light and paints its text pure black.
   The hero sits on paper, so it takes the site's ink like any other copy. */
.rph-hero.is-light {
	color: var(--wp--preset--color--contrast);
}
/* These containers are groups, so core's flow layout gives every child after
   the first a block-gap margin. Their own grid/flex gap does the spacing, and
   the stray margin otherwise shortens the later cards and slides by 19px. */
.rph-kit-track > * + *,
.rph-trust-grid > * + *,
.rph-feature-grid > * + *,
.rph-order-cta > * + * {
	margin-block-start: 0;
}
/* --------------------------------------------------------------------------
   Drugs may affect us differently
   Centred intro over a 2 x 2 card grid.
   -------------------------------------------------------------------------- */

.rph-matters-intro {
	max-width: 62ch;
	margin-inline: auto;
	text-align: center;
}

.rph-eyebrow {
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.6;
	margin: 0 0 14px;
}

.rph-matters-title {
	font-size: clamp(2rem, 3.2vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
}

.rph-matters-lede {
	font-size: 1.0625rem;
	line-height: 1.765;
	margin: 18px 0 0;
}

.rph-matters-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	max-width: 1080px;
	margin: 56px auto 0;
}

.rph-matters-grid > * + * {
	margin-block-start: 0;
}

.rph-matters-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	border: 1px solid #dedbdb;
	border-radius: 14px;
	padding: 40px 34px;
	transition: border-color 200ms ease;
}

.rph-matters-card > * + * {
	margin-block-start: 0;
}

.rph-matters-card:hover {
	border-color: #007518;
}

.rph-matters-card .wp-block-image {
	margin: 0;
	line-height: 0;
}

.rph-matters-card img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: contain;
}

.rph-matters-card h3 {
	font-size: 1.4375rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 6px 0 0;
}

.rph-matters-card p {
	font-size: 1rem;
	line-height: 1.75;
	margin: 0;
}

@media (max-width: 899.98px) {

	.rph-matters-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* --------------------------------------------------------------------------
   How it works: five steps
   -------------------------------------------------------------------------- */

.rph-how-intro {
	max-width: 78ch;
	margin-inline: auto;
	text-align: center;
}

.rph-how-title,
.rph-precision-title,
.rph-faq-title {
	font-size: clamp(2rem, 3.2vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
}

.rph-how-lede,
.rph-faq-lede {
	font-size: 1.0625rem;
	line-height: 1.765;
	margin: 18px 0 0;
}

.rph-steps-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	margin: 56px 0 0;
}

.rph-steps-grid > * + * {
	margin-block-start: 0;
}

.rph-step-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	border: 1px solid #dedbdb;
	border-radius: 14px;
	padding: 32px 22px 34px;
	transition: border-color 200ms ease;
}

.rph-step-card > * + * {
	margin-block-start: 0;
}

.rph-step-card:hover {
	border-color: #007518;
}

.rph-step-card .wp-block-image {
	margin: 0;
	line-height: 0;
}

.rph-step-card img {
	display: block;
	width: 68px;
	height: 68px;
	object-fit: contain;
}

.rph-step-label {
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.6;
	margin: 0;
}

.rph-step-card h3 {
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 2px 0 0;
}

.rph-step-card p:not(.rph-step-label) {
	font-size: 0.9375rem;
	line-height: 1.733;
	margin: 0;
}

/* Shared centred button row under a section. */
.rph-center-cta {
	justify-content: center;
	margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Precision prescribing
   -------------------------------------------------------------------------- */

.rph-precision-split {
	gap: clamp(32px, 5vw, 80px);
}

.rph-precision-copy p {
	font-size: 1.0625rem;
	line-height: 1.765;
	margin: 22px 0 0;
}

.rph-precision-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 40px;
}

.rph-precision-grid > * + * {
	margin-block-start: 0;
}

.rph-precision-item > * + * {
	margin-block-start: 0;
}

.rph-precision-item h3 {
	font-size: 1.3125rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}

.rph-precision-item p {
	font-size: 1rem;
	line-height: 1.75;
	margin: 10px 0 0;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   Native core/details blocks; the caret is the Phosphor mark, masked so it
   takes the brand colour and rotates with the open state.
   -------------------------------------------------------------------------- */

.rph-faq-intro {
	max-width: 64ch;
	margin-inline: auto;
	text-align: center;
}

.rph-faq-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 900px;
	margin: 48px auto 0;
}

.rph-faq-list > * + * {
	margin-block-start: 0;
}

.rph-faq-list .wp-block-details {
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	padding: 0;
	overflow: hidden;
	margin: 0;
}

.rph-faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 24px;
	cursor: pointer;
	text-align: left;
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
	list-style: none;
}

.rph-faq-list summary::-webkit-details-marker {
	display: none;
}

/* The card clips its overflow, so a default focus ring survives only as a
   black bar under the summary after a click. Drop it for pointer focus and
   draw the keyboard ring inside the card, where nothing can clip it. */
.rph-faq-list summary:focus {
	outline: none;
}

.rph-faq-list summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: -4px;
	border-radius: 10px;
}

.rph-faq-list summary::after {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: url(assets/icons/caret-down.svg) center / contain no-repeat;
	mask: url(assets/icons/caret-down.svg) center / contain no-repeat;
	transition: transform 200ms ease;
}

.rph-faq-list details[open] summary::after {
	transform: rotate(180deg);
}

.rph-faq-list .wp-block-details > *:not(summary) {
	font-size: 1rem;
	line-height: 1.75;
	margin: 0;
	padding: 0 24px 22px;
	text-align: left;
}

@media (max-width: 1099.98px) {

	.rph-steps-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 899.98px) {

	.rph-steps-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rph-precision-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599.98px) {

	.rph-steps-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* --------------------------------------------------------------------------
   Service coverage
   Copy and legend on the left, the [rph_usa_map] shortcode on the right. The
   two map colours are custom properties so the legend swatches and the
   map's state fills cannot drift apart.
   -------------------------------------------------------------------------- */

.rph-coverage,
.rph-usa-map {
	--rph-map-served: var(--wp--preset--color--brand);
	--rph-map-unserved: #ff4646;
}

.rph-coverage-split {
	gap: clamp(32px, 5vw, 80px);
}

.rph-coverage-title {
	font-size: clamp(2rem, 3.2vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
}

.rph-coverage-copy p {
	font-size: 1.0625rem;
	line-height: 1.765;
	margin: 18px 0 0;
}

.rph-coverage-copy p strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.rph-coverage-legend {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 32px;
	margin-top: 36px;
}

.rph-coverage-legend > * + * {
	margin-block-start: 0;
}

.rph-coverage-legend .rph-legend-item {
	position: relative;
	min-height: 44px;
	margin: 0;
	padding-left: 62px;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
}

.rph-legend-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 44px;
	height: 44px;
	background: var(--rph-map-served);
}

.rph-legend-unserved::before {
	background: var(--rph-map-unserved);
}

/* The map itself. Its box is reserved before the script draws, so the
   section does not jump when the atlas arrives. */

.rph-usa-map {
	position: relative;
}

.rph-usa-map__canvas {
	width: 100%;
	aspect-ratio: 960 / 600;
}

.rph-usa-map__canvas svg {
	display: block;
	width: 100%;
	height: auto;
}

.rph-usa-map .rph-state {
	fill: var(--rph-map-served);
	stroke: #0b2b2b;
	stroke-width: 0.6;
	cursor: pointer;
	transition: filter 150ms ease;
}

.rph-usa-map .rph-state.is-unserved {
	fill: var(--rph-map-unserved);
}

.rph-usa-map .rph-state:hover {
	filter: brightness(1.18);
}

.rph-usa-map text {
	fill: #ffffff;
	font-family: inherit;
	font-size: 10px;
	font-weight: 500;
	pointer-events: none;
}

.rph-usa-map text.is-outset {
	fill: #201e1d;
}

.rph-usa-map .rph-leader {
	fill: none;
	stroke: #8b8786;
	stroke-width: 0.8;
	pointer-events: none;
}

.rph-usa-map .rph-leader-dot {
	fill: #8b8786;
}

.rph-usa-map .rph-state-borders {
	fill: none;
	stroke: rgba(0, 0, 0, 0.25);
	stroke-width: 0.6;
	pointer-events: none;
}

.rph-usa-map__tooltip {
	position: fixed;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 7px 11px;
	border-radius: 6px;
	background: rgba(32, 30, 29, 0.92);
	color: #ffffff;
	font-size: 0.8125rem;
	line-height: 1.35;
	white-space: nowrap;
	pointer-events: none;
}

.rph-usa-map__tooltip[hidden] {
	display: none;
}

.rph-usa-map__tooltip span {
	opacity: 0.8;
}

.rph-usa-map.is-failed .rph-usa-map__canvas {
	aspect-ratio: auto;
	padding-block: 24px;
	color: var(--wp--preset--color--accent-4);
}

@media (max-width: 599.98px) {

	.rph-coverage-legend {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* --------------------------------------------------------------------------
   Commitment to quality and compliance
   Centred intro over a single row of accreditation logos. Each logo gets its
   own height because the marks have very different proportions; these keep
   their visual weight even, as on the original page.
   -------------------------------------------------------------------------- */

/* The heading runs on one line at desktop widths, as on the original page;
   only the paragraph is held to a reading measure. */
.rph-quality-intro {
	max-width: 1240px;
	margin-inline: auto;
	text-align: center;
}

.rph-quality-intro .rph-quality-lede {
	max-width: 960px;
	margin-inline: auto;
}

.rph-quality-title {
	font-size: clamp(2rem, 3.2vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
}

.rph-quality-lede {
	font-size: 1.0625rem;
	line-height: 1.765;
	margin: 18px 0 0;
}

.rph-quality-logos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	align-items: center;
	justify-items: center;
	max-width: 1080px;
	margin: 44px auto 0;
}

.rph-quality-logos > * + * {
	margin-block-start: 0;
}

.rph-quality-logos .wp-block-image {
	margin: 0;
	line-height: 0;
}

.rph-quality-logos img {
	display: block;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.rph-quality-logo--hipaa img { height: 56px; }
.rph-quality-logo--clia img { height: 64px; }
.rph-quality-logo--cola img { height: 50px; }
.rph-quality-logo--hsa img { height: 46px; }

@media (max-width: 599.98px) {

	.rph-quality-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 36px;
	}
}
/* --------------------------------------------------------------------------
   Latest articles (home)
   The band and its cards are the Blog page's own blocks, styled by
   assets/css/blog.css (loaded on the front page by inc/blog.php). Only the
   grid differs: the archive fills as many 320px columns as fit, which leaves
   a three-post teaser as two cards plus one stranded card at mid widths, so
   here it is always three across or one.
   -------------------------------------------------------------------------- */

.rph-home-latest .wp-block-post-template.blg-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 859.98px) {

	.rph-home-latest .wp-block-post-template.blg-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Eyebrows: the small uppercase labels above headings, on every page. */
.rph-eyebrow,
.rph-step-label,
.rph-kicker,
.rph-abn-kicker,
.rph-forms-kicker,
.rph-ib-kicker,
.rph-ml-kicker,
.rph-req-kicker,
.blg-kicker,
.blg-eyebrow,
.blg-eyebrow a,
.cu-kicker,
.faq-kicker,
.hiw-kicker,
.hiw-step-no,
.hiw-links-label,
.ins-kicker,
.pst-kicker,
.pst-kicker a,
.vid-kicker,
.wws-kicker {
	font-weight: 700;
}