/* ============================================================
   LOCAL PREVIEW ONLY — hero centre alignment fix
   FOR REVIEW · NOT LIVE · DO NOT COPY TO IONOS/PRODUCTION
   Date: 2026-09-16
   ============================================================
   Root cause (live css/style.css):
   1) @media (min-width:992px) .hero .container
      padding-right: max(1.5rem, 17rem)  — ~17rem right vs ~2.25rem left
   2) @media (992-1199) .hero .container
      padding-right: max(1rem, 13.5rem)
   3) .main-wrapper > .hero .container
      padding-left: calc(1.5rem + var(--bs-gutter-x)*0.5)
   Asymmetric padding shifts the whole hero content group LEFT of the
   true centre of the main viewport (area to the RIGHT of the fixed sidebar).
   Body already has margin-left for the sidebar; do NOT centre relative to
   the full browser window.
   ============================================================ */


@media (min-width: 992px) {
  /*
   * Single clear fix: equal horizontal padding + auto margins so the
   * hero-content wrapper is centred on the main-viewport axis
   * (right of sidebar). Overrides the live 17rem / 13.5rem right padding.
   */
  .main-wrapper > .hero .container,
  .hero .container,
  .hero .hero-inner {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    text-align: center !important;
  }
}

/* Shared central vertical axis for all hero pieces (all breakpoints) */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .hero-inner,
.hero .container.hero-inner {
  width: 100%;
  text-align: center;
}

.hero-logo {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-kicker {
  /* inline-flex + parent text-align:center → centred as one pill */
  margin-left: auto;
  margin-right: auto;
}

.hero-headline,
.hero-tagline {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Button row: centre as one complete group (HTML already has
   justify-content-center on the flex row — reinforce, do not
   centre each button independently) */
.hero .d-flex.flex-wrap.justify-content-center {
  justify-content: center !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hero-phone-line {
  text-align: center;
}

.hero-phone-line .btn-book {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

/* Tablet / mobile: sidebar collapses — keep equal padding, no left pull */
@media (max-width: 991.98px) {
  .hero .container,
  .hero .hero-inner {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center !important;
  }
}

/* ============================================================
   LOCAL PREVIEW ONLY — hero tagline two-line split
   Chelsea 2026-09-16: line1 = Pass/Fail report sentence;
   line2 = from £269… Broxburn depot. Not live until approved.
   ============================================================ */
.hero-tagline {
  /* was 34rem — too narrow, forced a third wrap */
  max-width: min(52rem, 96%) !important;
}
.hero-tagline-line {
  display: block;
  text-align: center;
}
@media (min-width: 992px) {
  .hero-tagline-line {
    display: block;
    white-space: nowrap;
  }
}
@media (max-width: 767.98px) {
  /* Chelsea: ignore mobile for now — don’t force desktop tagline rules */
  .hero-tagline {
    max-width: 34rem !important; /* live default */
    font-size: clamp(0.95rem, 3.2vw, 1.1rem) !important;
    line-height: 1.4 !important;
  }
  .hero-tagline-line {
    display: inline; /* flow like original single paragraph on mobile */
    white-space: normal;
  }
  .hero-tagline-line + .hero-tagline-line::before {
    content: " — "; /* restore connecting em-dash when inline on mobile */
  }
}


/* ============================================================
   LOCAL PREVIEW ONLY — three hero CTAs on one line (DESKTOP+)
   Order: Book Now | View services (centre) | phone
   Chelsea 2026-09-16 · mobile left alone for now
   ============================================================ */
@media (min-width: 992px) {
  .hero-cta-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100%;
    max-width: min(46rem, 96%);
    margin-inline: auto !important;
  }
  .hero-cta-row .hero-cta {
    flex: 0 1 auto;
    white-space: nowrap;
  }
}
.hero .hero-phone-line { display: none !important; }

/* Desktop/laptop: three CTAs one line (Chelsea signed off visually)
   Mobile/tablet portrait: leave original pattern — Book Now + View services,
   phone on its own row underneath. Don’t force the desktop row. */
@media (max-width: 991.98px) {
  .hero-cta-row {
    flex-wrap: wrap !important;
    max-width: 100%;
    gap: 0.75rem !important;
  }
  .hero-cta-row .hero-cta {
    font-size: inherit;
    padding: inherit;
  }
  /* Phone returns to its own centred row (like live .hero-phone-line) */
  .hero-cta-row a[href^="tel"] {
    flex: 0 0 auto;
    flex-basis: 100%;
    max-width: max-content;
    margin-inline: auto !important;
    margin-top: 0.35rem;
    font-size: 0.95rem !important;
    padding: 0.4rem 0.9rem !important;
  }
}


/* Headline two-line split — local preview */
.hero-headline-line {
  display: block;
  text-align: center;
}


/* Force exact two-line H1 on desktop */
@media (min-width: 992px) {
  .hero-headline {
    max-width: min(40rem, 94%) !important;
  }
  .hero-headline-line {
    display: block !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}