/**
 * pchs/site-header — front-end styles.
 *
 * Nav breakpoint is 80em (1280px) and lives only here: view.js decides which
 * mode it is in by asking whether the hamburger is rendered, so CSS stays the
 * single source of truth for the breakpoint. 80em is the narrowest width where
 * the 144px logo, the five nav items and the actions fit one row; below it the
 * nav wraps, so the drawer takes over. sticky-call-bar/style.css mirrors it.
 */

.pchs-site-header {
	position: relative;
	z-index: 50;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.pchs-site-header.is-sticky {
	position: sticky;
	top: 0;
}

/*
 * The shrink without the jump. The logo animates --pchs-logo-h down to
 * --pchs-logo-h-scrolled; the header's bottom margin grows by the same delta,
 * with the same duration and easing, so the two sum to a constant on every
 * frame. Nothing below the header moves, scroll anchoring has nothing to
 * correct, and the view.js hysteresis loop cannot start.
 */
.pchs-site-header {
	transition: margin-block-end var(--pchs-duration) var(--pchs-ease),
		box-shadow var(--pchs-duration) var(--pchs-ease);
}

.pchs-site-header.is-scrolled {
	margin-block-end: calc(var(--pchs-logo-h) - var(--pchs-logo-h-scrolled));
	box-shadow: var(--wp--preset--shadow--card);
}

/*
 * Top-aligned, so the logo's top edge never moves while it shrinks. Everything
 * beside it is laid out once, centred on the SCROLLED logo height, and pushed
 * down by half the shrink with a transform while at rest. A transform is not
 * layout, so the drawer and the toggle glide into place without a single
 * layout-shift entry; centring them in flow moved them 24px per scroll.
 */
.pchs-site-header {
	--pchs-header-settle: calc((var(--pchs-logo-h) - var(--pchs-logo-h-scrolled)) / 2);
}

.pchs-site-header__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--pchs-header-pad-y) var(--wp--preset--spacing--50);
}

/* Brand
   ------------------------------------------------------------------------- */

.pchs-site-header__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.pchs-site-header__brand .custom-logo-link {
	display: block;
	line-height: 0;
}

/* Logo heights are app.css tokens (--pchs-logo-h, --pchs-logo-h-scrolled), set
   per breakpoint there, because the scroll offsets in style.css derive from the
   same numbers. */
.pchs-site-header__brand img {
	display: block;
	width: auto;
	height: var(--pchs-logo-h);
	max-width: 100%;
	transition: height var(--pchs-duration) var(--pchs-ease);
}

.pchs-site-header.is-scrolled .pchs-site-header__brand img {
	height: var(--pchs-logo-h-scrolled);
}

.pchs-site-header__title {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--wp--custom--weight--heavy);
	letter-spacing: var(--wp--custom--tracking--tight);
	text-decoration: none;
}

/* Drawer shell — a plain flex row until the nav breakpoint
   ------------------------------------------------------------------------- */

.pchs-site-header__drawer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--40);
	flex: 1 1 auto;
	min-width: 0;
}

@media (min-width: 80em) {
	/* Content width, not flex-grow: a growing drawer's left edge tracked the
	   shrinking logo, and every frame of that was a layout shift. */
	.pchs-site-header__drawer {
		flex: 0 0 auto;
		height: var(--pchs-logo-h-scrolled);
		transform: translateY(var(--pchs-header-settle));
		transition: transform var(--pchs-duration) var(--pchs-ease);
	}

	.pchs-site-header.is-scrolled .pchs-site-header__drawer {
		transform: none;
	}
}

.pchs-site-header__toggle {
	display: none;
}

.pchs-site-header__scrim {
	display: none;
}

/* Primary navigation
   ------------------------------------------------------------------------- */

.pchs-nav,
.pchs-nav__sublist {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * spacing-40, not 50, between items: at 80em and up the bar content is 1200px
 * (the wide-size cap), and the 144px logo, five items and the call cluster
 * only fit one row with these gaps. If you add an item, measure at 1280.
 */
.pchs-nav {
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: nowrap;
}

.pchs-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

/*
 * min-height rather than more padding. The links measured 89x35 and the bar is
 * 105px tall, so 44px of target fits inside the row the logo already sets
 * without moving anything: the header does not grow, the links just stop being
 * a 35px strip to aim at.
 */
.pchs-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	box-sizing: border-box;
	min-height: var(--pchs-tap);
	padding: var(--wp--preset--spacing--20) 0;
	border: 0;
	background: none;
	color: var(--wp--custom--color--navy-soft);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--weight--ui);
	line-height: var(--wp--custom--leading--heading);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.pchs-nav__link:hover,
.pchs-nav__link[aria-expanded="true"] {
	color: var(--wp--preset--color--green);
	text-decoration: none;
}

.pchs-nav__link[aria-current="page"] {
	color: var(--wp--preset--color--green-dark);
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--green);
}

/*
 * box-shadow composition. The underline marking the current page and app.css's
 * focus halo are the same property, and without this rule tabbing onto the
 * current page's own link erases the mark that says you are on it.
 */
.pchs-nav__link[aria-current="page"]:focus-visible {
	box-shadow: var(--pchs-focus-halo), inset 0 -2px 0 0 var(--wp--preset--color--green);
}

.pchs-nav__disclosure .pchs-icon--chevron {
	transition: transform var(--pchs-duration) var(--pchs-ease);
}

.pchs-nav__item.is-open > .pchs-nav__disclosure .pchs-icon--chevron,
.pchs-nav__item.is-open > .pchs-nav__disclosure--split .pchs-icon--chevron {
	transform: rotate(180deg);
}

/* 2rem drew a 32px target next to a 44px link. Squared up to match; it costs
   12px of nav width and buys a chevron a thumb can actually hit. */
.pchs-nav__disclosure--split {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pchs-tap);
	height: var(--pchs-tap);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--xs);
	background: none;
	color: inherit;
	cursor: pointer;
}

/* Dropdown panel
   ------------------------------------------------------------------------- */

/* Fades in rather than snapping. visibility, not display, keeps a closed panel
   out of the tab order while still letting it transition; the delay on
   visibility holds it visible until the fade out has finished. */
.pchs-nav__panel {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 10;
	min-width: 15rem;
	margin-top: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--float);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--pchs-duration) var(--pchs-ease),
		transform var(--pchs-duration) var(--pchs-ease),
		visibility 0s linear var(--pchs-duration);
}

.pchs-nav__item.is-open > .pchs-nav__panel {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.pchs-nav__sublist {
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

/* The doubled class beats app.css's `li > a:only-child` inline-flex rule, which
   otherwise shrink-wraps the row and leaves most of it dead to the pointer. */
.pchs-nav__sublist .pchs-nav__sublink {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--pchs-tap);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--xs);
	color: var(--wp--custom--color--navy-soft);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--weight--ui);
	line-height: var(--wp--custom--leading--title);
	text-decoration: none;
	text-wrap: balance;
	transition: background-color var(--pchs-duration-fast) var(--pchs-ease),
		color var(--pchs-duration-fast) var(--pchs-ease);
}

.pchs-nav__sublink:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--green-dark);
	text-decoration: none;
}

.pchs-nav__sublink[aria-current="page"] {
	background-color: var(--wp--preset--color--green-tint);
	color: var(--wp--preset--color--green-dark);
}

/* Call and CTA
   ------------------------------------------------------------------------- */

.pchs-site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex: 0 0 auto;
}

/*
 * The call cluster (owner priority 5). One unit, two columns: a phone disc
 * spanning both rows, then the toll-free link over the "Call a location"
 * button, sharing one left edge. Three type styles in ~130px became one
 * hierarchy in under 64px.
 */
.pchs-site-header__calls {
	display: grid;
	grid-template-columns: 2.5rem auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: var(--wp--preset--spacing--10);
}

.pchs-site-header__calls-icon {
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--green-tint);
	color: var(--wp--preset--color--green-dark);
	transition: background-color var(--pchs-duration-fast) var(--pchs-ease),
		color var(--pchs-duration-fast) var(--pchs-ease);
}

.pchs-site-header__calls-icon .pchs-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.pchs-site-header__calls:has(.pchs-site-header__call:hover) .pchs-site-header__calls-icon {
	background-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--base);
}

.pchs-site-header__call {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	white-space: nowrap;
}

/* The disc is part of the target: a phone icon a visitor taps should dial. */
.pchs-site-header__call::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: calc(-2.5rem - var(--wp--preset--spacing--30));
	inset-inline-end: 100%;
}

.pchs-site-header__call:hover {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.pchs-site-header__call-label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--ui);
	line-height: var(--wp--custom--leading--title);
}

/* md, not the spec's lg: at lg the bar kept only 7px of slack at 80em, less
   than Windows and Mac font rendering differ by (director's ruling). */
.pchs-site-header__call-number {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: var(--wp--custom--tracking--tight);
	transition: color var(--pchs-duration-fast) var(--pchs-ease);
}

.pchs-site-header__call:hover .pchs-site-header__call-number {
	color: var(--wp--preset--color--green);
}

/*
 * Measured 110×26 — under the 44px tap floor. Growing min-height made the
 * cluster taller than the CTA (86px vs 48px) and hung the label under the
 * button. Absolute ::after expands the hit area downward instead, so the
 * tel link above stays clear and the bar's visual rhythm does not change.
 */
.pchs-site-header__calls-more {
	position: relative;
	grid-column: 2;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	box-sizing: border-box;
	min-height: 0;
	margin-block: calc( -1 * var(--wp--preset--spacing--10) );
	padding: var(--wp--preset--spacing--10) 0;
	border: 0;
	border-radius: var(--wp--custom--radius--xxs);
	background: none;
	color: var(--wp--preset--color--green-dark);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--ui);
	line-height: var(--wp--custom--leading--title);
	white-space: nowrap;
	cursor: pointer;
}

.pchs-site-header__calls-more::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: var(--pchs-tap);
}

.pchs-site-header__calls-more:hover {
	color: var(--wp--preset--color--green);
}

.pchs-site-header__calls-more:hover .pchs-chevron {
	transform: translateY(2px);
}

/* Layout only; the look is the shared .pchs-btn component. Scoped, because
   .pchs-btn's `text-wrap: balance` resets the wrap mode and loads later. */
.pchs-site-header__actions .pchs-site-header__cta {
	white-space: nowrap;
}

/* Focus and hover
   ------------------------------------------------------------------------- */

/*
 * No focus rules here: app.css draws the one ring. Reduced motion is app.css's
 * too, which zeroes the duration tokens every transition in this file reads.
 */

.pchs-nav__link {
	transition: background-color var(--pchs-duration-fast) var(--pchs-ease),
		color var(--pchs-duration-fast) var(--pchs-ease),
		border-color var(--pchs-duration-fast) var(--pchs-ease);
}

/* Drawer mode
   ------------------------------------------------------------------------- */

@media (max-width: 79.99em) {
	.pchs-site-header__bar {
		padding: var(--pchs-header-pad-y) var(--wp--preset--spacing--40);
	}

	.pchs-site-header__toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		min-height: var(--pchs-tap);
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--xs);
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--navy);
		font-family: inherit;
		font-size: var(--wp--preset--font-size--sm);
		font-weight: var(--wp--custom--weight--bold);
		cursor: pointer;

		/* Centred on the scrolled logo, settled at rest; see the bar rule. */
		margin-block-start: calc((var(--pchs-logo-h-scrolled) - var(--pchs-tap)) / 2);
		transform: translateY(var(--pchs-header-settle));
		transition: transform var(--pchs-duration) var(--pchs-ease),
			background-color var(--pchs-duration-fast) var(--pchs-ease),
			color var(--pchs-duration-fast) var(--pchs-ease),
			border-color var(--pchs-duration-fast) var(--pchs-ease);
	}

	.pchs-site-header.is-scrolled .pchs-site-header__toggle {
		transform: none;
	}

	.pchs-site-header__toggle-icon {
		display: inline-flex;
	}

	.pchs-site-header__toggle-icon[hidden] {
		display: none;
	}

	.pchs-site-header__drawer {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		z-index: 60;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--50);
		box-sizing: border-box;
		width: min(22rem, 88vw);
		/*
		 * Clear the sticky call bar at the bottom of the viewport so the
		 * drawer's quote CTA is not trapped under it on a phone.
		 */
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50)
			calc( var(--wp--preset--spacing--80) + var(--pchs-callbar-h) + env( safe-area-inset-bottom, 0px ) );
		background-color: var(--wp--preset--color--base);
		box-shadow: var(--wp--preset--shadow--float);
		overflow-y: auto;
		overscroll-behavior: contain;

		/* visibility, not display: it keeps the panel out of the tab order while
		   still allowing the slide transition. */
		visibility: hidden;
		transform: translateX(100%);
		transition: transform var(--pchs-duration-slow) var(--pchs-ease), visibility 0s linear var(--pchs-duration-slow);
	}

	.pchs-site-header__drawer.is-open {
		visibility: visible;
		transform: translateX(0);
		transition: transform var(--pchs-duration-slow) var(--pchs-ease), visibility 0s linear 0s;
	}

	.pchs-site-header__scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 55;
		/* No translucent-overlay token exists; derived from navy-deep rather than
		   invented as a one-off hex. */
		background-color: color-mix(in srgb, var(--wp--preset--color--navy-deep) 55%, transparent);
	}

	.pchs-site-header__scrim[hidden] {
		display: none;
	}

	.pchs-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.pchs-nav__item {
		display: block;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.pchs-nav__link {
		justify-content: space-between;
		width: 100%;
		min-height: 3rem;
		padding: var(--wp--preset--spacing--30) 0;
		font-size: var(--wp--preset--font-size--md);
		text-align: start;
	}

	.pchs-nav__item--parent {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.pchs-nav__item--parent > .pchs-nav__link {
		flex: 1 1 auto;
		width: auto;
	}

	.pchs-nav__disclosure--split {
		width: 3rem;
		height: 3rem;
	}

	/* Inline accordion rather than a floating panel, and no fade: it opens in
	   flow, so it shows or goes in one frame. */
	.pchs-nav__panel {
		display: none;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
		position: static;
		flex: 1 1 100%;
		min-width: 0;
		margin: 0 0 var(--wp--preset--spacing--30);
		padding: 0 0 0 var(--wp--preset--spacing--30);
		border: 0;
		border-inline-start: 2px solid var(--wp--preset--color--green-tint);
		border-radius: 0;
		box-shadow: none;
	}

	.pchs-nav__item.is-open > .pchs-nav__panel {
		display: block;
	}

	.pchs-nav__sublist .pchs-nav__sublink {
		padding-inline: var(--wp--preset--spacing--20);
	}

	.pchs-site-header__actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--30);
	}

	/* The same cluster, boxed as a full-width card and centred in it. */
	.pchs-site-header__calls {
		justify-content: center;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--md);
	}
}

/* Scroll lock, applied to <html> while the drawer is open. */
.pchs-nav-locked,
.pchs-nav-locked body {
	overflow: hidden;
}

/* "Call a location" dialog
   -------------------------------------------------------------------------
   The header used to print three numbers side by side. The toll-free line
   stays in the bar; the two branch numbers moved behind this control, so a
   visitor chooses a location instead of decoding area codes.

   Native <dialog>, so the backdrop, the focus trap and Escape are the
   browser's. Everything below is appearance only. */

.pchs-site-header__calls-dialog {
	width: min(28rem, calc(100vw - (2 * var(--wp--preset--spacing--50))));
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--float);
}

.pchs-site-header__calls-dialog::backdrop {
	background-color: color-mix( in srgb, var(--wp--preset--color--navy-deep) 62%, transparent );
}

/* Fade in and out. display and overlay are discrete, so they are held for the
   fade out; @starting-style gives the fade in a first frame to start from. */
.pchs-site-header__calls-dialog,
.pchs-site-header__calls-dialog::backdrop {
	opacity: 0;
	transition: opacity var(--pchs-duration-slow) var(--pchs-ease),
		overlay var(--pchs-duration-slow) var(--pchs-ease) allow-discrete,
		display var(--pchs-duration-slow) var(--pchs-ease) allow-discrete;
}

.pchs-site-header__calls-dialog[open],
.pchs-site-header__calls-dialog[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.pchs-site-header__calls-dialog[open],
	.pchs-site-header__calls-dialog[open]::backdrop {
		opacity: 0;
	}
}

.pchs-site-header__calls-panel {
	position: relative;
	padding: var(--wp--preset--spacing--50);
}

.pchs-site-header__calls-title {
	margin: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--leading--title);
}

.pchs-site-header__calls-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The doubled selector is load-bearing. app.css has
 * `:where( li, h1..h6 ) > a:only-child { display: inline-flex }` to guarantee a
 * 44px tap target, and :where() contributes nothing, so that rule scores (0,1,1)
 * from `a:only-child`. A single class here scores (0,1,0) and loses: the option
 * laid itself out as one flex row, three columns wide, and the phone number
 * wrapped mid-digits. Scoping to the list makes it (0,2,0), which wins. The tap
 * target that rule exists for is kept below by min-height.
 */
.pchs-site-header__calls-list .pchs-site-header__calls-option {
	display: grid;
	box-sizing: border-box;
	gap: var(--wp--preset--spacing--10);
	min-height: var(--pchs-tap);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: background-color var(--pchs-duration-fast) var(--pchs-ease),
		border-color var(--pchs-duration-fast) var(--pchs-ease),
		color var(--pchs-duration-fast) var(--pchs-ease);
}

.pchs-site-header__calls-option:hover {
	border-color: var(--wp--preset--color--green);
	background-color: var(--wp--preset--color--green-tint);
	color: var(--wp--preset--color--green-dark);
	text-decoration: none;
}

/* Sentence case, the same label voice as "Toll-free" in the header cluster. */
.pchs-site-header__calls-where {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--ui);
	line-height: var(--wp--custom--leading--title);
}

.pchs-site-header__calls-number {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: var(--wp--custom--tracking--tight);
}

.pchs-site-header__calls-address {
	color: var(--wp--custom--color--muted-2);
	font-size: var(--wp--preset--font-size--sm);
}

.pchs-site-header__calls-close {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--pchs-tap);
	min-height: var(--pchs-tap);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--xs);
	background: none;
	color: var(--wp--custom--color--muted-2);
	cursor: pointer;
}

.pchs-site-header__calls-close:hover {
	color: var(--wp--preset--color--ink);
}