/* Guidene i ordlista (#7451): /glossary og /glossary/<slug>.

   Bygger på brosjyrens blokker og banner (landing.css). Hver guide har sin
   egen ikonfarge (`--tema` / `--tema-bg`, satt per side fra ikon-tokenene),
   og fargen brukes bare der den peker: ikonet, innholdslista og kortets
   kant. Teksten er sort, som resten av brosjyren. Ingen hex her. */

.tema-side { --tema: var(--ax-ikon-gronn); --tema-bg: var(--ax-ikon-gronn-bg); }
.tema--gronn   { --tema: var(--ax-ikon-gronn);   --tema-bg: var(--ax-ikon-gronn-bg); }
.tema--bla     { --tema: var(--ax-ikon-bla);     --tema-bg: var(--ax-ikon-bla-bg); }
.tema--lilla   { --tema: var(--ax-ikon-lilla);   --tema-bg: var(--ax-ikon-lilla-bg); }
.tema--oransje { --tema: var(--ax-ikon-oransje); --tema-bg: var(--ax-ikon-oransje-bg); }
.tema--turkis  { --tema: var(--ax-ikon-turkis);  --tema-bg: var(--ax-ikon-turkis-bg); }

/* ---------------------------------------------------------------- banneret */
.tema-banner .banner__inner {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
  padding: var(--ax-gap-lg) var(--ax-gap) var(--ax-gap);
}
.tema__smuler {
  font-size: var(--ax-fs-sm);
  color: var(--ax-muted);
  margin: 0 0 var(--ax-gap-sm);
}
.tema__smuler a { color: inherit; }
.tema__h1 {
  font-family: var(--ax-display);
  font-size: clamp(1.8rem, 6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ax-green);
  margin: 0;
}
.tema__ingress {
  margin: var(--ax-gap-sm) 0 0;
  max-width: 36rem;
  font-size: var(--ax-fs-lg);
  line-height: 1.5;
  color: var(--ax-ink);
}
.tema__ikon {
  width: 5.5rem;
  height: 5.5rem;
  padding: 0.75rem;
  border-radius: 50%;
  background: var(--tema-bg);
  box-shadow: var(--ax-shadow);
}
/* Telefon: ikonet over teksten, ikke ved siden av — ellers får tittelen
   bare halve bredden. */
@media (max-width: 899px) {
  .tema-banner .banner__inner { grid-template-columns: minmax(0, 1fr); gap: var(--ax-gap-sm); }
  .tema__ikon { order: -1; width: 3.5rem; height: 3.5rem; padding: 0.5rem; }
}
@media (min-width: 900px) {
  .tema-banner .banner__inner { padding: calc(var(--ax-gap-lg) * 1.5) var(--ax-gap-lg); }
  .tema__ikon { width: 8rem; height: 8rem; padding: 1rem; }
}

/* ------------------------------------------------------- innholdslista */
.tema__innhold { border-top: 0; padding-top: var(--ax-gap); padding-bottom: 0; }
.tema__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-gap-sm);
}
.tema__chips a {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius-pille);
  background: var(--ax-bg);
  color: var(--ax-ink);
  font-size: var(--ax-fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.tema__chips a:hover,
.tema__chips a:focus-visible { border-color: var(--tema); background: var(--tema-bg); }

/* ----------------------------------------------------------------- kortene */
.tema__kort {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 46rem;
  display: grid;
  gap: var(--ax-gap);
}
/* `.ordbok__rad` står på kortet fordi vaktene slår opp et begrep på
   `<li class="ordbok__rad… id=nøkkel>`; utseendet er kortets eget. */
.tema__kort .tema-kort {
  margin: 0;
  padding: var(--ax-gap) var(--ax-gap) var(--ax-gap) calc(var(--ax-gap) + 2px);
  background: var(--ax-bg);
  border: 1px solid var(--ax-line);
  border-left: 4px solid var(--tema);
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow);
  scroll-margin-top: 5rem;
}
.tema-kort__topp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ax-gap-xs) var(--ax-gap-sm);
}
/* `.tema__kort` foran: `.blokk h2` (landing.css) gir ellers 2rem under. */
.tema__kort .tema-kort__navn {
  font-family: var(--ax-display);
  font-size: var(--ax-fs-xl);
  letter-spacing: -0.02em;
  margin: 0;
}
.tema-kort__merke {
  font-size: var(--ax-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 10px;
  border-radius: var(--ax-radius-pille);
  background: var(--ax-bg-alt);
  color: var(--ax-muted);
}
.tema-kort--presis .tema-kort__merke { background: var(--ax-green-soft); color: var(--ax-green); }
.tema-kort--oppfinnelse .tema-kort__merke {
  background: transparent;
  border: 1px solid var(--ax-green-light);
  color: var(--ax-green);
}
.tema-kort__marked { margin: var(--ax-gap-xs) 0 0; font-size: var(--ax-fs-sm); color: var(--ax-muted); }
.tema-kort__marked strong { color: var(--ax-ink); font-weight: 600; }
.tema-kort__forklaring { margin: var(--ax-gap-sm) 0; font-size: var(--ax-fs-lg); line-height: 1.5; }
.tema-kort__egentlig { margin: 0 0 var(--ax-gap-sm); line-height: 1.65; }
.tema-kort__merknad { margin: var(--ax-gap-sm) 0 0; font-size: var(--ax-fs-sm); color: var(--ax-muted); font-style: italic; }

.tema__om {
  max-width: 46rem;
  margin: var(--ax-gap-lg) auto 0;
  font-size: var(--ax-fs-sm);
  line-height: 1.6;
  color: var(--ax-muted);
}

/* ---------------------------------------------------------- guidekortene */
.tema__guider {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ax-gap);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--ax-gap);
}
.tema-guide {
  display: flex;
  align-items: center;
  gap: var(--ax-gap-sm);
  height: 100%;
  box-sizing: border-box;
  padding: var(--ax-gap);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  background: var(--ax-bg);
  color: var(--ax-ink);
  text-decoration: none;
  box-shadow: var(--ax-shadow);
}
.tema-guide:hover,
.tema-guide:focus-visible { border-color: var(--tema); }
.tema-guide img {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.4rem;
  border-radius: 50%;
  background: var(--tema-bg);
}
.tema-guide strong { display: block; font-size: var(--ax-fs-lg); }
.tema-guide__under { display: block; font-size: var(--ax-fs-sm); color: var(--ax-muted); line-height: 1.4; }

/* ------------------------------------------- /glossary: ordene per guide */
.tema__ordliste {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ax-gap-lg);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--ax-gap-sm) var(--ax-gap);
}
.tema__ordliste .ordbok__henvisning {
  margin: 0;
  padding: var(--ax-gap-xs) 0 var(--ax-gap-xs) var(--ax-gap-sm);
  border-left: 3px solid var(--tema);
  scroll-margin-top: 5rem;
}
.ordbok__henvisning a { color: var(--ax-ink); text-decoration: none; font-weight: 700; }
.ordbok__henvisning a:hover { text-decoration: underline; }
.ordbok__henvisning p { margin: 2px 0 0; font-size: var(--ax-fs-sm); color: var(--ax-muted); line-height: 1.45; }
.tema__gruppe { display: flex; align-items: center; gap: var(--ax-gap-sm); }
.tema__gruppe a { color: var(--ax-ink); text-decoration: none; }
.tema__gruppe a:hover { text-decoration: underline; }
/* Innholdslista har ikke noe ikon i banneret: én kolonne. */
.tema-banner--enkel .banner__inner { grid-template-columns: minmax(0, 1fr); }
.tema__gruppe img { width: 2.25rem; height: 2.25rem; padding: 0.3rem; border-radius: 50%; background: var(--tema-bg); }