/* ==========================================================================
   Behaviour layer.

   duda.css carries the recovered visual design (colours, type, spacing,
   backgrounds). This file supplies only the interaction the original site got
   from Duda's JavaScript runtime — which header shows at which width, the
   hamburger drawer, the nav dropdowns and the FAQ accordions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Which header is live at which width.

   The original serves three different headers by user-agent. Reproduced here
   as three markup variants gated on Duda's own device breakpoints:
     mobile  <= 767px   tablet 768–1024px   desktop >= 1025px
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  #hamburger-header-container {
    display: none;
  }
}

@media (max-width: 1024px) {
  .d-header-desktop {
    display: none;
  }
}

.d-header-tablet {
  display: none;
}
.d-header-mobile {
  display: none;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .d-header-tablet {
    display: block;
  }
}

@media (max-width: 767px) {
  .d-header-mobile {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Hamburger and drawer.

   Their appearance, position and open/close animation all come from Duda's own
   recovered rules in duda.css (`.layout-drawer-hamburger`, `.layout-drawer`,
   `.layout-drawer_open`, `hamburger-reverse`). Only two things are added here:
   hiding them above the hamburger breakpoint, and locking body scroll while
   the drawer is open.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  #hamburger-drawer,
  .layout-drawer-overlay,
  .layout-drawer-hamburger {
    display: none;
  }
}

#dm-outer-wrapper.layout-drawer_open ~ * ,
body:has(#dm-outer-wrapper.layout-drawer_open) {
  overflow: hidden;
}

/* Hints the browser to promote the pushed page and the drawer panel to their
   own compositing layers before the slide starts, rather than mid-transition
   — the usual cause of a first-open stutter on this kind of whole-page
   transform. */
#dm-outer-wrapper.layout-drawer_push-content,
#hamburger-drawer.layout-drawer {
  will-change: transform;
}

/* Drawer panel theme — Duda ships this as a plain white list (see
   .layout-drawer in duda.css); this layers the site's own teal/charcoal
   brand on top without touching the geometry or open/close mechanics. */
#hamburger-drawer.layout-drawer {
  border-left: 4px solid var(--color_1, #178599);
}
.hamburger-reverse #hamburger-drawer.layout-drawer[data-origin="side-reverse"] {
  border-left: 0;
  border-right: 4px solid var(--color_1, #178599);
}

/* Duda's own vertical-nav layout draws a divider between top-level items via
   a `::after` pseudo-element (`border-top:1px solid currentColor`, colour
   #d1d1d1) — not a plain border, which is why removing a border-bottom
   elsewhere didn't touch it. */
#hamburger-drawer .unifiednav[data-nav-structure="VERTICAL"] .unav-top > .unifiednav__item-wrap::after {
  display: none !important;
}

/* Same type as the desktop bar (Jost, semibold) — the drawer's <nav> never
   gets one of Duda's per-widget-id font rules (those are scoped to specific
   nav instances by id, and the drawer's doesn't carry one), so without this
   it falls back to the site's body font instead of matching the desktop
   nav. Text stays the site's standard dark charcoal at every state — a
   teal this light reads under 4.5:1 against white, so colour lives in the
   border/background accents instead of the text itself. */
#hamburger-drawer .unifiednav[data-nav-structure="VERTICAL"] .unifiednav__item {
  font-family: Jost, "Jost Fallback";
  color: var(--color_8, #2b2b2b);
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#hamburger-drawer .unifiednav[data-nav-structure="VERTICAL"] .unifiednav__item:hover,
#hamburger-drawer .unifiednav[data-nav-structure="VERTICAL"] .unifiednav__item:focus-visible {
  background-color: rgba(23, 133, 153, 0.08);
  border-left-color: var(--color_1, #178599);
}

#hamburger-drawer .unifiednav[data-nav-structure="VERTICAL"] .unifiednav__item.dmNavItemSelected {
  background-color: rgba(23, 133, 153, 0.08);
  border-left-color: var(--color_1, #178599);
  font-weight: 700;
}

#hamburger-drawer .unifiednav[data-nav-structure="VERTICAL"] .unav-sub {
  background-color: var(--color_4, #f4f4f4);
}

#hamburger-drawer .unifiednav[data-nav-structure="VERTICAL"] .unav-sub .unifiednav__item {
  color: var(--color_8, #2b2b2b);
}

/* --------------------------------------------------------------------------
   Navigation.

   Desktop: a horizontal bar whose four parent items are clickable links that
   also open a submenu on hover/focus.
   Drawer: the same tree stacked vertically, with the caret acting as the
   submenu toggle so the parent link itself stays tappable.
   -------------------------------------------------------------------------- */
/* The bar's own type, spacing and colours are Duda's — do not restate them
   here or the two sets of rules fight and the item heights drift. What Duda
   left to its JavaScript, and so has to be supplied, is only the submenu
   show/hide. */
.unifiednav__item-wrap {
  position: relative;
}

.unifiednav:not([data-nav-structure="VERTICAL"]) .unav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  z-index: 60;
  background: var(--color_3, #fff);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.unifiednav:not([data-nav-structure="VERTICAL"]) .unifiednav__item-wrap:hover > .unav-sub,
.unifiednav:not([data-nav-structure="VERTICAL"]) .unifiednav__item-wrap:focus-within > .unav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Keep the last dropdowns from running off the right edge. */
.unifiednav:not([data-nav-structure="VERTICAL"]) .unifiednav__item-wrap:nth-last-child(-n + 3) > .unav-sub {
  left: auto;
  right: 0;
}

.unifiednav[data-nav-structure="VERTICAL"] .unav-top {
  display: block;
}

/* Duda's own rule makes every `.unifiednav__item-wrap` a row flex container
   (for the horizontal desktop bar, where a submenu overlays absolutely and
   direction doesn't matter). In the drawer the submenu is a normal-flow
   sibling of the link inside that same `<li>`, so a row direction squeezes
   it to the side instead of stacking it below — it never gets visible
   height, so tapping a caret looks like nothing happened. */
.unifiednav[data-nav-structure="VERTICAL"] .unifiednav__item-wrap {
  flex-direction: column;
  align-items: stretch;
  height: auto;
}

/* Duda's own `.unifiednav__container{flex:1 1 100%}` rule (see duda.css,
   scoped to `[data-nav-structure='VERTICAL']`) is meant for the top-level
   list filling the drawer, but the submenu `<ul>` carries that same
   `unifiednav__container` class, so it inherits `flex-basis:100%` too. Inside
   this auto-height column, a percentage flex-basis has no definite size to
   resolve against and collapses to 0 — the submenu never gets any height, so
   opening it looks like nothing happened. `!important` because Duda's rule
   already carries the `#dm` id and would otherwise win on specificity. */
.unifiednav[data-nav-structure="VERTICAL"] .unifiednav__item-wrap > .unifiednav__item,
.unifiednav[data-nav-structure="VERTICAL"] .unav-sub {
  flex: 0 0 auto !important;
}

.unifiednav[data-nav-structure="VERTICAL"] .unifiednav__item {
  padding: 12px 20px;
}

.unifiednav[data-nav-structure="VERTICAL"] .nav-item-text {
  justify-content: space-between;
  width: 100%;
}

.unifiednav[data-nav-structure="VERTICAL"] .unav-sub {
  display: none;
  padding-left: 16px;
}

/* Duda's real show/hide for a vertical submenu isn't `display` at all — it's
   `max-height`/`opacity` keyed off `.dmNavItemSelected ~ …` (the current
   page's own section auto-expanding) or `:hover` (desktop only; see
   duda.css around `data-show-vertical-sub-items`). There's no rule in it for
   a tapped-open state on mobile — that was Duda's own JS, which isn't
   reproduced — so the `sub-open` class toggle here has to supply the same
   properties Duda's expanded state uses, or its `max-height:0` default
   (higher specificity, carries `#dm`) wins and the submenu never gets any
   height even once `display` is right. */
.unifiednav[data-nav-structure="VERTICAL"] .sub-open > .unav-sub {
  display: flex !important;
  flex-direction: column;
  max-height: 50em !important;
  opacity: 1 !important;
}

.unifiednav[data-nav-structure="VERTICAL"] .unifiednav__item_has-sub-nav .icon {
  padding: 6px 10px;
  margin: -6px -10px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   FAQ accordion — Duda renders this through a styled-components bundle; the
   recovered rules live in duda.css, so this only covers open/closed state.
   -------------------------------------------------------------------------- */
/* Each accordion's real look — padding, borders, colours, arrow geometry —
   comes from its own compiled stylesheet, carried over per widget with the
   page CSS. Only the collapse mechanics and the open state live here. */
[data-accordion] .accordion-container {
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-accordion] .accordion-title-wrapper {
  cursor: pointer;
}

/* The widget's own rules are !important (see styledAccordionCss), so the
   collapse mechanics have to be too. This file loads last, so ties go here. */
[data-accordion] .accordion-panel {
  overflow: hidden !important;
  max-height: 0 !important;
  transition: max-height 0.3s ease-out !important;
}

[data-accordion] .is-open .accordion-panel {
  max-height: 1500px !important;
}

/* Arrow icon: a chevron (the site's existing `.icon-angle-down` mask, also
   used for the nav dropdown carets) rather than a plus/minus, sized to sit
   with roughly 5px of breathing room inside its circular wrapper instead of
   filling it edge to edge. currentColor keeps it readable against whatever
   background colour each widget's wrapper sets. */
[data-accordion] .accordion-arrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-accordion] .accordion-arrow {
  font-size: 20px;
  color: currentColor;
  transition: transform 0.3s ease-in-out;
}

/* Down when closed (the icon's own default), up when open. */
[data-accordion] .is-open .accordion-arrow {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Odds and ends
   -------------------------------------------------------------------------- */

/* The form honeypot must be reachable by bots but invisible to people. */
.dmform-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* Labels the original hides (it relies on placeholders instead) stay hidden,
   but remain available to screen readers. */
.dmforminput label[hidden],
.dmform-title[hidden] {
  display: block !important;
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Duda's share popup ships hidden and only opens on demand. */
#dmPopup {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Uploaded gallery videos sit in a plain responsive box. */
.youtubeExt video {
  width: 100%;
  height: auto;
  display: block;
}

/* Blog post featured image (Slider.astro). duda.css hides every slide by
   default and relies on Duda's own slider JS to reveal the active one and
   fade its image in; that runtime isn't reproduced here. Every slider on
   this site carries exactly one slide (it's a single-image widget wearing
   the slider component, not an actual carousel), so just showing the first
   slide statically reproduces the same result without needing real slider
   JS. */
.flexslider .slides > li:first-child {
  display: block !important;
}
.flexslider .slides > li:first-child a img,
.flexslider .slides > li:first-child > img {
  opacity: 1 !important;
}

/* Blog post featured image: a fixed banner height instead of the per-post
   pixel height the page CSS sets (which varied post to post based on each
   photo's own aspect ratio). `#dm .dmBody` matches the specificity of that
   per-post rule so this — loading after it — wins. `object-fit: cover`
   keeps the photo filling the banner instead of letterboxing now that the
   height no longer matches its natural aspect ratio. */
#dm .dmBody div.dmImageSlider {
  height: 300px !important;
}
#dm .dmBody div.dmImageSlider .slides > li:first-child img {
  object-fit: cover !important;
}

/* Blog list cards (/blog): Duda's "recent_posts" layout lays each card out
   as a flex row with the photo pinned to a fixed 550x425px
   (`.blogImgLink{width:550px;height:425px;flex:1 0 auto}`) — flex-shrink:0
   keeps it at that width even in a 375px-wide card, squeezing the title and
   description into a sliver next to it. Below tablet, stack photo-then-text
   instead. */
@media (max-width: 767px) {
  #dm [blog-posts-feature-flag=true][list-layout=recent_posts] .postArticle .inner {
    flex-direction: column !important;
  }
  #dm [blog-posts-feature-flag=true][list-layout=recent_posts] .blogImgLink {
    width: 100% !important;
    height: 220px !important;
    flex: none !important;
  }
  #dm [show-images=true][list-layout=recent_posts] .postText {
    float: none !important;
    width: 100% !important;
    padding: 15px 0 0 0 !important;
  }
}