/* Oddsium – Ansvarsfullt spelande + Redaktionsbox (inc/page-boxes.php)
   Färger: röd #FE0000, gul #FFEB3B, blå #0088FF
   Typsnitt: Anton (rubrik, versal), Archivo (brödtext/knappar)
   Selektorerna är scopade under .ods-wrap .ods-block för att vinna över
   .toc-content-wrapper h2/a och body.gr-reglerna i style.css. */

.ods-wrap {
  --ods-red: #FE0000;
  --ods-yellow: #FFEB3B;
  --ods-blue: #0088FF;
  --ods-ink: #111318;
  --ods-display: Anton, Impact, "Arial Narrow Bold", sans-serif;
  --ods-text: Archivo, Helvetica, Arial, sans-serif;

  font-family: var(--ods-text);
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

/* Block */
.ods-wrap .ods-block { display: flex; flex-direction: column; margin: 0; }
.ods-wrap .ods-block--blue {
  background: var(--ods-blue);
  padding: 28px 32px 26px;
  gap: 20px;
}
.ods-wrap .ods-block--yellow { background: var(--ods-yellow); }
.ods-wrap .ods-block .ods-block__body {
  padding: 26px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Rubrik */
.ods-wrap .ods-block .ods-block__title {
  font-family: var(--ods-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ods-yellow);
  margin: 0;
}
.ods-wrap .ods-block .ods-block__title--red { color: var(--ods-red); font-size: 27px; }

/* Brödtext */
.ods-wrap .ods-block .ods-block__text {
  font-family: var(--ods-text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ods-ink);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}
.ods-wrap .ods-block .ods-block__text--light { color: #fff; }

/* Knappar */
.ods-wrap .ods-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
.ods-wrap .ods-block .ods-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-family: var(--ods-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 0;
  transition: background-color .12s ease, color .12s ease;
}
.ods-wrap .ods-block .ods-btn--yellow { background: var(--ods-yellow); color: var(--ods-red); }
.ods-wrap .ods-block .ods-btn--yellow:hover,
.ods-wrap .ods-block .ods-btn--yellow:focus-visible { background: var(--ods-red); color: var(--ods-yellow); text-decoration: none; }
.ods-wrap .ods-block .ods-btn--red { background: var(--ods-red); color: var(--ods-yellow); }
.ods-wrap .ods-block .ods-btn--red:hover,
.ods-wrap .ods-block .ods-btn--red:focus-visible { background: var(--ods-yellow); color: var(--ods-red); text-decoration: none; }

/* Fotlist i redaktionsboxen */
.ods-wrap .ods-block .ods-block__footer-link {
  background: var(--ods-blue);
  color: var(--ods-yellow);
  text-decoration: none;
  font-family: var(--ods-text);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background-color .12s ease, color .12s ease;
}
.ods-wrap .ods-block .ods-block__footer-link:hover,
.ods-wrap .ods-block .ods-block__footer-link:focus-visible { background: var(--ods-red); color: var(--ods-yellow); text-decoration: none; }

.ods-wrap .ods-block a:focus-visible { outline: 3px solid var(--ods-ink); outline-offset: 2px; }

/* Mobil */
@media (max-width: 640px) {
  .ods-wrap .ods-block--blue { padding: 22px 20px 20px; }
  .ods-wrap .ods-block .ods-block__body { padding: 22px 20px 20px; }
  .ods-wrap .ods-block .ods-block__title { font-size: 26px; }
  .ods-wrap .ods-block .ods-block__title--red { font-size: 24px; }
  .ods-wrap .ods-block .ods-block__text { font-size: 16px; }
  .ods-wrap .ods-block .ods-btn { width: 100%; justify-content: space-between; }
  .ods-wrap .ods-block .ods-block__footer-link { padding: 14px 20px; }
}

/* Mörkt läge: blocken behåller sina varumärkesfärger. */