/* THEME — Notebook (DEFAULT)
 * Brand-független, "saját kéz" érzet. Saját Signal over Noise hírlevél,
 * személyes esszé, internal brief.
 */

:root {
  --ink: #1a1a1a;
  --ink-soft: #2a2a2a;
  --paper-bg: #FBFAF4;
  --paper-bg-dark: #F5F3EA;
  --paper-dot: rgba(0, 0, 0, 0.18);
  --paper-line: rgba(0, 0, 0, 0.07);

  /* Body tipográfia: semleges sans */
  --brand-font: 'Inter', 'Helvetica Neue', sans-serif;
  --brand-font-display: 'Inter', sans-serif;

  /* Margó-jegyzet: kék helyett fekete tinta */
  --margin-note-color: #1a1a1a;
}

body {
  font-family: var(--brand-font);
  background-color: var(--paper-bg);
  color: var(--ink);
}

.article-body, .article {
  font-family: var(--brand-font);
}
.article-body h1, .article-body h2, .article-body h3,
.article h1, .article h2, .article h3 {
  font-family: var(--brand-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.margin-note { color: var(--margin-note-color); }

/* Highlight default: yellow (élénk) */
.hd-highlight:not([class*=" "])::before { background: #FFE94D; }

/* Highlights — leckékben a default ::before-skew rendszer helyett
 * inline + box-decoration-break: clone, hogy 2-soros törésnél a második sor
 * háttere CSAK a szöveg területét fedje. A marker-sweep animációt
 * background-image + animálható background-size kombinációval szimuláljuk:
 * a linear-gradient mindkét stop-ja ugyanaz a szín → tömör szín, ami
 * 0%-ról 100%-ra "rajzolódik" balról jobbra. A box-decoration-break
 * minden sorra külön cloneolja a háttér-méretet, így a többsoros
 * törésnél is jól viselkedik.
 *
 * Init állapot: background-size: 0% 100% — láthatatlan.
 * .anim-in állapot: background-size: 100% 100% — kitöltött.
 * Az IntersectionObserver (handdrawn.js) tüzeli az .anim-in osztályt,
 * amikor a span belép a viewportba.
 */
.article-body .hd-highlight,
.article .hd-highlight {
  display: inline !important;
  position: static !important;
  isolation: auto !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.04em 0.18em;
  margin: 0 -0.05em;
  border-radius: 2px;
  background-color: transparent;
  background-image: linear-gradient(
    to right,
    var(--hd-highlight-bg, rgba(255, 233, 77, 0.55)),
    var(--hd-highlight-bg, rgba(255, 233, 77, 0.55))
  );
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transition: background-size 0.7s cubic-bezier(0.5, 0, 0.3, 1);
}
.article-body .hd-highlight.anim-in,
.article .hd-highlight.anim-in {
  background-size: 100% 100%;
}
.article-body .hd-highlight::before,
.article .hd-highlight::before {
  display: none !important;
  content: none !important;
}
/* prefers-reduced-motion: azonnal teljes méret, nincs sweep */
@media (prefers-reduced-motion: reduce) {
  .article-body .hd-highlight,
  .article .hd-highlight { background-size: 100% 100%; transition: none; }
}

.article-body .hd-highlight.yellow,
.article .hd-highlight.yellow      { --hd-highlight-bg: rgba(255, 233, 77, 0.55); }
.article-body .hd-highlight.yellow-soft,
.article .hd-highlight.yellow-soft { --hd-highlight-bg: rgba(253, 216, 53, 0.35); }
.article-body .hd-highlight.green,
.article .hd-highlight.green       { --hd-highlight-bg: rgba(183, 243, 151, 0.65); }
.article-body .hd-highlight.green-deep,
.article .hd-highlight.green-deep  { --hd-highlight-bg: rgba(91, 212, 108, 0.45); }
.article-body .hd-highlight.pink,
.article .hd-highlight.pink        { --hd-highlight-bg: rgba(255, 143, 177, 0.50); }
.article-body .hd-highlight.pink-vivid,
.article .hd-highlight.pink-vivid  { --hd-highlight-bg: rgba(255, 77, 139, 0.40); }
.article-body .hd-highlight.purple,
.article .hd-highlight.purple      { --hd-highlight-bg: rgba(181, 145, 255, 0.50); }
.article-body .hd-highlight.purple-soft,
.article .hd-highlight.purple-soft { --hd-highlight-bg: rgba(201, 176, 255, 0.45); }
.article-body .hd-highlight.orange,
.article .hd-highlight.orange      { --hd-highlight-bg: rgba(255, 179, 71, 0.55); }
.article-body .hd-highlight.orange-vivid,
.article .hd-highlight.orange-vivid{ --hd-highlight-bg: rgba(250, 126, 0, 0.40); }
.article-body .hd-highlight.blue,
.article .hd-highlight.blue        { --hd-highlight-bg: rgba(147, 209, 255, 0.55); }
.article-body .hd-highlight.cyan,
.article .hd-highlight.cyan        { --hd-highlight-bg: rgba(155, 235, 235, 0.55); }
.article-body .hd-highlight.peach,
.article .hd-highlight.peach       { --hd-highlight-bg: rgba(255, 200, 160, 0.55); }

/* hd-circle scroll-trigger: a body-szövegben élő <span class="hd-circle">
 * spanek alapból nem kapnak data-anim-et, így a base handdrawn.css scale(0)
 * initial state-je miatt sosem rajzolódnának meg. A handdrawn.js autoInit
 * mostantól auto-tag-eli a .hd-circle elemeket data-anim="anim-in"-nel, így
 * az IntersectionObserver scrollra tüzeli az .anim-in osztályt, és a
 * base .hd-circle.anim-in::before { transform: scale(1) } szabály érvénybe lép.
 *
 * prefers-reduced-motion: azonnal scale(1), nincs animáció.
 */
@media (prefers-reduced-motion: reduce) {
  .article-body .hd-circle::before,
  .article .hd-circle::before {
    transform: rotate(-3deg) scale(1) !important;
    transition: none !important;
  }
  .article-body .hd-circle.rotated::before,
  .article .hd-circle.rotated::before {
    transform: rotate(2deg) scale(1) !important;
  }
}

/* ─────────── AI Budapest brand ─────────── */

/* Logo box: fekete háttér, fehér Playfair Display, első A dőlt.
 * Használat: <a class="aibp-logo" href="..."><em>A</em>I Budapest</a>
 *
 * Két szintű szelektorokkal felülírjuk a lecke-fájlok inline `<style>` blokk-
 * jában élő `.course-label em` (Caveat + fekete) szabályt.
 */
.aibp-logo,
.course-label .aibp-logo,
a.aibp-logo {
  display: inline-flex;
  align-items: baseline;
  background: #0a0a0a;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  padding: 7px 12px 7px 11px;
  border-radius: 3px;
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: none;
}
.aibp-logo em,
.course-label .aibp-logo em,
a.aibp-logo em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  margin: 0;
  letter-spacing: 0.005em;
  vertical-align: baseline;
  text-transform: none;
}
.aibp-logo:hover,
.course-label .aibp-logo:hover {
  background: #1a1a1a;
  color: #fff;
}

/* ─────────── AIBP ACADEMY brand (új sub-brand markup) ─────────── */
.aibp-academy-logo,
.course-label .aibp-academy-logo,
a.aibp-academy-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22em;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.aibp-academy-logo .aibp {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.aibp-academy-logo .academy {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  font-weight: 700;
  color: var(--academy-accent, #783FF3);
  transform: rotate(-2deg);
  transform-origin: left center;
  letter-spacing: 0.005em;
  position: relative;
  top: 1px;
}
.aibp-academy-logo:hover .academy {
  color: var(--academy-accent-strong, #5d24d0);
}

/* Lecke/landing brand-header: logo + DM Mono meta-szöveg, bal-felső.
 * A meglévő .course-label position-fixed értékét megtartjuk, csak flex-elrendezés
 * + a logo pointer-events visszakapcsolása.
 * Új HTML konvenció:
 *   <div class="course-label">
 *     <a class="aibp-logo" href="..."><em>A</em>I Budapest</a>
 *     <span class="course-meta">MODUL 1 · L1.1</span>
 *   </div>
 */
.course-label {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.course-label .course-meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b6660;
}
@media (max-width: 720px) {
  .course-label .course-meta { display: none; }
}

/* ============================================================
   DIAGRAM VÍZSZINTES-GÖRGETŐ KONTÉNER (adat-sűrű Rough.js chart)
   ------------------------------------------------------------
   Az idővonal / szórás / rács típusú chartok fix x-pozíciókra
   rajzolják a feliratokat, ezért ~430px alatt egymásra csúsznak.
   Megoldás: a chart mindig a --hd-min szélességen renderel
   (a render a host.clientWidth-et olvassa, ez adja a desktop-
   arányokat), keskeny viewporton pedig a konténer vízszintesen
   görgethető. Semmi nem torlódik, a desktop nézet változatlan.
   Használat: <div class="hd-scroll"><div id="chart" …></div></div>
   Szélesebb charthoz: <div class="hd-scroll" style="--hd-min:680px">
   ============================================================ */
.hd-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.hd-scroll > * {
  min-width: var(--hd-min, 560px);
}