/* Copyright (c) 2026 Web Upp Limited. Licensed under the GPL-2.0-or-later; see LICENSE. */
/*
 * The header's phone and call to action (webupp/header-cta after the
 * navigation in the parent's header part, WebUpp Platform Theme 3.15.0;
 * style handle webupp-header-cta, loaded only on a page that draws it).
 * Below 1280px the phone shows its icon alone (the number stays for
 * screen readers), and below 768px the button is compact, so the row never
 * runs wider than the screen. Its colours and type are the
 * --wu-header-cta-* slots and the button's own when unset.
 */
.wu-header-cta {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--wu-header-cta-gap, 12px);
}

/* The navigation sits beside the call to action, not in the row's middle. */
.wp-block-group:has(> .wu-header-cta) > .wp-block-navigation {
	margin-left: auto;
}

.wu-header-cta__phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wu-header-cta-phone, inherit);
	font: var(--wu-header-cta-phone-font, 600 15px/1.2 var(--wu-body, inherit));
	text-decoration: none;
	white-space: nowrap;
}

.wu-header-cta__phone svg {
	flex: none;
	width: 20px;
	height: 20px;
}

.wu-header-cta__phone:hover .wu-header-cta__number {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wu-header-cta__button {
	padding: var(--wu-header-cta-pad, 10px 16px);
	font-size: var(--wu-header-cta-size, 14px);
}

.wu-header-cta__link {
	white-space: nowrap;
}

.wu-header-cta__link > svg:last-child {
	display: var(--wu-button-arrow, inline-block);
}

/* The phone's number shows from 1280px, its icon alone below (the number
   stays for screen readers), so a row of links keeps its line on a tablet. */
@media (max-width: 1279.98px) {
	.wu-header-cta__number {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.wu-header-cta__phone {
		display: inline-grid;
		place-items: center;
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 767.98px) {
	.wu-header-cta__button {
		padding: var(--wu-header-cta-pad-phone, 8px 12px);
	}
}