/* ---------------------------------------------------------------------------
   Kasus (case) badges — Nominativ/Akkusativ/Dativ

   Deliberately a different palette from the der/die/das gender colours
   below (blue/red/green), since both systems appear in the same tables
   (e.g. a Dativ table still has Maskulin/Feminin/Neutrum columns) — reusing
   those three colours for case too would make the two systems
   indistinguishable at a glance.
   --------------------------------------------------------------------------- */

.kasus {
  display: inline-block;
  padding: 0.1em 0.7em;
  border-radius: 1em;
  font-weight: 700;
  font-size: 0.78em;
  color: #fff;
  letter-spacing: 0.01em;
}

.kasus-nom { background-color: #546e7a; }
.kasus-akk { background-color: #ef6c00; }
.kasus-dat { background-color: #8e24aa; }

[data-md-color-scheme="slate"] .kasus-nom { background-color: #78909c; }
[data-md-color-scheme="slate"] .kasus-akk { background-color: #ffa726; color: #1a1a1a; }
[data-md-color-scheme="slate"] .kasus-dat { background-color: #ba68c8; color: #1a1a1a; }

/* ---------------------------------------------------------------------------
   Highlighted terms — ==text== (pymdownx.mark)

   Material's default mark colour already tracks the theme automatically;
   this just softens the box slightly (rounded, padded) so it reads as a
   highlighter stroke rather than a flat colour swap.
   --------------------------------------------------------------------------- */

.md-typeset mark {
  border-radius: 0.2em;
  padding: 0.05em 0.3em;
}

/* ---------------------------------------------------------------------------
   Home-page cards — a little visual life on hover, still cheap to render
   and harmless for anyone with reduced-motion set (see that block below).
   --------------------------------------------------------------------------- */

.md-typeset .grid.cards > ul > li {
  border-radius: 0.6rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------------
   Article colour-coding
   der = blue, die = red, das = green — the usual convention in German classes.
   --------------------------------------------------------------------------- */

.art {
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.02em;
}

.art-der { color: #1e6fd9; }
.art-die { color: #d81b60; }
.art-das { color: #2e7d32; }

[data-md-color-scheme="slate"] .art-der { color: #6bb0ff; }
[data-md-color-scheme="slate"] .art-die { color: #ff8ab4; }
[data-md-color-scheme="slate"] .art-das { color: #7bd67f; }

/* ---------------------------------------------------------------------------
   Vocabulary tables

   Material already makes tables scroll sideways rather than blow out the page,
   so the job here is to keep them narrow enough that scrolling is rarely
   needed. Mobile keeps Material's compact defaults; the roomier spacing is
   applied only once there is width to spend.
   --------------------------------------------------------------------------- */

/* Long German compounds must be allowed to break, or a single word can force
   the whole table wider than the screen. */
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  overflow-wrap: anywhere;
  vertical-align: top;
}

/* The German word is the thing being learned — keep it prominent even at the
   smallest size, and stop it wrapping between article and noun. */
.md-typeset table:not([class]) td:first-child {
  min-width: 6.5em;
}

.md-typeset table:not([class]) td:first-child .art {
  white-space: nowrap;
}

/* Example sentences ride along underneath; they should never dominate. */
.md-typeset table em {
  color: var(--md-default-fg-color--light);
  font-size: 0.92em;
  line-height: 1.35;
}

/* Roomier rows only where there is room — tablet and up. */
@media screen and (min-width: 60em) {
  .md-typeset table:not([class]) {
    font-size: 0.7rem;
  }

  .md-typeset table:not([class]) td,
  .md-typeset table:not([class]) th {
    padding: 0.5em 0.8em;
  }

  .md-typeset table:not([class]) tr:hover {
    background-color: var(--md-default-fg-color--lightest);
  }
}

/* Phones: tighten padding so more columns fit before scrolling kicks in. */
@media screen and (max-width: 59.9375em) {
  .md-typeset table:not([class]) td,
  .md-typeset table:not([class]) th {
    padding: 0.4em 0.5em;
  }

  /* Section headings inside long word lists — keep them from eating the screen. */
  .md-typeset h2 {
    font-size: 1.25rem;
  }
}

/* ---------------------------------------------------------------------------
   Readability on small screens
   --------------------------------------------------------------------------- */

@media screen and (max-width: 44.9375em) {
  /* Material's default body size is comfortable, but grammar tables and the
     home-page cards benefit from edge-to-edge space on a narrow phone. */
  .md-typeset .grid.cards > ul > li {
    padding: 0.8rem;
  }
}

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Vocabulary tables: a table on wide screens, stacked cards on a phone.

   Generated by scripts/gen_vocab.py with a data-label on every cell, so the
   header row can be dropped on narrow screens and each label reattached to
   its own value. Avoids the sideways scroll that hides the example sentence.
   --------------------------------------------------------------------------- */

.md-typeset table.vocab {
  border: 0.05rem solid var(--md-typeset-table-color);
  border-radius: 0.1rem;
  display: table;
  font-size: 0.64rem;
  width: 100%;
}

.md-typeset table.vocab th {
  background-color: var(--md-default-fg-color--lightest);
  font-weight: 700;
  min-width: 0;
  text-align: left;
}

.md-typeset table.vocab th,
.md-typeset table.vocab td {
  border-top: 0.05rem solid var(--md-typeset-table-color);
  overflow-wrap: anywhere;
  padding: 0.5em 0.8em;
  vertical-align: top;
}

.md-typeset table.vocab td:first-child .art {
  white-space: nowrap;
}

@media screen and (min-width: 60em) {
  .md-typeset table.vocab {
    font-size: 0.7rem;
  }

  .md-typeset table.vocab tbody tr:hover {
    background-color: var(--md-default-fg-color--lightest);
  }
}

/* Phones and small tablets: one card per word. */
@media screen and (max-width: 59.9375em) {
  .md-typeset table.vocab,
  .md-typeset table.vocab tbody,
  .md-typeset table.vocab tr,
  .md-typeset table.vocab td {
    display: block;
    width: 100%;
  }

  .md-typeset table.vocab {
    border: 0;
  }

  .md-typeset table.vocab thead {
    display: none;
  }

  .md-typeset table.vocab tr {
    border: 0.05rem solid var(--md-typeset-table-color);
    border-radius: 0.2rem;
    margin-bottom: 0.6rem;
    padding: 0.2rem 0;
  }

  .md-typeset table.vocab td {
    border: 0;
    display: grid;
    gap: 0.15rem 0.6rem;
    grid-template-columns: 4.6rem 1fr;
    padding: 0.25em 0.7em;
  }

  /* The label that replaces the missing header row. */
  .md-typeset table.vocab td::before {
    color: var(--md-default-fg-color--light);
    content: attr(data-label);
    font-size: 0.85em;
    text-transform: lowercase;
  }

  /* The German word leads the card, at full size and without a label. */
  .md-typeset table.vocab td:first-child {
    border-bottom: 0.05rem solid var(--md-typeset-table-color);
    display: block;
    font-size: 1.15em;
    margin-bottom: 0.2rem;
    padding-bottom: 0.35em;
  }

  .md-typeset table.vocab td:first-child::before {
    content: none;
  }

  /* A dash carries no information on a card — drop the line entirely. */
  .md-typeset table.vocab td.is-empty {
    display: none;
  }

  /* Keep the example and its translation together in the value column. */
  .md-typeset table.vocab td > span {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------
   Plain content tables with 4+ columns — stacked as cards on phones.

   javascripts/tables.js adds data-label to every <td> (mirroring its
   column's <th>) and a .stacked class to any table wide enough that
   horizontal scrolling would hide a column — the same problem the
   vocabulary tables had, now fixed the same way for grammar-page tables
   like the Nominativ/Akkusativ/Dativ case comparison, without having to
   hand-write HTML in every content file.
   --------------------------------------------------------------------------- */

@media screen and (max-width: 59.9375em) {
  .md-typeset table.stacked,
  .md-typeset table.stacked tbody,
  .md-typeset table.stacked tr,
  .md-typeset table.stacked td {
    display: block;
    width: 100%;
  }

  .md-typeset table.stacked {
    border: 0;
  }

  .md-typeset table.stacked thead {
    display: none;
  }

  .md-typeset table.stacked tbody tr {
    border: 0.05rem solid var(--md-typeset-table-color);
    border-radius: 0.2rem;
    margin-bottom: 0.6rem;
    padding: 0.2rem 0;
  }

  .md-typeset table.stacked td {
    border: 0;
    display: grid;
    gap: 0.15rem 0.6rem;
    grid-template-columns: 6rem 1fr;
    padding: 0.25em 0.7em;
  }

  .md-typeset table.stacked td::before {
    color: var(--md-default-fg-color--light);
    content: attr(data-label);
    font-size: 0.85em;
    text-transform: lowercase;
  }

  /* First column leads each card, full width, no label — same pattern as
     the vocabulary tables' German-word column. */
  .md-typeset table.stacked td:first-child {
    border-bottom: 0.05rem solid var(--md-typeset-table-color);
    display: block;
    font-size: 1.05em;
    margin-bottom: 0.2rem;
    padding-bottom: 0.35em;
  }

  .md-typeset table.stacked td:first-child::before {
    content: none;
  }
}