/*
	Site overrides for HTML5 UP Forty. Anything that changes the template goes
	here, using values main.css already uses. main.css has one edit only: its
	Google Fonts @import was removed for the self-hosted fonts.css.
*/

/* Deal tiles: three tiles instead of Forty's six. The first (Botox) spans the
   full row and the other two share the next row. Forty's own grid would leave
   a gap after the third tile. Below 481px main.css already stacks every tile
   at 100%. */
@media screen and (min-width: 481px) {
	.tiles.featured-first article:first-child {
		width: 100% !important;
	}

	.tiles.featured-first article:nth-child(n + 2) {
		width: 50% !important;
	}
}

/* Section headings: main.css sizes header.major to max-content, so a long
   heading runs off the side of a phone screen. Cap it at the column width so
   it wraps; the underline still matches the text. */
header.major {
	max-width: 100%;
}

/* Button rows: main.css lays ul.actions out in a single row at every width.
   On phones, stack them with the spacing main.css uses for ul.actions.stacked. */
@media screen and (max-width: 480px) {
	ul.actions {
		flex-direction: column;
		margin-left: 0;
	}

	ul.actions li {
		padding: 1.3em 0 0 0;
	}

	ul.actions li:first-child {
		padding-top: 0;
	}
}

/* Spotlight photos carry width and height attributes so the browser reserves
   their space before they load (no layout shift). main.css sets only their
   width, so restore the natural height. */
.spotlights > section > .image img {
	height: auto;
}

/* ------------------------------------------------------------------------
   Deal page hero (DealHero.astro): offer text on a light panel beside a
   clinic photo, 55/45. On phones, text first, then a short photo crop.
   Charcoal on cream for readability; Forty's navy for the primary button.
   ------------------------------------------------------------------------ */
.deal-hero {
	display: grid;
	grid-template-columns: 55fr 45fr;
	background-color: #f7f3ec;
	color: #26262b;
}

.deal-hero-text {
	align-self: center;
	padding: 3em 3em 2.5em max(3em, calc((100vw - 70em) / 2));
}

.deal-hero h1 {
	color: #26262b;
	font-size: 2em;
	line-height: 1.25;
	margin-bottom: 0.5em;
}

.deal-hero p {
	margin-bottom: 1em;
}

/* main.css colors strong, b and headings white for its dark theme. */
.deal-hero strong,
.deal-hero b {
	color: inherit;
}

.deal-hero a:not(.button) {
	color: #26262b;
	border-bottom-color: #26262b;
}

/* Keep phone numbers on one line. */
a[href^="tel:"] {
	white-space: nowrap;
}

.deal-hero-eyebrow {
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: 0.75em !important;
}

.deal-hero-price {
	font-size: 3.5em;
	font-weight: 600;
	line-height: 1;
	margin-bottom: 0.3em !important;
}

	.deal-hero-price span {
		font-size: 0.3em;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

.deal-hero-terms {
	font-size: 0.9em;
}

.deal-hero-note {
	font-size: 0.9em;
}

.deal-hero .button.primary {
	background-color: #242943;
	color: #ffffff;
}

	.deal-hero .button.primary:hover {
		background-color: #2e3450;
	}

.deal-hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 36em;
	object-fit: cover;
	object-position: top center;
}

@media screen and (max-width: 736px) {
	.deal-hero {
		grid-template-columns: 1fr;
	}

	.deal-hero-text {
		padding: 2em 1.5em 1.5em 1.5em;
	}

	.deal-hero h1 {
		font-size: 1.6em;
	}

	.deal-hero-price {
		font-size: 3em;
	}

	.deal-hero-image img {
		height: auto;
		max-height: none;
	}
}

/* ------------------------------------------------------------------------
   Sticky booking bar (StickyBookBar.astro), phones only. Hidden until the
   hero's booking button has scrolled out of view.
   ------------------------------------------------------------------------ */
.sticky-book {
	display: none;
}

@media screen and (max-width: 736px) {
	.sticky-book {
		display: flex;
		gap: 0.75em;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		padding: 0.75em 1em;
		background-color: #242943;
		box-shadow: 0 -0.25em 0.75em rgba(0, 0, 0, 0.25);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.2s ease, visibility 0.2s;
	}

		.sticky-book.is-visible {
			transform: none;
			visibility: visible;
		}

		.sticky-book .button.primary {
			flex: 1;
		}

	body:has(.sticky-book) #wrapper {
		padding-bottom: 4.5em;
	}
}

/* ------------------------------------------------------------------------
   Accessibility: main.css sets footer text at 20% opacity, well under the
   WCAG 4.5:1 contrast minimum, and its links are small tap targets.
   ------------------------------------------------------------------------ */
#footer .copyright li {
	color: rgba(244, 244, 255, 0.7);
}

	#footer .copyright li a {
		display: inline-block;
		padding: 0.5em 0;
	}

blockquote cite {
	display: block;
	margin-top: 0.5em;
	font-style: normal;
	font-weight: 600;
}