/* duda-static-overrides.css — static replacements for behavior Duda's stripped
   runtime (d-js-runtime-flex / runtime-react) provided. Shared template: lift new
   rules HERE, never hand-author per client. Scope: Duda flex sites only.

   What the captured runtime CSS already covers WITHOUT JS (do not re-add):
   - desktop dropdown reveal (@media >=1025px .unifiednav__item-wrap:hover>.unav-sub)
   - sticky header (#flex-header[data-sticky]{position:sticky})
   - hamburger-slice open animation (.layout-drawer_open .hamburger__slice…) */

/* Mobile drawer: the runtime set the open transform inline; we do it by class.
   Closed transform comes from the runtime CSS ([data-origin=side-reverse] → 100%,0). */
.runtime-module-container .layout-drawer {
  transition: transform 0.3s ease-out;
}
/* !important: the runtime set this via inline style (which beats any selector);
   the closed-state rules key on [data-origin] and outrank a plain class chain. */
.runtime-module-container.layout-drawer_open .layout-drawer {
  transform: translate(0, 0) !important;
}
/* Overlay: runtime CSS only sets opacity/pointer-events on open; base it here. */
.runtime-module-container .layout-drawer-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  z-index: 12;
}
.runtime-module-container.layout-drawer_open .layout-drawer-overlay {
  opacity: 1;
  pointer-events: all;
}
/* Keep the page from scrolling behind the open drawer (runtime did this on body). */
body.ym-drawer-open {
  overflow: hidden;
}

/* Accordion (ssraccordion styled-components widget): the collapsed panel is
   .dygwmn-style {max-height:0}. JS toggles inline max-height; arrow rotate here. */
[data-element-type="ssraccordion"] [data-grab="accordion-item-title-wrapper"] {
  cursor: pointer;
}
[data-element-type="ssraccordion"] li.ym-open [data-grab="accordion-item-arrow"] {
  transform: rotate(180deg);
}

/* Minimal lightbox for Duda photo galleries (runtime lightbox replacement). */
.ym-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ym-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
}
.ym-lightbox button {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}
.ym-lightbox .ym-lb-prev,
.ym-lightbox .ym-lb-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  padding: 0 12px;
}
.ym-lightbox .ym-lb-prev { left: 8px; right: auto; }
.ym-lightbox .ym-lb-next { right: 8px; }

/* Entrance animations: pre-paint hidden state, scoped under the html.ym-anim gate
   the build's head script sets (desktop/tablet only, not under reduced-motion).
   No gate class => nothing is ever hidden (no-JS safe). The overrides JS reveals
   each element inline as it enters the viewport. */
html.ym-anim [data-anim-extended] {
  visibility: hidden;
}

/* Footer legal links (build-injected .ym-legal-links): no theme rule reaches a
   bare <a> there, so they fell to UA blue on the brand footer. Inherit the
   copyright line's colour; the underline stays as the link affordance. */
#dmRoot .ym-legal-links a,
.ym-legal-links a {
  color: inherit;
  text-decoration: underline;
}

/* ---- Touch targets + legibility (WCAG 2.5.8 / SEO checklist §3) ----------------
   Duda ships drawer rows at 42px (top) / 34px (sub, 12.8px text), a 32x22 header
   phone icon, a 30x30 hamburger and a 12px footer legal line. Scoped to the DRAWER
   and to touch widths, so the desktop nav and every closed-state pixel are untouched;
   icons keep their painted size — only the hit area grows (padding + negative margin).
   stanleyexcavation 2026-09-18, operator-approved; applies to every Duda client. */
#dm .hamburger-drawer .unifiednav .unav-item{min-height:48px;box-sizing:border-box;align-items:center}
#dm .hamburger-drawer .unifiednav .unav-sub .unav-item,
#dm .hamburger-drawer .unifiednav .unav-sub .unav-item .nav-item-text{font-size:16px}
/* !important: Duda's per-widget rules (#dm .dmInner … a.hamburgerButton{padding:0},
   per-id font sizes) out-rank any sane selector here. */
@media (max-width:1024px){
  #dmRoot #dm a.hamburgerButton{box-sizing:content-box!important;padding:9px!important;margin:-9px!important}
  #dmRoot #dm .graphicWidget>a[href^="tel:"]{display:block!important;box-sizing:content-box!important;padding:13px 8px!important;margin:-13px -8px!important}
}
@media (max-width:767px){
  #dmRoot #dm .dmFooterContainer p.copyright,
  #dmRoot #dm .dmFooterContainer p.copyright *{font-size:14px!important}
  #dmRoot #dm .dmFooterContainer p.ym-legal-links a{display:inline-flex;align-items:center;min-height:48px;padding:0 6px;vertical-align:middle}
}

/* Gallery mobile flow (build-stamped `order` on each thumb, row marked .ym-gal-ordered):
   columns dissolve, thumbs become items of the row in their original sequence. Replaces
   the JS re-flow, which ran after first paint and shifted every visible tile. */
@media (max-width:767px){
  .dmPhotoGallery .photogallery-row.ym-gal-ordered{display:flex!important;flex-direction:column}
  .dmPhotoGallery .photogallery-row.ym-gal-ordered>.photogallery-column{display:contents!important}
  .dmPhotoGallery .photogallery-row.ym-gal-ordered .photoGalleryThumbs{width:100%}
}

/* Slide-in entrances start translated ±100% — for ~1s the page is hundreds of px wider
   than the viewport and a horizontal scrollbar flashes (live Duda does the same; measured
   +504px on /about, +1176px on /contact, 0 after 1.5s). clip, not hidden: no scroll
   container is created, so the sticky header keeps working. */
html.ym-anim,html.ym-anim body{overflow-x:clip} /* html alone does not hold: measured */

/* Remaining sub-48px touch targets at phone width (measured on all 44 pages 2026-09-18):
   header logo link 116x22, footer social icons 30x35, blog prev/next 22-30px tall,
   form inputs 40px. Hit areas grow; glyphs and type keep their size. */
@media (max-width:767px){
  #dmRoot #dm [id*=HeaderContainer] .imageWidget>a,#dmRoot #dm .dmHeader .imageWidget>a{display:block!important;padding:13px 0!important;margin:-13px 0!important}
  #dmRoot #dm .socialHubInnerDiv>a{display:inline-flex!important;align-items:center;justify-content:center;min-width:48px;min-height:48px}
  #dmRoot #dm .prev-next-links>a{display:inline-flex;align-items:center;min-height:48px}
  #dmRoot #dm .dmform input[type=text],#dmRoot #dm .dmform input[type=email],#dmRoot #dm .dmform input[type=tel],#dmRoot #dm .dmform select{min-height:48px}
  #dmRoot #dm .dmform input[type=submit],#dmRoot #dm .dmform button[type=submit]{min-height:48px}
}