/* =========================================================================
   Upskilling — Navigation Menu

   Port of shadcn's `navigation-menu` (Base UI variant) to plain CSS.
   The transitions are transcribed from the official Base UI demo:

     Positioner  transitions top/left/right/bottom
     Popup       transitions opacity, transform, width, height  (the "morph")
     Content     transitions opacity over half the duration and transform over the
                 full duration, sliding according to --activation-direction

   Every Elementor control writes to a `--usk-nav-*` custom property.
   An empty control makes the value fall back to the theme token (`--popover`, `--muted`,
   `--radius`…) and, if that does not exist either, to a shadcn-equivalent default.
   ========================================================================= */

.usk-nav {
  /* ------------------------------------------------------------- Motion */
  --usk-nav-easing: var(--up-ease-expo, cubic-bezier(0.22, 1, 0.36, 1));
  --usk-nav-duration: 350ms;
  --usk-nav-exit-duration: 150ms;

  /* ----------------------------------------------------------- Surfaces */
  --usk-nav-popup-bg: var(--popover, #ffffff);
  --usk-nav-popup-fg: var(--popover-foreground, #0f172a);
  --usk-nav-popup-radius: var(--radius, 0.5rem);
  --usk-nav-popup-border-color: var(--border, #e2e8f0);
  --usk-nav-popup-border-width: 1px;
  --usk-nav-popup-shadow: var(--up-shadow-lg, 0 10px 15px -3px rgb(15 23 42 / 8%), 0 4px 6px -4px rgb(15 23 42 / 5%));
  --usk-nav-content-max-width: 420px;
  --usk-nav-content-padding: 0.25rem;

  /* ------------------------------------------------------------ Trigger */
  --usk-nav-trigger-color: var(--foreground, #0f172a);
  --usk-nav-trigger-bg: transparent;
  --usk-nav-trigger-hover-color: var(--usk-nav-trigger-color);
  --usk-nav-trigger-hover-bg: var(--muted, #f8fafc);
  --usk-nav-trigger-open-color: var(--usk-nav-trigger-hover-color);
  --usk-nav-trigger-open-bg: var(--muted, #f8fafc);
  --usk-nav-trigger-active-color: var(--primary, #ff5e11);
  --usk-nav-trigger-active-bg: transparent;
  --usk-nav-trigger-padding: 0.375rem 0.625rem;
  --usk-nav-trigger-radius: var(--radius, 0.5rem);
  --usk-nav-trigger-gap: 0.375rem;
  --usk-nav-list-gap: 0.125rem;
  --usk-nav-list-justify: flex-start;

  /* -------------------------------------------------------------- Links */
  --usk-nav-link-color: var(--popover-foreground, #0f172a);
  --usk-nav-link-hover-color: var(--usk-nav-link-color);
  --usk-nav-link-hover-bg: var(--muted, #f8fafc);
  --usk-nav-link-padding: 0.5rem;
  --usk-nav-link-radius: calc(var(--usk-nav-popup-radius) - 2px);
  --usk-nav-link-gap: 0.625rem;
  --usk-nav-desc-color: var(--muted-foreground, #64748b);

  --usk-nav-icon-color: var(--muted-foreground, #64748b);
  --usk-nav-icon-hover-color: var(--usk-nav-icon-color);
  --usk-nav-icon-bg: transparent;
  --usk-nav-icon-size: 1rem;
  --usk-nav-icon-box: auto;
  --usk-nav-icon-radius: calc(var(--usk-nav-popup-radius) - 2px);

  --usk-nav-badge-bg: var(--accent, #fff7ed);
  --usk-nav-badge-color: var(--accent-foreground, #ff5e11);

  /* ----------------------------------------------------------- Featured */
  --usk-nav-feature-width: 15rem;
  --usk-nav-feature-ratio: 16 / 9;
  --usk-nav-feature-bg: var(--muted, #f8fafc);
  --usk-nav-feature-color: var(--popover-foreground, #0f172a);
  --usk-nav-feature-radius: calc(var(--usk-nav-popup-radius) - 2px);

  /* -------------------------------------------------------------- Arrow */
  --usk-nav-arrow-size: 8px;

  /* ------------------------------------------------------------- Mobile */
  --usk-nav-burger-color: var(--foreground, #0f172a);
  --usk-nav-burger-size: 24px;
  --usk-nav-drawer-bg: var(--background, #ffffff);
  --usk-nav-drawer-color: var(--foreground, #0f172a);
  --usk-nav-drawer-overlay: rgb(15 23 42 / 45%);
  --usk-nav-drawer-width: 20rem;

  --usk-nav-cta-gap: 0.5rem;
  --usk-nav-cta-padding: 0.75rem 1rem;
  --usk-nav-cta-radius: var(--radius, 0.5rem);
  --usk-nav-cta-bg: var(--primary, #ff5e11);
  --usk-nav-cta-color: var(--primary-foreground, #ffffff);
  --usk-nav-cta-hover-bg: color-mix(in oklab, var(--usk-nav-cta-bg) 88%, #000);
  --usk-nav-cta-outline-color: var(--foreground, #0f172a);
  --usk-nav-cta-outline-border: var(--border, #e2e8f0);
  --usk-nav-cta-ghost-color: var(--foreground, #0f172a);
  --usk-nav-cta-soft-hover-bg: var(--muted, #f8fafc);

  /* `currentColor` as the default makes the icon follow the button color in each
     variant (white on filled, dark on outlined) without needing
     three tokens. Anyone who wants to highlight the icon overrides it and the inheritance goes away. */
  --usk-nav-cta-icon-gap: 0.5rem;
  --usk-nav-cta-icon-color: currentColor;
  --usk-nav-cta-icon-hover-color: var(--usk-nav-cta-icon-color);
  --usk-nav-cta-icon-bg: transparent;
  --usk-nav-cta-icon-size: 1.125rem;
  --usk-nav-cta-icon-box: auto;
  --usk-nav-cta-icon-radius: calc(var(--usk-nav-cta-radius) - 2px);

  --usk-nav-ring: var(--ring, #ff5e11);

  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
}

.usk-nav *,
.usk-nav *::before,
.usk-nav *::after {
  box-sizing: border-box;
}

.usk-nav__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.usk-nav__list {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: var(--usk-nav-list-justify);
  gap: var(--usk-nav-list-gap);
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.usk-nav__item {
  position: relative;
  list-style: none;
  margin: 0;
}

/* -------------------------------------------------------------- Trigger */

.usk-nav__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--usk-nav-trigger-gap);
  width: max-content;
  padding: var(--usk-nav-trigger-padding);
  margin: 0;
  border: 0;
  border-radius: var(--usk-nav-trigger-radius);
  background-color: var(--usk-nav-trigger-bg);
  color: var(--usk-nav-row-color, var(--usk-nav-trigger-color));
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  cursor: pointer;
  outline: 0;
  user-select: none;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

/* The order from here down IS the cascade: base -> active -> hover -> open.
   Every state falls back to --usk-nav-row-hover-color -> --usk-nav-row-color -> token:
   without the middle step, whoever sets only "Color (this row only)" sees the item revert
   to the token on hover, which is indistinguishable from the control not working.
   Each state must check --usk-nav-row-color / --usk-nav-row-hover-color
   before the global token, otherwise the per-item repeater color is ignored. And the
   [data-active] pair must appear BEFORE :hover, otherwise an item marked as the
   current page never shows the hover (same specificity, the last one wins). */

.usk-nav__trigger[data-active] {
  background-color: var(--usk-nav-trigger-active-bg);
  color: var(--usk-nav-row-color, var(--usk-nav-trigger-active-color));
}

@media (hover: hover) {
  .usk-nav__trigger:hover,
  .usk-nav__trigger[data-active]:hover {
    background-color: var(--usk-nav-trigger-hover-bg);
    color: var(--usk-nav-row-hover-color, var(--usk-nav-row-color, var(--usk-nav-trigger-hover-color)));
  }
}

.usk-nav__trigger[data-pressed],
.usk-nav__trigger[data-active][data-pressed] {
  background-color: var(--usk-nav-trigger-open-bg);
}

.usk-nav__trigger[data-popup-open],
.usk-nav__trigger[data-active][data-popup-open] {
  background-color: var(--usk-nav-trigger-open-bg);
  color: var(--usk-nav-row-hover-color, var(--usk-nav-row-color, var(--usk-nav-trigger-open-color)));
}

.usk-nav__trigger:focus-visible {
  outline: 2px solid var(--usk-nav-ring);
  outline-offset: 1px;
}

.usk-nav__trigger-icon,
.usk-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.usk-nav__trigger-icon svg,
.usk-nav__trigger-icon i {
  width: 1em;
  height: 1em;
  font-size: inherit;
}

/* Chevron rotation — Base UI: transition transform .2s ease */
.usk-nav__icon {
  transition: transform 200ms ease;
}

.usk-nav__icon svg {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
}

.usk-nav__trigger[data-popup-open] .usk-nav__icon,
.usk-nav__drawer-trigger[aria-expanded='true'] .usk-nav__icon {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------- Positioner */

.usk-nav__positioner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: var(--positioner-width, auto);
  height: var(--positioner-height, auto);
  max-width: var(--available-width, none);
  transition:
    top var(--usk-nav-duration) var(--usk-nav-easing),
    left var(--usk-nav-duration) var(--usk-nav-easing);
}

.usk-nav__positioner[hidden] {
  display: none;
}

.usk-nav__positioner[data-instant] {
  transition: none;
}

/* Safe area: the invisible strip that keeps the menu from closing when the cursor
   crosses the gap between the trigger and the panel. Taken from the Base UI demo. */
.usk-nav__positioner::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
}

.usk-nav[data-side='bottom'] .usk-nav__positioner::before {
  top: calc(var(--usk-nav-gap, 10px) * -1);
  height: var(--usk-nav-gap, 10px);
}

.usk-nav[data-side='top'] .usk-nav__positioner::before {
  bottom: calc(var(--usk-nav-gap, 10px) * -1);
  height: var(--usk-nav-gap, 10px);
}

/* --------------------------------------------------------------- Popup */

.usk-nav__popup {
  position: relative;
  width: var(--popup-width, auto);
  height: var(--popup-height, auto);
  border: var(--usk-nav-popup-border-width) solid var(--usk-nav-popup-border-color);
  border-radius: var(--usk-nav-popup-radius);
  background-color: var(--usk-nav-popup-bg);
  color: var(--usk-nav-popup-fg);
  box-shadow: var(--usk-nav-popup-shadow);
  outline: 0;
  transform-origin: var(--transform-origin, center top);
  transition:
    opacity var(--usk-nav-duration) var(--usk-nav-easing),
    transform var(--usk-nav-duration) var(--usk-nav-easing),
    width var(--usk-nav-duration) var(--usk-nav-easing),
    height var(--usk-nav-duration) var(--usk-nav-easing);
}

.usk-nav__popup[data-starting-style],
.usk-nav__popup[data-ending-style] {
  opacity: 0;
  transform: scale(0.9);
}

/* The exit is shorter than the enter, as in shadcn base. */
.usk-nav__popup[data-ending-style] {
  transition-duration: var(--usk-nav-exit-duration);
  transition-timing-function: ease;
}

.usk-nav__popup[data-instant] {
  transition: none;
}

/* ------------------------------------------------------------ Viewport */

.usk-nav__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

/* ------------------------------------------------------------- Content */

.usk-nav__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: var(--usk-nav-content-padding);
  transition:
    opacity calc(var(--usk-nav-duration) * 0.5) ease,
    transform var(--usk-nav-duration) var(--usk-nav-easing);
}

.usk-nav__content[hidden] {
  display: none;
}

.usk-nav__content[data-starting-style],
.usk-nav__content[data-ending-style] {
  opacity: 0;
}

.usk-nav__content[data-starting-style][data-activation-direction='left'] {
  transform: translateX(-50%);
}

.usk-nav__content[data-starting-style][data-activation-direction='right'] {
  transform: translateX(50%);
}

.usk-nav__content[data-ending-style][data-activation-direction='left'] {
  transform: translateX(50%);
}

.usk-nav__content[data-ending-style][data-activation-direction='right'] {
  transform: translateX(-50%);
}

/* The panel that is leaving must no longer receive clicks. */
.usk-nav__content[data-ending-style] {
  pointer-events: none;
}

/* Ephemeral measurement state: the JS takes the panel out of the flow to read its natural
   width and height before writing --popup-width / --popup-height. */
.usk-nav__content[data-usk-measuring] {
  position: absolute !important;
  inset: auto !important;
  width: max-content !important;
  height: auto !important;
  max-width: var(--usk-nav-content-max-width) !important;
  visibility: hidden !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------------- Arrow */

.usk-nav__arrow {
  position: absolute;
  z-index: 1;
  width: calc(var(--usk-nav-arrow-size) * 2);
  height: var(--usk-nav-arrow-size);
  left: var(--arrow-left, 50%);
  overflow: clip;
  transform: translateX(-50%);
  transition: left var(--usk-nav-duration) var(--usk-nav-easing);
}

.usk-nav[data-side='bottom'] .usk-nav__arrow {
  top: calc(var(--usk-nav-arrow-size) * -1);
}

.usk-nav[data-side='top'] .usk-nav__arrow {
  bottom: calc(var(--usk-nav-arrow-size) * -1);
  rotate: 180deg;
}

.usk-nav__arrow::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--usk-nav-arrow-size) * 1.4142);
  height: calc(var(--usk-nav-arrow-size) * 1.4142);
  border: var(--usk-nav-popup-border-width) solid var(--usk-nav-popup-border-color);
  background-color: var(--usk-nav-popup-bg);
  transform: translate(-50%, 50%) rotate(45deg);
}

/* ----------------------------------------------------- Submenu lists */

.usk-nav__links {
  display: grid;
  /* Without this a short list stretches its rows to the bottom of the panel. */
  align-content: start;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--usk-nav-content-max-width);
}

.usk-nav__links--list {
  grid-template-columns: 1fr;
}

.usk-nav__links--grid {
  grid-template-columns: repeat(var(--usk-nav-grid-cols, 2), minmax(0, 1fr));
}

.usk-nav__link-item {
  list-style: none;
  margin: 0;
  min-width: 0;
}

.usk-nav__link {
  display: flex;
  align-items: flex-start;
  gap: var(--usk-nav-link-gap);
  width: 100%;
  height: 100%;
  padding: var(--usk-nav-link-padding);
  border-radius: var(--usk-nav-link-radius);
  color: var(--usk-nav-row-color, var(--usk-nav-link-color));
  text-align: left;
  text-decoration: none;
  outline: 0;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.usk-nav__link[data-active] {
  background-color: var(--usk-nav-link-hover-bg);
  color: var(--usk-nav-row-color, var(--usk-nav-trigger-active-color));
}

@media (hover: hover) {
  .usk-nav__link:hover,
  .usk-nav__link[data-active]:hover {
    background-color: var(--usk-nav-link-hover-bg);
    color: var(--usk-nav-row-hover-color, var(--usk-nav-row-color, var(--usk-nav-link-hover-color)));
  }

  .usk-nav__link:hover .usk-nav__link-icon {
    color: var(--usk-nav-icon-hover-color);
  }
}

.usk-nav__link:focus-visible {
  outline: 2px solid var(--usk-nav-ring);
  outline-offset: -2px;
}

.usk-nav__link-icon,
.usk-nav__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--usk-nav-icon-box);
  height: var(--usk-nav-icon-box);
  border-radius: var(--usk-nav-icon-radius);
  background-color: var(--usk-nav-icon-bg);
  color: var(--usk-nav-icon-color);
  font-size: var(--usk-nav-icon-size);
  line-height: 1;
  transition: color 150ms ease;
}

.usk-nav__link-icon svg,
.usk-nav__feature-icon svg {
  display: block;
  width: var(--usk-nav-icon-size);
  height: var(--usk-nav-icon-size);
}

.usk-nav__link-icon i,
.usk-nav__feature-icon i {
  font-size: var(--usk-nav-icon-size);
}

.usk-nav__link-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.usk-nav__link-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.usk-nav__link-desc {
  color: var(--usk-nav-desc-color);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25rem;
}

.usk-nav__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background-color: var(--usk-nav-badge-bg);
  color: var(--usk-nav-badge-color);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.125rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ------------------------------------------------------- Featured card */

.usk-nav__featured {
  display: flex;
  gap: 0.25rem;
  /* The card gets its own width instead of competing for the list's budget:
     otherwise a 2-column grid next to it gets squeezed. */
  max-width: calc(var(--usk-nav-content-max-width) + var(--usk-nav-feature-width));
}

.usk-nav__featured .usk-nav__links {
  flex: 1;
  min-width: 0;
  max-width: none;
}

.usk-nav__feature {
  display: flex;
  flex-direction: column;
  flex: none;
  width: var(--usk-nav-feature-width);
  padding: var(--usk-nav-link-padding);
  border-radius: var(--usk-nav-feature-radius);
  background-color: var(--usk-nav-feature-bg);
  color: var(--usk-nav-feature-color);
  text-decoration: none;
  outline: 0;
  transition: filter 150ms ease;
}

@media (hover: hover) {
  a.usk-nav__feature:hover {
    filter: brightness(0.97);
  }
}

.usk-nav__feature:focus-visible {
  outline: 2px solid var(--usk-nav-ring);
  outline-offset: -2px;
}

.usk-nav__feature-media {
  display: block;
  margin-bottom: 0.625rem;
  border-radius: calc(var(--usk-nav-feature-radius) - 2px);
  overflow: hidden;
}

.usk-nav__feature-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--usk-nav-feature-ratio);
  object-fit: cover;
}

.usk-nav__feature-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: auto;
}

.usk-nav__feature-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.375rem;
}

.usk-nav__feature-desc {
  color: var(--usk-nav-desc-color);
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

/* ------------------------------------------------------------ Template */

.usk-nav__template {
  max-width: var(--usk-nav-content-max-width);
}

/* ================================================================ Mobile */

.usk-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: 0;
  border-radius: var(--usk-nav-trigger-radius);
  background: transparent;
  color: var(--usk-nav-burger-color);
  cursor: pointer;
  outline: 0;
}

.usk-nav__burger:focus-visible {
  outline: 2px solid var(--usk-nav-ring);
  outline-offset: 1px;
}

.usk-nav__burger-icon {
  display: flex;
}

.usk-nav__burger-icon svg {
  display: block;
  width: var(--usk-nav-burger-size);
  height: var(--usk-nav-burger-size);
}

.usk-nav__burger [data-usk-burger-close],
.usk-nav__burger[aria-expanded='true'] [data-usk-burger-open] {
  display: none;
}

.usk-nav__burger[aria-expanded='true'] [data-usk-burger-close] {
  display: flex;
}

.usk-nav__drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.usk-nav__drawer[hidden] {
  display: none;
}

.usk-nav__drawer-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--usk-nav-drawer-overlay);
  opacity: 0;
  transition: opacity var(--usk-nav-duration) var(--usk-nav-easing);
}

.usk-nav__drawer[data-open] .usk-nav__drawer-overlay {
  opacity: 1;
}

.usk-nav__drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: var(--usk-nav-drawer-width);
  max-width: 100vw;
  padding: 1.25rem 1rem;
  overflow: hidden;
  background-color: var(--usk-nav-drawer-bg);
  color: var(--usk-nav-drawer-color);
  transition: transform var(--usk-nav-duration) var(--usk-nav-easing);
}

/* Only the list scrolls; the footer with the CTAs stays fixed. */
.usk-nav__drawer-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.usk-nav[data-drawer='right'] .usk-nav__drawer-panel {
  right: 0;
  transform: translateX(100%);
}

.usk-nav[data-drawer='left'] .usk-nav__drawer-panel {
  left: 0;
  transform: translateX(-100%);
}

.usk-nav[data-drawer='full'] .usk-nav__drawer-panel {
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-2%);
  opacity: 0;
  transition:
    transform var(--usk-nav-duration) var(--usk-nav-easing),
    opacity var(--usk-nav-duration) var(--usk-nav-easing);
}

.usk-nav__drawer[data-open] .usk-nav__drawer-panel {
  transform: none;
  opacity: 1;
}

.usk-nav__drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.5rem auto;
  padding: 0.375rem;
  border: 0;
  border-radius: var(--usk-nav-trigger-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  outline: 0;
}

.usk-nav__drawer-close:focus-visible {
  outline: 2px solid var(--usk-nav-ring);
  outline-offset: 1px;
}

.usk-nav__drawer-close svg {
  display: block;
  width: var(--usk-nav-burger-size);
  height: var(--usk-nav-burger-size);
}

.usk-nav__drawer-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.usk-nav__drawer-item {
  list-style: none;
  margin: 0;
  border-bottom: 1px solid var(--usk-nav-popup-border-color);
}

.usk-nav__drawer-trigger {
  display: flex;
  align-items: center;
  gap: var(--usk-nav-trigger-gap);
  width: 100%;
  padding: 0.875rem 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: 0;
}

.usk-nav__drawer-trigger:focus-visible {
  outline: 2px solid var(--usk-nav-ring);
  outline-offset: -2px;
}

.usk-nav__drawer-trigger .usk-nav__icon {
  margin-left: auto;
}

/* Accordion without measuring height in JS. */
.usk-nav__drawer-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--usk-nav-duration) var(--usk-nav-easing);
}

.usk-nav__drawer-collapse[data-open] {
  grid-template-rows: 1fr;
}

.usk-nav__drawer-collapse-inner {
  overflow: hidden;
  min-height: 0;
  /* Without this the links of a closed accordion stay in the tab order. */
  visibility: hidden;
}

.usk-nav__drawer-collapse[data-open] .usk-nav__drawer-collapse-inner {
  visibility: visible;
}

/* Inside the drawer the panel goes back to normal flow: no absolute
   positioning, no transform, no clipping. */
.usk-nav__drawer .usk-nav__content {
  position: static;
  width: auto;
  height: auto;
  padding: 0 0 0.75rem;
  transform: none;
  transition: none;
  opacity: 1;
}

.usk-nav__drawer .usk-nav__links--grid {
  grid-template-columns: 1fr;
}

.usk-nav__drawer .usk-nav__featured {
  flex-direction: column;
}

.usk-nav__drawer .usk-nav__feature {
  width: 100%;
}

.usk-nav__drawer .usk-nav__links,
.usk-nav__drawer .usk-nav__featured,
.usk-nav__drawer .usk-nav__template {
  max-width: none;
}

/* ---------------------------------------------------------- Mobile CTA */

.usk-nav__drawer-cta {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--usk-nav-cta-gap);
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--usk-nav-popup-border-color);
}

.usk-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--usk-nav-cta-icon-gap);
  width: 100%;
  padding: var(--usk-nav-cta-padding);
  border: 1px solid transparent;
  border-radius: var(--usk-nav-cta-radius);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  outline: 0;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.usk-nav__cta:focus-visible {
  outline: 2px solid var(--usk-nav-ring);
  outline-offset: 2px;
}

.usk-nav__cta--primary {
  background-color: var(--usk-nav-cta-bg);
  color: var(--usk-nav-cta-color);
}

.usk-nav__cta--outline {
  border-color: var(--usk-nav-cta-outline-border);
  color: var(--usk-nav-cta-outline-color);
}

.usk-nav__cta--ghost {
  color: var(--usk-nav-cta-ghost-color);
}

@media (hover: hover) {
  .usk-nav__cta--primary:hover {
    background-color: var(--usk-nav-cta-hover-bg);
  }

  .usk-nav__cta--outline:hover,
  .usk-nav__cta--ghost:hover {
    background-color: var(--usk-nav-cta-soft-hover-bg);
  }

  .usk-nav__cta:hover .usk-nav__cta-icon {
    color: var(--usk-nav-cta-icon-hover-color);
  }
}

.usk-nav__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--usk-nav-cta-icon-box);
  height: var(--usk-nav-cta-icon-box);
  border-radius: var(--usk-nav-cta-icon-radius);
  background-color: var(--usk-nav-cta-icon-bg);
  color: var(--usk-nav-cta-icon-color);
  font-size: var(--usk-nav-cta-icon-size);
  line-height: 1;
  transition: color 150ms ease;
}

.usk-nav__cta-icon svg {
  display: block;
  width: var(--usk-nav-cta-icon-size);
  height: var(--usk-nav-cta-icon-size);
}

.usk-nav__cta-icon i {
  font-size: var(--usk-nav-cta-icon-size);
}

/* ======================================================== Accessibility */

@media (prefers-reduced-motion: reduce) {
  .usk-nav__positioner,
  .usk-nav__popup,
  .usk-nav__content,
  .usk-nav__arrow,
  .usk-nav__icon,
  .usk-nav__drawer-overlay,
  .usk-nav__drawer-panel,
  .usk-nav__drawer-collapse {
    transition-duration: 1ms !important;
  }

  .usk-nav__content[data-starting-style],
  .usk-nav__content[data-ending-style],
  .usk-nav__popup[data-starting-style],
  .usk-nav__popup[data-ending-style] {
    transform: none !important;
  }
}