/* ============================================================================
   site-a11y.css — website-only contrast + conversion overrides

   Loaded AFTER _ds/.../styles.css on every page, deliberately kept OUTSIDE the
   `_ds/` folder so a future design-system re-sync can't silently drop it.
   Nothing here touches the iOS app.

   Added 4 Aug 2026 after a contrast audit measured 26 of 88 text elements
   below WCAG AA. Two tokens caused about twenty of them.
   ========================================================================== */

:root,
:root[data-theme="light"] {
  /* was #71757C — 3.95:1 on --mm-surface-alt, i.e. most body copy on the site */
  --mm-secondary: #63676E;   /* now 4.85:1 on surface-alt, 5.68:1 on white  */

  /* was #9A968B — 2.52:1 on --mm-surface-alt; used for the legal disclaimer,
     the calculator pace line and the footer, so it was hint-grey doing real work */
  --mm-tertiary:  #6E6A60;   /* now 4.61:1 on surface-alt, 5.39:1 on white  */
}

/* --------------------------------------------------------------------------
   Primary CTA label.
   White on --mm-green-500 measured 2.84:1 — the main conversion button on the
   site, failing at every viewport on a solid colour. The header CTA already
   used dark ink on the same green (#08130D, 6.67:1), so this makes the hero
   and closing buttons consistent with it rather than inventing anything new.

   `!important` is used deliberately and only in this section: the file is
   linked before each page's own inline <style> block, so without it the page
   rule wins on source order. Moving the <link> after the inline styles on 21
   pages would be more fragile than a few flagged declarations.
   -------------------------------------------------------------------------- */
.mm-hero-actions .mm-beta-cta,
.mm-hero-actions .mm-beta-cta:hover { color: #08130D !important; }

/* Hero secondary (Android waitlist): a translucent fill over a photograph, so
   its contrast was uncontrolled — 2.12:1 at 390px, the worst value measured.
   A dark scrim under the glass fixes the label without losing the glass look. */
.mm-hero-actions .mm-wl-cta,
.mm-hero-actions .mm-wl-cta:hover {
  background: rgba(8, 19, 13, 0.52) !important;
  border-color: rgba(255, 255, 255, 0.44) !important;
}

/* The hero subheading crosses the WCAG large-text boundary at the mobile
   breakpoint (20px -> 17px), flipping its requirement from 3:1 to 4.5:1 and
   turning a pass into a 4.26:1 fail. Opacity up only where it matters. */
@media (max-width: 768px) {
  .mm-hero-copy .mm-hero-sub { color: rgba(255, 255, 255, 0.94) !important; }
}

/* ============================================================================
   Sticky mobile App Store bar

   Measured on a 390px viewport: visible App Store links sat at y=383 and
   y=10,688 — 12.2 phone screens with no way to convert in between, because
   `.mm-nav-cta` is display:none below 768px. Everything persuasive on the page
   lives inside that gap.

   Shown only on small screens, only once the hero CTA has scrolled away, and
   hidden again when the page's own closing CTA comes into view so the two
   never compete.
   ========================================================================== */
.mm-sticky-cta {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 140%);
  z-index: 60;                 /* above content, below the drawer (70) and cookie banner */
  display: none;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--mm-green-500);
  color: #08130D;
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.1px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(8, 19, 13, 0.34), 0 2px 6px rgba(8, 19, 13, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.16, 1, .3, 1), opacity .28s ease-out;
}

.mm-sticky-cta svg { width: 18px; height: 18px; flex: none; }

.mm-sticky-cta.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* Only ever on the viewports that have no persistent header CTA. */
@media (max-width: 768px) {
  .mm-sticky-cta { display: inline-flex; }
}

/* Don't let it sit over an open mobile drawer or the consent dialog. */
.mm-sticky-cta.is-suppressed {
  transform: translate(-50%, 140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mm-sticky-cta { transition: opacity .2s ease-out; transform: translate(-50%, 0); }
  .mm-sticky-cta:not(.is-visible) { transform: translate(-50%, 0); }
}

/* ============================================================================
   Inline CTA beneath the lease calculator result

   The calculator is the highest-intent moment on the site — a stranger types
   their own numbers and is told they'll owe ~£582. Before this, the only exit
   from that moment was a link to another marketing page.
   ========================================================================== */
.mm-calc-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--mm-green-500);
  color: #08130D;
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.1px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(8, 19, 13, 0.18);
  transition: background .2s ease-out, box-shadow .2s ease-out;
  white-space: nowrap;
}

/* Keep the label on one line inside the narrow calculator card. */
@media (max-width: 430px) {
  .mm-calc-cta { font-size: 14.5px; padding: 11px 18px; }
}

.mm-calc-cta:hover { background: var(--mm-green-400); box-shadow: 0 10px 26px rgba(8, 19, 13, 0.24); }
.mm-calc-cta svg { width: 17px; height: 17px; flex: none; }
.mm-calc-cta-note { margin: 10px 0 0; font-size: 13px; color: var(--mm-secondary); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .mm-calc-cta { transition: none; }
}