/* Lucent technical fixes for the Birkinshaw mirror.
   Loaded after the captured Elementor CSS. Mobile-first, min-width queries only
   where a query is needed at all.

   Every rule here exists because a measured defect was found, not because it
   looked nicer in a screenshot. */

/* ---------------------------------------------------------------------------
   1. Hero CTA pair: centre it under the heading.

   Elementor lays the two hero CTAs out as two equal half-width columns, the
   left one right-aligned and the right one left-aligned, so the buttons meet at
   the column boundary. That only reads as centred when both buttons are the
   same width. "Book an appointment" is ~54px wider than "Call Tina Now", so the
   pair sat ~28px left of the heading's centre line on every treatment page and
   the homepage.

   The row is matched FIRST and only its direct button columns are shrunk.
   Matching `.e-con:has(> .elementor-widget-button)` on its own also catches
   full-width containers further down the hero and widens the document by 530px.
--------------------------------------------------------------------------- */
.page-content .elementor > .e-con.e-parent
  .e-con.e-child:has(> .e-con.e-child > .elementor-widget-button) {
  justify-content: center;
  gap: 20px;
}

.page-content .elementor > .e-con.e-parent
  .e-con.e-child:has(> .e-con.e-child > .elementor-widget-button)
  > .e-con.e-child {
  width: auto;
  flex: 0 0 auto;
  align-items: center;
}

.page-content .elementor > .e-con.e-parent
  .e-con.e-child:has(> .e-con.e-child > .elementor-widget-button)
  > .e-con.e-child
  > .elementor-widget-button {
  width: auto;
}

.page-content .elementor > .e-con.e-parent
  .elementor-widget-button .elementor-button-wrapper {
  text-align: center;
}

/* ---------------------------------------------------------------------------
   1b. Same defect, legacy Elementor markup.

   A few pages (/about/, /treatments/dermaplaning-services/) were built with the
   older section/column model rather than flex containers, so the container rule
   above does not match and their CTA pair stayed split across two 50% columns.

   The column is required to hold the button as its ONLY widget. Matching any
   column that merely contains a button also caught content columns, and
   width:auto then let them grow to their content width: /about/ went from 648px
   to 4424px and blew the document out by 1512px.
--------------------------------------------------------------------------- */
.page-content .elementor > section.elementor-top-section
  .elementor-container:has(
    > .elementor-column > .elementor-widget-wrap > .elementor-widget-button:only-child
  ) {
  justify-content: center;
}

.page-content .elementor > section.elementor-top-section
  .elementor-container
  > .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-button:only-child) {
  width: auto;
  flex: 0 0 auto;
}

.page-content .elementor > section.elementor-top-section
  .elementor-widget-button .elementor-button-wrapper {
  text-align: center;
}

/* ---------------------------------------------------------------------------
   2. Headings: stop a single long word pushing the page sideways on a phone.

   Elementor writes a fixed px size per breakpoint with no wrapping fallback, so
   "Rejuvenating" at 92px Dancing Script measured 423px inside a 331px column and
   pushed the document to 453px on a 390px screen. Five routes were affected:
   the two category pages, two blog posts and hair-restoration.
--------------------------------------------------------------------------- */
.page-content .elementor h1.elementor-heading-title,
.page-content .elementor h2.elementor-heading-title,
.page-content .elementor h3.elementor-heading-title {
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  .page-content .elementor h1.elementor-heading-title {
    font-size: clamp(30px, 9vw, 56px) !important;
    line-height: 1.15 !important;
  }

  .page-content .elementor h2.elementor-heading-title {
    font-size: clamp(22px, 6.4vw, 32px) !important;
    line-height: 1.2 !important;
  }
}

/* ---------------------------------------------------------------------------
   3. Pasted comparison tables (from the blog posts) have no mobile handling and
      overflow the viewport. Let them scroll inside their own box rather than
      dragging the whole page sideways.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .page-content .elementor table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------------------
   3b. The H1 added to /category/blogs/ inherits the archive template's default
       left alignment, unlike every other page heading on the site.
--------------------------------------------------------------------------- */
.elementor-location-archive .elementor-widget-heading h1.elementor-heading-title {
  text-align: center;
}

/* ---------------------------------------------------------------------------
   4. Contact form status message (injected by the form handler).
--------------------------------------------------------------------------- */
.lucent-form-status:empty {
  display: none;
}