/*
 * RMD mobile call bar.
 *
 * Mobile only. Everything here, including the body padding that stops the bar covering the end of
 * the footer, lives inside one media query so desktop is completely untouched.
 *
 * Colours are the site's own --rmd-* tokens, so this inherits the AA contrast pass. The call button
 * is the gold CTA already used sitewide; the secondary action is a bordered ghost button so the two
 * do not read as equal weight -- phoning is the primary action.
 */

.rmd-mcallbar { display: none; }

@media (max-width: 767px) {

	/* the bar's own height plus the iPhone home indicator, so nothing is ever hidden behind it */
	body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

	.rmd-mcallbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		gap: .5rem;
		padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
		background: var(--rmd-deep-blue, #0d3c56);
		border-top: 1px solid rgba(255, 255, 255, .18);
		box-shadow: 0 -4px 16px rgba(13, 36, 48, .22);

		/* starts retracted; the script reveals it once the reader is past the first screen */
		transform: translateY(110%);
		transition: transform .22s var(--rmd-ease-out, cubic-bezier(.22, .61, .36, 1));
		/* Deliberately no compositor-layer hint here. This bar lives for the whole page, so
		   pinning a layer permanently costs memory for a transform that fires twice. */
	}
	.rmd-mcallbar.is-visible { transform: translateY(0); }

	.rmd-mcallbar__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		min-height: 48px;          /* comfortably past the 44px minimum tap target */
		padding: .5rem .75rem;
		border-radius: var(--rmd-r-sm, 6px);
		font-weight: 700;
		line-height: 1.15;
		text-decoration: none;
		text-align: center;
	}

	/* primary: the gold CTA used sitewide, dark text on gold */
	.rmd-mcallbar__btn--call {
		flex: 1 1 60%;
		background: var(--rmd-gold, #f0b429);
		color: var(--rmd-ink, #0d2430);
	}
	.rmd-mcallbar__btn--call:hover,
	.rmd-mcallbar__btn--call:focus { color: var(--rmd-ink, #0d2430); text-decoration: none; }

	/* secondary: ghost button, clearly subordinate */
	.rmd-mcallbar__btn--alt {
		flex: 1 1 40%;
		background: transparent;
		color: #fff;
		border: 1px solid rgba(255, 255, 255, .55);
		font-size: .9375rem;
	}
	.rmd-mcallbar__btn--alt:hover,
	.rmd-mcallbar__btn--alt:focus { color: #fff; border-color: #fff; text-decoration: none; }

	.rmd-mcallbar__btn:focus-visible {
		outline: 3px solid var(--rmd-turquoise, #17a2b8);
		outline-offset: 2px;
	}

	.rmd-mcallbar__icon { flex: 0 0 auto; }
	.rmd-mcallbar__label { display: flex; flex-direction: column; align-items: flex-start; }
	.rmd-mcallbar__lead {
		font-size: .6875rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .06em;
		opacity: .8;
	}
	.rmd-mcallbar__num { font-size: 1rem; font-weight: 700; }

	/* very narrow phones: drop the number to keep both buttons on one line */
	@media (max-width: 360px) {
		.rmd-mcallbar__lead { display: none; }
		.rmd-mcallbar__btn--alt { font-size: .875rem; }
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.rmd-mcallbar { transition: none; }
}