/*
 * Site-wide layout fixes layered on top of the exported Divi CSS.
 * Linked last in <head> on every page. Page-specific rules are scoped by the
 * WordPress body class (home, page-id-46, ...) because Divi module classes
 * (et_pb_text_1, et_pb_row_0_tb_body, ...) are reused with different meanings
 * on different pages.
 */

/* ---- Service-page sidebar: "Give us a call" sat flush against the
   Send Message button (desktop and mobile) ---- */
#page-container .et_pb_blurb_0_tb_body.et_pb_module {
  margin-top: 40px !important;
}

@media only screen and (max-width: 767px) {
  /* "Visit our practices" blurb is 88.8% wide, so it sits off-centre
     once the sidebar stacks under the content */
  #page-container .et_pb_blurb_1_tb_body.et_pb_module {
    width: 100% !important;
  }
}

/* ---- Contact page form: Contact Form 7 left a <br> at the start of every
   field row. In the flex Name/Phone row it became a flex item, so the 10px
   gap pushed the Name input in from the left edge; in the other rows it
   added an uneven blank line above each field. ---- */
.my-custom-form form > p > br {
  display: none;
}
.my-custom-form form > p {
  margin-bottom: 0;
  padding-bottom: 14px !important;
}

@media only screen and (max-width: 767px) {

  /* ================= Homepage (body.home) ================= */

  /* CALL US / email buttons: one per row, full-size and tappable */
  body.home .et_pb_row_3.et_pb_row {
    display: block !important;
  }
  body.home .et_pb_row_3 .et_pb_column_1_2 {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 14px !important;
  }
  body.home .et_pb_row_3 .et_pb_column_1_2:last-child {
    margin-bottom: 0 !important;
  }
  body.home .et_pb_row_3 .et_pb_button_module_wrapper {
    text-align: center !important;
    margin: 0 !important;
  }
  body.home .et_pb_row_3 .et_pb_button_0,
  body.home .et_pb_row_3 .et_pb_button_1 {
    display: block !important;
    width: 100% !important;
    max-width: 340px;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* "Services we offer" cards: the 80%-wide row plus 39px side margins on
     each card left the cards ~234px wide on a 390px phone */
  body.home .et_pb_section_5 .et_pb_row {
    width: 90% !important;
  }
  body.home .et_pb_section_5 .et_pb_text.et_pb_module {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.home .et_pb_section_5 .et_pb_text img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ================= Our vision and our mission (page-id-46) ================= */

  /* Every block uses the same full-width container as the top "Mission"
     block, flush to the same left edge, left-aligned text */
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_module {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_module p,
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_module h1,
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_module h2,
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_module h3,
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_module h4 {
    text-align: left !important;
  }
  /* Integrity block: Divi put the image above its text with a -599px /
     +207px margin hack, which breaks as soon as widths change. Reverse
     the stacked columns instead so the image sits above the text. */
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_row_2 {
    display: flex !important;
    flex-direction: column-reverse;
  }
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_row_2 .et_pb_text_2,
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_row_2 .et_pb_image_1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_row_2 .et_pb_column_4 {
    margin-bottom: 30px !important;
  }
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_image .et_pb_image_wrap,
  body.page-id-46 #et-main-area .et_pb_section_0 .et_pb_image img {
    display: block;
    width: 100% !important;
    height: auto;
  }
}

@media only screen and (max-width: 980px) {

  /* ================= THRIVE Elderly Groups (page-id-610) ================= */

  /* Headings carried negative left margins and the image was 91% wide and
     centred, so headings, paragraphs and the image all started at
     different distances from the screen edge */
  body.page-id-610 .et_pb_heading_0_tb_body.et_pb_module,
  body.page-id-610 .et_pb_heading_1_tb_body.et_pb_module,
  body.page-id-610 .et_pb_heading_2_tb_body.et_pb_module,
  body.page-id-610 .et_pb_text_0_tb_body.et_pb_module,
  body.page-id-610 .et_pb_text_1_tb_body.et_pb_module,
  body.page-id-610 .et_pb_text_2_tb_body.et_pb_module,
  body.page-id-610 .et_pb_image_0_tb_body.et_pb_module {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.page-id-610 .et_pb_image_0_tb_body .et_pb_image_wrap,
  body.page-id-610 .et_pb_image_0_tb_body img {
    display: block;
    width: 100% !important;
    height: auto;
  }
}

/* ---- "Give us a call to schedule an appointment" banner (footer template):
   Divi hid the banner, its X close button and the "Leave a message" button
   below 768px. Show them on mobile too. The :not() keeps the X working:
   jQuery's slideToggle closes the banner by writing an inline
   style="display: none;", which this rule then stops overriding. ---- */
@media only screen and (max-width: 767px) {
  #page-container .et_pb_row_1_tb_footer.modal:not([style*="display: none"]) {
    display: block !important;
  }
  #page-container .et_pb_code_1_tb_footer {
    display: block !important;
  }
  #page-container .et_pb_button_1_tb_footer {
    display: inline-block !important;
  }

  /* Compact phone layout: banner inset 10px each side, X inside the top-right
     corner, "Contact us today" bottom-left, "Leave a message" tab bottom-right
     (same arrangement as desktop) */
  #page-container .et_pb_row_1_tb_footer.modal {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 12px 14px 14px !important;
    box-sizing: border-box !important;
  }
  #page-container .et_pb_row_1_tb_footer .et_pb_column {
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
  }
  #page-container .et_pb_text_0_tb_footer {
    padding-right: 30px !important; /* keep the heading clear of the X */
    margin-bottom: 8px !important;
  }
  #page-container .et_pb_text_0_tb_footer h5 {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  #page-container .et_pb_code_1_tb_footer,
  #page-container .et_pb_code_1_tb_footer .et_pb_code_inner {
    position: static !important;
    margin: 0 !important;
  }
  #page-container .et_pb_row_1_tb_footer .closemodal {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
  }
  #page-container .et_pb_button_0_tb_footer_wrapper {
    text-align: left !important;
    margin: 0 !important;
  }
  #page-container .et_pb_button_0_tb_footer {
    font-size: 13px !important;
    padding: 9px 14px !important;
  }
  #page-container .et_pb_button_1_tb_footer_wrapper {
    margin: -34px 10px 0 auto !important;
    width: auto !important;
    text-align: right !important;
  }
}

/* ---- "Leave a message" tab is a <button>, which defaults to the arrow
   cursor; show the hand like the site's other buttons ---- */
.et_pb_button_1_tb_footer,
.et_pb_button_1_tb_footer * {
  cursor: pointer !important;
}

/* ---- "Send us a message" popup: ran edge to edge on phones. Leave a 12px
   gap each side so it reads as a popup over the page ---- */
@media only screen and (max-width: 767px) {
  .et_pb_code_0_tb_footer .popup-form-wrap {
    /* vw, not %: the wrapper shrinks to fit the popup, so % resolved
       against the popup itself and always came out 300px */
    width: calc(100vw - 24px) !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}