/* Basic link styling */
.site-nav ul {
  list-style: none;
  margin: 0;
  gap: var(--space-xs);
  line-height: 0.5em;
  padding-block-end: var(--space-s);
}

.site-nav a {
  --text-color: var(--color-text);
  --background-color: var(--color-bg);
  --border-color: var(--color-bg-accent-2);
  background-color: var(--background-color);
  color: var(--text-color);
  padding: var(--space-s);
  text-decoration: none;
  display: block;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

/* Change the border-color on :hover and :focus */
.site-nav a:where(:hover, :focus) {
  --background-color: var(--color-text);
  --text-color: var(--color-bg);
  --border-color: var(--color-bg);
}

/* Change border-color and color for the active page. data-state='active' if a child is active. */
.site-nav [aria-current='page'],
.site-nav [data-state='active'] {
  --background-color: var(--color-text);
  --text-color: var(--color-bg);
  --border-color: var(--color-bg);
}

@media screen(md) {
  /* Basic link styling */
  .site-nav ul {
    padding-block-end: 0;
  }

  .site-nav a {
    --text-color: var(--color-text);
    --background-color: transparent;
    --border-color: transparent;
    --text-decoration: transparent;
    background-color: var(--background-color);
    color: var(--text-color);
    padding: var(--space-xs) 0.2em;
    text-decoration-line: underline;
    text-decoration-color: var(--text-decoration, transparent);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.2em;
  }

  /* Change the border-color on :hover and :focus */
  .site-nav a:where(:hover, :focus) {
    --text-decoration: var(--color-text-accent);
    --text-color: var(--color-text);
    --background-color: transparent;
  }

  /* Change border-color and color for the active page */
  .site-nav [aria-current='page'],
  .site-nav [data-state='active'] {
    --text-decoration: var(--color-primary);
    --text-color: var(--color-primary);
    --background-color: transparent;
  }
}