#nav {
  align-items: center;
  column-gap: var(--inline-space-half);
  display: flex;
  inset: 0 0 auto 0;
  inset-inline-end: var(--sidebar-width);
  padding-block: var(--block-space);
  padding-inline: calc(var(--inline-space) * 1.5) var(--inline-space-double);
  position: fixed;
  row-gap: var(--block-space);
  z-index: 2;

  &:has(.btn--faux) {
    padding-inline: var(--inline-space);

    @media (min-width: 120ch) {
      margin-inline-start: 5vw;

      .btn--faux {
        margin-inline-start: -3vw;

        .account-logo + & {
          margin-inline-start: 0;
        }
      }

      .account-logo {
        margin-inline-start: calc(
          (var(--btn-size) / 2 + var(--inline-space)) * -1
        );
      }
    }
  }

  .sidebar & {
    @media (max-width: 120ch) {
      padding-block: var(--block-space-half);

      &::before {
        background: linear-gradient(
          180deg,
          oklch(var(--lch-white)) 20%,
          oklch(var(--lch-white) / 0) 100%
        );
        content: "";
        inset: 0;
        position: absolute;
        z-index: -1;
      }
    }
  }
}

/* Styles for the countdown banner */
#special-event-banner {
  color: #cc0000;
  background-color: white;
  border-bottom: 1px solid var(--color-border-darker);
  border-right: 1px solid var(--color-border-darker);
  font-size: 90%;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

/* Explicitly define hover state to prevent inherited effects */
/* Increase specificity by adding tag name 'a' */
a#special-event-banner:hover {
  background-color: white !important; /* Force override */
  color: #cc0000 !important; /* Force override */
  opacity: 1 !important; /* Force override */
  filter: none !important; /* Force override */
}

a#special-event-banner:hover span {
  /* Ensure span keeps color too */
  color: #cc0000 !important; /* Force override */
}

#special-event-banner.banner-urgent {
  background-color: #cc0000;
  color: white;
  border-color: #cc0000; /* Match border to background */
}

/* Ensure text inside also changes color */
#special-event-banner.banner-urgent,
#special-event-banner.banner-urgent span {
  color: white;
}

/* Explicitly define hover state for urgent banner */
/* Increase specificity by adding tag name 'a' */
a#special-event-banner.banner-urgent:hover {
  background-color: #cc0000 !important; /* Match urgent background */
  color: white !important; /* Match urgent text color */
  opacity: 1 !important; /* Force override */
  filter: none !important; /* Force override */
}

/* Also ensure the span inside keeps the correct color on hover */
a#special-event-banner.banner-urgent:hover span {
  color: white !important;
}

/* Adjust font size for smaller screens */
@media (max-width: 120ch) {
  #special-event-banner {
    font-size: 80%;
  }
}

.skip-navigation {
  --left-offset: -999em;

  inset-block-start: 4rem;
  inset-inline-start: var(--left-offset);
  position: absolute;
  white-space: nowrap;
  z-index: 11;

  &:focus {
    --left-offset: var(--inline-space);
  }
}