/*
 * EAM global header polish.
 *
 * One consistent header style on every page:
 *   - solid white surface (no transparent-over-hero flicker)
 *   - dark logo + dark uppercase nav
 *   - dark filled Join EAM pill, dark outline Member Login pill
 *
 * The Kadence default page-title row that previously rendered as a flat
 * palette1 (muted blue) block under the header is restyled here into a
 * proper dark hero so non-playbook pages get a real top section. Pages
 * with their own playbook hero (see member-resources.css) keep hiding
 * the title row, since they have a richer custom hero of their own.
 */

/* ---------- Header surface — always solid white ---------- */

.wp-block-kadence-header,
.wp-block-kadence-header .kb-header-container {
  background: rgba(255, 255, 255, .98) !important;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  transition: box-shadow .25s ease;
  box-shadow: 0 1px 0 rgba(29, 29, 29, .06);
}

.wp-block-kadence-header.item-is-stuck,
.wp-block-kadence-header.item-is-stuck .kb-header-container {
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 6px 28px -16px rgba(10, 15, 40, .22);
}

/* Force the OUTER <header> element to actually take up its inner content's
   height, so it occupies real space in the document flow and the page hero
   doesn't slide underneath. By default Kadence renders the outer header
   with height: 0 (the inner .kb-header-container holds the visible bar),
   which is why the first row would overlap. */
.wp-block-kadence-header {
  height: auto !important;
  min-height: 84px;
}
@media (max-width: 1024px) {
  .wp-block-kadence-header {
    min-height: 68px;
  }
}

/* Tighten the header row. */
@media (min-width: 1025px) {
  .wp-block-kadence-header .wp-block-kadence-header-row-center {
    min-height: 76px;
  }
}

/* Always use the dark / sticky logo variant — the white-transparent logo
   was only legible over a dark hero; with a white surface we want the
   dark mark. */
.wp-block-kadence-header .kb-img-transparent {
  display: none !important;
}
.wp-block-kadence-header .kb-img-sticky {
  display: block !important;
  opacity: 1 !important;
  transition: opacity .25s ease;
}

/* Constrain the logo height. The source PNG renders ~115px tall at the
   default 150px width, which makes the header oversize. Cap the rendered
   height so the bar feels compact. */
.wp-block-kadence-header .custom-logo,
.wp-block-kadence-header .kb-img-sticky,
.wp-block-kadence-header .kb-img-transparent,
.wp-block-kadence-header .wp-block-site-logo img {
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
}

/* Force the nav text to dark on every page. Kadence renders nav links
   as a.kb-nav-link-content inside li.menu-item, and the dropdown
   chevron is a sibling <button> whose <svg> uses fill="currentColor"
   — match its color so it visually pairs with the link. */
.wp-block-kadence-header .wp-block-kadence-navigation a.kb-nav-link-content,
.wp-block-kadence-header .wp-block-kadence-navigation button.kb-nav-dropdown-toggle-btn,
.wp-block-kadence-header .wp-block-kadence-navigation button.kb-nav-dropdown-toggle-btn .kb-nav-arrow-svg {
  color: var(--global-palette3, #1d1d1d) !important;
  fill: currentColor !important;
}

/* Chevron hover / open states should track the link's interaction state. */
.wp-block-kadence-header .wp-block-kadence-navigation li.menu-item:hover > .kb-link-wrap > button.kb-nav-dropdown-toggle-btn,
.wp-block-kadence-header .wp-block-kadence-navigation li.menu-item.current-menu-item > .kb-link-wrap > button.kb-nav-dropdown-toggle-btn,
.wp-block-kadence-header .wp-block-kadence-navigation li.menu-item.current-menu-parent > .kb-link-wrap > button.kb-nav-dropdown-toggle-btn,
.wp-block-kadence-header .wp-block-kadence-navigation li.menu-item.current-menu-ancestor > .kb-link-wrap > button.kb-nav-dropdown-toggle-btn {
  color: var(--global-palette1, #5a64ad) !important;
}

/* When the dropdown is expanded (open), flip the chevron and add a tiny rotation
   so it visibly tracks state. */
.wp-block-kadence-header .wp-block-kadence-navigation button.kb-nav-dropdown-toggle-btn[aria-expanded="true"] {
  color: var(--global-palette1, #5a64ad) !important;
}
.wp-block-kadence-header .wp-block-kadence-navigation button.kb-nav-dropdown-toggle-btn .kb-nav-arrow-svg {
  transition: transform .25s ease, color .2s ease;
}
.wp-block-kadence-header .wp-block-kadence-navigation button.kb-nav-dropdown-toggle-btn[aria-expanded="true"] .kb-nav-arrow-svg {
  transform: rotate(180deg);
}

/* Kill the artificial scroll on mega-menu dropdowns. Kadence sets
   max-height + overflow:auto on submenus to handle viewport overflow;
   on desktop the Activities dropdown has plenty of room and should size
   to its content with no scrollbars. */
.wp-block-kadence-header .wp-block-kadence-navigation .sub-menu,
.wp-block-kadence-header .wp-block-kadence-navigation .kb-nav-sub-menu,
.wp-block-kadence-header .wp-block-kadence-navigation .mega-menu,
.wp-block-kadence-header .wp-block-kadence-navigation .sub-menu *,
.wp-block-kadence-header .wp-block-kadence-navigation .kb-nav-sub-menu *,
.wp-block-kadence-header .wp-block-kadence-navigation .mega-menu * {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}

/* Some inner Kadence row/column layouts inside the mega-menu enforce a
   content-width container that can introduce a horizontal scroll when
   combined with their padding. Force their inner col wraps to size to
   the available space without scrolling. */
.wp-block-kadence-header .kb-row-layout-id1338_7141bb-fe,
.wp-block-kadence-header .kb-row-layout-id1338_7141bb-fe .kt-row-column-wrap,
.wp-block-kadence-header .kb-row-layout-id1338_7141bb-fe .kt-inside-inner-col {
  overflow: hidden !important;
  max-height: none !important;
}

/* ---------- Primary navigation typography ---------- */

.wp-block-kadence-header .wp-block-kadence-navigation a.kb-nav-link-content {
  position: relative;
  font-family: var(--global-body-font-family, sans-serif);
  font-size: clamp(.78rem, .2vw + .68rem, .85rem);
  letter-spacing: .06em;
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  white-space: nowrap;
  transition: color .2s ease, opacity .2s ease;
}

/* Uniform horizontal spacing between every top-level item AND
 * single-row enforcement.
 *
 * Kadence reads --kb-nav-column-gap (default 0) into its
 * `.wp-block-kadence-navigation .menu { column-gap: var(...) }` rule.
 * The menu is now 5 left-hand links + a right-hand CTA cluster, so we
 * can afford a comfortable gap. flex-wrap:nowrap keeps it on one row. */
.wp-block-kadence-navigation1342-cpt-id,
.wp-block-kadence-header .wp-block-kadence-navigation {
  --kb-nav-column-gap: clamp(1rem, 1vw, 1.65rem);
  --kb-nav-row-gap: .5rem;
}
.wp-block-kadence-header .wp-block-kadence-navigation .kb-navigation.menu {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.wp-block-kadence-header .wp-block-kadence-navigation .kb-navigation.menu > li.menu-item {
  margin: 0 !important;
  flex: 0 0 auto;
}

/* Right-hand CTA cluster: margin-left:auto on Member Login absorbs all
 * the free space, pushing Member Login + Join EAM to the far right and
 * leaving the five primary links left-aligned. (Must come AFTER the
 * blanket margin:0 rule above so it wins.) */
.wp-block-kadence-header .wp-block-kadence-navigation .kb-navigation.menu > li.kb-nav-link-eamlogin01 {
  margin-left: auto !important;
}

/* Animated underline that grows out from the left edge on hover/current —
   ONLY for the top-level nav row, never for items inside a dropdown / mega-menu. */
.wp-block-kadence-header .wp-block-kadence-navigation > .menu-container > ul.kb-navigation > li.menu-item:not(.menu-item-has-children) > .kb-link-wrap > a.kb-nav-link-content::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: .55rem;
  height: 1.5px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: left center;
  transition: opacity .22s ease, transform .28s ease;
  pointer-events: none;
}

.wp-block-kadence-header .wp-block-kadence-navigation > .menu-container > ul.kb-navigation > li.menu-item:hover > .kb-link-wrap > a.kb-nav-link-content::after,
.wp-block-kadence-header .wp-block-kadence-navigation > .menu-container > ul.kb-navigation > li.menu-item.current-menu-item > .kb-link-wrap > a.kb-nav-link-content::after,
.wp-block-kadence-header .wp-block-kadence-navigation > .menu-container > ul.kb-navigation > li.menu-item.current-menu-parent > .kb-link-wrap > a.kb-nav-link-content::after,
.wp-block-kadence-header .wp-block-kadence-navigation > .menu-container > ul.kb-navigation > li.menu-item.current-menu-ancestor > .kb-link-wrap > a.kb-nav-link-content::after {
  opacity: .9;
  transform: scaleX(1);
}

/* Never show the underline on items inside a sub-menu / mega-menu. */
.wp-block-kadence-header .wp-block-kadence-navigation .sub-menu a.kb-nav-link-content::after,
.wp-block-kadence-header .wp-block-kadence-navigation .kb-nav-sub-menu a.kb-nav-link-content::after,
.wp-block-kadence-header .wp-block-kadence-navigation .mega-menu a.kb-nav-link-content::after {
  display: none !important;
  content: none !important;
}

/* Force every nested sub-menu link to dark text. Kadence's per-item
   CSS sets these to white because the Activities mega-menu was originally
   styled for a dark hero context; we now need them dark on the white
   dropdown surface. */
.wp-block-kadence-header .wp-block-kadence-navigation .sub-menu a.kb-nav-link-content,
.wp-block-kadence-header .wp-block-kadence-navigation .sub-menu .sub-menu a.kb-nav-link-content,
.wp-block-kadence-header .wp-block-kadence-navigation .kb-nav-sub-menu a.kb-nav-link-content,
.wp-block-kadence-header .wp-block-kadence-navigation .kb-nav-sub-menu .kb-nav-sub-menu a.kb-nav-link-content,
li.kb-nav-link-1338_publications-01 a.kb-nav-link-content,
li.kb-nav-link-1338_publications-01 .sub-menu a.kb-nav-link-content {
  color: var(--global-palette3, #1d1d1d) !important;
}

/* Publications sub-sub-menu surface: solid white card with a soft shadow
   so it stands away from the parent mega-menu. */
li.kb-nav-link-1338_publications-01 > .sub-menu,
li.kb-nav-link-1338_publications-01 > .kb-nav-sub-menu {
  background: var(--global-palette9, #fff) !important;
  border-radius: 10px;
  padding: .5rem 0;
  box-shadow: 0 18px 40px -12px rgba(10, 15, 40, .25);
  border: 1px solid rgba(29, 29, 29, .06);
  min-width: 220px;
}

/* Hover state on the nested items */
li.kb-nav-link-1338_publications-01 .sub-menu a.kb-nav-link-content {
  display: block;
  padding: .55rem 1.1rem !important;
  transition: background-color .15s ease, color .15s ease;
}
li.kb-nav-link-1338_publications-01 .sub-menu li.menu-item:hover > .kb-link-wrap > a.kb-nav-link-content {
  background: var(--global-palette7, #e0e7e3);
  color: var(--global-palette1, #5a64ad) !important;
}

/* ---------- CTA pills — consistent on every page ----------
 * The pill is drawn on the .kb-link-wrap, not the inner <a>. Member
 * Login now has a dropdown caret button as a sibling of its <a> inside
 * the wrap; putting the pill on the wrap means the caret sits INSIDE
 * the pill instead of hanging off its right edge (the "broken" look).
 * Scoped to the desktop nav — the off-canvas mobile menu keeps
 * Kadence's default list rendering. */
@media (min-width: 1025px) {
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-ey56a572i > .kb-link-wrap,
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-eamlogin01 > .kb-link-wrap {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    border-radius: 999px;
    border: 1.5px solid var(--global-palette3, #1d1d1d);
    padding: .5rem .95rem;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }

  /* Inner link + caret: drop their own box styling and inherit pill colour. */
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-ey56a572i > .kb-link-wrap > a.kb-nav-link-content,
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-eamlogin01 > .kb-link-wrap > a.kb-nav-link-content {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: clamp(.72rem, .3vw + .58rem, .8rem);
    letter-spacing: .055em;
    font-weight: 600;
    white-space: nowrap;
  }
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-ey56a572i a.kb-nav-link-content::after,
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-eamlogin01 a.kb-nav-link-content::after {
    display: none !important;
  }

  /* Caret button: clean, inside the pill, inherits pill colour.
   * Kadence positions the toggle with `left: -2.1rem` to overlap the
   * link in its default layout; reset that so it sits AFTER the text
   * as a normal flex child. */
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-eamlogin01 > .kb-link-wrap > button.kb-nav-dropdown-toggle-btn {
    position: static !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    background: transparent !important;
    color: inherit !important;
    display: inline-flex;
    align-items: center;
  }

  /* Join EAM = filled dark pill. */
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-ey56a572i > .kb-link-wrap {
    background: var(--global-palette3, #1d1d1d);
    border-color: var(--global-palette3, #1d1d1d);
    color: var(--global-palette9, #fff) !important;
  }
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-ey56a572i > .kb-link-wrap:hover {
    background: var(--global-palette1, #5a64ad);
    border-color: var(--global-palette1, #5a64ad);
  }

  /* Member Login = dark outline pill; fills on hover/when its menu is open. */
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-eamlogin01 > .kb-link-wrap {
    color: var(--global-palette3, #1d1d1d) !important;
  }
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-eamlogin01:hover > .kb-link-wrap,
  .wp-block-kadence-header .wp-block-kadence-navigation li.kb-nav-link-eamlogin01 > .kb-link-wrap:hover {
    background: var(--global-palette3, #1d1d1d);
    border-color: var(--global-palette3, #1d1d1d);
    color: var(--global-palette9, #fff) !important;
  }
}

/* ---------- Activities mega-menu intro column ---------- */

/* The Activities dropdown's intro column was palette1 blue; flip to
   palette3 dark so it reads like a serious editorial side-panel. */
.kadence-column1338_cecbcc-aa,
.kadence-column1338_cecbcc-aa > .kt-inside-inner-col,
.kb-row-layout-id1338_7141bb-fe .kadence-column1338_cecbcc-aa .kt-inside-inner-col {
  background: var(--global-palette3, #1d1d1d) !important;
}
.kadence-column1338_cecbcc-aa .kt-inside-inner-col {
  border-left: 3px solid var(--global-palette1, #5a64ad);
}

/* ---------- Hide the Kadence default page-title row ---------- */
/* Pages should never show an empty "Contact Us" / "Pricing" coloured
   rectangle. Pages with a custom playbook hero use that as their hero;
   pages without one just begin with their body content directly under
   the header. */
.kb-row-layout-id747_441210-26 {
  display: none !important;
}

/* ---------- Submenu (dropdown) refinement ---------- */
.wp-block-kadence-header .wp-block-kadence-navigation .sub-menu {
  padding: .5rem 0;
  border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(10, 15, 40, .25);
  border: 1px solid rgba(29, 29, 29, .06);
}
.wp-block-kadence-header .wp-block-kadence-navigation .sub-menu > li > a {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: none;
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* ---------- Mobile / off-canvas trigger ---------- */
.wp-block-kadence-header .wp-block-kadence-off-canvas-trigger button {
  padding: .5rem;
  border-radius: 8px;
  transition: background-color .2s ease;
}

/* ---------- Sticky shadow refinement ---------- */
.wp-block-kadence-header.item-is-stuck {
  box-shadow: 0 4px 24px -16px rgba(10, 15, 40, .18);
}