/* ──────────────────────────────────────────────────────────────────────────
   WordPress-only additions.

   theme.css and brand.css are byte-identical copies of the HubSpot sources and
   must stay that way, so anything the WordPress port needs that the HubSpot
   theme never had lives here instead. Loaded last.

   Everything below is built from brand.css tokens only — no new colours, no new
   type sizes. If something here needs a value that is not already a token, that
   is a signal the brand system needs extending, not that this file does.
   ────────────────────────────────────────────────────────────────────────── */


/* ── Long-form legal / policy prose ───────────────────────────────────────
   Used by page-privacy-policy.php, whose source marks section headings as
   <p><strong>…</strong></p>. Measure is capped at 72ch: longer than body copy
   because the content is reference material people scan, shorter than full
   width because nobody reads a 140-character line.                        */

.mdd-prose {
	max-width: 72ch;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--on-pap-2);
}

.mdd-prose > h2 {
	margin: var(--s7) 0 var(--s4);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 500;          /* never 700+ — brand house rule 1 */
	letter-spacing: -.022em;
	color: var(--on-pap-1);
}

.mdd-prose > h2:first-child { margin-top: 0; }

.mdd-prose p { margin: 0 0 var(--s4); }

/* The source's pseudo-headings. Given weight and colour so they read as
   structure, without inventing a type size the system does not have. */
.mdd-prose > p > strong:only-child {
	display: inline-block;
	font-weight: 600;
	color: var(--on-pap-1);
}

.mdd-prose ul {
	margin: 0 0 var(--s5);
	padding-left: 1.25em;
}

.mdd-prose li { margin-bottom: var(--s2); }

.mdd-prose strong { color: var(--on-pap-1); font-weight: 600; }

.mdd-prose a {
	color: var(--grn-700);     /* #4E8409 — #8AC833 fails contrast on paper */
	text-decoration: none;
	border-bottom: 1px solid var(--line-pap);
	transition: border-color var(--fast) var(--ease);
}

.mdd-prose a:hover { border-bottom-color: var(--grn-700); }


/* ── GoHighLevel form embed ───────────────────────────────────────────────
   An iframe cannot be styled from this page, so this only reserves space and
   kills the inline-element baseline gap. The form's own appearance is
   configured inside GHL's form builder — see parts/ghl-demo-form.php for the
   exact values to enter there.                                            */

.mdd-ghlform {
	width: 100%;
	min-height: 420px;
}

.mdd-ghlform iframe { display: block; width: 100%; border: 0; }


/* ── Form fallback ────────────────────────────────────────────────────────
   Shown where a form is not yet wired, so a half-built page still gives the
   visitor a way to reach us rather than an empty box.                      */

.mdd-formfallback {
	padding: var(--s6) 0;
	border-top: 1px solid var(--line-pap);
	border-bottom: 1px solid var(--line-pap);
}

.mdd-formfallback a {
	color: var(--grn-700);
	text-decoration: none;
	border-bottom: 1px solid var(--line-pap);
}

.mdd-formfallback a:hover { border-bottom-color: var(--grn-700); }

.mdd-formfallback .fine {
	margin-top: var(--s4);
	font-size: 13px;
	color: var(--on-pap-3);
}

.mdd-formfallback code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .92em;
	background: var(--paper-3);
	padding: 1px 5px;
	border: 1px solid var(--line-pap);
}


/* ── Hero / dark-band background photographs ───────────────────────────────
   REQUIRED OVERRIDE, not an enhancement. theme.css and brand.css are
   byte-identical copies of the HubSpot sources, and four of their rules call
   HubL:

     theme.css:243   .hero, .bg-dark          dealerlot.png
     theme.css:250   .hero, .bg-dark @768px   dealerlot-mobile.png
     brand.css:1045  .mdd .hero               hero-lot.jpg
     brand.css:1047  .mdd .hero @768px        hero-lot-mobile.jpg

   HubSpot processes HubL inside theme CSS. WordPress does not — a .css file is
   served as static bytes — so those four `url("{{ get_asset_url(…) }}")` values
   reach the browser literally and every hero and dark band renders with no
   photograph. Found by Cowork on first deploy, 2026-10-06.

   Reproduced verbatim below, including the gradient stops, so the port stays
   faithful. `url()` in CSS resolves against the STYLESHEET, so `../assets/…`
   is correct from css/ and needs no PHP.

   Two notes for whoever touches this next:
   - The homepage does not depend on these rules: page-home.php re-declares
     `.mdd .hero` in its own <style>, where the transpiler resolves the asset
     URL properly. The other 13 pages rely on what is here.
   - The gradient uses rgba(26,30,36,…) — that is #1A1E24, which
     .claude/rules/16-brand-system.md RETIRED in favour of #0F1216. It is
     reproduced as-is because this is a port and the live site looks like this;
     changing it would also break the diff-page.py gate. Logged as a Phase 9
     brand-audit item, not fixed here.                                      */

.hero,
.bg-dark {
	background-image:
		linear-gradient(100deg, rgba(26, 30, 36, .94) 0%, rgba(26, 30, 36, .84) 48%, rgba(26, 30, 36, .58) 100%),
		url("../assets/dealerlot.png");
	background-size: cover;
	background-position: center;
}

@media (max-width: 768px) {
	.hero,
	.bg-dark {
		background-image:
			linear-gradient(100deg, rgba(26, 30, 36, .94) 0%, rgba(26, 30, 36, .84) 48%, rgba(26, 30, 36, .58) 100%),
			url("../assets/dealerlot-mobile.png");
	}
}

/* brand.css loads after theme.css and wins for the hero on every .mdd page.
   It carries no gradient of its own — the scrim is a separate brand.css rule. */
.mdd .hero { background-image: url("../assets/hero-lot.jpg"); }

@media (max-width: 768px) {
	.mdd .hero { background-image: url("../assets/hero-lot-mobile.jpg"); }
}


/* ── WordPress admin bar ───────────────────────────────────────────────────
   `.mddx-header` is `position:fixed; top:0`, so for a logged-in user the admin
   bar sits on top of it. Anonymous visitors never see this, but it makes every
   staging review awkward. WordPress' own breakpoint for the taller bar is
   782px.                                                                   */

.admin-bar .mddx-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .mddx-header { top: 46px; }
}


/* ── Legal prose: the Terms of Service section headings ────────────────────
   The source marks each of the nine top-level sections as its own single-item
   ordered list:

       <ol start="3"><li><strong>Fees</strong></li></ol>

   That is what the HubSpot rich-text editor produced, and it is the only thing
   carrying the section numbers that the body text cross-references (2.1, 9.14).
   Rather than restructure a legal document's markup, style it so it reads as
   the heading it is.                                                        */

.mdd-prose--legal ol {
	margin: var(--s7) 0 var(--s4);
	padding-left: 1.6em;
	list-style: decimal;
}

.mdd-prose--legal ol:first-child { margin-top: 0; }

.mdd-prose--legal ol > li {
	margin-bottom: 0;
	font-size: clamp(19px, 2vw, 23px);
	font-weight: 400;              /* the <strong> inside carries the weight */
	letter-spacing: -.022em;
	color: var(--on-pap-1);
	font-variant-numeric: tabular-nums;
}

/* 500, not the browser's bold — display type never goes 700+ (house rule 1). */
.mdd-prose--legal ol > li strong {
	font-weight: 500;
	color: var(--on-pap-1);
}

/* A hairline under each section heading, which is how structure is carried
   everywhere else in the system (house rule 3: no cards). */
.mdd-prose--legal ol > li::after {
	content: "";
	display: block;
	margin-top: var(--s3);
	border-bottom: 1px solid var(--line-pap);
}

/* Sub-clauses (2.1, 2.2 …) are ordinary paragraphs whose number is part of the
   text. Tabular figures keep the leading digits aligned down the page. */
.mdd-prose--legal p { font-variant-numeric: tabular-nums; }


/* ── GoHighLevel form: reserved space and failure state ────────────────────
   The iframe is the site's only conversion point. `min-height` is set inline on
   the wrapper from the same value as the iframe height so the space is reserved
   before any script runs — no layout jump when form_embed.js resizes it, and no
   collapsed container if it never does.

   `.mdd-ghlform__fallback` is hidden until JS decides the iframe has genuinely
   failed (see parts/ghl-demo-form.php). It must never be visible on a normal
   load, however slow.                                                       */

.mdd-ghlform__fallback {
	padding: var(--s6) 0;
	border-top: 1px solid var(--line-pap);
	border-bottom: 1px solid var(--line-pap);
}

.mdd-ghlform__fallback a {
	color: var(--grn-700);   /* #4E8409 — #8AC833 fails contrast on paper */
	text-decoration: none;
	border-bottom: 1px solid var(--line-pap);
}

.mdd-ghlform__fallback a:hover { border-bottom-color: var(--grn-700); }

/* When the fallback is showing, the dead iframe should not hold 760px of space. */
.mdd-ghlform:has(.mdd-ghlform__fallback:not([hidden])) { min-height: 0 !important; }
.mdd-ghlform:has(.mdd-ghlform__fallback:not([hidden])) iframe { display: none; }


/* ── Touch tap targets ─────────────────────────────────────────────────────
   Audited on a real Chrome at 390x844 (iPhone 15/16) on 2026-10-08. The layout
   itself is sound — no horizontal overflow on any of the 15 pages, the hero
   photograph loads, no input small enough to trigger iOS auto-zoom. What the
   audit did find is that interactive elements sit below Apple's 44px minimum:

       footer nav links      20px tall, in a dense vertical list
       footer bottom bar     20px   (privacy / terms / glossary / phone)
       app store badges      34px
       footer brand / phone  30px
       header logo link      26px
       menu button           40px   (the primary mobile nav control)
       inline arrow CTAs     29px   ("See how it works →")

   The footer lists are the worst of it: 20px targets stacked a few pixels
   apart are a mis-tap waiting to happen on a phone.

   `min-height` + inline-flex rather than hand-tuned padding, because padding
   has to be computed per element from its line-height and the first attempt
   left four links at 43px and one at 20px. A min-height is correct whatever
   the content.

   Scoped to `pointer: coarse` so this is about the input device, not the
   screen: a touch laptop benefits, a narrow desktop window is untouched. The
   HubSpot original has the same small targets — this is a deliberate
   improvement on it, not a port mismatch — and being CSS-only it cannot affect
   the Phase 2 markup gate.                                                   */

@media (pointer: coarse) {

	/* Every footer link, whatever its container. The earlier `ul li a`
	   selector missed "Customer Login", which is a bare <p><a>. */
	.mddx-footer a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Links in the stacked nav lists should fill the column so the whole row
	   is tappable, not just the text. */
	.mddx-footer ul li { margin-bottom: 0; }
	.mddx-footer ul li a {
		display: flex;
		margin-block: -2px;        /* keep the list's visual rhythm */
	}

	/* Header logo: a 26px-tall image inside a 44px hit area. */
	.mddx-header__logo {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-inline: 4px;
		margin-inline: -4px;
	}

	/* The primary navigation control on a phone, and the one that only just
	   missed at 40px. */
	.mddx-burger {
		min-width: 44px;
		min-height: 44px;
	}

	/* Inline arrow links used as secondary CTAs. They read as buttons, so they
	   should be as easy to hit as one. */
	.mdd-alink,
	.cta-phone,
	.cu-phone {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Any phone link is a call-to-action on a phone, wherever it sits. Targeted
	   by href rather than by class so a new one is covered automatically.
	   `:not(p a)` keeps it out of running prose, where an inline link must not
	   stretch the line box — see the note below about WCAG 2.5.8.
	
	   `:not(.mddx-tel)` is NOT optional. brand.css hides the header phone link
	   below 1080px so the logo, Request Demo button and menu button fit; an
	   unqualified `display: inline-flex` here loads after brand.css, wins the
	   cascade, and brings it back — which pushed Request Demo off the right
	   edge of the header and hid the menu button entirely. Caught on a 390px
	   screenshot, not by the audit, because the header clips rather than
	   scrolls. Never let a tap-target rule override a deliberate display:none. */
	a[href^="tel:"]:not(.mddx-tel):not(p a):not(li a) {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* Deliberately NOT enlarged: inline links inside prose paragraphs — the two
   cross-references in the Terms of Service and the support address in the
   Privacy Policy, all 22px. WCAG 2.5.8 exempts targets "in a sentence or block
   of text" precisely because forcing them to 44px breaks the line spacing of
   the surrounding copy. Stretching the line boxes of a legal document to chase
   a lint score would make it worse to read, not easier to use. */