/* Visual support for duda-fixups.js — show open menu/drawer states.
   Two mega-menu patterns supported:
     Pattern A (nested-ul):     trigger > ul[role="menu"]
     Pattern B (aria-controls): separate panel with [data-mega-menu-panel="1"] */

/* --- Pattern A: nested-ul, hidden by default, shown when ._dudafixup-open --- */
[data-mega-menu-pattern="nested-ul"] > ul[role="menu"],
[aria-haspopup="true"][data-sub-nav-menu="true"]:not(#hamburger-drawer *) > ul[role="menu"] {
  display: none;
}
[data-mega-menu-pattern="nested-ul"] > ul[role="menu"]._dudafixup-open,
[aria-haspopup="true"][data-sub-nav-menu="true"]:not(#hamburger-drawer *) > ul[role="menu"]._dudafixup-open {
  display: block !important;
}

/* --- Pattern B: aria-controls panel. Default hidden via aria-hidden+inert; show via class. --- */
[data-mega-menu-panel="1"] {
  /* Already aria-hidden=true + inert, but also enforce CSS hiding for browsers that don't honor inert visually */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
[data-mega-menu-panel="1"]._dudafixup-open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}

/* Inside an open panel, captured styled-components rules often leave
   `<nav class="navigation-widget">` (and similar wrappers) at opacity:0
   because the original site only fades them in via a state attribute we
   don't replicate. Force everything inside the open panel to be visible. */
[data-mega-menu-panel="1"]._dudafixup-open .navigation-widget,
[data-mega-menu-panel="1"]._dudafixup-open nav,
[data-mega-menu-panel="1"]._dudafixup-open .nav-container,
[data-mega-menu-panel="1"]._dudafixup-open .nav-list,
[data-mega-menu-panel="1"]._dudafixup-open .nav-item,
[data-mega-menu-panel="1"]._dudafixup-open .dmCustomWidget {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Long nav-lists (8+ items) get split into two visual columns. Captured DOM
   has all 14 AUTO REPAIR items in a single column (the original Duda widget
   uses CSS the captured rules don't replicate). flex-wrap with a max-height
   that clips at 7 rows produces a clean 2-column layout in source order. */
[data-mega-menu-panel="1"]._dudafixup-open .nav-list:has(> .nav-item:nth-child(8)) {
  flex-direction: column !important;
  flex-wrap: wrap !important;
  max-height: 290px !important;
  align-content: flex-start !important;
}
[data-mega-menu-panel="1"]._dudafixup-open .nav-list:has(> .nav-item:nth-child(8)) > .nav-item {
  width: 50% !important;
  flex: 0 0 auto !important;
}

/* --- Mobile drawer (hamburger) --- */
#hamburger-drawer._dudafixup-drawer-open {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.layout-drawer-overlay._dudafixup-drawer-open,
.mw-ld-overlay-mobile._dudafixup-drawer-open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body._dudafixup-no-scroll { overflow: hidden; }

/* Mobile drawer — collapsed sub-nav by default, shown when ._dudafixup-drawer-sub-open
   is added by the runtime shim (toggled by tapping the parent item).
   Captured Duda CSS leaves these visible by default in the drawer; we collapse them. */
#hamburger-drawer ul.unifiednav__container_sub-nav,
#hamburger-drawer ul[role="menu"] {
  display: none;
}
#hamburger-drawer ul.unifiednav__container_sub-nav._dudafixup-drawer-sub-open,
#hamburger-drawer ul[role="menu"]._dudafixup-drawer-sub-open {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#hamburger-drawer li._dudafixup-drawer-sub-open > a .icon-angle-down,
#hamburger-drawer li._dudafixup-drawer-sub-open > a .icon-angle-right {
  transform: rotate(180deg);
  transition: transform 0.15s ease;
}

._dudafixup-close:hover { background: #333 !important; }

/* --- Duda FAQ widget (styled-components based) ---
   Items are <li data-faq-item="1" data-grab="accordion-item-container">.
   First child div = title (clickable). Second child div = answer body.
   Hide answer body by default; show when item has ._dudafixup-faq-open class. */
[data-faq-item="1"] > div:nth-of-type(1) { user-select: none; }
[data-faq-item="1"] > div:nth-of-type(2) { display: none; }
[data-faq-item="1"]._dudafixup-faq-open > div:nth-of-type(2) { display: block !important; }
[data-faq-item="1"]._dudafixup-faq-open [data-grab="accordion-item-arrow"] {
  transform: rotate(180deg);
  transition: transform 0.15s ease;
}

/* ----------------------------------------------------------------
 * AutoOps widget scroll/clipping fixes
 * ----------------------------------------------------------------
 * INLINE EMBED (only on /appointments): <iframe id="portal-embed-id">
 *   - Lives inside <div id="ao-embed-id">. AutoOps' SDK creates this
 *     iframe with width:100% / height:100% — but its parent div has
 *     no explicit height, so the iframe collapses to 0 unless we
 *     give it one.
 *   - Use clamp(833px, 95vh, 1400px) so on tall viewports the inner
 *     booking flow has room to breathe, and on short viewports the
 *     iframe never shrinks below 833px (its design minimum) — the
 *     iframe's own internal page handles vertical scroll past that.
 *
 * MODAL (AutoOps.show()): <iframe id="portal-id" class="portal-class">
 *   - SDK sets position:fixed; width:100vw; height:100% (relative to
 *     viewport when fixed) and inserts at the start of <body>.
 *   - DO NOT apply the inline-embed clamp() rule here — that forces
 *     min-height:833px even on viewports shorter than 833px, pushing
 *     the bottom of the modal off-screen with no scrollbar to recover
 *     it. Let the SDK's own sizing rules apply (full viewport).
 *   - We just guarantee no parent rule clips it.
 */
iframe#portal-embed-id {
  min-height: 833px !important;
  height: clamp(833px, 95vh, 1400px) !important;
  max-height: none !important;
}
/* The modal iframe (#portal-id) is wrapped at runtime by
   _autoops-modal.js inside <div class="ao-scroll-wrap">. The wrapper
   takes the viewport box and provides scrollbars; the iframe itself
   is forced taller than typical AutoOps card content (1300px) so the
   inner card never gets clipped at the bottom — users scroll the
   wrapper to reach the "Next" button. We deliberately do NOT pin the
   iframe's height in CSS — the JS sets it inline and CSS !important
   would defeat the scroll fix. */
.ao-scroll-wrap {
  /* Hint to the browser that this is a scrolling region — improves
     touch scrolling on iOS Safari and momentum behavior on macOS. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Solid backdrop so the underlying page doesn't bleed through above
     or below the AutoOps card when the user scrolls the wrapper. The
     SDK's own iframe paints its own translucent backdrop for the card
     area; this fills any gaps. */
  background: rgba(0, 0, 0, 0.55);
}
.ao-scroll-wrap > iframe#portal-id {
  /* Defense-in-depth: if any later stylesheet (Duda's, AutoOps') tries
     to pin height back to 100vh, the JS-injected style="height:1300px"
     wins because we don't add !important here. The width/position/inset
     resets are needed because the SDK applies position:fixed inline and
     CSS !important on the original rule used to override the JS reset. */
  position: relative;
  inset: auto;
  width: 100%;
  max-height: none;
}