/* Site-wide layout fixes applied after the Divi styles. */

/* Keep the last footer content clear of the fixed "Leave a message" bar. */
.et_pb_section_0_tb_footer.et_pb_section {
  padding-bottom: 80px !important;
}

/* Contact form inputs use size="40", which made them wider than the
   sidebar form card. Fit them to their container instead. */
.sfform-form-control-wrap {
  display: block;
  max-width: 100%;
}
.sfform-form input[type=text],
.sfform-form input[type=email],
.sfform-form input[type=tel],
.sfform-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* The block wrappers above already stack the fields, so the <br> tags in the
   "Leave a message" popup form added a blank line between each field. */
#modal-form-prop .sfform-form br {
  display: none;
}

/* Home hero heading broke words mid-way ("PRECISIO / N.") on narrow desktops. */
@media only screen and (min-width: 981px) {
  .home .et_pb_text_0 h1 {
    font-size: min(80px, 5.4vw) !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* The reCAPTCHA badge is hidden; Google requires this notice in its place,
   so each form shows it under the submit button instead. */
.grecaptcha-badge {
  visibility: hidden;
}
.recaptcha-notice {
  margin-top: 12px;
  padding-bottom: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #47455e;
}
/* The popup form sits on navy, so its notice stays white like the rest of the popup. */
#modal-form-prop .recaptcha-notice {
  color: #ffffff;
  opacity: 0.8;
}
.recaptcha-notice a {
  color: inherit;
  text-decoration: underline;
}

/* Form submit buttons: show the pointer cursor on hover */
.sfform-submit {
  cursor: pointer;
}

/* 404 page: the reused et_pb_text_0 styles render its text white on white */
.page-404 .et_pb_text_inner h1 {
  color: #04002e !important;
  font-size: 40px;
  line-height: 1.2;
  padding-bottom: 16px;
}
.page-404 .et_pb_text_inner p {
  color: #47455e !important;
  font-size: 18px;
}

/* "Leave a message" popup: on short screens the centred form overflowed the
   fixed overlay, pushing the X above the top edge with no way to scroll.
   Let the overlay scroll, and centre with auto margins so the form only
   centres when it fits (auto margins never go negative). */
.et_pb_column_5_tb_footer,
.et-db #et-boc .et-l .et_pb_column_5_tb_footer {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  align-items: flex-start !important;
  padding: 16px 0 80px;
  box-sizing: border-box;
}
.et_pb_column_5_tb_footer > .et_pb_module {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* ---- Below 981px: between ~480px and 980px Divi kept the home and about
   rows side by side with no gutter, squeezing text into narrow columns that
   ran into the images (and broke the 947 player box). Stack them as on
   small phones, image first, with the content at the full row width. ---- */
@media only screen and (max-width: 980px) {
  .home .et-l--post .et_pb_row,
  .page-id-30 .et-l--post .et_pb_row {
    flex-wrap: wrap;
  }
  .home .et-l--post .et_pb_row > .et_pb_column,
  .page-id-30 .et-l--post .et_pb_row > .et_pb_column {
    width: 100% !important;
    margin-right: 0 !important;
  }
  .home .et-l--post .et_pb_row > .et_pb_column:has(> .et_pb_image),
  .page-id-30 .et-l--post .et_pb_row > .et_pb_column:has(> .et_pb_image) {
    order: -1;
    margin-bottom: 30px !important;
  }
  .home .et-l--post .et_pb_row > .et_pb_column:not(:has(.et_pb_module:not(.et_pb_image_1))) {
    display: none;
  }
  /* The About and HPB text blocks kept Divi's 50px desktop right padding,
     leaving them visibly narrower than the rest of the page once stacked. */
  .home .et_pb_text_1,
  .home .et_pb_text_3 {
    padding-right: 0 !important;
  }
  /* Our Services cards (rows 5-14) are 70% wide; match the 80% of the other
     rows so they aren't narrower than the rest of the page. */
  .home .et-l--post .et_pb_row:is(.et_pb_row_5, .et_pb_row_6, .et_pb_row_7, .et_pb_row_8, .et_pb_row_9, .et_pb_row_10, .et_pb_row_11, .et_pb_row_12, .et_pb_row_13, .et_pb_row_14) {
    width: 80% !important;
  }

}

/* The footer sits at z-index 999999 (so its popup form covers the header),
   which also hid the sticky header and its mobile menu once scrolled to the
   footer. Keep the header above the footer, except while the "Leave a
   message" popup (shown by slideToggle) is open. */
.et-l--header .et_pb_section {
  z-index: 1000000 !important;
}
body:has(#leave-a-message[style*="block"]) .et-l--header .et_pb_section {
  z-index: 1 !important;
}
/* Home hero: Divi hides both hero images on tablet (one is phone-only, the
   other desktop-only). Show the phone one above the heading. */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .home .et_pb_row_0 .et_pb_image_0 {
    display: block !important;
    margin-bottom: 40px;
  }
}

/* ---- Small laptops / landscape tablets (981-1199px): the footer's four equal
   columns left the intro text two words per line and wrapped the button. ---- */
@media only screen and (min-width: 981px) and (max-width: 1199px) {
  .et_pb_row_0_tb_footer.et_pb_row {
    width: 90% !important;
    max-width: 90% !important;
  }
  .et_pb_row_0_tb_footer > .et_pb_column {
    margin-right: 2% !important;
  }
  .et_pb_row_0_tb_footer > .et_pb_column:last-child {
    margin-right: 0 !important;
  }
  .et_pb_row_0_tb_footer > .et_pb_column_0_tb_footer { width: 22% !important; }
  .et_pb_row_0_tb_footer > .et_pb_column_1_tb_footer { width: 14% !important; }
  .et_pb_row_0_tb_footer > .et_pb_column_2_tb_footer { width: 32% !important; }
  .et_pb_row_0_tb_footer > .et_pb_column_3_tb_footer { width: 26% !important; }
  .et_pb_button_0_tb_footer {
    white-space: nowrap;
  }
  /* Divi's desktop padding (200px on the logo, 60px on the intro text)
     shrank the logo to nothing and the text to two words a line here. */
  .et_pb_image_0_tb_footer {
    padding-right: 0 !important;
    max-width: 110px;
  }
  .et_pb_text_0_tb_footer {
    padding-right: 0 !important;
  }
}

/* ---- Phones and tablets: long single words ("Hepatopancreatobiliary", "Advertisements")
   are wider than the screen at heading sizes and broke mid-word. Hyphenate. ---- */
@media only screen and (max-width: 980px) {
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* ---- Large phones (480-767px): the footer's Tel/WhatsApp column started
   above the "Contact us" heading, out of line with Address/Email. Stack the
   contact details in one column, as on smaller phones. ---- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .et_pb_row_0_tb_footer > .et_pb_column_2_tb_footer,
  .et_pb_row_0_tb_footer > .et_pb_column_3_tb_footer {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
  .et_pb_column_2_tb_footer .et_pb_blurb,
  .et_pb_column_3_tb_footer .et_pb_blurb {
    margin: 0 0 30px !important;
    padding-top: 0 !important;
  }
}

/* ---- Before/after photo pair (Minor Surgical Procedures). Side by side
   from 600px up; stacked on small phones. ---- */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 10px 0 30px;
}
.before-after--three {
  grid-template-columns: 1fr 1fr 1fr;
}
.before-after figure {
  margin: 0;
}
.before-after img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.before-after figcaption {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
}
@media only screen and (max-width: 599px) {
  .before-after {
    grid-template-columns: 1fr;
  }
}