/* STÖDRUTAN, gemensam för alla Andreas appar. Skapad 2026-08-06.
 *
 * ALLA FÄRGER KOMMER UR VÄRDSIDANS EGNA VARIABLER, med fallback. Rutan ska se ut
 * som appen den sitter i och inte som en inklistrad widget, och därför får den
 * aldrig hårdkoda en färg. Saknar appen en variabel faller den tillbaka på ett
 * neutralt värde som funkar mot både ljus och mörk bakgrund.
 *
 * Variabler som används om de finns:
 *   --yta          kortets bakgrund
 *   --ram          kantlinjen
 *   --text         brödtext
 *   --text-dampad  hjälptext
 *   --accent       knappen och siffran
 *   --radie-kort   hörnradie
 *   --serif        rubriktypsnitt
 */

.stodruta {
  background: var(--yta, #F6F4F0);
  border: 1px solid var(--ram, #D6D2C9);
  border-radius: var(--radie-kort, .6rem);
  padding: 1.25rem 1.35rem;
  margin: 2rem 0 0;
  color: var(--text, #12161C);
}

.stodruta h2, .stodruta h3 {
  font-family: var(--serif, Georgia, serif);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 .5rem;
}

.stodruta p {
  margin: 0 0 .85rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-dampad, #545C68);
  max-width: 46ch;
}

.stodruta p:last-child { margin-bottom: 0; }

/* Raden med de två sätten att ge. Bryter till under varandra när det blir smalt,
   så mobilen aldrig får en QR-kod som trycker ut sidan i sidled. */
.stodruta-satt {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.stodruta-swish {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .9375rem;
  color: var(--text-dampad, #545C68);
}

/* Fast storlek så QR-koden alltid går att skanna. Under 110 px börjar kameror
   få problem, och en QR som inte går att läsa är sämre än ingen alls. */
.stodruta-swish img {
  width: 116px;
  height: 116px;
  display: block;
  border-radius: .35rem;
  background: #fff;   /* QR-koden behöver vit botten även i mörkt tema */
  padding: .25rem;
}

.stodruta-swish b {
  display: block;
  font-size: 1.0625rem;
  white-space: nowrap;
  color: var(--text, #12161C);
  margin-top: .15rem;
}

.stodruta a.stodruta-kofi {
  display: inline-block;
  background: var(--accent, #8A4F14);
  color: #fff;
  border-radius: 999px;
  padding: .6rem 1.35rem;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  border: 0;
}

.stodruta a.stodruta-kofi:hover { text-decoration: underline; }

/* Fotnoten som tar bort skulden. Mindre och tystare än resten, men den ska stå
   kvar, se LÄS-MIG. */
.stodruta-fot {
  margin-top: 1rem;
  font-size: .8125rem;
  color: var(--text-dampad, #545C68);
}