/* p-ordbog.css — hentet uændret fra src/pages/ordbog.astro (sideens scopede stilblok). */

.index { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .index a {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--sand-line);
    background: var(--paper-raise);
    border-radius: 999px;
    padding: 0.58rem 0.85rem;
  }
  .index a:hover { border-color: var(--ink); }

  .terms { display: grid; }
  .term {
    display: grid;
    gap: 0.35rem var(--gap-list);
    padding-block: var(--row-pad);
    border-top: 1px solid var(--sand-line);
    /* Navhøjden kommer fra html's scroll-padding-top. */
    scroll-margin-top: 1rem;
  }
  .term:target dt { color: var(--riff); }
  .term dt { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }

  /* Opslagsordet er et link til opslagets egen side.

     Blåt er sitets klikfarve, men alle 22 opslagsord er links, og 22 blå
     linjer under hinanden er ikke længere en fremhævning, det er en stribe.
     Ordet står derfor i rækkens egen farve og bliver blåt, når man peger på
     det. `inherit` frem for --ink, så det stadig er :target-reglen ovenfor,
     der bestemmer farven, når man er hoppet hertil fra et anker.

     Til gengæld skal man kunne SE, at der er noget at klikke på, uden at
     føre musen hen over hvert ord: en tynd, dæmpet streg under ordet siger
     link, uden at tage opmærksomhed fra teksten. Den bliver fuld styrke og
     blå ved hover. */
  .term dt a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
    text-underline-offset: 0.2em;
  }
  .term dt a:hover,
  .term dt a:focus-visible { color: var(--riff); text-decoration-color: currentColor; }
  .term dd {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--ink-soft);
    max-width: var(--measure-prose);
  }

  @media (min-width: 48rem) {
    .term { grid-template-columns: var(--list-col) 1fr; }
  }

  /* Bogstavstriben findes kun på telefon. Den står i markup'en hele
     tiden, så desktop skal have den skjult her — ikke i en min-width. */
  .index-alpha { display: none; }

  /* ── Telefon ──
     Ordbogen er syv skærmfulde. Halvanden af dem var registeret over
     de 24 navne: en indholdsfortegnelse så lang, at man scrollede forbi
     den i stedet for at bruge den. Bogstaverne siger det samme på to
     rækker, og et bogstav er et mål, en tommelfinger kan ramme. */
  @media (max-width: 47.99rem) {
    .index:not(.index-alpha) { display: none; }
    .index-alpha { display: flex; }
    .index-alpha a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.75rem;
      min-height: 2.75rem;
      padding: 0 0.5rem;
      font-size: 0.95rem;
    }
    /* Opslaget skal stå frit under nav'en, når man er hoppet til det. */
    .term { scroll-margin-top: 1.5rem; }

    /* Opslagsordet er 17,6 px højt, og et inline-link kan kun rammes på sin
       egen tekst: omkring 20 px for en tommelfinger. Feltet strækkes med
       ::after og ikke med padding, som brødkrummen i p-guide.css, så
       understregningen ved hover ikke bliver skubbet væk fra ordet.
       11,2 px opad går op i rækkens egne 18,4 px luft, og 5,6 px nedad er
       præcis afstanden ned til forklaringen — feltet lægger sig altså ikke
       oven på teksten under. Målet bliver 37 px. */
    .term dt a { position: relative; }
    .term dt a::after { content: ''; position: absolute; inset: -0.7rem -0.35rem -0.35rem; }
  }

  /* ── Det enkelte opslag: /ordbog/felt-210 ──
     Reglerne står i ordbogens eget stilark, fordi oversigten og opslaget er
     den samme ordbog. riff_view_slug() i functions.php kender kun sider og
     guides, så single-riff_term.php henter filen selv. */

  /* Samme top som `.page-head`, så titlen står samme sted under bjælken
     som på alle andre sider, når man klikker ind fra oversigten. Telefonen
     får page-heads 2rem i blokken nederst. */
  .term-page { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }

  /* Vejen tilbage til listen. Blå, fordi den er til at klikke på. */
  .term-crumb { margin-bottom: 1.1rem; }
  .term-crumb a { color: var(--riff); text-decoration: none; }
  .term-crumb a:hover { text-decoration: underline; }

  /* Forklaringen er sidens hovedtekst og står i manchetstørrelse. Den får
     50 ch (74 tegn) og ikke manchettens eget mål: `.lede`s 44 ch (`--measure-lede`)
     er sat til to-tre linjer under en titel, og den længste forklaring,
     AM-bidrag, er 66 ord. */
  .term-body { margin-top: 1.2rem; max-width: 50ch; }

  .term-means {
    margin-top: clamp(2rem, 4vw, 2.75rem);
    padding-top: 1.15rem;
    border-top: 1px solid var(--sand-line);
    display: grid;
    gap: 0.55rem;
    max-width: var(--measure-prose);
  }
  .term-means p { color: var(--ink-soft); }

  .term-back { margin-top: clamp(2.25rem, 4vw, 3rem); }

  @media (max-width: 47.99rem) {
    .term-page { padding-top: 2rem; }
    .term-crumb a { position: relative; }
    .term-crumb a::after { content: ''; position: absolute; inset: -0.82rem -0.4rem; }
  }