/* ==========================================================================
   Boxzooka header: full-width bar at the top, floating pill on scroll.

   Loads AFTER style.css and bz-nav-mega.css (see functions.php).
   js/bz-header.js adds .is-compact to #site-header once the page scrolls.

   Notes for whoever edits this next:
   - style.css still contains the old header rules (.is-scrolled, the 3px orange
     border, item 33 and 14 positions). They are overridden here, not deleted.
     The selectors below start with "#site-header.bz-header" so they win on
     specificity, and !important is used only where the old rules or Max Mega
     Menu use it.
   - Do NOT add transform, filter, or backdrop-filter to .header-inner or any
     ancestor of the menu. The mega panels are position: fixed and live inside
     .header-inner, and those properties would re-anchor them to the pill.
     The frosted glass is drawn on ::before for that reason.
   ========================================================================== */

#site-header.bz-header {
  --bz-bar-h: 104px;     /* bar height at the top of the page */
  --bz-bar-h-c: 68px;    /* pill height after scrolling */
  --bz-gap: 10px;        /* space above the pill */
  --bz-pill-max: 1400px; /* pill width after scrolling; the mega panel uses the same value (bz-nav-mega.css) */
  --bz-logo-h: 52px;
  --bz-icon-h: 42px;
  --bz-admin: 0px;       /* set below when the WordPress admin bar is showing */
  --bz-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bz-pill-bg: rgba(255, 255, 255, 0.72);
  --bz-nav-text: #444444;

  border-top: 0;         /* old 3px orange border removed */
  box-shadow: none;
  background: #fff;
  padding: 0 12px;
  display: flow-root;    /* keeps the pill's top margin inside the header */
  transition: background-color 0.3s ease;
}

.admin-bar #site-header.bz-header {
  --bz-admin: var(--wp-admin--admin-bar--height, 32px);
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* --------------------------------------------------------------------------
   The bar
   -------------------------------------------------------------------------- */

#site-header.bz-header .header-inner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* logo | menu | actions: menu sits in the true center */
  align-items: center;
  column-gap: 24px;
  width: 100%;
  max-width: 1720px;
  height: var(--bz-bar-h);
  margin: 0 auto;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:
    max-width 0.5s var(--bz-ease),
    height 0.4s var(--bz-ease),
    margin-top 0.4s var(--bz-ease),
    padding 0.4s var(--bz-ease),
    border-radius 0.4s var(--bz-ease),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Frosted glass layer. Lives on a pseudo-element so .header-inner itself has no
   backdrop-filter (see the note at the top of this file). */
#site-header.bz-header .header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  transition: background-color 0.3s ease;
}

/* ---- Scrolled: floating pill ---- */
#site-header.bz-header.is-compact {
  background: transparent;
  pointer-events: none; /* the gaps beside the pill stay clickable on the page */
}

#site-header.bz-header.is-compact .header-inner {
  pointer-events: auto;
  max-width: var(--bz-pill-max);
  height: var(--bz-bar-h-c);
  margin-top: var(--bz-gap);
  padding: 0 14px;
  border-radius: 16px;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

#site-header.bz-header.is-compact .header-inner::before {
  background: var(--bz-pill-bg);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

/* --------------------------------------------------------------------------
   Logo: full wordmark at the top, icon only once scrolled
   -------------------------------------------------------------------------- */

#site-header.bz-header .header-titles-wrapper {
  justify-self: start;
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0;
}

#site-header.bz-header .header-titles {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

#site-header.bz-header .bz-logo {
  position: relative;
  display: block;
  line-height: 0;
  text-decoration: none;
}

#site-header.bz-header .bz-logo img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--bz-logo-h);
  transition: opacity 0.3s ease;
}

#site-header.bz-header .bz-logo .bz-logo__icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--bz-icon-h);
  opacity: 0;
}

#site-header.bz-header.is-compact .bz-logo .bz-logo__full {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

#site-header.bz-header.is-compact .bz-logo .bz-logo__icon {
  position: static;
  transform: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Menu (Max Mega Menu): top-level links
   -------------------------------------------------------------------------- */

#site-header.bz-header .header-navigation-wrapper {
  display: block;
  justify-self: center;
  margin: 0;
  padding: 0;
}

#site-header.bz-header .primary-menu-wrapper {
  display: block;
  margin: 0;
}

#site-header.bz-header .primary-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

#site-header.bz-header #mega-menu-wrap-primary,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
}

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  float: none !important;
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  background: transparent !important;
}

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 46px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bz-nav-text) !important;
  font: 400 16px/1 "Roboto", system-ui, sans-serif !important;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, font-size 0.4s var(--bz-ease), padding 0.4s var(--bz-ease);
}

/* Hover and open: orange text only, no background */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
  color: var(--color-orange, #ee8a22) !important;
  background: transparent !important;
}

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible {
  outline: 3px solid #109cde;
  outline-offset: 2px;
}

/* The old rules for items 33 and 14 draw an orange underline and a triangle with
   ::before and ::after. Not part of the new look. */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::before,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after {
  content: none !important;
  display: none !important;
}

/* Chevron: drawn with a mask so it follows the link color */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > .mega-indicator {
  display: inline-block !important;
  position: static !important;
  right: auto !important;
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
  transition: transform 0.25s var(--bz-ease);
}

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > .mega-indicator {
  transform: rotate(180deg) !important;
}

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > .mega-indicator::before,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > .mega-indicator::after {
  content: none !important;
  display: none !important;
}

/* Log In and Contact Us Today now come from header.php. Hide the old menu items so
   nothing shows twice while they still exist. Delete them from the menu when ready. */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-btn-login,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-btn-get-quote {
  display: none !important;
}

/* Scrolled: slightly tighter links */
#site-header.bz-header.is-compact #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  height: 44px !important;
  padding: 0 12px !important;
  font-size: 15px !important;
}

/* --------------------------------------------------------------------------
   Menu: dropdown positions
   Full-width mega panels are position: fixed (set in style.css), so their top edge
   has to follow the header: lower at the top of the page, closer to the pill after
   scrolling. --bz-admin adds the WordPress admin bar height for logged-in users.
   The 3px and 5px offsets leave room for the 3px top padding bz-nav-mega.css adds.
   -------------------------------------------------------------------------- */

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-33:not(:is(.mega-bz-narrow, :has(.bz-mega--services, .bz-mega--industries, .bz-mega--about))) > ul.mega-sub-menu,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-14:not(:is(.mega-bz-narrow, :has(.bz-mega--services, .bz-mega--industries, .bz-mega--about))) > ul.mega-sub-menu {
  top: calc(var(--bz-admin) + var(--bz-bar-h) + 3px) !important;
}

#site-header.bz-header.is-compact #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu,
#site-header.bz-header.is-compact #mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-33:not(:is(.mega-bz-narrow, :has(.bz-mega--services, .bz-mega--industries, .bz-mega--about))) > ul.mega-sub-menu,
#site-header.bz-header.is-compact #mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-14:not(:is(.mega-bz-narrow, :has(.bz-mega--services, .bz-mega--industries, .bz-mega--about))) > ul.mega-sub-menu {
  top: calc(var(--bz-admin) + var(--bz-gap) + var(--bz-bar-h-c) + 5px) !important;
}

/* --------------------------------------------------------------------------
   Menu: full-width panels and narrow panels
   Any menu item set to "Mega Menu" gets the full-width treatment below. style.css only
   had it for items 33 and 14, so a new mega item would otherwise open as a small box
   inside the nav bar. A panel is narrow (only as wide as its content, centered under its own
   link) when it contains the Services, Industries, or About panel markup, so nothing has to be
   set on the menu item. Adding the CSS class "bz-narrow" to any item (it becomes
   mega-bz-narrow) also makes it narrow. js/bz-nav-mega.js keeps a narrow panel on screen.
   -------------------------------------------------------------------------- */

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:not(:is(.mega-bz-narrow, :has(.bz-mega--services, .bz-mega--industries, .bz-mega--about))) > ul.mega-sub-menu {
  position: fixed !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Inside a panel the row, column, and widget lists are only wrappers. style.css gives every
   ul.mega-sub-menu a 30rem width, a top offset, a border, and a shadow; undo that for them. */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:has(.bz-mega) ul.mega-sub-menu ul.mega-sub-menu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Keep the vertical spacing the same for every mega panel. style.css zeroes the padding on the row and widget
   lists only for items 33 and 14 (Technology and Services), so a newer mega item (Industries, Resources,
   About) kept the plugin's own padding there, and its panel sat a few pixels lower under the header. This
   clears the top and bottom spacing on the panel list, the row, the column, and the widget list for any panel
   that holds the panel markup. The 3px above and 24px below the panel come from bz-nav-mega.css. */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:has(.bz-mega) > ul.mega-sub-menu,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:has(.bz-mega) li.mega-menu-row,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:has(.bz-mega) li.mega-menu-column,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:has(.bz-mega) li.mega-widget,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:has(.bz-mega) li.widget_custom_html {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Narrow panel: positioned against its own link. The list item is the anchor, and the panel's
   top edge follows the bar height the same way the full-width panels do. The 2px and 4px (instead of
   the 3px and 5px used for the full-width panels) make up for the link's own height rounding the centered
   position by about a pixel, so all five panels sit exactly the same distance below the header. --bz-shift is set by bz-nav-mega.js when the panel
   would otherwise run off the edge of the screen. */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.mega-bz-narrow, :has(.bz-mega--services, .bz-mega--industries, .bz-mega--about)) {
  position: relative !important;
}
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.mega-bz-narrow, :has(.bz-mega--services, .bz-mega--industries, .bz-mega--about)) > ul.mega-sub-menu {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: calc(50% + var(--bz-bar-h) / 2 + 2px) !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
  transform: translateX(calc(-50% + var(--bz-shift, 0px))) !important;
}
#site-header.bz-header.is-compact #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.mega-bz-narrow, :has(.bz-mega--services, .bz-mega--industries, .bz-mega--about)) > ul.mega-sub-menu {
  top: calc(50% + var(--bz-bar-h-c) / 2 + 4px) !important;
}
/* The narrow panel is not as wide as the row, so the row's side padding (set in bz-nav-mega.css
   for the full-width panels) is removed. */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.mega-bz-narrow, :has(.bz-mega--services, .bz-mega--industries, .bz-mega--about)) li.mega-menu-row:has(.bz-mega) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hover bridge. style.css draws an invisible 50px strip above every dropdown so the pointer
   can travel from the link to the panel without closing it. With the new bar that strip would
   sit on top of neighboring links and block switching between menus, so it is cut down to
   just the gap between the link and the panel. */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu[role="presentation"]::before {
  top: -32px !important;
  height: 32px !important;
}
#site-header.bz-header.is-compact #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu[role="presentation"]::before {
  top: -17px !important;
  height: 17px !important;
}
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu[role="presentation"]::before,
#site-header.bz-header.is-compact #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu[role="presentation"]::before {
  top: -14px !important;
  height: 14px !important;
}

/* The mega panel is built from nested lists (row, column, widget). style.css gives every
   one of them its own invisible 50px hover strip, positioned against the full-width panel,
   so while a menu is open the strips sit over the nav bar and block the Contact Us button
   from hover and clicks. Only the strip on the outer list is needed. */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu::before,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu::after {
  content: none !important;
  display: none !important;
}

/* Small dropdowns (flyouts, for example Company): white card under the link */
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu {
  top: calc(100% + 14px) !important;
  width: auto !important;
  min-width: 290px;
  padding: 22px 14px !important;
  background: #fff !important;
  border: 1px solid var(--color-eee, #eee) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14) !important;
}

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item {
  float: none !important;
  display: block !important;
  width: 100%;
  margin: 0 0 5px !important;
  border: 0 !important;
  background: transparent !important;
}

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  display: block !important;
  margin: 0 !important; /* style.css adds a 5px bottom margin to dropdown links */
  padding: 13px 20px !important;
  border: 0 !important;
  border-radius: 10px;
  background: transparent !important;
  color: var(--color-222, #222) !important;
  font: 500 15px/1.35 "Roboto", system-ui, sans-serif !important;
  text-transform: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item:last-child {
  margin-bottom: 0 !important;
}

#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
#site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus-visible {
  color: var(--color-orange, #ee8a22) !important;
  background: var(--color-gray-lightest, #f8f8f8) !important;
}

/* --------------------------------------------------------------------------
   Dim and blur the page behind an open menu
   Sits inside #site-header (z-index 9), under the bar and the panels.
   -------------------------------------------------------------------------- */

#site-header.bz-header .bz-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: rgba(248, 248, 248, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity 0.25s ease;
}

#site-header.bz-header .bz-scrim.on {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Right side: Log In and Contact Us Today
   -------------------------------------------------------------------------- */

#site-header.bz-header .bz-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

#site-header.bz-header .bz-actions__login {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--bz-nav-text);
  font: 400 16px/1 "Roboto", system-ui, sans-serif;
  text-decoration: none;
  transition: color 0.2s ease;
}

#site-header.bz-header .bz-actions__login:hover,
#site-header.bz-header .bz-actions__login:focus-visible {
  color: var(--color-orange, #ee8a22);
}

#site-header.bz-header .bz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 5px;
  background: var(--color-orange, #ee8a22);
  color: #fff;
  font: 700 16px/1 "Roboto", system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#site-header.bz-header .bz-btn:hover,
#site-header.bz-header .bz-btn:focus-visible {
  background: var(--color-orange-dark, #ca6f10);
  color: #fff;
}

/* Arrow after the label: nudges to the right on hover */
#site-header.bz-header .bz-btn__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.25s var(--bz-ease);
}

#site-header.bz-header .bz-btn:hover .bz-btn__arrow,
#site-header.bz-header .bz-btn:focus-visible .bz-btn__arrow {
  transform: translateX(4px);
}

#site-header.bz-header .bz-actions a:focus-visible {
  outline: 3px solid #109cde;
  outline-offset: 2px;
}

#site-header.bz-header .bz-btn__short { display: none; }

#site-header.bz-header.is-compact .bz-btn {
  min-height: 46px;
  padding: 0 20px;
  font-size: 15px;
}
#site-header.bz-header.is-compact .bz-btn__long { display: none; }
#site-header.bz-header.is-compact .bz-btn__short { display: inline; }

/* --------------------------------------------------------------------------
   Smaller screens
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  #site-header.bz-header { --bz-logo-h: 44px; }

  #site-header.bz-header .header-inner { column-gap: 16px; padding: 0 20px; }
  #site-header.bz-header.is-compact .header-inner { padding: 0 12px; }

  /* Log In stays reachable from the Technology panel and the mobile menu */
  #site-header.bz-header .bz-actions__login { display: none; }

  #site-header.bz-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    padding: 0 10px !important;
    font-size: 15px !important;
  }
  #site-header.bz-header .bz-btn { padding: 0 20px; font-size: 15px; }
  #site-header.bz-header .bz-btn__long { display: none; }
  #site-header.bz-header .bz-btn__short { display: inline; }
}

/* 900px and below: the custom mobile menu takes over (see mobile-nav.css) */
@media (max-width: 900px) {
  #site-header.bz-header {
    --bz-bar-h: 84px;
    --bz-bar-h-c: 62px;
    --bz-logo-h: 42px;
    --bz-icon-h: 38px;
  }

  #site-header.bz-header .header-inner {
    display: flex;
    justify-content: space-between;
    padding: 0 12px 0 16px;
  }
  #site-header.bz-header.is-compact .header-inner { padding: 0 6px 0 14px; }

  #site-header.bz-header .header-navigation-wrapper,
  #site-header.bz-header .bz-actions {
    display: none !important;
  }

  /* The mobile menu button is moved in here by mobile-nav.js */
  #site-header.bz-header .header-titles-wrapper {
    flex: 1 1 auto;
    justify-content: space-between;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-header.bz-header .bz-btn:hover .bz-btn__arrow,
  #site-header.bz-header .bz-btn:focus-visible .bz-btn__arrow {
    transform: none;
  }

  #site-header.bz-header,
  #site-header.bz-header *,
  #site-header.bz-header *::before {
    transition-duration: 0.01ms !important;
  }
}