/**
 * pchs/sticky-call-bar — front-end styles.
 *
 * position: sticky, not fixed. Sticky keeps the bar in normal flow, so it
 * reserves its own space at the bottom of the document and never sits on top of
 * the last thing on the page.
 *
 * One row, var(--pchs-callbar-h) tall plus the iOS home-indicator inset, at
 * every width it shows. Phones (<=600px) get "Call" (a menu that opens upward)
 * beside the quote button; 601px up to the nav breakpoint shows the three
 * numbers inline. The buttons are the shared .pchs-btn component.
 */

.pchs-sticky-call-bar {
	position: sticky;
	bottom: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	box-sizing: border-box;
	height: calc(var(--pchs-callbar-h) + env(safe-area-inset-bottom, 0px));
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	padding-bottom: calc(var(--wp--preset--spacing--20) + env(safe-area-inset-bottom, 0px));
	background-color: var(--wp--preset--color--green-dark);
	color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--float);
	transition: transform var(--pchs-duration-slow) var(--pchs-ease);
}

/*
 * Out of the way while someone types. On a phone the keyboard already halves
 * the viewport, and a 64px bar over the field being filled in is the one
 * thing guaranteed to cover it.
 *
 * Radios and checkboxes do not raise a keyboard (the service chips and day
 * tiles are radios). Hiding the bar for those left the Call / Quote row gone
 * after a single tap on "Roofing" until something else was focused.
 */
body:has(
	:is(
		input[type="text"],
		input[type="tel"],
		input[type="email"],
		input[type="number"],
		input[type="search"],
		input[type="url"],
		input[type="password"],
		input[type="date"],
		input:not([type]),
		select,
		textarea
	):focus
) .pchs-sticky-call-bar {
	transform: translateY(100%);
	pointer-events: none;
}

/* Inline numbers (601px up to the nav breakpoint)
   ------------------------------------------------------------------------- */

.pchs-sticky-call-bar__phones {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--10);
}

.pchs-sticky-call-bar__phone {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
	box-sizing: border-box;
	min-height: var(--pchs-btn-h);
	padding: 0 var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--xs);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--pchs-duration-fast) var(--pchs-ease);
}

.pchs-sticky-call-bar__phone:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.pchs-sticky-call-bar__phone-label {
	color: var(--wp--preset--color--green-tint);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--weight--ui);
	line-height: var(--wp--custom--leading--none);
}

.pchs-sticky-call-bar__phone-number {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--leading--none);
	letter-spacing: var(--wp--custom--tracking--snug);
}

/* Scoped to the bar: .pchs-btn's `text-wrap: balance` resets the wrap mode and
   loads after this file, so a single class here loses to it. */
.pchs-sticky-call-bar .pchs-sticky-call-bar__cta {
	white-space: nowrap;
}

/* Phone "Call" menu (<=600px)
   ------------------------------------------------------------------------- */

.pchs-sticky-call-bar__calls {
	display: none;
	position: relative;
}

/* A button, so centred rather than the disclosure's spread-out summary. */
.pchs-sticky-call-bar__calls > .pchs-disclosure__summary {
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--pchs-btn-h);
}

/* The menu opens upward, so the chevron points up at rest and down when open. */
.pchs-sticky-call-bar__calls > summary .pchs-chevron {
	transform: rotate(180deg);
}

.pchs-sticky-call-bar__calls[open] > summary .pchs-chevron {
	transform: none;
}

.pchs-sticky-call-bar__calls > summary .pchs-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.pchs-sticky-call-bar__menu {
	position: absolute;
	inset-inline-start: 0;
	bottom: calc(100% + var(--wp--preset--spacing--20));
	box-sizing: border-box;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--20);
	list-style: none;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--float);
}

/* Doubled class: beats app.css's `li > a:only-child` inline-flex rule. */
.pchs-sticky-call-bar__menu .pchs-sticky-call-bar__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	box-sizing: border-box;
	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--preset--color--navy);
	text-decoration: none;
	transition: background-color var(--pchs-duration-fast) var(--pchs-ease);
}

.pchs-sticky-call-bar__menu li + li {
	border-top: 1px solid var(--wp--preset--color--border);
}

.pchs-sticky-call-bar__option:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.pchs-sticky-call-bar__option-label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--ui);
}

.pchs-sticky-call-bar__option-number {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--weight--heavy);
	letter-spacing: var(--wp--custom--tracking--snug);
	white-space: nowrap;
}

/*
 * Focus comes from app.css. .pchs-on-dark sets the ring for this green-dark
 * ground; the menu panel is white, where the default ring applies again.
 */
.pchs-sticky-call-bar__menu {
	--pchs-focus-color: var(--wp--preset--color--navy-deep);
	--pchs-focus-halo-color: var(--wp--preset--color--base);
}

/* 601 to 767px: three numbers and the quote button only fit one row with the
   numbers a step smaller and the side padding halved. */
@media (max-width: 47.99em) {
	.pchs-sticky-call-bar__phone {
		padding-inline: var(--wp--preset--spacing--20);
	}

	.pchs-sticky-call-bar__phone-number {
		font-size: var(--wp--preset--font-size--sm);
	}
}

@media (max-width: 37.5em) {
	.pchs-sticky-call-bar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--20);
	}

	.pchs-sticky-call-bar--calls-only {
		grid-template-columns: 1fr;
	}

	.pchs-sticky-call-bar__calls {
		display: block;
	}

	.pchs-sticky-call-bar__phones {
		display: none;
	}

	.pchs-sticky-call-bar .pchs-sticky-call-bar__cta {
		padding-inline: var(--wp--preset--spacing--20);
	}
}

/*
 * Gone from the nav breakpoint (80em) up, where the header shows the same
 * toll-free link and the same "Get a Free Quote" button permanently. Below it
 * the header's copies sit inside the closed menu, so this bar is the only way
 * to call without opening it. site-header/style.css owns the breakpoint.
 */
@media (min-width: 80em) {
	.pchs-sticky-call-bar {
		display: none;
	}
}

/*
 * While the mobile drawer is open, html gets .pchs-nav-locked. The call bar
 * sits above the drawer (z-index) and traps the quote CTA under it. Match the
 * text-focus hide: slide it off and drop hit-testing, rather than leaving an
 * invisible sticky strip over the drawer's bottom button.
 */
html.pchs-nav-locked .pchs-sticky-call-bar {
	transform: translateY(100%);
	pointer-events: none;
	visibility: hidden;
}