/* ==========================================================================
   Site header — dws/assets/style/header.css
   Naming: BEM ( block__element--modifier ), prefix: hd-
   ========================================================================== */

:root {
  --hd-h-navy: #0d1b2a;
  --hd-h-ink: #1a1a1a;
  --hd-h-cyan: #00b5e2;
  --hd-h-orange: #f5a623;
  --hd-h-orange-dark: #e0961a;
  --hd-h-grey: #5a6672;
  --hd-h-border: #e4eaef;
  --hd-h-height: 88px;
}

/* --------------------------------------------------------------------------
   Block
   -------------------------------------------------------------------------- */
.hd-header {
  position: relative;
  z-index: 100;
  background: #fff;
}

.hd-header__utility-inner,
.hd-header__main-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 28px;
}

/* --------------------------------------------------------------------------
   Utility bar — stat + phone
   -------------------------------------------------------------------------- */
.hd-header__utility {
  background: #fff;
  padding: 15px;
}

.hd-header__utility-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.hd-header__stat {
  min-width: 0;
}

.hd-header__stat-label {
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--hd-h-ink);
  margin: 0 0 2px;
}

.hd-header__stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.hd-header__stat-icon {
  display: flex;
  flex: 0 0 auto;
}

.hd-header__stat-value {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--hd-h-cyan);
  letter-spacing: -0.5px;
}

.hd-header__info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: #9aa7b2;
  cursor: pointer;
  position: relative;
}

.hd-header__info:hover,
.hd-header__info:focus-visible {
  color: var(--hd-h-cyan);
}

/* tooltip */
.hd-header__info::after {
  content: attr(data-hd-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  padding: 8px 11px;
  border-radius: 6px;
  background: var(--hd-h-navy);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 5;
}

.hd-header__info:hover::after,
.hd-header__info:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.hd-header__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
  padding-top: 14px;
}

.hd-header__phone-icon {
  display: flex;
}

.hd-header__phone-text {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--hd-h-ink);
  white-space: nowrap;
}

.hd-header__phone:hover .hd-header__phone-text {
  color: var(--hd-h-cyan);
}

/* --------------------------------------------------------------------------
   Main bar — logo, nav, CTA
   -------------------------------------------------------------------------- */
.hd-header__main {
  background: #fff;
}

.hd-header__main-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--hd-h-height);
}

.hd-header__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  /* logo overhangs into the section below, as in the design */
  margin-bottom: -44px;
  position: relative;
  z-index: 2;
}

.hd-header__logo img {
  display: block;
  width: 140px;
  height: auto;
}

.hd-header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.hd-header__cta {
  flex: 0 0 auto;
  display: inline-block;
  background: var(--hd-h-orange);
  color: var(--hd-h-ink);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.18s ease;
}

.hd-header__cta:hover,
.hd-header__cta:focus-visible {
  background: var(--hd-h-cyan);
  color: var(--hd-h-ink);
}

.hd-header__cta--mobile {
  display: none;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.hd-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-nav__item {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
}

.hd-nav__link {
  display: block;
  padding: 10px;
  font-size: 0.75rem;
  color: var(--hd-h-ink);
  text-decoration: none;
  white-space: nowrap;
}

.hd-nav__link:hover,
.hd-nav__item--current > .hd-nav__link {
  color: var(--hd-h-cyan);
}

.hd-nav__toggle {
  display: flex;
  align-items: center;
  padding: 12px 10px 12px 0;
  margin-left: -6px;
  border: 0;
  background: none;
  color: var(--hd-h-ink);
  cursor: pointer;
}

.hd-nav__chevron {
  transition: transform 0.2s ease;
}

.hd-nav__item--parent:hover .hd-nav__chevron,
.hd-nav__toggle[aria-expanded="true"] .hd-nav__chevron {
  transform: rotate(180deg);
}

/* scoped to the header: unscoped, this cleared the hover/focus background
   of every <button> on the site */
.hd-header button:hover,
.hd-header button:focus {
  background-color: transparent !important;
}

.hd-header button:active {
  background-color: transparent !important;
}

/* dropdown */
.hd-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--hd-h-border);
  border-radius: 6px;
  box-shadow: 0 16px 38px rgba(13, 27, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 10;
}

.hd-nav__item--parent:hover > .hd-nav__submenu,
.hd-nav__item--parent:focus-within > .hd-nav__submenu,
.hd-nav__item--open > .hd-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hd-nav__subitem {
  margin: 0;
}

.hd-nav__sublink {
  display: block;
  padding: 9px 20px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--hd-h-ink);
  text-decoration: none;
}

.hd-nav__sublink:hover,
.hd-nav__sublink:focus-visible {
  background: #f2f8fb;
  color: var(--hd-h-cyan);
}

/* --------------------------------------------------------------------------
   Mobile toggle
   -------------------------------------------------------------------------- */
.hd-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0 9px;
  border: 0;
  background: none;
  cursor: pointer;
}

.hd-header__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--hd-h-ink);
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.hd-header__toggle[aria-expanded="true"] .hd-header__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hd-header__toggle[aria-expanded="true"] .hd-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.hd-header__toggle[aria-expanded="true"] .hd-header__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.hd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .hd-nav__link {
    padding: 12px 9px;
    font-size: 0.92rem;
  }

  .hd-header__main-inner {
    gap: 18px;
  }

  .hd-header__cta {
    padding: 13px 22px;
    font-size: 0.92rem;
  }
}

@media (max-width: 1024px) {
  .hd-header__utility-inner,
  .hd-header__main-inner {
    padding: 0 18px;
  }

  .hd-header__main-inner {
    min-height: 72px;
  }

  .hd-header__toggle {
    display: flex;
  }

  .hd-header__logo {
    margin-bottom: 0;
  }

  .hd-header__logo img {
    width: 92px;
  }

  /* the desktop CTA hides; the one inside the panel takes over */
  .hd-header__main-inner > .hd-header__cta {
    display: none;
  }

  .hd-header__cta--mobile {
    display: block;
    text-align: center;
    margin: 16px 18px 24px;
  }

  .hd-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    max-height: 0;
    overflow: hidden;
    background: #fff;
    border-top: 1px solid var(--hd-h-border);
    box-shadow: 0 18px 30px rgba(13, 27, 42, 0.1);
    transition: max-height 0.26s ease;
  }

  .hd-header__nav--open {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  .hd-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .hd-nav__item {
    flex-wrap: wrap;
    border-bottom: 1px solid #eef2f6;
  }

  .hd-nav__link {
    flex: 1 1 auto;
    padding: 15px 18px;
    font-size: 1rem;
  }

  .hd-nav__toggle {
    padding: 15px 18px;
    margin: 0;
  }

  /* dropdowns become accordions */
  .hd-nav__submenu {
    position: static;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
    max-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #f7fafc;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: max-height 0.24s ease;
  }

  /* a tap leaves :hover on the item on touch phones, so hover must not
     beat the open state or the accordion never opens */
  .hd-nav__item--parent:hover:not(.hd-nav__item--open) > .hd-nav__submenu {
    max-height: 0;
  }

  .hd-nav__item--open > .hd-nav__submenu {
    max-height: 640px;
    padding: 6px 0 10px;
  }

  .hd-nav__sublink {
    padding: 11px 30px;
  }
}

@media (max-width: 640px) {
  .hd-header__utility-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hd-header__stat-label {
    font-size: 0.74rem;
  }

  .hd-header__stat-value {
    font-size: 1.3rem;
  }

  .hd-header__phone {
    padding-top: 0;
  }

  .hd-header__phone-text {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-nav__submenu,
  .hd-nav__chevron,
  .hd-header__nav,
  .hd-header__toggle-bar,
  .hd-header__cta {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Sticky header
   body and .site-container both compute to "hidden auto", which makes them
   scroll containers — sticky then anchors to them instead of the viewport.
   Both are cleared here; overflow-x: clip keeps sideways scroll blocked
   without creating a scroll container.
   -------------------------------------------------------------------------- */
/* Only .site-container: body's own overflow propagates to the viewport and
   does not break sticky, and leaving body alone keeps body-level scroll
   locks (modals, lightboxes, the open mobile menu below) working. */
.site-container {
  overflow: visible !important;
  overflow-x: clip !important;
}

/* scroll lock while the mobile menu is open (toggled by header.js) */
html.hd-menu-open,
body.hd-menu-open {
  overflow: hidden !important;
}

.site-inner,
.content-sidebar-wrap,
.content {
  overflow: visible;
}

.hd-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
}

/* The logo overhangs the hero below the header, as in the design. It fits
   inside the bar instead (header.js adds the classes) once the header is
   stuck over scrolled content, and on pages that open on a plain light
   background, where an overhanging logo would float with nothing under it. */
@media (min-width: 1025px) {
  .hd-header__logo img {
    transition: width 0.2s ease;
  }

  .hd-header--stuck .hd-header__logo,
  .hd-header--flat .hd-header__logo {
    margin-bottom: 0;
  }

  .hd-header--stuck .hd-header__logo img,
  .hd-header--flat .hd-header__logo img {
    width: 88px;
  }
}

/* sit below the WP admin bar when it is showing */
.admin-bar .hd-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .hd-header {
    top: 46px;
  }
}

/* --------------------------------------------------------------------------
   Nested submenus (levels 2–4)
   -------------------------------------------------------------------------- */

/* parent li must anchor its own flyout */
.hd-nav__subitem {
  position: relative;
}

/* a nested item with children lays its label and chevron side by side */
.hd-nav__subitem.hd-nav__item--parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* flex-basis 0 + min-width 0 stops long labels pushing the chevron down */
.hd-nav__subitem.hd-nav__item--parent > .hd-nav__sublink {
  flex: 1 1 0;
  min-width: 0;
  padding-right: 6px;
}

/* nested chevron: fixed size, points right, never wraps */
.hd-nav__toggle--nested {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  align-self: stretch;
  padding: 0 14px 0 0;
  margin: 0;
  color: #9aa7b2;
}

.hd-nav__toggle--nested .hd-nav__chevron {
  transform: rotate(-90deg);
  transition: color 0.15s ease;
}

/* hover highlight covers the whole row, chevron included */
.hd-nav__subitem.hd-nav__item--parent:hover {
  background: #f2f8fb;
}

.hd-nav__subitem.hd-nav__item--parent:hover > .hd-nav__sublink {
  background: transparent;
}

.hd-nav__subitem.hd-nav__item--parent:hover > .hd-nav__toggle--nested,
.hd-nav__toggle--nested[aria-expanded="true"] {
  color: var(--hd-h-cyan);
}

/* keep it pointing right even when open — it is a flyout, not an accordion */
.hd-nav__subitem.hd-nav__item--parent:hover
  > .hd-nav__toggle--nested
  .hd-nav__chevron,
.hd-nav__toggle--nested[aria-expanded="true"] .hd-nav__chevron {
  transform: rotate(-90deg);
}

/* levels 2, 3 and 4 fly out to the right of their parent */
.hd-nav__submenu--level-2,
.hd-nav__submenu--level-3,
.hd-nav__submenu--level-4 {
  top: -10px;
  left: 100%;
  margin-left: 2px;
  transform: translateX(-6px);
}

.hd-nav__subitem.hd-nav__item--parent:hover > .hd-nav__submenu,
.hd-nav__subitem.hd-nav__item--parent:focus-within > .hd-nav__submenu,
.hd-nav__subitem.hd-nav__item--open > .hd-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* if a flyout would run off the right edge, flip it to the left */
.hd-nav__item:last-child .hd-nav__submenu--level-2,
.hd-nav__item:last-child .hd-nav__submenu--level-3,
.hd-nav__item:last-child .hd-nav__submenu--level-4,
.hd-nav__item:nth-last-child(2) .hd-nav__submenu--level-2,
.hd-nav__item:nth-last-child(2) .hd-nav__submenu--level-3,
.hd-nav__item:nth-last-child(2) .hd-nav__submenu--level-4 {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 2px;
}

/* --------------------------------------------------------------------------
   Nested submenus on mobile — indented accordions
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hd-nav__submenu--level-2,
  .hd-nav__submenu--level-3,
  .hd-nav__submenu--level-4 {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    transform: none;
    flex: 1 1 100%;
    background: #eef3f7;
  }

  .hd-nav__subitem {
    border-top: 1px solid #e7edf2;
  }

  .hd-nav__subitem.hd-nav__item--parent:hover:not(.hd-nav__item--open) > .hd-nav__submenu {
    max-height: 0;
  }

  .hd-nav__subitem.hd-nav__item--open > .hd-nav__submenu {
    max-height: 640px;
    padding: 4px 0 8px;
  }

  /* nested chevron rotates down when open, like the top level */
  .hd-nav__toggle--nested {
    padding: 11px 18px;
  }

  .hd-nav__toggle--nested[aria-expanded="true"] .hd-nav__chevron {
    transform: rotate(180deg);
  }

  /* progressive indent per level */
  .hd-nav__submenu--level-2 .hd-nav__sublink {
    padding-left: 44px;
  }

  .hd-nav__submenu--level-3 .hd-nav__sublink {
    padding-left: 58px;
  }

  .hd-nav__submenu--level-4 .hd-nav__sublink {
    padding-left: 72px;
  }
}