/*
 * The header and footer every page on nolabel.no shares, and the docs page's
 * tables and contents. Scoped to .nl-public, like landing.css.
 */
.nl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}

.nl-header-wordmark { font-family: var(--font-heading); font-size: 22px; }

.nl-public .nl-header-home { font-size: 13px; color: var(--color-text); text-decoration: none; }
.nl-public .nl-header-home:hover { color: var(--color-accent-700); }

/* The contents are the section names themselves, read as words, so they take
   the header link's size rather than the kicker's uppercase. */
.nl-public .nl-docs-toc a {
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
}

.nl-public .nl-docs-toc a:hover { color: var(--color-accent-700); }

.nl-docs-label { display: none; }

.support-public .support-note:has(+ .btn) { margin-bottom: var(--space-3); }

@media (max-width: 760px) {
  .nl-footer { flex-direction: column; align-items: flex-start; }
  .nl-footer-links { flex-direction: column; gap: var(--space-2); }

  /* .nl-table--stack turns each row into a block; a docs row keeps its key on
     top, and a row that is all headings has nothing left to say. */
  .nl-docs tr:has(> th + th) { display: none; }

  .nl-docs th:first-child,
  .nl-docs td:first-child { font-weight: 600; color: var(--color-text); }

  .nl-docs-label {
    display: block;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-700);
  }
}