/* ============================================================================
 * migration-overrides.css — the ONLY CSS written by hand for this migration.
 *
 * Everything else under /styles/ is Duda's own cascade, ported byte-for-byte with
 * nothing changed but url() targets. This file exists solely because Duda serves
 * THREE separate HTML documents and we serve one: the elements that exist in only
 * one of those documents are all present here at once and have to be shown to the
 * device that actually had them.
 *
 * Breakpoints are Duda's own, read out of its runtime package:
 *   mobile  <= 767   |   tablet 768-1024   |   desktop >= 1025
 *
 * Nothing here restyles the site. It only gates visibility of markup that is
 * device-exclusive on the original, plus the honeypot (which has no counterpart
 * on live at all).
 * ========================================================================== */

/* --- 1. Header variants ---------------------------------------------------
 * Desktop + tablet render .dmHeaderContainer > #hcontainer.
 * Mobile renders #hamburger-header-container plus a sibling hamburger <button>,
 * the drawer, its overlay and a back-to-top link — none of which exist in the
 * desktop or tablet documents at all.
 */
@media (max-width: 767px) {
  #dmRoot #dm .dmHeaderContainer,
  #dmRoot #dm .dmRespRow.dmPageTitleRow {
    display: none !important;
  }
}

@media (min-width: 768px) {
  #dmRoot #dm #hamburger-header-container,
  #dmRoot #dm #layout-drawer-hamburger,
  #dmRoot #dm #mobile-hamburger-drawer,
  #dmRoot #dm .layout-drawer-overlay,
  #dmRoot #dm #dmBackToTop {
    display: none !important;
  }
  /* The drawer's wrapper is the .p_hfcontainer that immediately precedes the
     content wrapper inside #site_content; it is empty once the drawer is hidden,
     but Duda's flex rules would still reserve a row for it. */
  #dmRoot #dm #site_content > .p_hfcontainer:first-child {
    display: none !important;
  }
}

/* --- 1b. Per-device widget variants ---------------------------------------
 * Duda's photo gallery builds its grid client-side and the three documents
 * genuinely disagree — desktop 1 row x 3 columns with captions over the image,
 * tablet the same grid but captions below, mobile 3 rows x 1 column. All three
 * are emitted and gated here. Shipping the desktop grid to a phone measured
 * 71.4% against live, so this is not cosmetic.
 */
@media (max-width: 767px) {
  #dmRoot #dm .mg-only-d,
  #dmRoot #dm .mg-only-t {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #dmRoot #dm .mg-only-d,
  #dmRoot #dm .mg-only-m {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  #dmRoot #dm .mg-only-t,
  #dmRoot #dm .mg-only-m {
    display: none !important;
  }
}

/* --- 2. Honeypot ----------------------------------------------------------
 * Duda sites rely on reCAPTCHA for spam protection and we remove that widget
 * (its keys are Duda's and domain-restricted), so without this a migrated form
 * ships with none.
 *
 * Positioned off-screen rather than display:none — bots know to skip obviously
 * hidden fields — and taken OUT OF FLOW so it costs exactly zero layout, which is
 * what keeps the pixel gate honest.
 */
.mg-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- 3. Leaflet map host --------------------------------------------------
 * Duda's widget is Mapbox GL on live, driven by Duda's OWN shared account token,
 * which is URL-restricted and must never ship on a client domain. The map is
 * rebuilt on Leaflet + OpenStreetMap into the same .mapContainer host, at the same
 * centre, zoom and marker. mapbox-gl.css is not shipped, so the host needs its
 * box back — these are the two declarations that sheet supplied.
 */
.mapContainer {
  position: relative;
  overflow: hidden;
}

/* L.map(host) adds leaflet-container to the HOST itself, so this is one element,
   not a descendant. The host already carries Duda's inline width/height 100%; the
   background only shows while tiles are in flight. */
.mapContainer.leaflet-container {
  width: 100%;
  height: 100%;
  background: #ddd;
}

/* --- 4. Legal pages and their links ---------------------------------------
 * ADDED IN REVIEW, not ported. cleanaire.net has no Privacy Policy and no Terms
 * page, so neither these links nor the pages they point at have a counterpart on
 * live and nothing in Duda's cascade styles them. Everything below is scoped to
 * the two `gy-` classes so it cannot reach any ported markup.
 */

/* The footer links live INSIDE `.copyright`, which Duda lays out as a centred
   flex row — so they share the copyright's line. The footer background is dark
   and the inherited link colour (#463939) is unreadable on it, so the size and
   colour are taken from .copyright itself rather than invented.

   `.copyright` is allowed to wrap: on a narrow phone the copyright plus both
   links do not fit one line, and without wrapping they would overflow the
   footer's width instead of stacking. */
#dmRoot #dm .copyright {
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
}

.gy-legal-links {
  display: inline-flex;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.6;
}

.gy-legal-links a {
  color: #fff;
  text-decoration: none;
}

.gy-legal-links a:hover,
.gy-legal-links a:focus {
  text-decoration: underline;
}

.gy-legal-links .gy-sep {
  color: #fff;
  opacity: 0.5;
  padding: 0 6px;
}

/* The legal pages themselves are long-form prose in Duda's paragraph widget.
   The widget styles <p> but ships no list styling for the `rteBlock` <ul>s these
   documents need, so bullets would render flush and un-marked. */
.gy-legal ul.rteBlock {
  list-style: disc outside;
  margin: 0 0 12px;
  padding-left: 22px;
}

.gy-legal ul.rteBlock li {
  margin: 0 0 4px;
}

.gy-legal h2 {
  margin-top: 26px;
}

/* Give the prose a comfortable measure instead of running the full 1120px row. */
.gy-legal-row .dmNewParagraph.gy-legal {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 0 40px;
}

/* The form legal links sit after the last field, inside the form box.
 *
 * z-index is load-bearing, not decoration. Duda's rows OVERLAP: on 8 of the 10
 * form pages the next .dmRespRow begins ~50px above the form row's bottom edge
 * and paints a `rgba(255,255,255,.7)` background, so anything sitting in that
 * band gets washed out from underneath. A stacking context here keeps the links
 * legible whatever the row below does. Measured on /duct-cleaning: form row
 * bottom 7278, next row top 7228. */
.gy-form-legal {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 0 0;
  clear: both;
}

.gy-form-legal span {
  opacity: 0.55;
  padding: 0 3px;
}

/* --- 5. Body-text interlinks ----------------------------------------------
 * The business name, linked to the homepage once per page where the page copy
 * mentions it. Underlined so it reads as a link in running prose; the class is
 * applied ONLY to body copy, never to headings, buttons, or header/footer
 * content, which carry their own link treatment.
 */
/* Duda's own `#dm a { text-decoration: none }` wins on specificity, so the
   underline has to be declared at least as specifically. #dmRoot #dm matches the
   pattern the rest of this file already uses. */
#dmRoot #dm a.gy-interlink {
  text-decoration: underline;
  color: inherit;
}

#dmRoot #dm a.gy-interlink:hover,
#dmRoot #dm a.gy-interlink:focus {
  text-decoration: underline;
  opacity: 0.85;
}

/* --- 6. Dropdown items match their parent nav items ------------------------
 * Duda styles sub-nav items one step LARGER than the top-level items they hang
 * off — measured on the desktop nav: top-level 15px/30px, dropdown 16px/32px.
 * Live has the same mismatch, so this is an inherited quirk, not port drift.
 *
 * Scoped to the header/footer navs and to >=768px so it cannot reach the mobile
 * drawer, whose nested items are deliberately smaller (12.8px) as an indent cue.
 * The inner <span> carries its own font-size, so it has to be set too or it wins.
 */
@media (min-width: 768px) {
  #dmRoot #dm .dmHeaderContainer .unifiednav__container_sub-nav .unifiednav__item,
  #dmRoot #dm .dmHeaderContainer .unifiednav__container_sub-nav .unifiednav__item span,
  #dmRoot #dm .dmFooterContainer .unifiednav__container_sub-nav .unifiednav__item,
  #dmRoot #dm .dmFooterContainer .unifiednav__container_sub-nav .unifiednav__item span {
    font-size: 15px;
    line-height: 30px;
  }
}

/* On a phone the copyright and the two links cannot share one line, so
   `.copyright` wraps them onto a second — which left the leading separator
   dangling at the start of that line. Below the wrap point it has nothing to
   separate, so it goes. */
@media (max-width: 767px) {
  .gy-legal-links .gy-sep:first-child {
    display: none;
  }
}

/* --- 7. Drawer sub-menu items match their parents --------------------------
 * The drawer panel is Duda green (#80bc41) and its TOP-level items are white,
 * but the nested items under "Service Areas" inherit #2b2b2b — dark grey on
 * green, which barely reads. Live has the same, so it is inherited, not drift;
 * it only became noticeable once the sub-menu could actually be opened (§D11).
 *
 * Duda's whole nav-effect chain is scoped to `:not([data-depth])`, i.e. top
 * level only — sub-lists carry `data-depth="0"` and are deliberately excluded,
 * which is why these items have no underline bars at all. This section gives
 * the nested items the same treatment their parents get: white text, and the
 * `effect-top-bottom` rules above and below when the item is the current page.
 *
 * Scoped to #mobile-hamburger-drawer so the desktop dropdown is untouched.
 */
#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item,
#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item .nav-item-text {
  color: #fff;
}

/* The bars are rebuilt rather than inherited, because the rules that draw them
   explicitly exclude this depth. Values are the parents' own: 2px, border-top
   in `currentColor` (now white), offset 8px, and Duda's 0.2s ease-out. */
#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item .nav-item-text::before,
#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item .nav-item-text::after {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  border: 0 solid transparent;
  border-top-width: 2px;
  border-top-color: currentColor;
  opacity: 0;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item .nav-item-text::before {
  margin-bottom: 0.2em;
  transform: translate3d(0, -6px, 0);
}

#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item .nav-item-text::after {
  margin-top: 0.2em;
  transform: translate3d(0, 6px, 0);
}

/* Current page, and touch/hover — the same triggers the parents use. */
#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item.dmNavItemSelected .nav-item-text::before,
#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item.dmNavItemSelected .nav-item-text::after,
#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item.hover .nav-item-text::before,
#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item.hover .nav-item-text::after,
#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item:hover .nav-item-text::before,
#dmRoot #dm #mobile-hamburger-drawer .unifiednav__container_sub-nav .unifiednav__item:hover .nav-item-text::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}