/* Level 4 — shared nav + FAQ helpers (theme colors unchanged) */

/* Compact 2-column Services mega dropdown — readable size vs main nav (~15–16px) */
@media (min-width: 992px) {
  .dt_navbar-nav .dt_navbar-mainmenu > .menu-item-has-children {
    position: relative;
  }
  .dt_navbar-nav .dt_navbar-mainmenu > .menu-item-has-children > .dropdown-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    min-width: 42rem;
    width: 42rem;
    max-width: min(42rem, 92vw);
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border-bottom: 0.4rem solid var(--dt-pri-color, #00a0e8);
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.12);
    z-index: 10050;
    line-height: 1.5;
  }
  .dt_navbar-nav .dt_navbar-mainmenu > .menu-item-has-children > .dropdown-menu > .menu-item {
    width: auto;
    float: none;
  }
  .dt_navbar-nav .dt_navbar-mainmenu > .menu-item-has-children > .dropdown-menu > .menu-item > a,
  .dt_navbar-nav .dt_navbar-mainmenu > .menu-item-has-children > .dropdown-menu > .menu-item > a.nav-link {
    display: block;
    padding: 1rem 1.5rem;
    white-space: normal;
    line-height: 1.5;
    color: #0e1422;
    border-bottom: 0.1rem solid rgba(241, 241, 241, 1);
    /* Theme root is 62.5% → 1.5rem ≈ 15px (matches main nav body size) */
    font-size: 1.5rem;
    font-weight: 600;
  }
  .dt_navbar-nav .dt_navbar-mainmenu > .menu-item-has-children > .dropdown-menu > .menu-item:nth-last-child(-n+2) > a {
    border-bottom: 0;
  }
  .dt_navbar-nav .dt_navbar-mainmenu > .menu-item-has-children > .dropdown-menu > .menu-item > a:hover,
  .dt_navbar-nav .dt_navbar-mainmenu > .menu-item-has-children > .dropdown-menu > .menu-item > a:focus {
    color: var(--dt-pri-color, #00a0e8);
    background: #f7f8fa;
    padding-left: 1.75rem;
  }
}

/* Mobile nested Services list stays readable in hamburger */
@media (max-width: 991px) {
  .dt_mobilenav .dt_navbar-mainmenu .dropdown-menu,
  .dt_mobilenav-mainmenu-content .dropdown-menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    background: transparent !important;
    padding: 0.35rem 0 0.6rem 1rem;
    grid-template-columns: none !important;
  }
  .dt_mobilenav .dt_navbar-mainmenu .dropdown-menu > .menu-item > a,
  .dt_mobilenav-mainmenu-content .dropdown-menu > .menu-item > a {
    padding: 0.75rem 0.9rem;
    white-space: normal;
    line-height: 1.5;
    border-bottom: 0;
    font-size: 1.5rem;
    font-weight: 600;
  }
}

/* FAQ accordion helpers (service + door pages) */
.ml4-faq details.ml4-info-card {
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.ml4-faq details.ml4-info-card summary {
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.ml4-faq details.ml4-info-card summary::-webkit-details-marker { display: none; }
.ml4-faq details.ml4-info-card summary::after {
  content: '+';
  float: right;
  font-weight: 700;
}
.ml4-faq details.ml4-info-card[open] summary::after { content: '\2212'; }
.ml4-faq details.ml4-info-card .ml4-faq-answer {
  margin-top: 0.75rem;
}
.ml4-faq details.ml4-info-card .ml4-faq-answer p:last-child {
  margin-bottom: 0;
}

/* Benefits / how-it-works strip spacing */
.ml4-benefits-grid,
.ml4-how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}
@media (min-width: 768px) {
  .ml4-benefits-grid { grid-template-columns: 1fr 1fr; }
  .ml4-how-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
  .ml4-how-grid { grid-template-columns: repeat(4, 1fr); }
  .ml4-benefits-grid { grid-template-columns: repeat(4, 1fr); }
}

/*
 * Comparison tables (business.html etc.)
 * Theme sets `table th { color: white; background: pri }` — our light-grey header
 * left white text on #f7f8fa. Force brand navy for headers + first column.
 */
.ml4-compare-table th,
.ml4-table th {
  color: #0a2540 !important;
  background: #f7f8fa !important;
  font-weight: 600;
}
.ml4-compare-table td,
.ml4-table td {
  color: #0e1422;
}
.ml4-compare-table th[scope="row"],
.ml4-table th[scope="row"] {
  color: #0a2540 !important;
  background: #f7f8fa !important;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .ml4-compare-table,
  .ml4-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ml4-compare-table th[scope="row"],
  .ml4-table th[scope="row"] {
    white-space: normal;
  }
}

/*
 * Home orbiting-dot cards (Quality Service row + What to Expect steps)
 * 1) Equalize card heights in each row
 * 2) Stop top of set A being covered/clipped by the slider above
 */
.dt_slider--five + .dt_service--eight {
  position: relative;
  z-index: 2;
  overflow: visible;
  /* Keep overlap look but leave room so icon circles aren't cut off */
  padding-top: 2.5rem;
}

.dt_service--eight {
  overflow: visible;
}

.dt_service--eight .info-wrp {
  align-items: stretch;
}

.dt_service--eight .info-wrp > [class*="dt-col"] {
  display: flex;
  flex-direction: column;
}

.dt_service--eight .info-wrp .dt_item_inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  overflow: visible;
}

.dt_service--eight .info-wrp .dt_item_holder {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

.dt_service--eight .info-wrp .dt_item_content {
  flex: 1 1 auto;
}

.dt_service--eight .info-wrp .num-icon-wrap {
  flex-shrink: 0;
}

/* What to Expect title swoop: full wave visible above step cards.
   Theme ::before is only 3.1rem tall; on a wide "First Call to Done" span the
   SVG mask needs more height, so the wave was cropped flat. Also keep it
   layered above the white cards. */
#ml4_expect .dt-row.dt-mb-6 {
  position: relative;
  z-index: 5;
  overflow: visible;
  margin-bottom: 2.5rem;
}

#ml4_expect .dt_siteheading,
#ml4_expect .dt_siteheading .title {
  overflow: visible;
}

#ml4_expect .dt_siteheading .title {
  padding-bottom: 3.6rem;
}

#ml4_expect .dt_siteheading .title > span:not(.dt_heading) {
  position: relative;
  z-index: 6;
  overflow: visible;
}

#ml4_expect .dt_siteheading .title > span:not(.dt_heading)::before {
  height: 5rem;
  bottom: -3.4rem;
  z-index: 6;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-position: center top;
  mask-position: center top;
}

#ml4_expect .info-wrp .dt_item_inner {
  z-index: 1;
}

/* Larger follow-up line under Send Quote Request */
.ml4-quote-followup {
  font-size: 1.7rem;
  line-height: 1.5;
  margin-top: 1.2rem;
  color: #3a4558;
}

.ml4-quote-followup a {
  font-weight: 600;
}

/*
 * CLS fix (homepage hero): Owl's .owl-carousel { display: none } until
 * .owl-loaded leaves the hero at 0 height on first paint, then it jumps
 * (~48–79rem) and shoves #dt_service_one down (~0.47 CLS).
 * Reserve space on #dt_slider and show the hero carousel before Owl runs.
 * Keep absolute picture/img cover rules; do not rewrite Owl.
 */
#dt_slider.dt_slider {
  min-height: 48rem;
  max-height: 48rem;
}

@media (min-width: 36em) {
  #dt_slider.dt_slider {
    min-height: 54rem;
    max-height: 54rem;
  }
}

@media (min-width: 62em) {
  #dt_slider.dt_slider {
    min-height: 68rem;
    max-height: 68rem;
  }
}

@media (min-width: 87.5em) {
  #dt_slider.dt_slider {
    min-height: 79rem;
    max-height: 79rem;
  }
}

/* Override Owl display:none before .owl-loaded (child min-heights apply).
   Parent max-height + existing .dt_slider overflow:hidden clip stacked
   pre-init slides so layout height stays reserved, not 3× tall. */
#dt_slider .dt_owl_carousel.owl-carousel.slider {
  display: block;
}