/*
 * Site-wide overrides layered on top of the exported Divi CSS.
 * Linked last in <head> on every page so these rules win the cascade.
 * Bump the ?v= query on the <link> tags when this file changes.
 */

/* ---------------------------------------------------------------
 * Home: "Discover Our Dental Care Services" vertical tabs
 * Make each tab look clickable: chevron prefix, border, background.
 * ------------------------------------------------------------- */
.vertical-tabs1 ul.et_pb_tabs_controls li {
  background-color: #f4f8fb;
  border: 1px solid #d3dfe8;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.vertical-tabs1 ul.et_pb_tabs_controls li:hover {
  background-color: #e8f0f6;
  border-color: #9fb6c8;
}
.vertical-tabs1 ul.et_pb_tabs_controls li.et_pb_tab_active {
  background-color: #e3ecf3;
  border-color: #003153;
}
.vertical-tabs1 ul.et_pb_tabs_controls li a {
  position: relative;
  padding-left: 34px;
}
/* Divi grey (#999) fails contrast on the new tinted background */
.et_pb_tabs_0.et_pb_tabs.vertical-tabs1 .et_pb_tabs_controls li:not(.et_pb_tab_active) a {
  color: #5b6f80 !important;
}
.vertical-tabs1 ul.et_pb_tabs_controls li a::before {
  content: "\203A"; /* › */
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 1.5em;
  line-height: 1;
  font-weight: 700;
  color: #7a93a8;
  transition: transform 0.2s ease, color 0.2s ease;
}
.vertical-tabs1 ul.et_pb_tabs_controls li:hover a::before,
.vertical-tabs1 ul.et_pb_tabs_controls li.et_pb_tab_active a::before {
  color: #003153;
  transform: translate(3px, -52%);
}

/* ---------------------------------------------------------------
 * Home: "Your Oral Health is our Top Priority." banner
 * Old position anchored to the bottom, so wide screens cropped the
 * top of the photo (the head). Anchor nearer the top instead.
 * ------------------------------------------------------------- */
body div.et_pb_section.et_pb_section_3 {
  background-position: center 30%;
}

/* ---------------------------------------------------------------
 * Service pages: title size + gap below the title image
 * Template heading was a fixed 55px on every screen size.
 * ------------------------------------------------------------- */
body .et_pb_heading_0_tb_body .et_pb_heading_container h1 {
  font-size: 42px;
  line-height: 1.2;
}
@media only screen and (max-width: 980px) {
  body .et_pb_heading_0_tb_body .et_pb_heading_container h1 {
    font-size: 34px;
  }
}
@media only screen and (max-width: 767px) {
  body .et_pb_heading_0_tb_body .et_pb_heading_container h1 {
    font-size: 28px;
  }
}

body .et_pb_column .et_pb_module.et_pb_image_0_tb_body {
  margin-bottom: 24px;
}
body .et_pb_post_content_0_tb_body .et_pb_section {
  padding-top: 0;
}
body .et_pb_post_content_0_tb_body .et_pb_section > .et_pb_row:first-child {
  padding-top: 0;
}

/* ---------------------------------------------------------------
 * About: "Welcome to Wynberg Dentistry" intro text
 * Fixed at 75% width, which left wide side gutters on mobile.
 * ------------------------------------------------------------- */
@media only screen and (max-width: 980px) {
  body .et_pb_text_0.about-intro {
    width: 100%;
  }
}

/* ---------------------------------------------------------------
 * Tooth whitening: before/after photos full width on tablet/mobile
 * Divi set width:auto, which some browsers render narrower than the
 * column when the <img> sits inside a <picture>.
 * ------------------------------------------------------------- */
@media only screen and (max-width: 980px) {
  body .whitening-result,
  body .whitening-result .et_pb_image_wrap,
  body .whitening-result picture {
    display: block;
    width: 100%;
  }
  body .whitening-result .et_pb_image_wrap img {
    width: 100%;
    height: auto;
  }
}

/* ---------------------------------------------------------------
 * Privacy policy: last-updated line
 * ------------------------------------------------------------- */
.policy-updated {
  font-size: 15px;
  color: #555;
  margin-bottom: 1.5em;
}