/*
 * Calling the clinic from any screen: the call bar on phones and tablets, and the header's
 * number on laptops and desktops.
 *
 * The bar is below the theme's 992px hamburger breakpoint only. The header number was from
 * 1680px only until 2026-10-08: the child theme hides `.header-btn-phone` above 769px, and on
 * 2026-09-29 the number wrapped the "Your First Visit" button under the logo at 1440px and
 * 1536px. Calls growth plan A7 brings it down to 1200px by tightening what sits beside it
 * between 1200px and 1679px, measured on a build at every width from 1200 to 1680: the gaps
 * either side of the number, the button's side padding, and from 1400px the menu links' side
 * padding back to the 1366px value the theme already uses. No word is added or removed.
 * Below 1200px the theme shows the number as a bare icon and the menu fills the row, so it
 * stays off there; the number is on the page 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: 1200px) {
	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;
	}
}

@media screen and (min-width: 1200px) and (max-width: 1679px) {
	body #header-wrap.header-layout1 .header-navigation {
		margin-right: 8px;
	}

	body #header-wrap .header-btn-phone a {
		padding: 0 8px;
		margin-right: 8px;
	}

	/* The header row's -15px right margin puts the button's last 15px past the viewport,
	   so the right padding carries those 15px to keep the words 14px off the edge. */
	body #header-wrap .header-btn-nav .h-btn-nav {
		padding-left: 14px;
		padding-right: 29px;
		letter-spacing: 0.05em;
	}
}

/* From 1300px the theme's logo grows from 150px to 223px; up to 1349px the menu links give
   back the room, or the menu breaks onto two rows. */
@media screen and (min-width: 1300px) and (max-width: 1349px) {
	body #header-wrap #primary-menu > li > a {
		padding-left: 5px;
		padding-right: 5px;
	}
}

@media screen and (min-width: 1400px) and (max-width: 1679px) {
	body #header-wrap #primary-menu > li > a {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.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;
	}
}