/* Guardian site UI layer: sticky CTA behavior + button text centering.
 * Overrides the Webflow-generated stylesheet; loaded after it. */

/* Sticky quote bar: rendered on every page but parked off-screen until
 * pmx-ui.js reveals it on scroll. Overrides both the bare variant
 * (display:none) and the gallery/alt variants (always-on). */
.sticky-free-quote {
  display: flex !important;
  transform: translateY(110%);
  transition: transform 0.35s ease;
  will-change: transform;
}
.sticky-free-quote.pmx-visible {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sticky-free-quote { transition: none; }
}

/* Mobile: compact full-width tap target (the label span is already hidden
 * by the Webflow CSS at this width, but the fixed 80px height and grid gap
 * left a half-empty bar). iOS home-indicator safe area respected. */
@media screen and (max-width: 767px) {
  .sticky-free-quote {
    height: auto;
    min-height: 0;
    grid-column-gap: 10px;
    grid-row-gap: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .sticky-free-quote .text-block-177 { display: none; }
  .sticky-free-quote a.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Checkboxes: box pinned to the top-left of the label text (first line),
 * not vertically centered — mirrors the CRM embed's .pm-consent layout. */
label.w-checkbox {
  display: flex;
  align-items: flex-start;
  padding-left: 0;
}
label.w-checkbox input.w-checkbox-input {
  flex-shrink: 0;
  float: none;
  width: 18px;
  height: 18px;
  margin: 2px 9px 0 0;
}
label.w-checkbox .w-form-label {
  flex: 1;
}

/* Tighten the gap between the SMS consent checkbox and the submit button
 * (the button carries margin:10px 0 0 by default; the checkbox has no bottom
 * margin, so this is the whole gap). */
.button.free-quote.sign-up {
  margin-top: 4px;
}

/* Center the SMS consent line (to match the centered submit button). A flex
 * row can't center a long label — it fills the width and pins the box left — so
 * switch just this checkbox to centered inline flow: the box sits inline before
 * the text, and the text wraps centered. */
label.w-checkbox.checkbox-field-11 {
  display: block;
  text-align: center;
}
label.w-checkbox.checkbox-field-11 input.w-checkbox-input {
  display: inline-block;
  vertical-align: middle;
  float: none;
  margin: 0 8px 1px 0;
}
label.w-checkbox.checkbox-field-11 .w-form-label {
  display: inline;
  flex: none;
}

/* Button text vertical centering: .button.content.solo inherits 13px bottom
 * padding from .button but overrides top to 10px (>=480px), so labels sit
 * 3px high. Equalize while keeping the rendered height identical. */
a.button.content.solo {
  padding-top: 11.5px;
  padding-bottom: 11.5px;
}
@media screen and (max-width: 479px) {
  a.button.content.solo { padding-top: 10px; padding-bottom: 10px; }
}