/**
 * File Name: floating-cta-phone.css
 * Description: Which of the floating panel's two call pills is on screen, and how the plain-text one
 *              behaves.
 *
 *              The markup in inc/floating-cta.php prints both: a tel: link and the number as text. A
 *              phone gets the link, a desktop or a laptop gets the number, and the switch is here
 *              rather than in PHP so a page cache cannot serve the wrong one.
 *
 *              The test is "(hover: none) and (pointer: coarse)" — a touch device with no mouse — and
 *              not a width. A laptop window dragged narrow is still a laptop and should still show the
 *              number, and a touchscreen laptop still reports a hover-capable pointer, so it lands on
 *              the desktop side where it belongs. Text is the default for the same reason: a browser
 *              too old to understand these queries falls back to a number that can be read and copied,
 *              which is the safer of the two to be wrong about.
 *
 *              Its own file rather than an addition to floating-cta.css: that one is a source for the
 *              generated main.css and another developer owns the rebuild. See the enqueue in
 *              inc/floating-cta.php.
 * Developer: AG-0105
 * Created Date: 2026-09-17
 * Last Modified: 2026-09-17
 */

/* Desktop and laptop: the number, as text. */
.hmfab__item--call-link {
	display: none;
}

.hmfab__item--call-text {
	display: list-item;
}

/* A phone or a tablet: the tel: link, exactly as it was. */
@media (hover: none) and (pointer: coarse) {
	.hmfab__item--call-link {
		display: list-item;
	}

	.hmfab__item--call-text {
		display: none;
	}
}

/* The collapse and the footer retreat hide the pills by attribute, and that still wins. */
.hmfab__item--call-link[hidden],
.hmfab__item--call-text[hidden] {
	display: none;
}

/*
 * The text pill keeps the pill, loses the button.
 *
 * .hmfab__btn hands every pill a pointer cursor and a lift on hover, both of which promise a press that
 * cannot happen here. Selecting the number is the one interaction left, so it is made selectable
 * explicitly in case the theme ever turns selection off higher up.
 */
.hmfab__btn--static {
	cursor: default;
	-webkit-user-select: text;
	user-select: text;
}

.hmfab__btn--static:hover,
.hmfab__btn--static:focus-visible {
	transform: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}