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

/* ----------------------------------------------------------------
 * B-22 — Team Members custom widget (.team-members-widget)
 * ----------------------------------------------------------------
 * Captured page is missing the runtime CSS that would normally style
 * .filter-controls.collapsed (closed state) and .filter-chevron.rotated
 * (closed-state arrow). Re-add them so the shim's JS toggle produces a
 * visible state change. Scoped to .team-members-widget so we never
 * affect other widgets that happen to use .collapsed / .rotated.
 */
.team-members-widget .filter-controls.collapsed {
  display: none !important;
}
.team-members-widget .filter-chevron {
  transition: transform 0.2s ease;
}
.team-members-widget .filter-chevron.rotated {
  transform: rotate(180deg);
}
/* When .filter-controls is collapsed, .filter-section has height:0 and the
 * absolutely-positioned .filter-toggle-btn sticks down into the
 * .members-container area below. The next .group-header (e.g. "The
 * Management Team / 4 members") is later in source order and paints on top
 * of the button — so REAL clicks at the button's center hit the group-header
 * instead of the button (and synthetic .click() calls work, masking the
 * issue during local testing). Give .filter-section its own stacking context
 * + a min-height so the button has reserved space and always sits above the
 * members content underneath.
 */
.team-members-widget .filter-section {
  position: relative;
  z-index: 5;
  min-height: 48px;
}
/* Filtered-out cards/groups (search/dept/location no-match). */
.team-members-widget [data-_dudafixup-staff-hidden="1"] {
  display: none !important;
}

/* ----------------------------------------------------------------
 * B-26 — Service Categories carousel + grid mode.
 * ----------------------------------------------------------------
 * initServiceCategories() puts .cards-grid into 'carousel' mode by default
 * (cards laid out in a horizontal row; arrows step through pages). View All
 * click switches to 'grid' mode (full 3-col grid showing all cards).
 *
 * The carousel layout uses a translate3d on .cards-grid; the parent
 * widget's overflow:hidden clips off-page cards. Cards-per-view is
 * responsive 3 / 2 / 1 (matching the OUR VALUES slider).
 */
.cards-grid[data-_dudafixup-service-mode="carousel"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  transition: transform 0.4s ease !important;
}
.cards-grid[data-_dudafixup-service-mode="carousel"] > .content-card {
  flex: 0 0 calc(100% / 3) !important;
  min-width: calc(100% / 3) !important;
  max-width: calc(100% / 3) !important;
  display: flex !important;
  box-sizing: border-box;
  padding: 0 12px;
}
@media (max-width: 1024px) {
  .cards-grid[data-_dudafixup-service-mode="carousel"] > .content-card {
    flex: 0 0 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 767px) {
  .cards-grid[data-_dudafixup-service-mode="carousel"] > .content-card {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}
/* The parent widget hides overflow when in carousel mode. */
.content-list-widget:has(> .cards-grid[data-_dudafixup-service-mode="carousel"]),
.content-list-widget:has(.cards-grid[data-_dudafixup-service-mode="carousel"]) {
  overflow: hidden;
}
/* Arrows: hide when in grid mode. */
.cards-grid[data-_dudafixup-service-mode="grid"] ~ ._dudafixup-svc-arrow,
.cards-grid[data-_dudafixup-service-mode="grid"] + ._dudafixup-svc-arrow {
  display: none !important;
}
.content-list-widget:has(.cards-grid[data-_dudafixup-service-mode="grid"]) ._dudafixup-svc-arrow {
  display: none !important;
}
/* Grid mode keeps existing default 3-col grid layout (let captured CSS apply). */

/* ----------------------------------------------------------------
 * B-24b — Blog index Show More: hide posts marked hidden by initBlogShowMore.
 * ----------------------------------------------------------------
 * On /blog-and-media/blog/ the captured HTML has 173+ posts pre-rendered.
 * initBlogShowMore stamps data-_dudafixup-blog-hidden="1" on posts past the
 * visible-count window; click reveals 9 more by removing the attr.
 */
.postArticle[data-_dudafixup-blog-hidden="1"] {
  display: none !important;
}

/* ----------------------------------------------------------------
 * B-27 — photo-gallery "View more / View less" toggle (Duda runtime stripped).
 * ----------------------------------------------------------------
 * Galleries hide rows past rowsToShow with .photogallery-hidden-row (captured
 * CSS sets display:none). initPhotoGalleryViewAll() toggles
 * ._dudafixup-pg-expanded on the gallery; this rule reveals the hidden rows
 * when expanded. Collapsed is the default. Without it, ~half the gallery's
 * links (e.g. 16/32 services) were unreachable because the dead "View more"
 * never revealed them.
 */
.dmPhotoGallery._dudafixup-pg-expanded .photogallery-hidden-row {
  display: flex !important;
}