/* Header bridge v2: applies the edgeuno.cloud navigation design to the
   Kadence Blocks header (CPT 4232). Kadence sets most of its dropdown design
   through CSS custom properties with stacked-class specificity hacks
   (.sub-menu x5), so several overrides below need matching specificity or
   !important to win. Specs ported from the landing's .site-nav rules. */

/* ---------- Bar (sticky handled by Kadence's own JS) ---------- */
.wp-block-kadence-header {
  border-bottom: 1px solid rgba(160, 160, 160, .3);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.wp-block-kadence-header .kadence-header-row-inner {
  min-height: 64px !important;
}

.wp-block-kadence-header .kb-header-row-layout-standard .kadence-header-row-inner,
.wp-block-kadence-header .kb-header-row-layout-fullwidth .kadence-header-row-inner {
  align-items: center;
}

/* ---------- Top-level nav links ---------- */
.wp-block-kadence-header .kb-navigation {
  align-items: center;
}

.wp-block-kadence-header .kb-navigation > li > .kb-link-wrap {
  align-items: center;
}

.wp-block-kadence-header .kb-navigation > li > .kb-link-wrap > .kb-nav-link-content {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-button);
  padding: 8px 4px 8px 12px !important;
  color: var(--color-text-slate) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  transition: color .15s ease, background .15s ease;
}

.wp-block-kadence-header .kb-navigation > li > .kb-link-wrap > .kb-nav-link-content:hover,
.wp-block-kadence-header .kb-navigation > li:hover > .kb-link-wrap > .kb-nav-link-content,
.wp-block-kadence-header .kb-navigation > li:focus-within > .kb-link-wrap > .kb-nav-link-content {
  color: var(--color-brand-navy-deep) !important;
}

/* Items without a dropdown keep symmetric padding */
.wp-block-kadence-header .kb-navigation > li:not(.menu-item--has-toggle) > .kb-link-wrap > .kb-nav-link-content {
  padding: 8px 12px !important;
}

/* Chevron toggle: put it back into normal flex flow, right after the label
   (Kadence offsets it with a negative `left`, which overlapped the text). */
.wp-block-kadence-header .kb-nav-dropdown-toggle-btn {
  position: static !important;
  left: auto !important;
  right: auto !important;
  width: 18px !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  color: var(--color-text-slate);
  transition: transform .15s ease, color .15s ease;
}

.wp-block-kadence-header li:hover > .kb-link-wrap > .kb-nav-dropdown-toggle-btn,
.wp-block-kadence-header li:focus-within > .kb-link-wrap > .kb-nav-dropdown-toggle-btn {
  transform: rotate(180deg);
  color: var(--color-brand-navy-deep);
}

/* ---------- Dropdown cards (regular + mega) ---------- */
.wp-block-kadence-header ul.kb-nav-sub-menu {
  border: 1px solid rgba(160, 160, 160, .45) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-surface-card) !important;
  padding: 8px !important;
  box-shadow: 0 20px 44px rgba(0, 0, 76, .14) !important;
}

.wp-block-kadence-header .kb-nav-sub-menu .kb-nav-link-content {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--radius-button) !important;
  padding: 8px 10px !important;
  color: var(--color-text-slate) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background .15s ease, color .15s ease;
}

.wp-block-kadence-header .kb-nav-sub-menu .kb-nav-link-content:hover,
.wp-block-kadence-header .kb-nav-sub-menu .kb-nav-link-content:focus-visible {
  background: var(--color-brand-teal-soft) !important;
  color: var(--color-brand-navy-deep) !important;
}

/* ---------- Mega menu: auto-width, one column per group ---------- */
/* Kadence pins the dropdown width via --kb-nav-dropdown-width on the submenu
   with .sub-menu x5 specificity; match it and let content size the card. */
.wp-block-kadence-header .kadence-menu-mega-enabled > .sub-menu.sub-menu.sub-menu.sub-menu.sub-menu {
  --kb-nav-dropdown-width: max-content;
  width: max-content !important;
  max-width: min(52rem, calc(100vw - 32px)) !important;
  padding: 20px !important;
}

/* Lay the Kadence columns (one per group) side by side */
.wp-block-kadence-header .kb-nav-sub-menu.mega-menu .kt-row-column-wrap {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 15rem);
  grid-template-columns: none !important;
  gap: 4px 12px !important;
  width: 100% !important;
  padding: 0 !important;
}

.wp-block-kadence-header .kb-nav-sub-menu.mega-menu .wp-block-kadence-column {
  width: auto !important;
}

.wp-block-kadence-header .kb-nav-sub-menu.mega-menu .wp-block-kadence-column + .wp-block-kadence-column {
  border-left: 1px solid rgba(160, 160, 160, .25);
  padding-left: 12px;
}

/* Group labels ("Connectivity", "Edge", …) as landing eyebrows */
.wp-block-kadence-header .kb-nav-sub-menu.mega-menu .wp-block-kadence-advancedheading {
  margin: 6px 0 10px !important;
  padding: 0 10px;
  color: var(--color-brand-teal-contrast) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .05em;
  line-height: 1 !important;
  text-transform: lowercase;
}

.wp-block-kadence-header .kb-nav-sub-menu.mega-menu .wp-block-kadence-advancedheading strong {
  font-weight: 500;
}

/* Highlight label chips (e.g. "New") */
.wp-block-kadence-header .kb-nav-sub-menu .link-highlight-label {
  border-radius: 999px;
  background: var(--color-brand-teal-soft);
  padding: 2px 8px;
  color: var(--color-brand-teal-contrast);
  font-size: 11px;
  font-weight: 600;
}

/* ---------- Header CTA button (landing primary style) ---------- */
.wp-block-kadence-header .kb-buttons-wrap .kb-button {
  min-height: 42px;
  border: 0 !important;
  border-radius: var(--radius-button) !important;
  background: var(--color-brand-navy-deep) !important;
  padding: 10px 20px !important;
  color: #ffffff !important;
  font-family: var(--font-sans) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  transition: background .15s ease, box-shadow .15s ease;
}

.wp-block-kadence-header .kb-buttons-wrap .kb-button:hover,
.wp-block-kadence-header .kb-buttons-wrap .kb-button:focus-visible {
  background: var(--color-brand-navy) !important;
  color: #ffffff !important;
  box-shadow: 0 15px 25px -7px rgba(0, 0, 0, .15);
}

/* Kill Kadence's per-item and per-column hairline dividers inside dropdowns */
.wp-block-kadence-header .kb-nav-sub-menu li,
.wp-block-kadence-header .kb-nav-sub-menu .kb-nav-link-content,
.wp-block-kadence-header .kb-nav-sub-menu .kt-inside-inner-col {
  border: 0 !important;
}

/* ---------- Responsive container swap ----------
   Kadence generated hide-on-mobile CSS for every .wp-block-kadence-header-desktop
   section, but never emitted the matching show-on-mobile rule for the
   .wp-block-kadence-header-tablet container (it stays display:none at every
   width), so phones had no hamburger. The 1024px breakpoint matches Kadence's
   own generated rules. */
@media (max-width: 1024px) {
  .wp-block-kadence-header .wp-block-kadence-header-tablet {
    display: block !important;
  }
}

/* ---------- Mobile off-canvas ---------- */
.wp-block-kadence-header .wp-block-kadence-off-canvas-trigger {
  background: transparent !important;
  color: var(--color-brand-navy-deep) !important;
}

/* The off-canvas panel renders with content-height only (63px) because its
   full-height rule was never generated; make it fill the viewport. */
.wp-block-kadence-header .wp-block-kadence-off-canvas,
.wp-block-kadence-header .wp-block-kadence-off-canvas .kb-off-canvas-inner-wrap {
  height: 100% !important;
  min-height: 100dvh !important;
  top: 0;
}

.wp-block-kadence-header .kb-off-canvas-inner {
  height: 100% !important;
  min-height: 100dvh !important;
  overflow-y: auto;
  background: var(--color-surface-card) !important;
  padding: 16px;
}

.wp-block-kadence-header .kb-off-canvas-inner .kb-nav-link-content {
  font-family: var(--font-sans);
  color: var(--color-text-slate);
  font-size: 16px;
  padding: 12px 8px;
}

/* Inside the mobile accordion, drop the desktop dropdown-card styling —
   it added phantom padding/shadow around collapsed submenus. */
.wp-block-kadence-header .kb-off-canvas-inner ul.kb-nav-sub-menu {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 0 0 12px !important;
}

/* Mega-menu overrides inside the mobile panel. These need to out-rank the
   desktop mega rules above (which use .sub-menu x5 specificity), otherwise
   their 20px padding leaves a 40px phantom gap under collapsed items. */
.wp-block-kadence-header .kb-off-canvas-inner .kadence-menu-mega-enabled > .sub-menu.sub-menu.sub-menu.sub-menu.sub-menu {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 0 0 12px !important;
}

.wp-block-kadence-header .kb-off-canvas-inner li.menu-item-has-children > .sub-menu.sub-menu.sub-menu.sub-menu.sub-menu:not(.toggle-show) {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Mega groups stack vertically in the mobile accordion */
.wp-block-kadence-header .kb-off-canvas-inner .kb-nav-sub-menu.mega-menu .kt-row-column-wrap {
  display: block !important;
  width: 100% !important;
}

.wp-block-kadence-header .kb-off-canvas-inner .kb-nav-sub-menu.mega-menu .wp-block-kadence-column + .wp-block-kadence-column {
  border-left: 0 !important;
  padding-left: 0 !important;
}