/* ============================================================
   Historia-tema — lärobokskänsla (Tufte-inspirerad).
   Länkas ENDAST från historia-1a1-sidorna, efter components.css.
   Bygger på teach-lektionernas stil: serif genomgående, mörkröd
   epok-accent och tunn linje under avsnittsrubriker.
   Rör inga komponenter eller funktioner — bara tokens + h2-linjen.
   ============================================================ */

:root {
  /* Mörkröd epok-accent (färgar länkar, citat, knappar, fokus) */
  --color-primary: #7a2e2e;
  --color-primary-hover: #5f2323;
  --color-primary-light: #f0e4de;
  --color-primary-text: #ffffff;

  /* Lila sekundär-accent, som teach-lektionernas genus-lins */
  --color-accent: #6b4a7a;
  --color-accent-light: #f6f1f8;

  /* Bredare sidbredd så läs-vyn får plats med en rymligare frågeruta.
     Påverkar både header och kurslayout, så de håller sig i linje. */
  --page-width: 80rem;
}

/* Serif även i rubriker → sammanhållen lärobokskänsla.
   Gäller bara när dyslexifonten är AV, så växlaren (som sätter
   --font-heading till Klartext på html.dyslexic-font) fortsätter vinna. */
:root:not(.dyslexic-font) {
  --font-heading: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
}

:root.theme-dark {
  --color-primary: #d18a8a;
  --color-primary-hover: #e2a0a0;
  --color-primary-light: #2e1c1c;
  --color-accent: #b193c8;
  --color-accent-light: #291f31;
}

/* Tunn linje under avsnittsrubriker, som lärobokssidorna */
.course-content h2 {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
  margin-top: var(--space-10);
}

/* Eyebrow i epok-accent, som teach-lektionernas "kicker" */
.section-header__eyebrow {
  color: var(--color-primary);
}

/* ---- Historiemotiv i sidomenyns tomma vänsterområde ---- */
/* Endast desktop: gör sidomenyn till en kolumn så motivet kan tryckas ned. */
@media (min-width: 769px) {
  .course-sidebar { display: flex; flex-direction: column; }
  .hist-motif { margin-top: auto; }
}
.hist-motif {
  padding-top: var(--space-8);
  color: var(--color-primary);
  text-align: center;
}
.hist-motif svg { width: 80%; max-width: 176px; height: auto; opacity: 0.85; }
.hist-motif__caption {
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}
/* Motivet hör bara hemma i den höga vänsterkolumnen. Dölj på mobil. */
@media (max-width: 768px) { .hist-motif { display: none; } }

/* ---- Läs vänster, frågor i sticky ruta till höger ---- */
.course-content--wide { max-width: none; }
.reading-with-questions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: var(--space-8);
  align-items: start;
}
.rwq-text { min-width: 0; }
.rwq-questions {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.rwq-questions h2 { margin-top: 0; }
/* Platta ut övningarna inuti rutan så det inte blir ruta-i-ruta */
.rwq-questions .exercise {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.rwq-questions .exercise + .exercise {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-5);
}
.rwq-questions .exercise__textarea { width: 100%; }
/* Smal skärm: stapla, ingen sticky */
@media (max-width: 1024px) {
  .reading-with-questions { grid-template-columns: 1fr; }
  .rwq-questions { position: static; max-height: none; }
}