/* NALTH Join navigation v1.1.2, seafoam CTA revision.
   Replace the existing nalth-join-navigation-v1.1.2.css in join/css/.
   Self-contained; all selectors are scoped to this navigation only. */
#nalth-join-nav {
  --njn-navy:#153546;
  --njn-seafoam:#9cbaba;
  --njn-ink:#243943;
  --njn-muted:#55747b;
  --njn-line:#d7e1e1;
  display:block;
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:1200px;
  margin:0 auto 24px;
  padding:0;
  color:var(--njn-ink);
  font:400 14px/1.4 Arial,Helvetica,sans-serif;
  text-align:left;
  -webkit-text-size-adjust:100%;
}
#nalth-join-nav,
#nalth-join-nav *,
#nalth-join-nav *::before,
#nalth-join-nav *::after { box-sizing:border-box; }
#nalth-join-nav [hidden] { display:none!important; }
#nalth-join-nav .njn-shell {
  display:flex;
  align-items:stretch;
  gap:0;
  min-width:0;
  padding:8px;
  border:1px solid var(--njn-line);
  border-radius:21px;
  background:linear-gradient(115deg,#fff 45%,#f0f5f3);
  box-shadow:0 10px 28px rgba(21,53,70,.09),0 2px 4px rgba(21,53,70,.025);
  animation:njn-arrive 1000ms cubic-bezier(.18,.8,.25,1) both;
}
#nalth-join-nav .njn-brand {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:10px;
  min-width:0;
  padding:14px 18px;
  border:0;
  border-radius:14px;
  background:var(--njn-seafoam);
  color:var(--njn-navy);
}
#nalth-join-nav .njn-mark {
  display:block;
  flex:0 0 30px;
  width:30px;
  height:30px;
  margin:0;
  padding:0;
  border:0;
}
#nalth-join-nav .njn-brand-copy { display:flex; flex-direction:row; align-items:baseline; gap:5px; white-space:nowrap; }
#nalth-join-nav .njn-brand-copy span {
  color:inherit;
  font:700 13px/1.35 Arial,Helvetica,sans-serif;
  letter-spacing:normal;
  text-transform:none;
}
#nalth-join-nav .njn-brand-copy strong {
  color:inherit;
  font:700 13px/1.35 Arial,Helvetica,sans-serif;
  letter-spacing:normal;
}
#nalth-join-nav .njn-list {
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  min-width:0;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
#nalth-join-nav .njn-list > li {
  display:block;
  flex:1 1 auto;
  min-width:0;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
  animation:njn-link-arrive 560ms 140ms cubic-bezier(.2,.75,.25,1) both;
}
#nalth-join-nav .njn-list > li::before,
#nalth-join-nav .njn-list > li::after { content:none!important; }
#nalth-join-nav .njn-list > li:nth-child(2) { animation-delay:180ms; }
#nalth-join-nav .njn-list > li:nth-child(3) { animation-delay:220ms; }
#nalth-join-nav .njn-list > li:nth-child(4) { animation-delay:260ms; }
#nalth-join-nav .njn-list > li:nth-child(5) { flex:0 0 auto; animation-delay:300ms; }
#nalth-join-nav .njn-link,
#nalth-join-nav .njn-link:link,
#nalth-join-nav .njn-link:visited {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  max-width:100%;
  margin:0;
  padding:12px 13px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#243943!important;
  -webkit-text-fill-color:currentColor!important;
  font:700 13px/1.35 Arial,Helvetica,sans-serif!important;
  letter-spacing:normal;
  text-decoration:none!important;
  text-transform:none;
  white-space:nowrap;
  box-shadow:none;
  transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease,transform 180ms ease,box-shadow 180ms ease;
}
#nalth-join-nav .njn-link svg {
  display:block;
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin:0;
  color:#527779;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#nalth-join-nav .njn-link:hover {
  transform:translateY(-2px);
  color:#153546!important;
  background:#e8f0ed;
  border-color:#c8d9d5;
}
#nalth-join-nav .njn-link[aria-current="page"] {
  background:#153546;
  border-color:#153546;
  color:#fff!important;
  box-shadow:0 4px 10px rgba(21,53,70,.16),inset 0 -3px 0 #9cbaba;
}
#nalth-join-nav .njn-link[aria-current="page"] svg { color:#b8d1ca; }
#nalth-join-nav .njn-link[aria-current="page"]:hover { background:#214759; }
#nalth-join-nav .njn-link.njn-brand {
  justify-content:flex-start;
  gap:10px;
  min-height:64px;
  margin-left:10px;
  padding:14px 18px;
  border:1px solid #9cbaba;
  border-radius:14px;
  background:#9cbaba;
  color:#153546!important;
}
#nalth-join-nav .njn-link.njn-brand:hover { background:#adc7c7; border-color:#adc7c7; box-shadow:0 4px 12px rgba(21,53,70,.12); }
/* Recolor the existing arrow graphic through CSS; no replacement image needed. */
#nalth-join-nav .njn-link.njn-brand .njn-mark { filter:brightness(0) saturate(100%) invert(17%) sepia(26%) saturate(1174%) hue-rotate(156deg) brightness(97%) contrast(94%); }
#nalth-join-nav .njn-link.njn-brand[aria-current="page"] { background:#153546; border-color:#153546; color:#fff!important; box-shadow:0 4px 10px rgba(21,53,70,.16),inset 0 -3px 0 #9cbaba; }
#nalth-join-nav .njn-link.njn-brand[aria-current="page"]:hover { background:#214759; border-color:#214759; }
#nalth-join-nav .njn-link.njn-brand[aria-current="page"] .njn-mark { filter:none; }
#nalth-join-nav .njn-link:focus-visible,
#nalth-join-nav .njn-toggle:focus-visible {
  outline:3px solid #527779!important;
  outline-offset:3px;
}
#nalth-join-nav .njn-toggle { display:none; }

/* Fit the original horizontal desktop design into normal CMS page columns. */
#nalth-join-nav[data-njn-dense="true"] .njn-list {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.8fr) minmax(0,1.5fr) minmax(0,1.4fr);
  align-items:stretch;
  gap:4px;
}
#nalth-join-nav[data-njn-dense="true"] .njn-link {
  flex-direction:row;
  justify-content:center;
  gap:6px;
  height:100%;
  min-height:64px;
  padding:10px 7px;
  font-size:12px!important;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
}
#nalth-join-nav[data-njn-dense="true"] .njn-link.njn-brand { margin:0; }
#nalth-join-nav[data-njn-dense="true"] .njn-mark { flex:0 0 24px; width:24px; height:24px; }
#nalth-join-nav[data-njn-dense="true"] .njn-brand-copy { align-items:baseline; gap:4px; }
#nalth-join-nav[data-njn-dense="true"] .njn-brand-copy span,
#nalth-join-nav[data-njn-dense="true"] .njn-brand-copy strong { font-size:12px; }

/* Very small desktop columns still keep every destination visible. */
#nalth-join-nav[data-njn-stacked="true"] .njn-list { grid-template-columns:repeat(5,minmax(0,1fr)); }
#nalth-join-nav[data-njn-stacked="true"] .njn-link { flex-direction:column; min-height:92px; text-align:center; }
#nalth-join-nav[data-njn-stacked="true"] .njn-brand-copy { align-items:center; }

/* Only phone-sized viewports use the expandable menu. */
#nalth-join-nav[data-njn-compact="true"] .njn-shell { flex-wrap:wrap; gap:0; padding:7px; border-radius:18px; }
#nalth-join-nav[data-njn-compact="true"] .njn-brand { padding:13px 15px; }
#nalth-join-nav[data-njn-compact="true"] .njn-toggle:not([hidden]) {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:1 1 0;
  gap:10px;
  min-width:0;
  min-height:60px;
  margin:0;
  padding:10px 14px;
  border:0;
  border-radius:12px;
  color:#153546!important;
  -webkit-text-fill-color:currentColor!important;
  background:transparent!important;
  box-shadow:none;
  font:700 13px/1.4 Arial,Helvetica,sans-serif!important;
  text-align:left;
  text-transform:none;
  cursor:pointer;
}
#nalth-join-nav .njn-toggle-copy { display:flex; flex-direction:column; min-width:0; gap:3px; }
#nalth-join-nav .njn-current-label { color:#55747b; font:400 12px/1.3 Arial,Helvetica,sans-serif; overflow-wrap:anywhere; }
#nalth-join-nav .njn-chevron {
  display:block;
  flex:0 0 27px;
  width:27px;
  height:27px;
  padding:6px;
  border-radius:50%;
  color:#153546;
  background:#deebe7;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform 200ms ease;
}
#nalth-join-nav[data-njn-open="true"] .njn-chevron { transform:rotate(180deg); }
#nalth-join-nav[data-njn-compact="true"][data-njn-enhanced="true"][data-njn-open="false"] .njn-list { display:none; }
#nalth-join-nav[data-njn-compact="true"] .njn-list {
  display:grid;
  grid-template-columns:1fr;
  flex-basis:100%;
  gap:5px;
  margin:8px 0 0!important;
  padding:9px 3px 3px!important;
  border-top:1px solid #d7e1e1;
}
#nalth-join-nav[data-njn-compact="true"] .njn-link { justify-content:flex-start; gap:12px; min-height:48px; padding:13px 14px; white-space:normal; }
#nalth-join-nav[data-njn-compact="true"] .njn-link.njn-brand { margin:3px 0 0; min-height:64px; justify-content:flex-start; }
#nalth-join-nav[data-njn-compact="true"] .njn-link:hover { transform:translateX(2px); }
#nalth-join-nav[data-njn-compact="true"] .njn-link[aria-current="page"] { box-shadow:inset 3px 0 0 #9cbaba; }
#nalth-join-nav[data-njn-compact="true"] .njn-link.njn-brand[aria-current="page"] { box-shadow:inset 0 0 0 2px #9cbaba; }
#nalth-join-nav[data-njn-compact="true"] .njn-list > li { animation-name:njn-menu-arrive; }

/* Visible links remain useful when scripting is disabled or unavailable. */
@media(max-width:600px) {
  #nalth-join-nav:not([data-njn-enhanced]) .njn-shell { flex-direction:column; }
  #nalth-join-nav:not([data-njn-enhanced]) .njn-list { justify-content:flex-start; padding:10px 0 0!important; }
  #nalth-join-nav .njn-brand { gap:8px; }
  #nalth-join-nav .njn-mark { flex-basis:24px; width:24px; height:24px; }
  #nalth-join-nav .njn-brand-copy strong { font-size:13px; }
}
@media(max-width:360px) {
  #nalth-join-nav[data-njn-compact="true"] .njn-brand { padding:12px 10px; }
  #nalth-join-nav[data-njn-compact="true"] .njn-toggle:not([hidden]) { gap:5px; padding:9px 10px; }
}
@keyframes njn-arrive { from { transform:translateX(calc(-100vw - 36px)); } to { transform:translateX(0); } }
@keyframes njn-link-arrive { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:translateX(0); } }
@keyframes njn-menu-arrive { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
/* Keyboard navigation never has to wait for an entrance animation. */
#nalth-join-nav:focus-within .njn-shell { animation:none; }
#nalth-join-nav:focus-within .njn-list > li { animation:none; }
@media(prefers-reduced-motion:reduce) {
  #nalth-join-nav *,#nalth-join-nav *::before,#nalth-join-nav *::after { animation:none!important; transition:none!important; }
  #nalth-join-nav .njn-link:hover { transform:none; }
}
@media print { #nalth-join-nav { display:none!important; } }
