/* ==========================================================================
   KF Elements — Glossary
   --------------------------------------------------------------------------
   NEW at 0.15.0 (kf-elements #130). Nothing here restates a released rule, so
   there is no token-fallback archaeology to do: every value below is this
   widget's own, and every one that the pack already has a token for READS that
   token so a fresh install looks like the site it landed on (design principle
   4). The widget-specific ones — `--kfe-glossary-cols`, `--kfe-glossary-icon-bg`
   and `--kfe-glossary-icon-ink` — carry a pack value as their fallback and are
   there for a consumer's token map, not for a colour literal in this file.

   THE COLUMN COUNT IS A TOKEN, WRITTEN BY THE CONTROL, AND THE MEDIA QUERIES
   OVERRIDE THE PROPERTY RATHER THAN THE TOKEN. `columns` is a responsive
   control whose selector writes `--kfe-glossary-cols` on `{{WRAPPER}} .kfe`;
   this sheet reads it in the base rule and then sets `grid-template-columns`
   OUTRIGHT at the phone step. A control writing the property instead would land
   at (0,4,0) on the grid element and beat every rule here at every width, so
   the cards could never fall to one column — the trap class-checklist.php
   names, and the reason that widget's Columns is not responsive at all.
   ========================================================================== */

.kfe .kfe-glossary .head {
  margin-bottom: 26px;
  text-align: var(--kfe-head-align, inherit);
}
.kfe .kfe-glossary .head .kfe-glossary-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.8rem, 3.4vw, 2.7rem)));
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0;
}
.kfe .kfe-glossary .head .kfe-glossary-intro {
  margin-top: 18px;
  max-width: var(--kfe-body-measure, 68ch);
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, inherit);
}
.kfe .kfe-glossary .head .kfe-glossary-intro p + p { margin-top: 14px; }
.kfe .kfe-glossary .head .kfe-glossary-intro a { color: var(--kfe-link, var(--kfe-accent)); }

/* ---------- the A–Z jump bar ---------- */
.kfe .kfe-glossary-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 26px;
}
.kfe .kfe-glossary-alpha a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  color: var(--kfe-link, var(--kfe-accent));
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.kfe .kfe-glossary-alpha a:hover,
.kfe .kfe-glossary-alpha a:focus-visible {
  background: var(--kfe-link, var(--kfe-accent));
  color: var(--kfe-white);
}

/* ---------- the letter heads ----------
   A `<p>`, not a heading, and class-glossary.php's term_tag() says why: a
   letter is a filing device and twenty-nine of them would be twenty-nine empty
   branches in the page's outline. The rule under it is the group separator. */
.kfe .kfe-glossary-letter {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--kfe-link, var(--kfe-accent));
  margin: 38px 0 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--kfe-line);
  /* The jump bar lands here, and a sticky site header would otherwise cover
     the letter it jumped to. `--kfe-header-h` is the same token page-header.css
     reads at :77, with the same `0px` fallback: a site that does not publish a
     header height gets today's jump, unchanged. */
  scroll-margin-top: calc(var(--kfe-header-h, 0px) + 16px);
}

/* ---------- the term cards ---------- */
.kfe .kfe-glossary-terms {
  display: grid;
  grid-template-columns: repeat(var(--kfe-glossary-cols, 2), minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}
.kfe .kfe-glossary-term {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 6px);
  padding: 22px 24px;
}
.kfe .kfe-glossary-term .ic {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--kfe-glossary-icon-bg, var(--kfe-surface-deep));
}
/* `fill` is set on the `<svg>` and INHERITS into the shapes, which is the one
   way to colour an icon without repainting one that means to be hollow: an
   inherited value is the weakest there is, so a `<path fill="none">` from the
   drawing keeps its own. Setting `fill` on the shapes instead would fill every
   outline icon solid. `stroke` is deliberately not set at all — SVG's initial
   stroke is already `none`, and declaring it would be the same trap with the
   sides swapped. */
.kfe .kfe-glossary-term .ic svg {
  width: 26px;
  height: 26px;
  fill: var(--kfe-glossary-icon-ink, var(--kfe-accent));
}
.kfe .kfe-glossary-term .tx { min-width: 0; }
.kfe .kfe-glossary-term .tx h3,
.kfe .kfe-glossary-term .tx h4 {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-h3-weight);
  font-size: var(--kfe-h3-size, 17px);
  line-height: 1.3;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0 0 6px;
}
.kfe .kfe-glossary-term .tx p {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, 15px);
  line-height: 1.65;
}
.kfe .kfe-glossary-term .tx p + p { margin-top: 10px; }
/* This widget owns the anchor in its own prose rather than leaving it to
   base.css's `.kfe .body a:not([class])`: the definition is not printed in a
   `div.body`, and base.css's note (:228-258) says a widget sheet that owns an
   anchor should be the rule that wins for it. */
.kfe .kfe-glossary-term .tx a { color: var(--kfe-link, var(--kfe-accent)); text-decoration: none; }
.kfe .kfe-glossary-term .tx a:hover,
.kfe .kfe-glossary-term .tx a:focus-visible { color: var(--kfe-accent-deep, var(--kfe-link, var(--kfe-accent))); text-decoration: underline; }

/* ---------- dark ground ---------- */
.kfe .kfe-glossary.kfe-dark .head .kfe-glossary-title { color: #fff; }
.kfe .kfe-glossary.kfe-dark .kfe-glossary-letter { color: var(--kfe-on-dark-soft); border-bottom-color: rgba(255, 255, 255, 0.14); }
.kfe .kfe-glossary.kfe-dark .kfe-glossary-alpha a {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--kfe-on-dark-soft);
}
.kfe .kfe-glossary.kfe-dark .kfe-glossary-alpha a:hover,
.kfe .kfe-glossary.kfe-dark .kfe-glossary-alpha a:focus-visible { background: rgba(255, 255, 255, 0.14); color: #fff; }
.kfe .kfe-glossary.kfe-dark .kfe-glossary-term {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.kfe .kfe-glossary.kfe-dark .kfe-glossary-term .ic { background: rgba(255, 255, 255, 0.08); }
.kfe .kfe-glossary.kfe-dark .kfe-glossary-term .ic svg { fill: var(--kfe-on-dark-soft); }
.kfe .kfe-glossary.kfe-dark .kfe-glossary-term .tx h3,
.kfe .kfe-glossary.kfe-dark .kfe-glossary-term .tx h4 { color: #fff; }
.kfe .kfe-glossary.kfe-dark .kfe-glossary-term .tx a,
.kfe .kfe-glossary.kfe-dark .kfe-glossary-term .tx a:hover { color: #fff; }

/* ---------- the phone step ----------
   767, not the reference's 800, on purpose: it is Elementor's own mobile
   breakpoint and the step every other grid in this pack drops at, which is what
   puts the tablet band below exactly where the pack's six other grids have it.
   The 33px of difference from `post-323.css:223` is a recorded deviation. */
@media (max-width: 767px) {
  .kfe .kfe-glossary-terms { grid-template-columns: 1fr; }
  .kfe .kfe-glossary-letter { font-size: 22px; margin-top: 30px; }
}

/* The triforce — the long note is in steps.css (kf-elements #118, 2026-09-20).
   A lone card on the last row of a two-across grid is centred between the two
   above it rather than left hard against the gutter, which is the operator's
   design ruling for the pack and stands whether or not ee-ref does the same.

   THE BAND IS 768 AND UP, WITH NO CEILING, AND THAT IS DELIBERATELY UNLIKE THE
   SIX SHEETS #118 NAMES. Those are four across at desktop and drop to two only
   inside Elementor's tablet step, so their rule is banded to that step because
   that is the only place their grid is two across. This grid is two across for
   its whole range above the phone step — `--kfe-glossary-cols` defaults to 2 at
   :96 and nothing changes it at the desktop breakpoint — so banding the rule to
   768–1024 would have left the orphan hard left at every width the operator
   actually reviews at. Measured on the corpus: `da/oejenordbog` §1 leaves one in
   `M` and `S`, `en/glossary` in `E`, `L`, `R` and `T`, `de/augenwoerterbuch` in
   `K` and `S`. The rule follows the grid; the tablet ceiling belonged to the
   sheets whose grid changes there, and this one's does not.

   Limit (a) of steps.css's note still applies: an instance whose Columns is set
   to one or three lands here with the rule still keyed on `2n + 1`. Limit (c)
   still does NOT apply — this widget exposes no Gap control, so the 10px below
   is exactly half of this sheet's own 20px and the centred card is one track
   wide. The `kfe-no-triforce` opt-out and the robust `@container style()` form
   are both in that note; the reset here is the rule's own selector with that
   one class prefixed, unscoped for the reason the note gives. */
@media (min-width: 768px) {
  .kfe .kfe-glossary .kfe-glossary-terms > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 10px);
  }
  .kfe-no-triforce .kfe .kfe-glossary .kfe-glossary-terms > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: auto;
    justify-self: auto;
    width: auto;
  }
}