/*
 * Calling the clinic from any screen: the call bar on phones and tablets, and the header's
 * number on wide desktops.
 *
 * Reasoning in includes/call-bar.php. The bar is below the theme's 992px hamburger
 * breakpoint only. The header number is from 1680px only: the child theme hides
 * `.header-btn-phone` above 769px, and measured on staging on 2026-09-29 the number wrapped
 * the "Your First Visit" button under the logo at 1440px and 1536px, and fitted at 1680px
 * and 1920px. Below 1680px the number is on the page itself and in the footer.
 */

/* Where the call bar's Enquire lands: clear of the sticky header at every width. */
#enquire {
	scroll-margin-top: 120px;
}

@media screen and (min-width: 1680px) {
	body #header-wrap .header-btn-phone {
		display: flex;
		align-items: center;
		flex: none;
	}

	body #header-wrap .header-btn-phone a {
		padding: 0 16px;
		margin-right: 16px;
		border: 0;
		font-size: 16px;
		font-weight: 600;
		white-space: nowrap;
		color: #304495;
	}

	body #header-wrap .header-btn-phone a:hover,
	body #header-wrap .header-btn-phone a:focus {
		background: transparent;
		color: #1c3e6f;
		text-decoration: underline;
	}
}

.anr-call-bar {
	display: none;
}

@media screen and (max-width: 991px) {
	.anr-call-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		gap: 8px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		background: #ffffff;
		box-shadow: 0 -2px 12px rgba(7, 10, 34, 0.12);
	}

	.anr-call-bar__btn {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		padding: 0 12px;
		border-radius: 6px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
	}

	.anr-call-bar__btn--call,
	.anr-call-bar__btn--call:visited {
		background: #304495;
		color: #ffffff;
	}

	.anr-call-bar__btn--call:hover,
	.anr-call-bar__btn--call:focus {
		background: #1c3e6f;
		color: #ffffff;
	}

	/* Green is a surface, never ink (assets/accessible-green.css). */
	.anr-call-bar__btn--enquire,
	.anr-call-bar__btn--enquire:visited,
	.anr-call-bar__btn--enquire:hover,
	.anr-call-bar__btn--enquire:focus {
		background: #75c043;
		color: #070a22;
	}

	.anr-call-bar__btn:focus-visible {
		outline: 3px solid #070a22;
		outline-offset: 2px;
	}

	.anr-call-bar__icon {
		flex: none;
	}

	/* Room under the footer's last line, so the bar never covers it. */
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	/* The theme's back-to-top button sits 12px from the bottom here; lift it clear. */
	.ct-scroll-top {
		bottom: calc(84px + env(safe-area-inset-bottom));
	}
}

/* Narrowest phones: the number no longer fits beside Enquire, so the label is just "Call". */
@media screen and (max-width: 359px) {
	.anr-call-bar__btn--call span {
		font-size: 0;
	}

	.anr-call-bar__btn--call span::before {
		content: "Call";
		font-size: 16px;
	}
}