/* ============================================================
   Secondary Nav
   Horizontally scrollable link row that sits under the page hero.
   Mobile-first: base styles cover 0-1199px; larger screens get
   overrides at 1200+.
   ============================================================ */

body,
html {
  margin: 0;
  padding: 0;
}

.page-banner--title h1 {
  max-width: 500px !important;
}


/* -- Base Nav ---------------------------------------------------- */

.secondary-nav {
  border-top: 10px solid #f7c750;
  position: relative;
}

/* -- Modifier: no top border --------------------------------------
   Set by ShowBorderTop=false in the DCR. For pages whose HERO already
   ends in a border-bottom: ours sits directly beneath it and the two
   read as a single doubled rule.

   `border-top: 0`, not `border-top-color: transparent` — a transparent
   border still occupies 10px, so the nav would keep the gap and only
   lose the colour, which looks like a rendering bug rather than a
   choice. Removing the border removes the space with it. */
.secondary-nav--no-border-top {
  border-top: 0;
}

/* Inner row hosts prev arrow · wrapper · next arrow in a horizontal
   flex track. Kept separate from `.secondary-nav` so the progress
   bar can sit as a full-width sibling below. */
.secondary-nav__inner {
  align-items: stretch;
  display: flex;
}

.secondary-nav.shrink {
  height: auto !important;
}


/* -- Prev / Next Arrows ---------------------------------------
   Piggybacks on the leadership carousel's circle+chevron pattern
   but scaled down. RBC dark blue border + chevron; fills solid
   blue on hover with a white chevron for contrast. Auto-hides
   when scrolling in a direction isn't available (JS toggles the
   is-hidden class). */

/* The arrow flex item stretches to the FULL row height so its
   pseudo-element divider spans top-to-bottom of the nav. The actual
   round button face is drawn by ::before (positioned at the center
   of the stretched box) so the visual circle stays 20px regardless
   of how tall the row is. Padding: 0 8px reserves the horizontal
   space to the right/left of the button for the divider. */
.secondary-nav__arrow {
  align-items: center;
  align-self: stretch;
  background: transparent;
  border: none;
  color: #003168;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  margin: 0;
  padding: 0 8px;
  position: relative;
  transition: color 0.15s ease, opacity 0.15s ease;
  width: 36px;
}

/* Round button face — the visual circle. */
.secondary-nav__arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 1px solid #003168;
  border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease;
  z-index: 0;
}

/* SVG sits above the circle. */
.secondary-nav__arrow svg {
  position: relative;
  z-index: 1;
}

/* Vertical divider — full row height because the arrow flex item
   itself stretches. Prev → line on its right; next → line on its
   left. */
.secondary-nav__arrow--prev::after,
.secondary-nav__arrow--next::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #c0c0c0;
}
.secondary-nav__arrow--prev::after { right: 0; }
.secondary-nav__arrow--next::after { left: 0; }

/* Hover: circle fills solid blue, chevron flips white. */
.secondary-nav__arrow:hover {
  color: #ffffff;
  outline: none;
}
.secondary-nav__arrow:hover::before {
  background: #003168;
}

/* Keyboard focus: outer arrow box goes blue, inner circle stays
   white, chevron inherits the default #003168 from the base rule
   (that's why color isn't set here — letting inheritance handle
   the "chevron blue" part keeps this rule minimal). */
.secondary-nav__arrow:focus-visible {
  background: #003168;
  outline: none;
}
.secondary-nav__arrow:focus-visible::before {
  background: #ffffff;
}

/* When the arrow is BOTH keyboard-focused and mouse-hovered, the
   focused treatment wins — chevron stays blue, circle stays white.
   Without this, the hover rule's `color: #ffffff` would win the
   cascade and flip the chevron white against the white circle
   (which reads as invisible). */
.secondary-nav__arrow:focus-visible:hover {
  color: #003168;
}
.secondary-nav__arrow:focus-visible:hover::before {
  background: #ffffff;
}

.secondary-nav__arrow svg {
  display: block;
  height: 8px;
  width: 8px;
  stroke: currentColor;
  fill: none;
}

/* Disabled state — scrolled all the way to that end and there's
   nothing more to reveal. Arrow stays visible so the affordance
   doesn't jump, but drops to a muted gray and stops responding to
   clicks. Uses both the CSS attribute selector for [disabled] and
   an explicit .is-disabled class for consumers that can't set the
   attribute directly. */
.secondary-nav__arrow[disabled],
.secondary-nav__arrow.is-disabled {
  color: #c0c0c0;
  cursor: not-allowed;
}
.secondary-nav__arrow[disabled]::before,
.secondary-nav__arrow.is-disabled::before {
  border-color: #c0c0c0;
}
.secondary-nav__arrow[disabled]:hover::before,
.secondary-nav__arrow.is-disabled:hover::before {
  background: transparent;
}

/* When the nav content fits inside the wrapper (no overflow), remove
   the arrows from layout entirely so the list left-aligns cleanly.
   JS toggles this on load and on resize. */
.secondary-nav__arrow.is-not-needed {
  display: none;
}

.secondary-nav__wrapper {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;

  /* Prefers-reduced-motion respect for CSS-driven scroll. Users
     with vestibular sensitivities get instant scroll instead of
     the smooth animation. */

  /* Hide scrollbar cross-browser. Chrome/Safari via ::-webkit-,
     Firefox via scrollbar-width, IE/Edge via -ms-overflow-style. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.secondary-nav__wrapper::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .secondary-nav__wrapper {
    scroll-behavior: auto;
  }
}


/* -- Nav List --------------------------------------------------- */

/* Centered by default at every breakpoint. When items overflow the
   wrapper, `.secondary-nav.is-overflowing` (added by JS) switches
   the list to flex-start so the first item aligns to the wrapper's
   left edge instead of getting pushed under the prev arrow — a
   quirk of `justify-content: center` on flex containers whose
   content overflows (items still calculate their positions relative
   to the centered origin, which can be negative). */
.secondary-nav__list {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  justify-content: center;
  margin: 0;
  padding: 0;
  gap: 7px;
}

.secondary-nav.is-overflowing .secondary-nav__list {
  justify-content: flex-start;
}

.secondary-nav__item {
  flex: 0 0 auto;
  position: relative;
}


/* -- Link Styles (Mobile First Base) --------------------------- */

.secondary-nav__item a {
  display: inline-block;
  text-decoration: none;
  padding: 12px 12px;
  font-family: "Roboto Light", "Roboto", Arial, Verdana, sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #424242;
  line-height: 1.4;
  white-space: nowrap;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

/* Hover + keyboard focus share the same treatment. Using
   `:focus-visible` (not `:focus`) so mouse clicks don't leave a
   lingering gray background after clicking. Keyboard users still
   get the visible anchor when Tabbing. Also overriding Bootstrap's
   default a:focus outline because our background swap satisfies
   the "focus indicator" requirement. */
.secondary-nav__item a:hover,
.secondary-nav__item a:focus-visible {
  background-color: #eeeeee;
  outline: none;
}
.secondary-nav__item a:focus {
  outline: none;
}


/* -- Active Item + Triangle (Mobile First Base) --------------- */

.secondary-nav__item.active a,
.secondary-nav__item a[aria-current="page"] {
  font-weight: 500;
  font-family: "Roboto Medium", "Roboto", Arial, Verdana, sans-serif;
}

/* Yellow arrow-down triangle sits above the current-page link. */
.secondary-nav__item a[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #f7c750;
  z-index: 1;
}


/* -- Scroll Progress Bar --------------------------------------- */

.secondary-nav__progress-bar {
  position: relative;
  height: 3px;
  background-color: #c0c0c0;
  overflow: hidden;
  width: 100%;
}

.secondary-nav__progress-fill {
  position: absolute;
  height: 100%;
  width: 0%;
  background-color: #184997;
  transition: width 0.2s ease-out;
}


/* -- Larger screens (1200px+) --------------------------------- */

@media (min-width: 1200px) {
  .secondary-nav__item a {
    padding: 13px 15px;
    font-size: 13px;
  }

  .secondary-nav__item a[aria-current="page"]::after {
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-bottom: 8px solid #f7c750;
  }
  /* .secondary-nav__list centering already handled in base rule. */
}
</content>
</invoke>