/* Mobile + tablet fixes. Every rule sits inside a max-width:980px query (Divi's tablet
   breakpoint), so desktop (981px and up) renders exactly as before. */

/* ---------- tablet + phone (<= 980px) ---------- */
@media (max-width: 980px) {
  /* header: white logo panel full height, like desktop */
  .et_pb_row_0_tb_header { align-items: stretch; }
  .et_pb_column_0_tb_header { justify-content: center; padding: 6px 16px !important; }
  .et_pb_image_0_tb_header { margin: 0 auto !important; }
  .et_pb_image_0_tb_header img { width: auto; max-height: 48px; }

  /* hamburger was teal on the teal bar, menu links white on the white dropdown */
  .et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before { color: var(--gcid-secondary-color) !important; }
  .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu a { color: var(--gcid-primary-color) !important; }

  /* dropdown spans the full header width instead of the narrow menu column */
  .et_pb_column_1_tb_header,
  .et_pb_menu_0_tb_header,
  .et_pb_menu_0_tb_header .et_pb_menu_inner_container,
  .et_pb_menu_0_tb_header .et_pb_menu__wrap,
  .et_pb_menu_0_tb_header .et_mobile_nav_menu,
  .et_pb_menu_0_tb_header .mobile_nav { position: static !important; }
  .et_pb_menu_0_tb_header .et_mobile_menu {
    left: 0; right: 0; width: 100%; top: 100%;
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .et_pb_menu_0_tb_header .et_mobile_menu a { padding-top: 12px; padding-bottom: 12px; }

  /* long words in content never force sideways scrolling */
  .et_pb_text_inner, .et_pb_module_header, h1, h2, h3, h4 { overflow-wrap: break-word; }
  img, iframe, video { max-width: 100%; }
}

/* ---------- tablet only (768px - 980px) ---------- */
@media (min-width: 768px) and (max-width: 980px) {
  .et_pb_column_0_tb_header { flex: 0 0 auto !important; width: auto !important; }
  .et_pb_column_1_tb_header { flex: 1 1 auto !important; width: auto !important; align-items: flex-end; justify-content: center; }
  .et_pb_column_2_tb_header { flex: 0 0 auto !important; width: auto !important; justify-content: center; padding-right: 16px; }
  .et_pb_button_0_tb_header { white-space: nowrap; font-size: 16px !important; padding: 8px 16px !important; }
  .et_pb_menu_0_tb_header .et_mobile_menu { padding: 2% 5%; }
}

/* ---------- phone (<= 767px) ---------- */
@media (max-width: 767px) {
  /* header: logo and hamburger share one row (was two stacked rows, ~140px) */
  .et_pb_row_0_tb_header { flex-wrap: nowrap !important; }
  .et_pb_column_0_tb_header { flex: 1 1 auto !important; width: auto !important; padding: 6px 12px !important; }
  .et_pb_image_0_tb_header img { max-height: 46px; }
  .et_pb_column_1_tb_header { flex: 0 0 64px !important; width: 64px !important; align-items: center; justify-content: center; }
  .et_pb_menu_0_tb_header,
  .et_pb_menu_0_tb_header .et_pb_menu_inner_container,
  .et_pb_menu_0_tb_header .et_pb_menu__wrap { height: 100%; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; }
  .et_pb_menu_0_tb_header .et_mobile_nav_menu { margin: 0 !important; }
  /* Divi pulls the menu up/down with negative margins; on the one-row header that drops it below the bar */
  .et_pb_row_0_tb_header .et_pb_menu_0_tb_header.et_pb_menu { margin: 0 !important; width: 100%; align-self: stretch !important; }
  .et_pb_column_2_tb_header { display: none !important; }

  /* fixed "Contact us today" bar: was ~220px of a ~780px screen */
  .et_pb_row_2_tb_footer {
    flex-wrap: nowrap !important; align-items: center;
    padding: 10px 30px 45px 12px !important; gap: 10px;
  }
  .et_pb_column_6_tb_footer { flex: 1 1 auto !important; width: auto !important; }
  .et_pb_column_7_tb_footer { flex: 0 0 auto !important; width: auto !important; }
  .et_pb_heading_0_tb_footer h4 { font-size: 16px !important; line-height: 1.3 !important; text-align: left !important; }
  .et_pb_text_3_tb_footer, .et_pb_text_3_tb_footer p { font-size: 13px !important; line-height: 1.4 !important; text-align: left !important; margin: 4px 0 0 !important; }
  .et_pb_button_0_tb_footer { font-size: 13px !important; padding: 8px 12px !important; white-space: nowrap; }
  .et_pb_column_8_tb_footer { position: absolute !important; top: 6px; right: 6px; width: auto !important; margin: 0 !important; }

  /* tap targets */
  .et_pb_text_4_tb_footer { min-width: 28px; min-height: 28px; align-items: center; justify-content: center; }
}

/* ---------- very small phones (<= 360px) ---------- */
@media (max-width: 360px) {
  .et_pb_heading_0_tb_footer h4 { font-size: 14px !important; }
  .et_pb_text_3_tb_footer, .et_pb_text_3_tb_footer p { font-size: 12px !important; }
  .et_pb_button_0_tb_footer { font-size: 12px !important; padding: 7px 9px !important; }
}

@media (max-width: 767px) {
  /* "Leave a Message" tab: one line, never over the call number */
  .et_pb_button_1_tb_footer { white-space: nowrap; font-size: 15px !important; }
}

/* ---------- narrow desktop / landscape tablet (768px - 1100px) ---------- */
@media (min-width: 768px) and (max-width: 1100px) {
  /* "Request appointment" wrapped onto two lines */
  .et_pb_button_0_tb_header { white-space: nowrap; font-size: 16px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .et_pb_row_0_tb_header .et_pb_column_2_tb_header { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding-right: 16px !important; }
  .et_pb_row_0_tb_header .et_pb_column_1_tb_header { flex: 1 1 auto !important; width: auto !important; }

  /* fixed "Contact us today" bar covered the hero heading: one compact row */
  .et_pb_row_2_tb_footer { padding: 12px 40px 12px 30px !important; align-items: center; }
  .et_pb_heading_0_tb_footer h4 { font-size: 19px !important; line-height: 1.3 !important; }
  .et_pb_text_3_tb_footer, .et_pb_text_3_tb_footer p { font-size: 15px !important; margin: 0 !important; padding: 0 !important; }
  .et_pb_button_0_tb_footer { font-size: 14px !important; padding: 8px 18px !important; white-space: nowrap; }
}

/* ---------- all widths: room for the fixed "Contact us today" bar ----------
   At the bottom of a page the bar covered the footer (Practice location, copyright).
   Extra teal space at the end of the footer lets it scroll clear; removed again once
   the bar is closed with its X. */
.et_pb_section_0_tb_footer { padding-bottom: 150px !important; }
@media (min-width: 768px) and (max-width: 1100px) { .et_pb_section_0_tb_footer { padding-bottom: 175px !important; } }
@media (max-width: 767px) { .et_pb_section_0_tb_footer { padding-bottom: 210px !important; } }
body:has(.modal-section[style*="none"]) .et_pb_section_0_tb_footer { padding-bottom: 0 !important; }