/* ─── Universal box-sizing reset ──────────────────────────────────────────── */
/* Match mockup's *, *::before, *::after { box-sizing: border-box } so that
   padding/border are included in element width calculations. Without this,
   text containers can be slightly wider on the live site than in mockups,
   causing line-break differences and sub-pixel text rendering noise. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ─── Global overflow containment ─────────────────────────────────────────── */
/* Prevent admin toolbar and other fixed-width elements from creating
   a horizontal scrollbar when they exceed the viewport width. */
html {
  overflow-x: hidden;
}

/* ─── Mobile toggle (hamburger / close) ────────────────────────────────────── */
#toggle--mobile {
  position: absolute;
  right: 22px;
  top: 12px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease 0s;
  z-index: 3;
  display: none;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  background: #dadada;
  border-radius: 4px;
}

@media all and (max-width: 1023px) {
  #toggle--mobile {
    display: flex;
  }
}

#toggle--mobile.active {
  color: #fff;
  background: #16586c;
}

/* Swap hamburger icon → X when menu is open */
#toggle--mobile.active .fa-bars::before {
  content: "\f00d";
}

/* ─── Mobile-responsive: header grid stacking ──────────────────────────────── */
/* Force header LP grid regions to stack below the hamburger breakpoint.
   Without this, the LP responsive spans split at 576px (sm) but the nav
   is still hidden behind the hamburger until 1024px, creating a misaligned
   layout between 576-1023px. */
@media all and (max-width: 1023px) {
  [data-dom-id-17349] > .js-lpb-region {
    grid-column: 1 / -1 !important;
  }
}

/* ─── Mobile-responsive: menu collapse ─────────────────────────────────────── */
@media all and (max-width: 1023px) {
  ul[data-menu-name="main"] {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    background: #fff;
    width: 100%;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  ul[data-menu-name="main"].active {
    display: block;
  }
  ul[data-menu-name="main"] li {
    display: block;
    border-bottom: 1px solid #eee;
  }
  ul[data-menu-name="main"] li a {
    display: block;
    padding: 12px 16px;
    min-height: 44px;
    line-height: 20px;
  }
}

/* ─── Mobile-responsive: touch targets ─────────────────────────────────────── */
@media all and (max-width: 768px) {
  a,
  button,
  input[type="submit"],
  input[type="button"],
  .button,
  select,
  summary {
    min-height: 44px;
    min-width: 44px;
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px;
    padding: 10px;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ─── Mobile-responsive: content overflow ──────────────────────────────────── */
@media all and (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  pre, code {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* Toolbar displacement: use Drupal's calculated CSS custom properties
   so padding adapts dynamically to toolbar bar height (which varies with
   viewport width as tabs wrap). */
body.toolbar-tray-open.toolbar-horizontal {
  padding-top: var(--drupal-displace-offset-top, 84px) !important;
}

/* Vertical toolbar: tray docks left.
   Above the standard breakpoint (38.125em / ~610px), push content right so
   nothing renders under the tray. Below that, the tray overlays content
   (no margin) — the user can close it by clicking Manage. */
body.toolbar-tray-open.toolbar-vertical {
  padding-top: var(--drupal-displace-offset-top, 39px) !important;
}
@media (min-width: 38.125em) {
  body.toolbar-tray-open.toolbar-vertical {
    margin-inline-start: 15rem !important;
  }
}

/* Vertical tray top is set dynamically by JS (syncVerticalTrayTop in
   sticky.js) to match the actual toolbar bar height at all breakpoints. */

/* ─── Toolbar overflow note ───────────────────────────────────────────────── */
/* Do NOT set overflow-x on .toolbar-bar — the trays are absolutely-positioned
   children of the bar, and per CSS spec overflow-x:clip/hidden forces
   overflow-y:hidden at the used-value level, which clips the tray.
   html { overflow-x: hidden } (at top of file) is sufficient to prevent
   horizontal scrollbar from toolbar/tray overflow. */

.contextual-links[hidden] {
  display: none !important;
}

/**
 * Vertical tabs fix: Override DOM style resets that use attribute selectors.
 * DOM styles like [data-dom-id-X] ul { margin: 0; } have higher specificity
 * than .vertical-tabs__menu, so we need to match or exceed their specificity.
 */
.vertical-tabs .vertical-tabs__menu {
  float: left;
  width: 15em;
  margin: -1px 0 -1px -15em;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ccc;
}
[dir="rtl"] .vertical-tabs .vertical-tabs__menu {
  float: right;
  margin-right: -15em;
  margin-left: 0;
}

/**
 * Region container nesting reset: suppress the region container wrapper's own
 * card-framing (border/padding/bg/shadow) ONLY when the cards inside already
 * have their own DOM styling (.dt-dom-styled from DisplayTemplateResolver).
 * This prevents double border/padding stacking while preserving card styling
 * for banners, metrics, pricing cards, and other components.
 */
.region-container-styled:has(.dt-dom-styled) {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}