/*------------------------------------*\
    $PRIMARY NAV MENU
\*------------------------------------*/

/*  PowerPack Advanced Menu. Font size ~13px is derived — see the Build
    Sheet's type audit; nearest kit token is --jcd-text-kicker.         */

.pp-advanced-menu .menu > li > a {
  font-family: var(--jcd-font-sans);
  font-size: var(--jcd-text-kicker);
  font-weight: var(--jcd-weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--jcd-tracking-nav);
  line-height: 1.3;
  color: var(--jcd-color-ink);
  transition: color var(--jcd-duration-base) ease-out;
}

@media (max-width: 768px) {
.pp-advanced-menu .menu > li > a {
  font-size: 2rem;
}
}

.pp-advanced-menu .menu > li > a:hover,
.pp-advanced-menu .menu > li > a:focus-visible {
  color: var(--jcd-color-accent-text);
}

.pp-advanced-menu .menu > li.current-menu-item > a,
.pp-advanced-menu .menu > li.current-menu-parent > a {
  color: var(--jcd-color-accent-text);
}

/* Colour alone is not a sufficient indicator — WCAG 1.4.1. */
.pp-advanced-menu .menu > li > a:focus-visible {
  outline: 2px solid var(--jcd-color-focus);
  outline-offset: 4px;
  border-radius: var(--jcd-radius-sm);
}

/*------------------------------------*\
    $HEADER LOGO — TRUE CENTERING
\*------------------------------------*/

/*  A three-item flex row centers the middle item only when the outer
    two are equal width. Equal flex on the flanks puts the logo at true
    center. Proven live on the main Flamingo Magazine nav — same
    pattern, same class names, adopted here rather than reinvented.     */
.jcd_ui_flank {
  flex: 1 1 0 !important;
  min-width: 132px;
}
.jcd_ui_center {
  flex: 0 1 auto !important;
}
.jcd_ui_flank:first-child {
  justify-content: flex-start;
}
.jcd_ui_flank:last-child {
  justify-content: flex-end;
}

.jcd_ui_center img {
  max-width: 100%;
  height: auto;
}