/* ============================================================================
 * md-bridge.css — joins the new JMC design system (site.css) to the pages that
 * are still on the old theme. Loaded AFTER site.css. Delete it once every
 * section has been migrated.
 * ========================================================================== */

/* 1. The old theme's buttons size themselves through their own modifiers.
      site.css gives every .btn a 240px floor, which blows those out, so the
      old modifiers opt back out. New buttons use btn--double-dash and keep it. */
.btn.btn-very-small,
.btn.btn-small,
.btn.btn-medium,
.btn.btn-large,
.btn.btn-extra-large { min-width: 0; }

/* 2. The new header is fixed. Pages that do not open with a full-bleed hero
      need that height back, or their first section hides underneath it. */
.md-header-spacer { height: var(--header-h); }

/* 3. The old theme centres its page titles inside a dark band; keep the new
      header legible over it until those bands are replaced. */
.header--over .header__brand .brand-name,
.header--over .header__nav a,
.header--over .header__nav .mega-btn { color: #fff; }

/* 4. The phone button is a glass pill designed to sit over photography. On the
      solid white header of an inner page it disappears, so give it a face. */
.header--solid .header__actions .btn--glass-light {
  background: var(--bg-2);
  border-color: var(--line);
}
.header--solid .header__actions .btn--glass-light:hover {
  background: var(--bg-3);
}

/* 6. The old theme offset its first section by hand to clear its own fixed
      navbar (.top-space-margin). With the new spacer above it that offset is
      counted twice, leaving a ~96px white band under the header. The spacer
      owns the offset now, so the old one stands down when they are adjacent. */
.md-header-spacer + .top-space-margin,
.md-header-spacer + .top-space-padding { margin-top: 0; padding-top: 0; }

/* 7. Full-width form pages (test drive, service).
      The Jotform embeds sat inside the old theme's fixed .container, so on a
      wide screen the form was a narrow column with a lot of dead space either
      side. .formpage gives them the whole width, and the iframe Jotform writes
      is forced to follow it — their script hard-codes a width on the element,
      so !important is the only thing that moves it. */
.formpage { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 80px); }
/* A tighter gutter than the rest of the site: the point of this page is the
   form, so it gets the width. Note the Jotform itself is capped at 1500px
   by a setting inside the form builder, so above ~1600px it centres. */
.formpage__inner { width: 100%; padding-inline: clamp(12px, 2vw, 40px); }
.formpage .section__head { max-width: 760px; margin-inline: auto; text-align: center; }
.formpage .section__head p { margin-inline: auto; }

.jf-embed { width: 100%; }
.jf-embed iframe,
.jf-embed .jotform-form {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border: 0;
}