/* STYLES: Chalice - Dundas Heritage Dentistry */

/*  8F5E52  */

/* tools */

#et-main-area,body,html{overflow-x:hidden}.animate{-webkit-transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;-ms-transition:.2s ease-in-out;-o-transition:.2s ease-in-out;transition:.2s ease-in-out}.aspect-ratio{position:relative;max-width:100%;height:auto}.aspect-ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.aspect-ratio-16-9{padding-top:56.25%!important}.mx-inline-buttons{text-align:right}.mx-inline-buttons .et_pb_button_module_wrapper{display:inline-block;margin-right:10px}.mx-inline-center{text-align:center}.mx-inline-left{text-align:left}@media screen and (max-width:980px){.tablet50 .et_pb_column_1_2{margin-right:5.5%!important;width:47.25%!important}}

/* WCAG: restore visible focus sitewide */


/* Base */
.et_pb_button {
  color: #fff !important;
  opacity: 1 !important;
}

/* Hover: darken background slightly (safe for contrast) */
.et_pb_button:hover {
  filter: brightness(0.92);
  color: #fff !important;
}


/* Force focus ring everywhere (Divi-safe) */
a:focus, a:focus-visible,
button:focus, button:focus-visible,
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible,
[role="button"]:focus, [role="button"]:focus-visible,
.et_pb_button:focus, .et_pb_button:focus-visible,
.mobile_menu_bar:focus, .mobile_menu_bar:focus-visible {
  outline: 3px solid #9fa759 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px rgba(159,167,89,.25) !important;
}


/* skip link */

.skip-link {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 10px 14px;
  background: #fff;
  color: #000;
  z-index: 99999;
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

/* Show dropdown when tabbing */
#desktop-nav .menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* EOF WCGA */


/* home */

#bio-carousel h3 { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* single pages */

.page_content hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 2rem 0;
}

/* footer tweaks */

#contact-footer a, #address-footer a { color:#fff; }
#contact-footer a:hover, #address-footer a:hover { text-decoration:underline; }

/* services */

/* Flip column order on tablet + mobile */
@media (max-width: 980px) {
  #services-content {
    display: flex;
    flex-direction: column-reverse;
  }

  /* add space between stacked columns */
  #services-content > .et_pb_column {
    margin-bottom: auto;
  }

  /* remove extra space on last column */
  #services-content > .et_pb_column:last-child {
    margin-bottom: 5em;
  }

}


/* Make the module the positioning context */
.tooth_box.et_pb_text,
.tooth_box {
  position: relative !important;
  overflow: visible !important;
}

/* Divi inner wrappers sometimes clip */
.tooth_box .et_pb_text_inner {
  overflow: visible !important;
}

/* Tooth */
.tooth_box .white_tooth_box {
  width: 72px;
  position: absolute;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  margin-left: 0;
  z-index: 5;
  display: block;
}


/* patient info */


/* =========================================================
   Divi Accordion: EVEN spacing + smoother open/close
   Apply the class "acc" on the Accordion module.

   Why the “end jump” happens:
   Divi animates the HEIGHT of .et_pb_toggle_content with JS.
   Real padding on the animated element can sometimes cause a
   snap when Divi sets height back to "auto" at the end.

   Fix:
   - Control spacing with a consistent margin on the toggle wrapper
   - Keep the animated content box free of vertical padding
   - Add bottom breathing room using a pseudo-element (no snap)
   - Normalize inner element margins to avoid surprises
   ========================================================= */

/* 1) One consistent gap between items (open OR closed) */
.acc.et_pb_accordion .et_pb_toggle,
.acc .et_pb_accordion .et_pb_toggle {
  margin: 0 0 22px 0 !important;  /* <<< adjust gap here */
  padding: 0 !important;
}

.acc.et_pb_accordion .et_pb_toggle:last-child,
.acc .et_pb_accordion .et_pb_toggle:last-child {
  margin-bottom: 0 !important;
}

/* 2) Consistent “row height” via title padding */
.acc.et_pb_accordion .et_pb_toggle .et_pb_toggle_title,
.acc .et_pb_accordion .et_pb_toggle .et_pb_toggle_title {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* 3) Keep the animated box clean + predictable */
.acc.et_pb_accordion .et_pb_toggle .et_pb_toggle_content,
.acc .et_pb_accordion .et_pb_toggle .et_pb_toggle_content {
  margin: 0 !important;
  padding: 0 !important;          /* important for smooth JS height animation */
  overflow: hidden !important;    /* prevents little flashes during animation */
  box-sizing: border-box !important;
  transform: translateZ(0);       /* helps some browsers avoid stutter */
}

/* Add the “open spacing” WITHOUT padding on the animated element */
.acc.et_pb_accordion .et_pb_toggle .et_pb_toggle_content:after,
.acc .et_pb_accordion .et_pb_toggle .et_pb_toggle_content:after {
  content: "";
  display: block;
  height: 28px;                   /* bottom breathing room (bumped to match perceived top padding) */
}

/* 4) Normalize typography spacing inside the content */
.acc.et_pb_accordion .et_pb_toggle .et_pb_toggle_content > *:first-child,
.acc .et_pb_accordion .et_pb_toggle .et_pb_toggle_content > *:first-child {
  margin-top: 0 !important;
}

.acc.et_pb_accordion .et_pb_toggle .et_pb_toggle_content > *:last-child,
.acc .et_pb_accordion .et_pb_toggle .et_pb_toggle_content > *:last-child {
  margin-bottom: 0 !important;
}

/* Paragraph rhythm (optional but usually nice) */
.acc.et_pb_accordion .et_pb_toggle .et_pb_toggle_content p,
.acc .et_pb_accordion .et_pb_toggle .et_pb_toggle_content p {
  margin: 0 0 14px 0 !important;
}

.acc.et_pb_accordion .et_pb_toggle .et_pb_toggle_content p:last-child,
.acc .et_pb_accordion .et_pb_toggle .et_pb_toggle_content p:last-child {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   Keep the +/- icon pinned right even when font-size changes
--------------------------------------------------------- */
.acc .et_pb_toggle_title{
  position: relative !important;
  padding-right: 3.5em !important;
}

.acc .et_pb_toggle_title:before{
  left: auto !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}



/* services */


/* Base list styling */
#services-list-2 {
  column-count: 2;
  column-gap: 2rem;
  list-style-position: inside;
  padding-left: 0;
  margin: 0;
}

/* Tight spacing between items */
#services-list-2 li {
  margin-bottom: 0.4em;
  break-inside: avoid;
}

/* Mobile: single column + centered */
@media (max-width: 767px) {
  #services-list-2 {
    column-count: 1;
    max-width: 420px;
    margin: 0 auto;
  }
}



/* team */


/*
  Team Grid – CSS
  Applies to markup in: ACF Team Grid – HTML Markup

  Breakpoints:
  - Desktop: 3 columns
  - Tablet: 2 columns (<= 980px)
  - Mobile: 1 column (<= 767px)
*/

/* ====== Grid ====== */
.team-grid {
  width: 100%;
}

.team-grid__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px; /* controls both row + column spacing */
  align-items: stretch; /* equal height items per row */
}

@media (max-width: 980px) {
  .team-grid__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .team-grid__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* ====== Team Card ====== */
.team-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.team-card__photo {
  margin: 0 0 18px 0;
}

.team-card__photo img,
.team-card__photo--placeholder {
  display: block;
  width: 100%;
  /* 502×614 simplified to whole-number ratio */
  aspect-ratio: 251 / 307;
  object-fit: cover;
  background: #777; /* placeholder/fallback */
}

.team-card__name {
  margin: 0; /* no margin-bottom */
  color: #8F5E52;
  font-size: 1.6em;
  line-height: 1.15;
}

@media screen and (max-width: 480px) {
  .team-card__name { font-size: 1.4em; }
}

@media screen and (max-width: 980px) and (min-width: 481px) {
  .team-card__name { font-size: 1.6em; }
}

.team-card__credentials {
  margin: 0 0 0.75em 0;
  font-size: 1em;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.team-card__bio {
  /* WYSIWYG content wrapper */
}

.team-card__bio p {
  margin: 0 0 10px 0;
}

.team-card__bio p:last-child {
  margin-bottom: 0;
}


/* ====== Callout Tile ====== */
.team-callout {
  height: 100%;
}

/*
  IMPORTANT:
  Use normal flow + negative margin overlap (more reliable than absolute positioning
  when the grid row height stretches to match other cards).
*/
.team-callout__wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* center the callout vertically within the grid cell */
  align-items: center;
}

.team-callout__tooth {
  width: 72px; /* slightly smaller tooth */
  height: auto;
  display: block;
  /* Some SVGs include extra whitespace; translate helps seat it on the box */
  transform: translateY(-5px);
  margin-bottom: -40px; /* overlap the yellow box more */
  z-index: 2;
}

.team-callout__box {
  width: 100%;
  background: #f6f0e9;
  border-radius: 28px;
  padding: 46px 28px 34px;
  text-align: center;
  z-index: 1;
}

.team-callout__text {
  margin: 0;
  font-weight: 700;
  font-size: 1.4em;
  line-height: 1.25;
}


/* ====== Mobile tuning ====== */
@media (max-width: 767px) {
  .team-callout__box {
    border-radius: 24px;
    padding: 44px 22px 30px;
  }

  .team-callout__tooth {
    width: 64px;
    transform: translateY(8px);
    margin-bottom: -34px;
  }
}




/* homepage */



/*
  Divi Testimonial Text Module Styling
  Applies to Divi Text Modules with class: .testimonial

  Notes:
  - Uses .et_pb_text_inner as positioning context
  - Tooth icon sits with its CENTER on the top-left corner (sticks out)
  - Quotes are small and near the top
*/

/* Positioning context + allow protrusion */
.testimonial,
.testimonial .et_pb_text_inner {
  position: relative;
  overflow: visible;
}

/* -------------------------------
   Tooth icon (top-left, sticks out)
-------------------------------- */
.testimonial .corner_tooth {
  position: absolute;
  top: -45px;
  left: -30px;
  transform: translate(-50%, -50%);
  width: 48px;
  height: auto;
  z-index: 5;
  pointer-events: none;
}

/* Remove spacing from the h4 wrapper around the tooth image */
.testimonial h4 {
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* -------------------------------
   Quote icon (small)
-------------------------------- */
.testimonial .testimonial_quotes {
  width: 40px;
  height: auto;
  display: block;
  margin: 50px 0 20px 0;
  opacity: 0.85;
}



/* Responsive services list layout */
#services-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.25rem;
  row-gap: 0.4rem; /* tight vertical spacing */
  list-style: disc;
  padding-left: 1.2rem; /* keeps bullets visible */
  margin: 0;
}

#services-list li {
  margin: 0; /* keep spacing tight */
  padding: 0;
}

/* Tablet: 2 columns */
@media (max-width: 980px) {
  #services-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column, centered */
@media (max-width: 767px) {
  #services-list {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-left: 0; /* center bullets visually */
    list-style-position: inside;
  }

  #services-list li {
    max-width: 420px;
  }
}


/* MX - CSS */

/* two-cols  */

@media only screen and (max-width: 980px) {
	#footer-cols #col-1 { width: 70%!important; }
	#footer-cols #col-2 { width: 30%!important; }
	.three .et_pb_column { width: 33.33%!important;	}
	.four-cols .et_pb_column { width: 25%!important; }

	.bio-cols .col-1 { width: 22%!important; }
	.bio-cols .col-2 { width: 75%!important; padding-right: 3%; }
}
/* +5214424250754  */
/* Use: https://wa.me/5214424250754  */

/**/

#et-main-area { padding-top: 0; }

/*  top menu offset */

@media screen and (min-width: 981px) {
	#et-main-area { padding-top: 0; }
}
@media screen and (min-width: 1px) and (max-width: 980px) {
	#et-main-area { padding-top: 0; }
}

/* bios */

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

	.tablet-2 .et_pb_column {
		width: 50%!important;
	}
}

/* FF form */

.frm_required_field label { 
	display: none !important; 
	font-family: 'Montserrat', sans-serif !important; 
	text-transform: uppercase;
}

.frm_required_field input[type="text"], .frm_error {
	font-family: 'Montserrat', sans-serif !important; 
}

.frm_form_title { display: none !important; }

.frm_button_submit { 
	border:none !important; 
	font-family: 'Montserrat', sans-serif !important; 
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	text-transform: uppercase !important;
}

/* MX Styles */

#mx-footer-menu ul { margin: 0; padding: 0; text-align: right; }

#mx-footer-menu ul li { display: inline-block; list-style: none; margin: 0 auto 0 10px; }


/* Footer mini nav (shortcode output)
   Adjusted:
   - White text for links + copyright
   - No letter-spacing
   - Underline on hover for links only
*/

#footer-menu .mx-footer-mini-nav {
  width: 100%;
}

#footer-menu .mx-footer-mini-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* adjust if you want left-aligned */
}

#footer-menu .mx-footer-mini-nav__item {
  display: inline-flex;
  align-items: center;
}

/* Links */
#footer-menu .mx-footer-mini-nav__link {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  font-weight: 600;
}

#footer-menu .mx-footer-mini-nav__link:hover,
#footer-menu .mx-footer-mini-nav__link:focus {
  text-decoration: underline;
}

/* Pipe separators between items (including before copyright on desktop) */
#footer-menu .mx-footer-mini-nav__item + .mx-footer-mini-nav__item::before {
  content: "|";
  color: #ffffff;
  opacity: 0.6;
  margin: 0 14px;
}

/* Copyright text */
#footer-menu .mx-footer-mini-nav__copyright {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 600;
}

/* Tablet and smaller: copyright on its own line */
@media (max-width: 980px) {
  #footer-menu .mx-footer-mini-nav__copyright {
    flex-basis: 100%;
    justify-content: center;
    margin-top: 10px;
    text-align: center;
    white-space: normal;
  }

  /* Safety: no pipe before copyright */
  #footer-menu .mx-footer-mini-nav__copyright::before {
    content: "";
    margin: 0;
  }
}

/* Optional: slightly smaller on phones */
@media (max-width: 480px) {
  #footer-menu .mx-footer-mini-nav__link,
  #footer-menu .mx-footer-mini-nav__copyright {
    font-size: 13px;
  }
}

/* footer - display menu anyways */

@media (max-width: 980px) {
  .pa-open-mobile-menu .et_pb_menu__menu {
    display: flex!important;
  }
  .pa-open-mobile-menu .et_mobile_nav_menu {
    display: none!important;
  }
}

/* 2 Columns Mobile */
@media screen and (min-width: 481px) and (max-width: 980px) {
    html .et-db .tablet_2 .et_pb_column {
        width:47.25% !important;
    }
    
    html .et-db .tablet_2 .et_pb_column:nth-last-child(-n+2) {
        margin-bottom:0;
    }

    html .et-db .tablet_2 .et_pb_column:not(:nth-child(2n)) {
            margin-right:5.5% !important;
    }
}

/* footer - mobile tweaks */



@media screen and (min-width: 1376px) {
  #of_friday { white-space:nowrap; }
}

@media screen and (min-width: 981px) and (max-width: 1375px) {
  .office_day { display:block; }
}

@media screen and (min-width: 481px) and (max-width: 691px) {
  .office_day { display:block; }
}

@media screen and (max-width: 480px) {
  .office_day { display:inline; }
}


/*
  Divi Quicklinks Menu Cleanup (Desktop/Tablet + Mobile)
  Target menu wrapper/module: #mobile-quicklinks

  This version targets BOTH:
  - Divi mobile menu markup (.et_mobile_menu)
  - Divi desktop/tablet menu markup (ul.et-menu / .nav / .et_pb_menu__menu)

  Goal:
  - Hide dropdown arrows
  - Hide dropdown sub-menus
  - Remove extra spacing reserved for arrows
*/

/************************************
  A) DESKTOP / TABLET MENU (horizontal)
************************************/

/* 1) Hide dropdown caret/arrow (covers multiple Divi menu builds) */
#mobile-quicklinks ul.et-menu li.menu-item-has-children > a::after,
#mobile-quicklinks .nav li.menu-item-has-children > a::after,
#mobile-quicklinks .et_pb_menu__menu nav > ul > li.menu-item-has-children > a::after,
#mobile-quicklinks .et-menu-nav li.menu-item-has-children > a::after {
  display: none !important;
  content: none !important;
}

/* Some Divi setups output the caret as an actual icon element */
#mobile-quicklinks ul.et-menu li.menu-item-has-children > a .et-pb-icon,
#mobile-quicklinks .nav li.menu-item-has-children > a .et-pb-icon,
#mobile-quicklinks .et_pb_menu__menu nav > ul > li.menu-item-has-children > a .et-pb-icon,
#mobile-quicklinks .et-menu-nav li.menu-item-has-children > a .et-pb-icon {
  display: none !important;
}

/* 2) Remove extra right-padding reserved for the caret */
#mobile-quicklinks ul.et-menu li.menu-item-has-children > a,
#mobile-quicklinks .nav li.menu-item-has-children > a,
#mobile-quicklinks .et_pb_menu__menu nav > ul > li.menu-item-has-children > a,
#mobile-quicklinks .et-menu-nav li.menu-item-has-children > a {
  padding-right: 0 !important;
}

/* 3) Force-hide all dropdown submenus */
#mobile-quicklinks ul.et-menu ul.sub-menu,
#mobile-quicklinks .nav ul.sub-menu,
#mobile-quicklinks .et_pb_menu__menu nav ul.sub-menu,
#mobile-quicklinks .et-menu-nav ul.sub-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 4) Prevent hover/focus rules from re-showing dropdowns */
#mobile-quicklinks ul.et-menu li:hover > ul.sub-menu,
#mobile-quicklinks ul.et-menu li:focus-within > ul.sub-menu,
#mobile-quicklinks .nav li:hover > ul.sub-menu,
#mobile-quicklinks .nav li:focus-within > ul.sub-menu,
#mobile-quicklinks .et_pb_menu__menu nav li:hover > ul.sub-menu,
#mobile-quicklinks .et_pb_menu__menu nav li:focus-within > ul.sub-menu,
#mobile-quicklinks .et-menu-nav li:hover > ul.sub-menu,
#mobile-quicklinks .et-menu-nav li:focus-within > ul.sub-menu {
  display: none !important;
}


/************************************
  B) MOBILE MENU (collapsed hamburger list)
************************************/

/* 1) Hide dropdown arrow icons (mobile list) */
#mobile-quicklinks .et_mobile_menu li.menu-item-has-children > a::after,
#mobile-quicklinks .et_mobile_menu li.menu-item-has-children > span::after {
  display: none !important;
  content: none !important;
}

/* 2) Remove extra right padding reserved for arrow */
#mobile-quicklinks .et_mobile_menu li.menu-item-has-children > a,
#mobile-quicklinks .et_mobile_menu li.menu-item-has-children > span {
  padding-right: 0 !important;
}

/* 3) Completely hide all sub-menus */
#mobile-quicklinks .et_mobile_menu ul.sub-menu {
  display: none !important;
}

/* 4) Prevent any JS-toggled open states from showing sub-menus */
#mobile-quicklinks .et_mobile_menu li.et-show-dropdown > ul.sub-menu {
  display: none !important;
}


/************************************
  Optional: tidy spacing (if needed)
************************************/

/* Horizontal spacing between top-level links (only if you want) */
/*
#mobile-quicklinks ul.et-menu > li,
#mobile-quicklinks .nav > li {
  margin-right: 2.2vw;
}
*/


.nav_designed a { color:#fff;  }
.nav_designed a:hover { text-decoration:underline; }