/* ========== NAVIGATION ========== */
.dictionary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.5rem;
}

.dictionary-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;

  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;

  text-decoration: none;
  color: #1f2937;              /* grå 800 */
  background: #ffffff;
  border: 2px solid #e5e7eb;   /* grå 200 */
  border-radius: 10px;
  padding: 0 0.5rem;

  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.dictionary-nav a:hover {
  background: #111827;         /* grå 900 */
  color: #ffffff;
  border-color: #111827;
}

.dictionary-nav a.is-active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.dictionary-nav a:focus-visible {
  outline: 3px solid #60a5fa;  /* blå fokus */
  outline-offset: 2px;
}

/* ========== SEKTIONER ========== */
.dictionary-section {
  /* plads før/efter + tydelig afgrænsning */
  margin: 0 0 2.25rem;
  padding: 1rem 1rem 1.25rem;
  border: 2px solid #e5e7eb;   /* grå 200 */
  border-radius: 12px;
  background: #fafafa;         /* lys baggrund for kontrast */

  /* gør anker-scroll pæn ift. sticky header/admin bar */
  scroll-margin-top: var(--dictionary-offset, 80px);
}

.dictionary-letter {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;           /* tydeligere overskrift */
  line-height: 1.2;
  font-weight: 800;
  color: #111827;              /* grå 900 */
}

/* ========== LISTE I 3 KOLONNER ========== */
.dictionary-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem 1rem;
}

.dictionary-item {
  break-inside: avoid;
}

.dictionary-item a {
  text-decoration: none;
  color: #1f2937;
  border-bottom: 1px dashed transparent;
  transition: color 0.2s, border-color 0.2s;
}
.dictionary-item a:hover {
  color: #0f172a;              /* mørkere */
  border-color: #cbd5e1;       /* grå 300 */
}

/* Responsiv */
@media (max-width: 1024px) {
  .dictionary-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dictionary-list { grid-template-columns: 1fr; }
}

/* Glidende scroll fallback hvis JS ikke kører */
html { scroll-behavior: smooth; }