/**
 * Site-wide main navigation — the "classic" desktop design.
 *
 * Plain CSS on purpose. It carries no Tailwind and no build step (the npm script just
 * copies it), because it reproduces a design we intend to retire: when the immersive
 * desktop bar replaces it, this file is deleted whole rather than untangled.
 *
 * Values were measured off the UberMenu-rendered header so the swap is visually
 * neutral. The DOM contract (data-nav / data-item / data-key / data-mega /
 * .mega-panel / .nv-link) is identical to the immersive partials, so nav.js drives
 * both and the eventual convergence is an include swap.
 */

:root {
  --ccl-nav-ink: #3b3b3b;
  --ccl-nav-blue: #1560a5;
  --ccl-nav-muted: #888;
  --ccl-nav-body: #444;
  --ccl-nav-rule: #e0e0e0;
  --ccl-nav-wrap: 1140px;
  /* Below this the bar collapses to the drawer. The four labels stop fitting at their
     full size around 1072px, so rather than hand over there, the 961-1072px band below
     scales the logo down to buy the room back. */
  --ccl-nav-bp: 961px;
}

/* --------------------------------------------------------------- header shell */

/* Elementor made #page-header sticky; we own that now. */
.ccl-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: #fff;
}

/* ----------------------------------------------------------------- utility bar */

/* build/style.css already styles #top_bar heavily (borders, link padding, the
   dropdown arrow sprites). This only supplies the layout Elementor used to provide
   and swaps SmartMenus for a hover/focus dropdown. */

.ccl-topbar__inner {
  max-width: var(--ccl-nav-wrap);
  margin: 0 auto;
}

.ccl-topbar nav > ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccl-topbar nav > ul > li {
  position: relative;
}

.ccl-topbar a {
  display: block;
  color: var(--ccl-nav-ink);
  text-decoration: none;
  /* Under 768px build/style.css clips the icon links to 22px so only the sprite
     shows. Without nowrap the label wraps beneath the floated icon instead of
     being clipped, and the bar grows to two rows. */
  white-space: nowrap;
}

.ccl-topbar a:hover,
.ccl-topbar a:focus-visible {
  color: var(--ccl-nav-blue);
}

.ccl-topbar .sub-menu {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  display: none;
  min-width: 190px;
  margin: 0;
  list-style: none;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* CSS-only replacement for SmartMenus. :focus-within keeps it keyboard-reachable. */
.ccl-topbar .menu-dropdown:hover > .sub-menu,
.ccl-topbar .menu-dropdown:focus-within > .sub-menu {
  display: block;
}

.ccl-topbar .sub-menu a {
  padding: 5px 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.ccl-topbar .sub-menu a:hover,
.ccl-topbar .sub-menu a:focus-visible {
  text-decoration: underline;
}

/* -------------------------------------------------------------------- main bar */

.ccl-nav {
  position: relative;
  background: #fff;
}

/* 9px around the 67px link box reproduces the 85px section Elementor rendered, so
   the sticky header occupies exactly the height it did before.

   The 10px sides are the site's own content gutter: page content — breadcrumbs, H1,
   Elementor rows — sits 10px inside this same 1140px container at every width. Without
   it the logo sat 10px left of everything below it, and flush to the viewport edge once
   the window was narrower than the container. */
.ccl-nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--ccl-nav-wrap);
  margin: 0 auto;
  padding: 9px 10px;
}

/* ---------------------------------------------------------------- logo */

.ccl-nav__logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  text-decoration: none;
}

/* No `display` here: `.ccl-nav__logo img` would outrank the single-class rules
   below and pin both marks visible. */
.ccl-nav__logo img {
  width: auto;
  max-width: 100%;
}

/* One-line mark on desktop, stacked mark on phones. */

/* The artwork is 940.7 x 88.86 and the wordmark does not sit centred in it: the swoosh
   reaches the top of the canvas, the letters stop well short of it. Centring the box
   therefore renders the words low — measured at 6px below the middle of the nav labels
   beside them, where production sits within 1px. Nudging up by 17.5% of the logo's
   height corrects that (7px at 40px) and, being a percentage, holds if the logo is ever
   resized. Purely visual: it cannot affect the bar's layout or height. */
.ccl-nav__logo-lg {
  display: block;
  height: 40px;
  transform: translateY(-17.5%);
}

.ccl-nav__logo-sm {
  display: none;
  height: 30px;
}

@media (max-width: 767px) {
  .ccl-nav__logo-lg {
    display: none;
  }

  .ccl-nav__logo-sm {
    display: block;
  }
}

/* ------------------------------------------------------------ top level */

/* `auto` on both sides splits the leftover width evenly, so the four items sit centred
   between the logo and the search button instead of pushed up against the logo. */
.ccl-nav__menu {
  display: flex;
  align-items: stretch;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.ccl-nav__item {
  display: flex;
  align-items: center;
}

.ccl-nav__link {
  display: block;
  padding: 18px 20px;
  border: 0;
  background: none;
  color: var(--ccl-nav-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 29px;
  text-decoration: none;
  cursor: pointer;
  /* Two-word labels must never break onto a second line — that is what doubled the
     bar's height just above the drawer breakpoint. */
  white-space: nowrap;
}

.ccl-nav__link:hover,
.ccl-nav__link:focus-visible {
  color: var(--ccl-nav-blue);
  text-decoration: none;
}

/* The underline sits on the label, not the padded hit area, so it hugs the text.
   `inherit`, not a colour of its own: the label has to follow whatever the link is
   set to, or it pins the text grey through the hover and active states below. */
.ccl-nav__label {
  display: inline-block;
  border-bottom: 2px solid transparent;
  color: inherit;
}

/* The underline is a pointer/keyboard affordance only. */
.ccl-nav__link:hover .ccl-nav__label,
.ccl-nav__link:focus-visible .ccl-nav__label {
  border-bottom-color: var(--ccl-nav-blue);
}

/* The active heading — the item whose panel is open, and the section the visitor is
   in — is marked by colour instead, with no underline. */
.ccl-nav__item.is-open .ccl-nav__link,
.ccl-nav__item.is-current .ccl-nav__link {
  color: var(--ccl-nav-blue);
}

/* ------------------------------------------------------------ bar tools */

/* No `margin-left: auto` here: the menu's own auto margins already claim the leftover
   width, and adding it back would swallow the left-hand share and shove the items over. */
.ccl-nav__tools {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}

.ccl-nav__tool {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ccl-nav-ink);
  cursor: pointer;
}

.ccl-nav__tool:hover,
.ccl-nav__tool:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ccl-nav-blue);
}

.ccl-nav__burger {
  display: none;
}

/* ----------------------------------------------------------- mega panel */

.ccl-nav__mega {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  left: 0;
  /* Flush against the bar. The panel is absolutely positioned at top:100%, so any
     margin here is a gap the page behind shows through as a grey band. */
  margin-top: 0;
  border-bottom: 1px solid var(--ccl-nav-rule);
  background: #fff;
  /* Offset down by half the blur so the shadow casts below the panel only. With no
     offset it spreads upward too, and since this panel has z-index 20 it paints over
     the bar above — which reads as a grey band between the two. */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
  /* nav.js toggles .is-open here; panels are hidden until one is activated. */
  display: none;
}

.ccl-nav__mega.is-open {
  display: block;
}

.ccl-nav__mega .mega-panel {
  display: none;
}

.ccl-nav__mega .mega-panel.is-active {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--ccl-nav-wrap);
  margin: 0 auto 10px;
  padding-top: 10px;
}

.ccl-nav__mega .mega-panel.is-active[data-cols='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ccl-nav__mega .mega-panel.is-active[data-cols='1'] {
  grid-template-columns: minmax(0, 380px);
}

/* Bottom padding is tuned so the "View All" link sits 48px above the panel's bottom
   edge, measured from the text. It is 33px rather than 48px because three other things
   already contribute to that gap: ~4px of line-box descent under the inline-block link,
   the panel's own 10px margin-bottom, and the panel's 1px bottom border.
   It sits on the column rather than the link so the promo column, which has no CTA,
   ends with the same breathing room. */
.ccl-nav__col {
  min-width: 0;
  padding: 10px 20px 33px;
}

.ccl-nav__col-head {
  margin: 0 0 22px;
  color: var(--ccl-nav-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 18.2px;
  text-transform: uppercase;
}

.ccl-nav__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Page-level custom CSS elsewhere on the site decorates bare list items. The Your
   Leadership Challenges page, for one, prints a green em dash before every `ul li` on
   the page with no selector scope at all, which puts dashes down the mega panel. These
   lists opt out for good: the class outranks an unscoped `ul li`, so no !important is
   needed, and it holds against whatever another page adds later. */
.ccl-nav__links li::before,
.ccl-nav__links li::after {
  content: none;
}

.ccl-nav__links a {
  display: block;
  padding: 10px 0;
  color: var(--ccl-nav-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration: none;
}

.ccl-nav__links a:hover,
.ccl-nav__links a:focus-visible {
  color: var(--ccl-nav-blue);
  text-decoration: underline;
}

/* The page being viewed, marked the same blue as its section in the bar above. */
.ccl-nav__links a.is-current {
  color: var(--ccl-nav-blue);
}

.ccl-nav__cta {
  display: inline-block;
  margin-top: 26px;
  color: var(--ccl-nav-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 15.6px;
  text-decoration: none;
}

.ccl-nav__cta:hover,
.ccl-nav__cta:focus-visible {
  text-decoration: underline;
}

/* ------------------------------------------------------------ promo cards */

.ccl-nav__card {
  display: block;
  padding: 10px 0;
  color: var(--ccl-nav-ink);
  text-decoration: none;
}

.ccl-nav__card + .ccl-nav__card {
  margin-top: 8px;
}

.ccl-nav__card-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--ccl-nav-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ccl-nav__card-title {
  display: block;
  color: var(--ccl-nav-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.ccl-nav__card:hover .ccl-nav__card-title,
.ccl-nav__card:focus-visible .ccl-nav__card-title {
  color: var(--ccl-nav-blue);
  text-decoration: underline;
}

.ccl-nav__card-blurb {
  display: block;
  margin-top: 2px;
  color: var(--ccl-nav-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

/* ------------------------------------------------------------ search box */

/* The 10px sides are the same content gutter `.ccl-nav__inner` uses, so the field lines
   up with the logo above it and the page content below. Without them the box ran to the
   viewport edge on every width narrower than the 1140px container — most visible on
   phones and tablets, where the container never applies. */
.ccl-search__inner {
  max-width: var(--ccl-nav-wrap);
  margin: 0 auto;
  padding: 0 10px 18px;
}

/* ------------------------------------------------------------- breakpoint */

/* The last stretch before the drawer takes over is tight: at full size the four labels
   plus the logo and search button outgrow the padded container. Trimming the inter-item
   padding reclaims 32px and keeps the outer gaps — the balance set above — untouched. */
@media (min-width: 961px) and (max-width: 1120px) {
  .ccl-nav__link {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* Below 1073px the padding trim alone is not enough, so the logo scales too. The
   one-line mark is 423px wide at its full 40px height — by far the widest thing in the
   bar — so a few pixels of height buys a lot of room: at 30px it is 317px, releasing
   over 100px for the labels.

   Fluid rather than stepped, so there is no visible jump on resize, and clamped at both
   ends: never taller than the 34px the band starts at, never shorter than 30px, which is
   where 961px still fits. The -17.5% optical nudge on the logo is a percentage, so it
   tracks these heights on its own. */
@media (min-width: 961px) and (max-width: 1072px) {
  .ccl-nav__logo-lg {
    height: clamp(30px, 3.15vw, 34px);
  }
}

/* Keep this in step with --ccl-nav-bp above: 960px is one below it. */
@media (max-width: 960px) {
  .ccl-nav__menu,
  .ccl-nav__mega {
    display: none !important;
  }

  .ccl-nav__burger {
    display: inline-flex;
  }

  /* With the menu hidden its auto margins go with it, so the tools need their own to
     stay at the right edge instead of sitting against the logo. */
  .ccl-nav__tools {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ccl-nav *,
  .ccl-nav__mega * {
    transition-duration: 0.001ms !important;
  }
}