/*
 * Floating call-to-action stack — HAND-WRITTEN. Markup: inc/floating-cta.php.
 *
 * Everything is namespaced .ttf-cta* so this file shares no selectors with the
 * theme, the generated site.css, or any plugin, and needs no !important.
 */

.ttf-cta {
	position: fixed;
	right: 1rem;

	/*
	 * env() clears the iPhone home indicator and Safari's bottom toolbar. The
	 * 0px fallback is required — `env()` with no fallback makes the whole
	 * calc() invalid on browsers that do not support it.
	 */
	bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));

	/*
	 * Measured z-index landscape on this site:
	 *     10       sticky header
	 *     1000     .myHeader-padding (highest of any content element)
	 *     100000   mobile nav overlay when open, fixed and fully opaque
	 *     999999   GTranslate switcher
	 *
	 * 9000 clears all page content but stays under the nav overlay, so the
	 * buttons tuck behind the open menu instead of floating on top of it.
	 */
	z-index: 9000;

	/*
	 * Side by side, matching the reference screenshot, which puts its two
	 * buttons in a single row spanning 360px of a 390px viewport.
	 *
	 * This only fits because the booking button has no icon. Measured on a
	 * 390px phone against 358px of usable width between the gutters:
	 *
	 *     both buttons with icons      374px   does not fit
	 *     WhatsApp glyph only, 19px    374px   does not fit (blue gets squeezed
	 *                                          below its natural width)
	 *     WhatsApp glyph only, 16px    340px   fits, and both buttons keep
	 *                                          their natural width
	 *
	 * An icon costs 32px (24px glyph + 8px gap), so two of them are 64px — very
	 * nearly the whole overflow.
	 */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.6rem;
}

.ttf-cta__btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;

	/* WCAG 2.5.8 target size. Padding alone would leave it at 43px. */
	min-height: 44px;
	padding: 0.7rem 1.15rem;
	border-radius: 999px;

	color: #fff;
	text-decoration: none;

	/*
	 * 18px is still below 18.66px, so the WCAG AA Large allowance does not
	 * apply and BOTH colours must clear the full 4.5:1 for normal text. They do
	 * — see the palette note below. That is the whole reason the green here is
	 * #1A8151 rather than the #21A366 sampled from the screenshot.
	 */
	font-size: 1.125rem; /* 18px */
	font-weight: 700;
	line-height: 1.1;

	box-shadow: 0 4px 14px rgb(0 0 0 / 28%);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/*
 * Colours follow the reference screenshot rather than the vendors' brand
 * palettes, with one deliberate departure. Measured against white text:
 *
 *   #2540EF blue    6.87:1  — the screenshot's blue, unchanged, passes AA
 *   #1A8151 green   4.88:1  — the screenshot's #21A366 darkened one notch
 *   #21A366 green   3.23:1  — what the screenshot actually uses; fine at
 *                             19px/700 under AA Large, but the labels are 16px
 *                             now, so it would fail and add an axe finding
 *   #25D366 green   1.98:1  — WhatsApp's own brand green, never usable here:
 *                             it fails even the 3:1 non-text boundary check
 *
 * To go back to the exact screenshot green, put #21A366 below AND raise
 * font-size to 1.1875rem — the two are a pair, and changing only one of them
 * is what breaks it.
 */
.ttf-cta__btn--book {
	background: #2540ef;
}

.ttf-cta__btn--wa {
	background: #1a8151;
}

/* Hover/focus go darker, never lighter, so contrast only ever improves. */
.ttf-cta__btn--book:hover,
.ttf-cta__btn--book:focus-visible {
	background: #1c31c4;
	color: #fff;
}

.ttf-cta__btn--wa:hover,
.ttf-cta__btn--wa:focus-visible {
	background: #146540; /* 7.08:1 */
	color: #fff;
}

/*
 * ── Narrow windows: fill the width instead of hugging the corner ───────────
 *
 * Right-anchored at its natural width, the row leaves dead space beside it that
 * is very visible once the window is narrow — at 520px the pills are 340px and
 * strand 164px of empty page to their left.
 *
 * Below 782px the row therefore spans gutter to gutter and the two buttons grow
 * to share it. 782px is not arbitrary: it is where this site switches to the
 * hamburger nav, so the bar appears exactly when the site is in its mobile
 * layout, and the desktop corner control is untouched.
 *
 * `flex: 1 1 auto` rather than `flex: 1`. With `flex: 1` both buttons would be
 * forced to equal width, and "Book a trial lesson" is much longer than
 * "WhatsApp" — the blue label wrapped to two lines at every width tested.
 * Growing from their natural widths keeps both on one line.
 */
@media (max-width: 781px) {
	.ttf-cta {
		left: 1rem;
		right: 1rem;
	}

	.ttf-cta__btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/*
 * Very narrow phones. Trimming the horizontal padding and the gap buys back
 * ~20px, which is what keeps both labels on one line down to 375px. Vertical
 * padding and min-height are untouched, so the 44px tap target survives.
 *
 * At 360px and below the blue label still wraps to two lines: at 18px it needs
 * 186px and only 176px exists once WhatsApp has taken its share. That is a
 * genuine limit of holding an 18px floor with both labels visible, not an
 * oversight — the button's height is unchanged by the wrap, so it costs
 * nothing but a slightly taller line of text.
 */
@media (max-width: 399px) {
	.ttf-cta {
		gap: 0.45rem;
	}

	.ttf-cta__btn {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}

.ttf-cta__btn:hover,
.ttf-cta__btn:focus-visible {
	transform: translateY(-2px);
}

.ttf-cta__btn:focus-visible {
	outline: 3px solid #10233f;
	outline-offset: 3px;
}

.ttf-cta__icon {
	width: 24px;
	height: 24px;
	flex: none; /* the flex parent would otherwise squash the glyph */
	fill: currentColor;
}

/*
 * WordPress puts .has-modal-open on <html> while the mobile nav overlay is up.
 * The overlay is opaque and sits above this anyway, so this is not about
 * appearance: display:none takes the links out of the tab order, so they cannot
 * be reached by keyboard from inside the menu's focus trap.
 */
html.has-modal-open .ttf-cta {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ttf-cta__btn {
		transition: none;
	}

	.ttf-cta__btn:hover,
	.ttf-cta__btn:focus-visible {
		transform: none;
	}
}