/* SPDX-License-Identifier: AGPL-3.0-only
 * SPDX-FileCopyrightText: 2021-2026 DALICC - Verein zur Foerderung der Rechtssicherheit in der Datenbewirtschaftung (ZVR 1249185710)
 */
/* ==========================================================================
   docs.css -- the /documentation section only.

   Loaded after site.css and components.css, which already define the colour and
   type tokens, .l-main, .prose, .table-scroll, .btn, .breadcrumb, .arrow-link and
   the dotted rules. This file adds only what the documentation layout needs on top:
   the cards of the landing page, the reading orders of the user guide, the
   two-column reading layout with its table of contents, the search results and the
   heading permalinks.

   The table of contents exists twice in the markup. Above 1024px the sidebar is
   shown and the collapsible copy is hidden; below it, the other way round. Only one
   of the two is ever displayed, so exactly one navigation reaches assistive
   technology.
   ========================================================================== */

/* ------------------------------------------------------- the landing pages */

/* Two pages. /documentation is the landing: the pointer into the guide, the three
 * cards and the search. /documentation/guide is the user guide: quick access to its
 * sections, the search and the reading orders. The search box is the only block both
 * of them carry. */

/* The pointer to the first document of the guide, directly under the page header. */

.docs-start {
  margin: 0 0 24px;
  color: var(--c-ink-soft);
}

.docs-start__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--c-slate);
  margin-right: 8px;
}

/* The three cards: the user guide with its sections listed inside it, the vocabulary,
 * and the developer documentation in the repository. Three columns from 780px up and
 * one below that, so a card never gets narrower than its own heading. The action link
 * is pushed to the foot of the card, so the three of them line up however long the
 * paragraphs above them are. */

.docs-cards {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.docs-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-rule-strong);
}

.docs-card__title {
  font-size: 21px;
  margin: 0 0 10px;
}

.docs-card .rule-dotted {
  margin: 0 0 14px;
}

.docs-card__text {
  margin: 0 0 14px;
  color: var(--c-ink-soft);
  font-size: 16px;
}

.docs-card__links {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 16px;
}

.docs-card__links a {
  color: var(--c-slate-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--c-rule-strong);
}

.docs-card__links a:hover,
.docs-card__links a:focus-visible {
  color: var(--c-red);
  border-bottom-color: currentcolor;
}

.docs-card__more {
  margin: auto 0 0;
}

@media (min-width: 780px) {
  .docs-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Quick access: one card per section of the guide, directly under the page header, so
 * the reading orders are one click away without scrolling past the search. The intro
 * is clamped to two lines here because the card is a signpost; the section block
 * further down carries the sentence in full. */

.docs-quick {
  margin: 0 0 24px;
}

.docs-quick__heading {
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-slate);
  margin: 0 0 10px;
}

.docs-quick__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 8px;
}

.docs-quick__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 12px 14px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-ink);
}

.docs-quick__link:hover {
  background: var(--c-white);
  border-color: var(--c-slate-muted);
  color: var(--c-ink);
}

.docs-quick__link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.docs-quick__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--c-red);
}

.docs-quick__intro {
  font-size: 15px;
  line-height: 1.35;
  color: var(--c-ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.docs-search {
  margin: 0 0 32px;
  padding: 20px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-rule-strong);
}

.docs-search label {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: 10px;
}

.docs-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.docs-search__row input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--c-rule-strong);
  background: var(--c-white);
  color: var(--c-ink);
  border-radius: var(--radius);
}

.docs-search__row input[type="search"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.docs-search__hint {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--c-slate);
}

.docs-note {
  margin: 0 0 40px;
  color: var(--c-ink-soft);
}

.docs-section {
  margin: 0 0 48px;
}

.docs-section__title {
  font-size: 27px;
  margin: 0 0 8px;
  scroll-margin-top: 24px;
}

.docs-section__intro {
  margin: 0 0 20px;
  color: var(--c-ink-soft);
  max-width: 54em;
}

.docs-order {
  list-style: none;
  counter-reset: docs-order;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.docs-order__item {
  counter-increment: docs-order;
  padding: 14px 16px 14px 52px;
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
}

.docs-order__item::before {
  content: counter(docs-order);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--c-white);
  background: var(--c-slate-muted);
  border-radius: 50%;
}

.docs-order__link {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 19px;
  letter-spacing: 0.02em;
}

.docs-order__summary {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--c-ink-soft);
}

/* ------------------------------------------------------------ one document */

.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.doc-body {
  min-width: 0;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 28px;
  font-size: 16px;
  color: var(--c-slate);
}

.doc-prose > :first-child {
  margin-top: 0;
}

/* Long reference tables scroll inside their own box, never the whole page.
 *
 * `width: auto` with `min-width: 100%` is what makes that real: the site's default
 * `table { width: 100% }` would squeeze a five-column reference table into a phone
 * screen and break every cell after six characters. Here the table takes the width
 * its content needs, fills the column when that is narrower, and the wrapper
 * scrolls. */
.doc-prose .table-scroll {
  max-width: 100%;
}

.doc-prose table {
  width: auto;
  min-width: 100%;
}

.doc-prose td,
.doc-prose th {
  min-width: 7em;
}

.doc-prose pre {
  max-width: 100%;
}

.doc-prose code {
  word-break: break-word;
}

.doc-prose pre code {
  word-break: normal;
}

/* Inside a table a code span stays in one piece. Letting it break would shrink the
 * table's minimum width until a reference table fits a phone screen six characters
 * per column; keeping it whole makes the table wider than its wrapper, and the
 * wrapper is the thing that scrolls. */
.doc-prose td code,
.doc-prose th code {
  word-break: normal;
  white-space: nowrap;
}

.doc-prose img {
  height: auto;
}

/* ----------------------------------------------------- heading permalinks */

.doc-heading {
  scroll-margin-top: 24px;
}

.doc-permalink {
  margin-left: 8px;
  color: var(--c-slate-muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.12s ease-in-out;
}

.doc-heading:hover .doc-permalink,
.doc-permalink:focus-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .doc-permalink {
    transition: none;
  }
}

/* --------------------------------------------------- table of contents */

.doc-toc__title {
  background: var(--c-slate-muted);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  margin: 0;
  padding: 9px 14px;
}

.doc-toc__list {
  list-style: none;
  margin: 0;
  padding: 14px;
  font-size: 15px;
  line-height: 1.35;
  border: 1px solid var(--c-rule-strong);
  border-top: 0;
}

.doc-toc__item {
  margin-bottom: 8px;
}

.doc-toc__item:last-child {
  margin-bottom: 0;
}

.doc-toc__item--l3 {
  padding-left: 14px;
  font-size: 14px;
}

.doc-toc__item a {
  color: var(--c-slate-dark);
  text-decoration: none;
}

.doc-toc__item a:hover,
.doc-toc__item a:focus-visible {
  color: var(--c-red);
  text-decoration: underline;
}

/* The collapsible copy, used below 1024px. */
.doc-toc--inline {
  margin: 0 0 28px;
  border: 1px solid var(--c-rule-strong);
}

.doc-toc--inline > summary {
  padding: 9px 14px;
  background: var(--c-slate-muted);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  cursor: pointer;
}

.doc-toc--inline > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -3px;
}

.doc-toc--inline .doc-toc__list {
  border: 0;
  max-height: 55vh;
  overflow-y: auto;
}

/* The sidebar copy, used from 1024px up. */
.doc-toc--side {
  display: none;
}

@media (min-width: 1024px) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr) 264px;
  }

  .doc-toc--inline {
    display: none;
  }

  .doc-toc--side {
    display: block;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

/* ------------------------------------------------------ previous and next */

.doc-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin: 48px 0 0;
}

.doc-pager__link {
  flex: 1 1 240px;
  padding: 14px 16px;
  border: 1px solid var(--c-rule-strong);
  background: var(--c-surface-alt);
  text-decoration: none;
  color: var(--c-ink);
}

.doc-pager__link:hover {
  border-color: var(--c-slate-muted);
  color: var(--c-ink);
}

.doc-pager__link--next {
  text-align: right;
}

.doc-pager__label {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  color: var(--c-slate-muted);
  letter-spacing: 0.04em;
}

.doc-pager__title {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 18px;
  color: var(--c-red);
}

/* ------------------------------------------------------------- search */

.docs-results__count {
  margin: 0 0 24px;
  color: var(--c-ink-soft);
}

.docs-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-results__item {
  margin: 0 0 28px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--c-rule);
}

.docs-results__item:last-child {
  border-bottom: 0;
}

.docs-results__link {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 21px;
}

/* Where a hit is published: the guide it belongs to and the section inside it, so a
 * result can be placed without opening it. */

.docs-results__where {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 6px 0 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--c-slate);
}

.docs-results__area {
  color: var(--c-slate-dark);
}

.docs-results__section::before {
  content: "/";
  margin-right: 8px;
  color: var(--c-slate-muted);
}

.docs-results__summary {
  margin: 6px 0 10px;
  color: var(--c-ink-soft);
  font-size: 16px;
}

.docs-results__headings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 15px;
}

.docs-results__headings li a {
  display: inline-block;
  padding: 3px 10px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-rule);
  color: var(--c-slate-dark);
  text-decoration: none;
}

.docs-results__headings li a:hover,
.docs-results__headings li a:focus-visible {
  border-color: var(--c-slate-muted);
  color: var(--c-red);
}

/* --------------------------------------------------------- narrow screens */

@media (max-width: 604px) {
  .docs-quick__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-quick__intro {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .docs-order__item {
    padding: 12px 14px 12px 46px;
  }

  .docs-order__item::before {
    left: 12px;
    top: 12px;
  }

  .doc-pager__link--next {
    text-align: left;
  }

  .doc-prose td,
  .doc-prose th {
    min-width: 6em;
  }
}