/* Shared interaction states for site buttons. */
:root {
  --action-hover-primary: #315e49;
  --action-hover-secondary: #e9efe5;
}

:root[data-theme=dark] {
  --action-hover-primary: #e4f3e7;
  --action-hover-secondary: #293f33;
}

@media (hover: hover) and (forced-colors: none) {
  :is(.btn-primary, .lookup-controls button, header .nav-link.active):hover {
    background-color: var(--action-hover-primary);
    border-color: var(--action-hover-primary);
    filter: none;
  }

  :is(.btn-outline-primary, header .nav-link:not(.active), .site-header .utility-link,
      header .language-picker summary, header .theme-toggle-button):hover {
    background-color: var(--action-hover-secondary);
  }
}

@media (prefers-reduced-motion: no-preference) {
  :where(.btn, header .nav-link, .lookup-controls button, .utility-link,
         header .language-picker summary, header .theme-toggle-button) {
    transition: background-color 150ms ease, border-color 150ms ease;
  }
}

/* Keep the whole footer link visibly interactive. */
:root { --footer-action-edge: #7b907a; }
:root[data-theme=dark] { --footer-action-edge: #88a58d; }

footer a[href] {
  border-radius: .5rem;
  text-decoration: none;
}

@media (forced-colors: none) {
  footer a[href]:focus-visible {
    background-color: var(--action-hover-secondary);
    box-shadow: inset 0 0 0 1px var(--footer-action-edge);
  }
}

@media (hover: hover) and (forced-colors: none) {
  footer a[href]:hover {
    background-color: var(--action-hover-secondary);
    box-shadow: inset 0 0 0 1px var(--footer-action-edge);
  }
}

@media (prefers-reduced-motion: no-preference) {
  footer a[href] {
    transition: background-color 150ms ease, box-shadow 150ms ease;
  }
}

:where(main a[href]:not(.btn)) {
  border-radius: .2rem;
  text-decoration-line: underline;
  text-underline-offset: .18em;
}

@media (forced-colors: none) {
  :is(header .language-options, header .language-list) a[href]:focus-visible {
    background-color: var(--action-hover-secondary);
    outline-offset: -3px;
  }

  main a[href]:not(.btn):is(:focus-visible, :active) {
    background-color: var(--action-hover-secondary);
    text-decoration-thickness: .14em;
  }

  :is(.btn-primary, .lookup-controls button, header .nav-link.active):is(:focus-visible, :active) {
    background-color: var(--action-hover-primary);
    border-color: var(--action-hover-primary);
    filter: none;
  }

  :is(.btn-outline-primary, header .nav-link:not(.active), .site-header .utility-link,
      header .language-picker summary, header .theme-toggle-button):is(:focus-visible, :active) {
    background-color: var(--action-hover-secondary);
  }

  :is(header .language-options, header .language-list) a[href]:active,
  footer a[href]:active {
    background-color: var(--action-hover-secondary);
    box-shadow: inset 0 0 0 1px var(--footer-action-edge);
  }
}

@media (hover: hover) and (forced-colors: none) {
  :is(header .language-options, header .language-list) a[href]:hover {
    background-color: var(--action-hover-secondary);
    box-shadow: inset 0 0 0 1px var(--footer-action-edge);
  }

  main a[href]:not(.btn):hover {
    background-color: var(--action-hover-secondary);
    text-decoration-thickness: .14em;
  }
}

@media (forced-colors: active) {
  :is(header .language-options, header .language-list) a[href]:focus-visible {
    outline-offset: -3px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(header .language-options, header .language-list) a[href] {
    transition: background-color 150ms ease, box-shadow 150ms ease;
  }
}

/* Keep the footer at the viewport bottom when the content is short. */
@media screen {
  body {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100svh;
  }

  body > main,
  body > .shell {
    flex-grow: 1;
  }
}