/* =========================================================================
   Responsive corrections that belong to the theme, not to the exported design.

   Loads after overrides.css and nav.css. Everything here is either a fix for
   something measured as broken, or a guard so it cannot come back.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Nothing may make the page scroll sideways
   ---------------------------------------------------------------------- */

/*
 * clip, not hidden. `overflow-x: hidden` turns the root into a scroll container
 * and the sticky header stops sticking; `clip` cuts off the sideways overflow
 * without creating one. It is what keeps the closed menu panel -- parked just
 * off the right edge so it can slide in -- from making the page scrollable.
 */
html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
}

/*
 * Media never exceeds what holds it, and never keeps the pixel height
 * WordPress writes into the markup.
 *
 * WordPress adds `width="1280" height="720"` to every image it renders. When
 * both are specified the browser uses them literally and ignores the
 * `aspect-ratio` the design sets — so the FAQ photograph, drawn 16:11 and
 * cropped in the design, came out 720px tall with half of it empty sky. With
 * the height back to auto the ratio applies and `object-fit: cover` crops it as
 * drawn. Anywhere the theme genuinely wants a fixed height it says so on a
 * class, which is more specific than this and still wins.
 */
img,
video,
canvas,
svg:not([viewBox]) {
	max-width: 100%;
}

img {
	height: auto;
}

/* -------------------------------------------------------------------------
   Embeds: maps, videos, the GoHighLevel forms
   ---------------------------------------------------------------------- */

/*
 * The forms arrive from GoHighLevel with a width baked into the markup, so on a
 * 320px screen a 304px form sat inside a 280px column and pushed the page
 * sideways. Width is taken back here, for every embed on the site.
 */
iframe {
	max-width: 100%;
	border: 0;
}

.embed,
.lead-embed,
.form-embed {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.embed iframe,
.lead-embed iframe,
.form-embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
}

/*
 * Show the GoHighLevel form.
 *
 * Their form_embed.js hides the frame on arrival (`data-initial-iframe-hidden`)
 * and reveals it once the form reports itself ready. The frame loads (200) and
 * the resizer works out its height, but the reveal never comes, so the frame
 * sits at `left: -9999px` with `opacity: 0` and the newsletter box is empty
 * with nothing in the console to say why.
 *
 * These are the only `!important` rules in the theme, and they are here because
 * the declarations being overridden are inline styles written by a vendor
 * script — there is no other way to reach them. The height the resizer sets is
 * left alone; only the hiding is undone.
 */
.lead-embed iframe,
.form-embed iframe,
.embed iframe {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	position: static !important;
	left: auto !important;
}

/* With the frame back in the flow, its box has a height again. */
.lead-embed,
.form-embed {
	min-height: 260px;
}

/* A map keeps its shape as the screen narrows rather than collapsing to a
   letterbox. */
.embed.map {
	aspect-ratio: 16 / 9;
	min-height: 300px;
}

.embed.map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 640px) {
	.embed.map {
		aspect-ratio: 4 / 3;
		min-height: 260px;
	}
}

/* -------------------------------------------------------------------------
   The FAQ
   ---------------------------------------------------------------------- */

/*
 * The two columns are different heights — the heading, photograph and buttons
 * come to about 640px against roughly 390px of questions — and aligned to the
 * top that left a tall empty gap under the last question. Centred against each
 * other the leftover space is shared, which reads as a considered layout rather
 * than a column that ran out. The photograph is cropped a little flatter as
 * well, which brings the two closer to begin with.
 */
@media (min-width: 981px) {
	.faq-grid {
		align-items: center;
	}
}

.faq-media img {
	aspect-ratio: 16 / 9;
}

/*
 * Opening and closing is done in CSS, by animating the row from nothing to its
 * natural size. It used to be done by measuring the panel in JavaScript and
 * writing a pixel height onto the element — which put a style attribute on the
 * page at runtime, and left a measured height behind when the screen changed
 * width underneath it. A grid row needs no measuring and is correct at every
 * width by construction.
 */
.faq-a {
	display: grid;
	grid-template-rows: 0fr;
	height: auto;
	overflow: hidden;
	transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1);
}

.faq-item.open > .faq-a {
	grid-template-rows: 1fr;
}

.faq-a > .faq-a-in {
	min-height: 0;
	overflow: hidden;
	transition: padding-top .45s cubic-bezier(.16, 1, .3, 1),
	            padding-bottom .45s cubic-bezier(.16, 1, .3, 1);
}

/*
 * A closed answer collapses its own padding as well as its row.
 *
 * `min-height: 0` removes the item's automatic minimum, but padding sits
 * outside that minimum, so the answer's 21px bottom padding held the row open
 * at 21px and the first line of every answer showed through under its
 * question. The padding belongs to the open state.
 */
.faq-item:not(.open) > .faq-a > .faq-a-in {
	padding-top: 0;
	padding-bottom: 0;
}

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

/* The question is a touch target before it is a heading. */
.faq-q {
	min-height: 48px;
	gap: 12px;
}

@media (max-width: 640px) {
	.faq-q {
		padding: 16px 14px;
		font-size: .96rem;
		align-items: flex-start;
	}

	.faq-q .fx {
		margin-top: 2px;
	}

	.faq-a-in {
		padding-left: 14px;
		padding-right: 14px;
	}
}

@media (max-width: 380px) {
	.faq-q {
		padding: 14px 12px;
		font-size: .9rem;
	}

	/* The number is decoration, and at this width it is decoration that costs
	   a third of the line. */
	.faq-q .faq-n {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Box sections on small screens
   ---------------------------------------------------------------------- */

/*
 * Every card grid on the site collapses to one or two columns on a phone. The
 * cards are stretched to a common height per row, so a card with two lines of
 * text does not sit shorter than the one beside it, and the gaps are the same
 * everywhere rather than whatever each section happened to set.
 */
@media (max-width: 900px) {

	.abt-grid,
	.area-sub-grid,
	.duo-grid,
	.chips,
	.stats,
	.tr-wrap {
		align-items: stretch;
	}

	.abt-card,
	.alm-card,
	.duo-card,
	.chip,
	.stat,
	.tr-item {
		height: 100%;
		min-width: 0;
	}

	/* A card that holds a picture keeps the picture's shape steady, so a row of
	   cards does not step up and down. */
	.abt-card .card-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media (max-width: 640px) {

	.abt-grid,
	.area-sub-grid,
	.duo-grid,
	.chips,
	.stats {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.abt-card,
	.alm-card,
	.duo-card,
	.chip,
	.stat {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Long unbroken strings -- an address, a licence number, a URL -- must wrap
	   rather than widen the card. */
	.abt-card,
	.alm-card,
	.duo-card,
	.stat,
	.tr-item {
		overflow-wrap: anywhere;
	}
}

/* -------------------------------------------------------------------------
   Section rhythm on small screens
   ---------------------------------------------------------------------- */

@media (max-width: 640px) {
	.section {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	.wrap {
		padding-left: 16px;
		padding-right: 16px;
	}

	.section-head {
		margin-bottom: 26px;
	}

	/* Headings set for a 1440px canvas are too large to sit on a phone. */
	.section-head h2 {
		font-size: clamp(1.5rem, 7vw, 2rem);
		line-height: 1.18;
	}
}

@media (max-width: 380px) {
	.wrap {
		padding-left: 13px;
		padding-right: 13px;
	}
}

/* -------------------------------------------------------------------------
   Tables and code inside article copy
   ---------------------------------------------------------------------- */

/* Wide content scrolls inside its own box instead of taking the page with it. */
.art-body table,
.rich table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
}

.art-body pre,
.rich pre {
	max-width: 100%;
	overflow-x: auto;
}

/* -------------------------------------------------------------------------
   The footer on small screens
   ---------------------------------------------------------------------- */

/*
 * The four footer columns are `1.3fr 1fr 1fr 1.2fr`, and fr units do not stop a
 * column from being wider than its share when something inside refuses to wrap:
 * at 320px the columns and the legal row reached 407px and 660px, taking the
 * page sideways with them. They stack instead, and every part of them is
 * allowed to wrap.
 */
@media (max-width: 900px) {
	.ftr {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px;
	}
}

@media (max-width: 600px) {
	.ftr {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}
}

.ftr > * {
	min-width: 0;
}

.ftr-meta,
.legal,
.legal li,
.legal a {
	overflow-wrap: anywhere;
}

@media (max-width: 640px) {
	.legal {
		margin-top: 36px;
		gap: 12px 18px;
		justify-content: flex-start;
	}

	.legal ul {
		gap: 14px;
	}

	/* The floating quote capsule sits bottom-left at these widths, so the legal
	   row no longer needs to keep clear of it on the right. */
	.legal {
		padding-right: 0;
		padding-bottom: 64px;
	}
}

/* -------------------------------------------------------------------------
   The newsletter band
   ---------------------------------------------------------------------- */

/*
 * Space between the heading and the form.
 *
 * The band's heading carries `u-mb-0` because the design put a slim inline
 * form directly beneath it. The real GoHighLevel form is a panel, and sitting
 * flush under the heading it read as though it had come loose from the section
 * above. It gets the same gap every other band puts under its heading.
 */
.lead-band .section-head {
	margin-bottom: 34px;
}

.lead-band .lead-embed {
	margin-top: 0;
}

@media (max-width: 640px) {
	.lead-band .section-head {
		margin-bottom: 24px;
	}
}

/* -------------------------------------------------------------------------
   The contact form's panel
   ---------------------------------------------------------------------- */

/*
 * The white card is as wide as the form standing in it.
 *
 * The frame is full width, but GoHighLevel lays the form itself out to a fixed
 * measure and centres it, so the card had a broad band of empty white down each
 * side and read as a mistake. The map keeps the full width -- more map is
 * useful, more white is not.
 */
.embed:not(.map) {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 800px) {
	.embed:not(.map) {
		max-width: 100%;
	}
}

/* -------------------------------------------------------------------------
   The article contents rail
   ---------------------------------------------------------------------- */

/* A shade larger: the rail is something a reader scans down the side of a long
   article, and it was set small enough to be hard work. */
.toc a {
	font-size: .84rem;
	line-height: 1.45;
	padding-top: 7px;
	padding-bottom: 7px;
}

.toc-head,
.rail-label {
	font-size: .68rem;
}

/* The recent-posts list is set to the same size as the contents above it: two
   lists in one rail reading at two different sizes looked like an oversight. */
.rail-recents a,
.rail-recents .here {
	font-size: .84rem;
	line-height: 1.45;
}

/* -------------------------------------------------------------------------
   The banner's framed video
   ---------------------------------------------------------------------- */

/*
 * The frame holds the shape, not the video.
 *
 * `aspect-ratio` was set on the <video>. A video is a replaced element, and
 * with `preload="metadata"` it has no intrinsic size until its metadata
 * arrives — Firefox then gives the box no height at all and the panel
 * collapsed to a one-pixel line, while Chrome sized it from the ratio and
 * looked perfectly fine. A plain <div> has no such ambiguity, so the frame
 * carries the ratio and the video is stretched to fill it.
 */
.media-frame {
	position: relative;
}

/*
 * The shape is held by a spacer, not by `aspect-ratio`.
 *
 * A height that `aspect-ratio` works out does not always count towards the
 * height of the grid row holding it — Firefox sized the banner from the copy
 * column alone, so the row stayed short and the panel was cut off halfway by
 * the licence strip below. Padding is resolved against the width in every
 * engine and always contributes real height, so the row grows to fit.
 *
 * 75% is 4:3. The frame already has `position: relative` for its gradient.
 */
.media-frame::before {
	content: "";
	display: block;
	padding-top: 75%;
}

.media-frame video,
.media-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/* Below the split the panel stands alone and can be a little squarer. */
@media (max-width: 900px) {
	.media-frame::before {
		padding-top: 62.5%;   /* 16:10 */
	}
}