/* The NAV element, head of the chrome family. Four names here are read by nav.js. */

/* Size and weight are the button part's; tracking and caps are the theme's nav dials. */
.sk-el-nav-drop-label {
  font-size: var(--sk-text-btn-size);
  font-weight: var(--kit-weight-button);
  letter-spacing: calc(var(--kit-track-nav) * 1em);
  text-transform: var(--kit-caps-nav);
}

.sk-el-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kit-space-2) var(--kit-space-3);
}
.sk-el-nav-link {
  position: relative;
  text-decoration: none;
  /* Symmetric: bottom-only padding would center the box while the text rode high. */
  padding-block: 2px;
  transition: color 140ms ease;
}
/* Doubled to (0,2,1): the part states full ink at one class and is emitted later. */
:is(a, button).sk-el-nav-link.sk-btn-link {
  color: var(--sk-ink-muted);
}
/* The tag carries it: the part is emitted after this sheet at equal weight. */
a.sk-el-nav-link,
button.sk-el-nav-link {
  letter-spacing: calc(var(--kit-track-nav) * 1em);
  text-transform: var(--kit-caps-nav);
}

/* data-active is authored; aria-current is nav.js's mark. Same look. */
:is(a, button).sk-el-nav-link.sk-btn-link:is(:hover, [data-active="true"], [aria-current="page"]) {
  color: var(--sk-ink);
}

.sk-extlink {
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.25em;
  vertical-align: baseline;
  opacity: 0.65;
}
.sk-el-nav-div {
  align-self: stretch;
  width: var(--sk-border-width-min);
  margin-block: 0.25em;
  background: var(--sk-stroke);
}
/* --sk-btn-ink, not --sk-bg: the overlay remaps re-point the accent fill to near-white. */
.sk-el-nav-badge {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  font-size: 0.8em;
  letter-spacing: 0;
  background: var(--sk-accent);
  color: var(--sk-btn-ink);
}

/* Opens on :hover or keyboard focus, CSS only; a click leaves :focus-within matching. */
.sk-el-nav-item {
  position: relative;
  display: inline-flex;
}
.sk-el-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* Out of flow: the header's fold measures in-flow children. */
.sk-el-nav-panel {
  position: absolute;
  top: var(--sk-panel-drop, 100%);
  left: 0;
  z-index: 40;
  min-width: 240px;
  padding: var(--sk-panel-pad);
  /* The card corner: no shape drives --kit-panel-radius. */
  border-radius: var(--sk-card-radius);
  background: var(--sk-bg);
  color: var(--sk-ink);
  /* Stated, or content that states none inherits the browser's size. */
  font-size: var(--sk-text-btn-size);
  font-weight: var(--kit-weight-button);
  /* No edge or cast: Border and Shadow are the host header's dials. */
  /* nav.js's shift rides `translate`, never `transform`, which the motion block transitions. */
  translate: var(--sk-panel-shift, 0px);
  /* The ::before bridge keeps the hover corridor from trigger to panel. */
  display: none;
}
/* Not anchor positioning: the bar contains the panel's containing block. */
/* The measuring posture: laid out, painted to nothing, the closed pose's scale neutralized. */
.sk-el-nav-panel[data-sk-measure] {
  display: block;
  visibility: hidden;
  transform: none;
}
/* The pseudo is the panel's, a descendant of the item, so it keeps :hover. */
.sk-el-nav-panel::before {
  content: "";
  position: absolute;
  --sk-panel-bridge-h: var(--sk-panel-bridge, calc(var(--kit-space-2) + 2px));
  top: calc(-1 * var(--sk-panel-bridge-h));
  left: 0;
  right: 0;
  height: var(--sk-panel-bridge-h);
}
.sk-el-nav-item:not([data-trigger="click"]):hover > .sk-el-nav-panel,
.sk-el-nav-item:not([data-trigger="click"]):has(:focus-visible) > .sk-el-nav-panel,
.sk-el-nav-item[data-sk-open] > .sk-el-nav-panel {
  display: block;
}
/* Ties the open arm at (0,4,0) and wins on order; nav.js sizes shut panels. */
.sk-el-nav-item[data-sk-shut] > .sk-el-nav-panel:not([data-sk-measure]) {
  display: none;
}
/* :not([data-sk-open]) reaches (0,5,0): the open arm it cancels comes later. */
@media (prefers-reduced-motion: no-preference) {
  .sk-el-nav-item[data-sk-shut]:not([data-sk-open]) > .sk-el-nav-panel:not([data-sk-measure]) {
    opacity: 0;
    pointer-events: none;
    transform: var(--sk-panel-anim-from, none);
  }
}
/* `transform` is the pose alone; the measured shift rides `translate`. The theme sheet writes --sk-panel-anim-from. */
@media (prefers-reduced-motion: no-preference) {
  .sk-el-nav-panel {
    opacity: 0;
    transform: var(--sk-panel-anim-from, none);
    transform-origin: top;
    /* A closing panel ignores the pointer, or its fading box holds :hover open. */
    pointer-events: none;
    /* The close: a transition takes its properties from the after-change style. */
    transition:
      display calc(var(--sk-dur-panel) * var(--sk-dur-close)) allow-discrete,
      opacity calc(var(--sk-dur-panel) * var(--sk-dur-close)) ease,
      transform calc(var(--sk-dur-panel) * var(--sk-dur-close)) ease;
  }
  .sk-el-nav-item:not([data-trigger="click"]):hover > .sk-el-nav-panel,
  .sk-el-nav-item:not([data-trigger="click"]):has(:focus-visible) > .sk-el-nav-panel,
  .sk-el-nav-item[data-sk-open] > .sk-el-nav-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
      display var(--sk-dur-panel) allow-discrete,
      opacity var(--sk-dur-panel) var(--sk-ease-out),
      transform var(--sk-dur-panel) var(--sk-ease-out);
  }
  @starting-style {
    .sk-el-nav-item:not([data-trigger="click"]):hover > .sk-el-nav-panel,
    .sk-el-nav-item:not([data-trigger="click"]):has(:focus-visible) > .sk-el-nav-panel,
    .sk-el-nav-item[data-sk-open] > .sk-el-nav-panel {
      opacity: 0;
      transform: var(--sk-panel-anim-from, none);
    }
  }
}
/* A wrapping flex row, not a column grid: when the viewport cap bites, columns wrap instead of pinching. */
.sk-el-nav-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kit-space-4);
}
.sk-el-nav-colgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
  min-width: 200px;
}
/* The eyebrow's caps, not a hard word: a theme states capitalization. */
.sk-el-nav-colhead {
  font-size: var(--sk-text-detail-size);
  font-weight: var(--kit-weight-eyebrow);
  /* The menu's tracking: the eyebrow's is a display measure. */
  letter-spacing: calc(var(--kit-track-nav) * 1em);
  text-transform: var(--kit-caps-eyebrow);
  color: var(--sk-ink-muted);
  margin-bottom: var(--kit-space-1);
  text-decoration: none;
}
a.sk-el-nav-colhead:hover {
  color: var(--sk-ink);
}
.sk-el-nav-drop-link {
  display: flex;
  align-items: flex-start;
  gap: var(--kit-space-2);
  min-height: 36px;
  font-size: var(--sk-text-btn-size);
  font-weight: var(--kit-weight-button);
  letter-spacing: calc(var(--kit-track-nav) * 1em);
  text-transform: var(--kit-caps-nav);
  /* The negative margin pulls the hover plate out to the panel's edge. */
  padding: var(--kit-space-2);
  margin-inline: calc(-1 * var(--kit-space-2));
  border-radius: calc(var(--sk-card-radius-1) * 0.6);
  text-decoration: none;
  color: var(--sk-ink);
}
/* The panel's own ink at low alpha, so the hover reads on any ground. */
.sk-el-nav-drop-link:hover {
  background: color-mix(in srgb, var(--sk-ink) 14%, transparent);
}
.sk-el-nav-drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--sk-icon-size) * 1.6);
  height: calc(var(--sk-icon-size) * 1.6);
  margin-top: 1px;
  border-radius: calc(var(--sk-card-radius-1) * 0.5);
  background: var(--sk-surface);
  border: var(--sk-border-width-min) solid var(--sk-stroke);
}
.sk-el-nav-drop-icon .sk-icon-glyph,
.sk-el-nav-drop-icon > svg {
  width: calc(var(--sk-icon-size) * 0.9);
  height: calc(var(--sk-icon-size) * 0.9);
}
.sk-el-nav-drop-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
/* The weight is stated, or it inherits the link's. */
.sk-el-nav-drop-desc {
  font-size: var(--sk-text-nav-size);
  font-weight: var(--kit-weight-nav);
  letter-spacing: calc(var(--kit-track-nav) * 1em);
  text-transform: var(--kit-caps-nav);
  color: var(--sk-ink-muted);
}
.sk-el-nav-featured {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--kit-space-3);
  padding: var(--kit-space-3);
  border-radius: calc(var(--sk-card-radius-1) * 0.8);
  background: var(--sk-surface);
  text-decoration: none;
  color: var(--sk-ink);
}
.sk-el-nav-featured-title {
  font-weight: var(--kit-weight-title);
}
.sk-el-nav-featured-desc {
  font-size: var(--sk-text-nav-size);
  color: var(--sk-ink-muted);
}
.sk-el-nav-featured-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--sk-card-radius-1) * 0.6);
  margin-bottom: var(--kit-space-1);
}
/* A class, not the part's markup: the card is one link, and a control can't nest in it. */
.sk-el-nav-featured-cta {
  margin-top: 2px;
  font-size: var(--sk-text-nav-size);
  font-weight: var(--kit-weight-button);
  letter-spacing: calc(var(--kit-track-button) * 1em);
  color: var(--sk-ink);
}
.sk-el-nav-featured:hover .sk-el-nav-featured-cta {
  text-decoration: underline;
}
.sk-el-nav-panel-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kit-space-3);
  margin: var(--kit-space-3) calc(-1 * var(--sk-panel-pad)) calc(-1 * var(--sk-panel-pad));
  padding: var(--kit-space-2) var(--sk-panel-pad);
  border-top: var(--sk-border-width-min) solid var(--sk-stroke);
  border-radius: 0 0 var(--sk-card-radius) var(--sk-card-radius);
  background: var(--sk-surface);
  text-decoration: none;
  color: var(--sk-ink-muted);
  font-size: var(--sk-text-nav-size);
}
.sk-el-nav-panel-cta {
  font-weight: var(--kit-weight-button);
  letter-spacing: calc(var(--kit-track-button) * 1em);
  color: var(--sk-ink);
  white-space: nowrap;
}
/* `width`, not `min-width`: min-width beats max-width. */
.sk-el-nav-item:has(.sk-el-nav-cols) > .sk-el-nav-panel {
  width: max-content;
  max-width: min(88vw, 1200px);
}
.sk-el-nav-item:not([data-trigger="click"]):hover
  > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured),
.sk-el-nav-item:not([data-trigger="click"]):has(:focus-visible)
  > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured),
.sk-el-nav-item[data-sk-open] > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured),
.sk-el-nav-panel[data-sk-measure]:has(.sk-el-nav-cols):has(.sk-el-nav-featured) {
  display: grid;
  grid-template-columns: auto minmax(200px, 240px);
  column-gap: var(--kit-space-4);
  align-items: start;
}
/* Ties the open arm at (0,6,0) and wins on order, being later. */
.sk-el-nav-item[data-sk-shut]
  > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured):not([data-sk-measure]) {
  display: none;
}
.sk-el-nav-panel:has(.sk-el-nav-cols) > .sk-el-nav-featured {
  margin-top: 0;
}
.sk-el-nav-panel:has(.sk-el-nav-cols) > .sk-el-nav-panel-footer {
  grid-column: 1 / -1;
}

/* The scripts-off floor: hover is absent on touch, but the trigger is a real button. */
@media (max-width: 640px) {
  .sk-el-nav-item {
    flex-wrap: wrap;
  }
  .sk-el-nav-panel {
    position: static;
    min-width: 100%;
    max-width: 100%;
    box-shadow: none;
    margin-top: var(--kit-space-1);
    /* A wide-viewport shift must not ride down here. */
    translate: none;
    transform: none;
  }
  .sk-el-nav-item:has(.sk-el-nav-cols) > .sk-el-nav-panel {
    min-width: 100%;
    max-width: 100%;
  }
  .sk-el-nav-cols {
    flex-direction: column;
  }
  /* On the stacked axis the flex-basis becomes a height and pads short groups. */
  .sk-el-nav-colgroup {
    flex-basis: auto;
  }
  .sk-el-nav-item:not([data-trigger="click"]):hover
    > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured),
  .sk-el-nav-item:not([data-trigger="click"]):has(:focus-visible)
    > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured),
  .sk-el-nav-item[data-sk-open] > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured) {
    display: block;
  }
  /* Again here: a media query adds no specificity, and this block's open arm is later. */
  .sk-el-nav-item[data-sk-shut]
    > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured):not([data-sk-measure]) {
    display: none;
  }
  .sk-el-nav-panel:has(.sk-el-nav-cols) > .sk-el-nav-featured {
    margin-top: var(--kit-space-3);
  }
}