/* 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;
}


/* ---------------------------------------------------------------------------
   5. The footer phone number, made callable.

   The number was printed in the footer contact block on every route but was
   only a tel: link on the home page and /about/. On /contact-us/ - the one page
   a visitor opens once they have decided to make contact - it was plain text,
   so on a phone it could not be tapped. Mirror.astro now wraps that existing
   text node in a tel: link (it does not introduce a number; the digits come
   from the page and are cross-checked against the site's own existing link).

   These rules exist so the new link meets WCAG 2.2 AA rather than merely
   working: inherited colour keeps the measured footer contrast unchanged, the
   underline makes it identifiable as a link without relying on colour alone
   (1.4.1), and the min-height plus inline-block gives it a real 44px target
   (2.5.8 asks for 24x24; 44 is the touch floor this site already uses for its
   consent controls).

   No layout property is animated. The only transition is on a compositor-safe
   property, and it is disabled entirely for anyone who has asked for reduced
   motion.
--------------------------------------------------------------------------- */
.elementor-icon-box-description .lucent-tel {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  opacity: 1;
  transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.elementor-icon-box-description .lucent-tel:hover,
.elementor-icon-box-description .lucent-tel:focus-visible {
  opacity: 0.72;
}

/* The focus ring is drawn from the inherited colour so it stays visible on the
   footer's own background whatever that background becomes. */
.elementor-icon-box-description .lucent-tel:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-icon-box-description .lucent-tel {
    transition: none;
  }
}