/*
 * longform.css  –  laddas enbart för /finansplan/ och /essa/
 * Bygger på style.css utan att röra .chapter-*-klasser.
 *
 * Struktur:
 *   1. CSS-variabler (longform-specifika)
 *   2. Essä-header (tunnare, icke-sticky)  – punkt 3
 *   3. Gemensam hero-sektion + metadata
 *   4. Layoutwrapper (TOC + artikel)
 *   5. TOC – sticky sidebar                – punkt 2
 *   6. Finansplan-typografi
 *   7. Essä-typografi
 *   8. PDF-länk + platshållare
 *   9. Responsivitet
 */

/* ── 1. Longform-variabler ─────────────────────────────────────────────────── */
.longform-page {
  --lf-col:        700px;   /* textkolumnens max-bredd                */
  --lf-toc-w:      220px;   /* TOC-sidopanelens bredd                 */
  --lf-gap:        3.5rem;  /* avstånd TOC ↔ artikel                  */
  --lf-hero-pad:   4.5rem;  /* toppluft i hero                        */
  --essay-hero-pad:6.5rem;  /* extra luft för essän                   */
}

/* ── 2. Essä-header: tunnare, inte sticky  (punkt 3) ──────────────────────── */
/*
 * .essay-header läggs som extra klass på <header class="site-header essay-header">.
 * Överskriver position:sticky och minskar höjd + kontrast.
 * Sajtkänslan dämpas – läsaren "lämnar" plattformen och går in i texten.
 */
.essay-header {
  position: static;          /* ingen sticky-effekt */
  border-bottom-color: transparent;
  background: transparent;
}

.essay-header .header-inner {
  height: 48px;
}

.essay-header .site-title {
  color: var(--ink-light);
  font-weight: 400;
}

.essay-header .main-nav a {
  color: var(--ink-light);
  font-size: 0.82rem;
}

.essay-header .main-nav a:hover,
.essay-header .main-nav a.active {
  color: var(--ink);
}

/* ── 3. Hero-sektion ───────────────────────────────────────────────────────── */
.longform-header {
  width: 100%;
  padding: var(--lf-hero-pad) 2rem 3rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3.5rem;
}

.longform-hero-inner {
  max-width: var(--lf-col);
  margin: 0 auto;
}

.longform-kicker {
  display: block;
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 0.8rem;
}

.longform-hero-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.longform-subtitle {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-mid);
  margin-top: 0.4rem;
  margin-bottom: 0;
}

/* Datum, version, PDF-länk */
.longform-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.longform-meta-row {
  font-family: var(--body-font);
  font-size: 0.8rem;
  color: var(--ink-light);
  letter-spacing: 0.04em;
}

.longform-pdf-link {
  font-family: var(--body-font);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.03em;
  border: 1px solid var(--accent-mid);
  padding: 0.25rem 0.7rem;
  border-radius: 2px;
  transition: background 0.15s;
}
.longform-pdf-link:hover {
  background: var(--accent-bg);
  text-decoration: none;
}

/* ── 4. Layout-wrapper: TOC + artikel ─────────────────────────────────────── */
.longform-body-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--lf-gap);
  padding-bottom: 5rem;
}

/* Utan TOC: centrera artikeln */
.finance-no-toc {
  max-width: var(--lf-col);
}

/* Med TOC: full bredd, TOC till vänster */
.finance-with-toc {
  max-width: calc(var(--lf-toc-w) + var(--lf-gap) + var(--lf-col));
}

/* Essä-wrapper: ingen TOC, smal kolumn */
.longform-container {
  max-width: var(--lf-col);
  padding: 0 2rem;
}

/* ── 5. TOC – sticky sidebar  (punkt 2) ───────────────────────────────────── */
.longform-toc {
  flex: 0 0 var(--lf-toc-w);
  position: sticky;
  top: 72px;          /* under sticky site-header */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 0 0 2rem;
  border-right: 1px solid var(--rule);
  padding-right: 1.5rem;
  /* scrollbar subtil */
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.toc-heading {
  font-family: var(--body-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 0.75rem;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-item {
  margin-bottom: 0;
}

.toc-item a {
  display: block;
  font-family: var(--body-font);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-mid);
  padding: 0.3rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.6rem;
  transition: color 0.12s, border-color 0.12s;
}

.toc-item a:hover {
  color: var(--ink);
  border-left-color: var(--accent-mid);
  text-decoration: none;
}

/* h3-nivå: indraget */
.toc-indent a {
  font-size: 0.78rem;
  padding-left: 1.4rem;
  color: var(--ink-light);
}

/* ── 6. Finansplan-typografi ──────────────────────────────────────────────── */
.finance-layout .longform-header {
  background: var(--paper-dark);
}

.finance-layout .longform-hero-title {
  font-family: var(--body-font);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.finance-section {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink);
}

/* H2: stark sektionering med accentstreck */
.finance-section .longform-h2 {
  font-family: var(--body-font);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  border-top: 2px solid var(--accent);
  padding-top: 1.25rem;
  margin: 2.75rem 0 0.75rem;
  letter-spacing: 0.01em;
}

.finance-section .longform-h3 {
  font-family: var(--body-font);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-mid);
  margin: 2rem 0 0.5rem;
}

.finance-section .longform-h4 {
  font-family: var(--body-font);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 1.75rem 0 0.4rem;
}

.finance-section p {
  margin-bottom: 1em;
}

/* Dölj dokumentets interna h1 – visas i hero */
.finance-section .longform-title {
  display: none;
}

.finance-section ul {
  margin: 0.75em 0 1.25em 1.25rem;
}

.finance-section ul li {
  margin-bottom: 0.3em;
  line-height: 1.65;
}

/* ── 7. Essä-typografi  (punkt 3) ─────────────────────────────────────────── */
.essay-layout .longform-header {
  background: var(--paper);
  padding-top: var(--essay-hero-pad);
  border-bottom: none;
  margin-bottom: 2rem;
}

.essay-layout .longform-hero-title {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
}

.essay-layout .longform-subtitle {
  font-size: 1.25rem;
  color: var(--ink-light);
}

/* Artikelkolumn: bok-känsla */
.essay-section {
  font-family: var(--serif);
  font-size: 1.13rem;
  line-height: 1.92;
  color: var(--ink);
}

/* Dölj dokumentets interna h1 – visas i hero */
.essay-section .longform-title {
  display: none;
}

/* Mjuka, kursiva rubriker – inte strukturella */
.essay-section .longform-h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  margin: 4rem 0 1.1rem;
}

.essay-section .longform-h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-mid);
  margin: 2.75rem 0 0.8rem;
}

.essay-section .longform-h4 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-light);
  margin: 2rem 0 0.6rem;
}

/* Generöst styckeluft */
.essay-section p {
  margin-bottom: 1.6em;
}

/* Em-dash-listor – ingen punktlista-känsla */
.essay-section ul {
  list-style: none;
  margin: 1.5em 0 2.2em;
  padding: 0;
}

.essay-section ul li {
  padding-left: 1.6em;
  margin-bottom: 0.7em;
  position: relative;
  line-height: 1.85;
}

.essay-section ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ink-light);
}

/* ── 8. PDF-länk + platshållare ───────────────────────────────────────────── */
.longform-placeholder {
  padding: 3rem 0 5rem;
  color: var(--ink-light);
  font-style: italic;
}

/* ── 9. Responsivitet ─────────────────────────────────────────────────────── */

/* Dölj TOC-sidebar under 900px – för smal för sidopanel */
@media (max-width: 900px) {
  .longform-body-wrap {
    flex-direction: column;
    gap: 0;
  }

  .longform-toc {
    position: static;
    flex: none;
    width: 100%;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding-right: 0;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    overflow: visible;
  }
}

@media (max-width: 700px) {
  .longform-page {
    --lf-hero-pad:   2.75rem;
    --essay-hero-pad:3.5rem;
  }

  .longform-header {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    margin-bottom: 2rem;
  }

  .longform-hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .longform-container,
  .longform-body-wrap {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .finance-section {
    font-size: 0.97rem;
    line-height: 1.68;
  }

  .essay-section {
    font-size: 1.05rem;
    line-height: 1.82;
  }

  .finance-section .longform-h2 {
    font-size: 1rem;
    margin-top: 2.25rem;
  }

  .essay-section .longform-h2 {
    font-size: 1.2rem;
    margin-top: 3rem;
  }

  /* Essay-header: på mobil – visa ändå subtil navigering */
  .essay-header {
    position: sticky;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
}

@media (max-width: 480px) {
  .longform-container,
  .longform-body-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .longform-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .longform-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}