/* 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; }