/* Newsletter-spezifische Styles. */

/* Cost-Optimierung Phase 2: Lazy-Loading-State auf der Newsletter-
   Page. Zentrierte Atem-Animation während die Generation läuft.
   Nutzt das onboarding__loader-Markup (gleiche Klassen, gleiche
   CSS in onboarding.css) — hier nur ein Container-Wrapper. */
.newsletter-lazy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-block-size: 60vh;
  padding-block: var(--s4);
  text-align: center;
}

/* Bug 124e: Eskalations-Hint + Cancel-Button. Erscheinen nach 60 s
   bzw. 120 s wenn die Generation länger dauert als üblich. Beide
   bewusst dezent unter dem Atem-Loader, damit sie nicht stören
   wenn die Generation einfach nur lang braucht aber sauber läuft. */
.newsletter-lazy__escalation-hint {
  margin-block-start: var(--s2);
  color: var(--color-mid);
  font-style: italic;
  max-inline-size: 36ch;
}

.newsletter-lazy__cancel-btn {
  margin-block-start: var(--s2);
}

/* Bug 126: .btn setzt display:inline-block (main.css), das überschreibt
   das UA-default [hidden]{display:none}. Ohne diese Regel erscheint der
   Cancel-Button ab Page-Load sichtbar (textContent ist erst bei der
   120-s-Eskalation gesetzt → leerer Rechteck-Button) und bleibt auch
   im Error-State sichtbar (showError setzt hidden=true, aber das ist
   wirkungslos solange display:inline-block den Vorrang hat). Selbe
   Mechanik wie Bug 48 (Toast) und Bug 60 (Footer-Sektionen). */
.newsletter-lazy__cancel-btn[hidden] {
  display: none;
}

/* Feature A: Reading-Progress-Bar oben am Viewport. JS in
   /scripts/reading-progress.mjs füttert das width-Attribut
   anhand der Scroll-Position. */
.reading-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 2px;
  background: var(--color-dark);
  inline-size: 0;
  transition: inline-size 100ms linear;
  z-index: 100;
  pointer-events: none;
}

/* Drei klar getrennte Treatments für drei Funktionen pro Newsletter-
   Item (siehe prompts/newsletter-generation.md, Abschnitt
   „ITEM-FORMATIERUNG"):
     <strong>  → Item-Headline am Item-Anfang: nur Bold, kein Underline.
     <u>       → Skimming-Akzent im Fließtext: nur Underline, normales
                  Gewicht. Max einer pro Item.
     <a>       → Quelle-Link am Item-Ende: dezent, kleiner, gedämpft,
                  damit er nicht mit dem Headline-Anker konkurriert.
   Vorher waren <strong> als Underline gerendert (zusammen mit den
   Quellen-Links sah alles gleich aus → Hierarchie-Bruch). */
.newsletter-content strong {
  font-weight: 700;
  text-decoration: none;
}

.newsletter-content u {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-text, currentColor);
  font-weight: normal;
}

/* Quelle-Links: kleiner, gedämpft, dezenter Underline. Greift auf
   alle <a> innerhalb des gerenderten Newsletters; in unseren Items
   sind das ausschließlich die Quellen-Links am Absatzende
   ([Reuters](url), [EZB](url) etc., Bug 144 — vorher [Quelle]).
   Der globale Link-Stil aus forms.css wird hier gezielt
   überschrieben. */
.newsletter-content a {
  font-size: 0.9em;
  color: var(--color-darkish);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  font-weight: normal;
}

.newsletter-content a:hover,
.newsletter-content a:focus-visible {
  color: var(--color-dark);
  text-decoration-thickness: 2px;
}

/* Headings bleiben Bold + Barlow Condensed (kommt aus typography.css)
   — explizit hier nochmal gepinnt, falls je etwas anderes erbt. */
.newsletter-content h1,
.newsletter-content h2,
.newsletter-content h3 {
  font-family: var(--font-special);
  font-weight: 700;
  letter-spacing: 0;
}

/* Newsletter-Wochen-Heading als Block-Highlight: schwarzer Stempel
   mit weißem Text, eckig, deutliches Padding. Nur das h1 innerhalb
   der Newsletter-Content — andere h1 auf der Seite (z.B. Lazy-
   State, falls je eines kommt) bleiben unangetastet. */
.newsletter-content h1 {
  display: inline-block;
  background: var(--color-dark);
  color: var(--color-light);
  padding-block: 0.4em;
  padding-inline: 1em;
  border-radius: 0;
  margin-block-end: var(--s2);
}

/* Bug 114: dezente Item-Nummerierung in der Sektion „Was deine
   Welt berührt". Pre-prozessor in markdown.mjs injiziert ein
   <div class="newsletter-item-number"> mit „01", „02", … vor
   jedem Item-Paragraph in dieser Sektion. Andere Sektionen
   bleiben unnummeriert.
   Bug 115: Stil dezenter — wie die Quellen-Links am Item-Ende
   (Body-Schriftart, gedämpft, ohne typografische Auszeichnung).
   Vorher Barlow Condensed mit letter-spacing 0.1em + font-weight
   500 + color --color-mid wirkte wie eigener Anker statt
   dezenter Index. Plus margin-block-end von --s0 auf 0 reduziert,
   damit Nummer + Headline als zusammenhängender Cluster wirken
   (Adjacent-Override unten unterdrückt zusätzlich den Stack-Gap
   am ersten <p> nach der Nummer). */
.newsletter-content .newsletter-item-number {
  font-size: var(--s-1);
  color: var(--color-darkish);
  margin-block-start: var(--s2);
  margin-block-end: 0;
}

/* Erstes Item nach dem Sektion-Heading bekommt den Top-Margin
   reduziert — die h2 (mit margin-end --s0 aus Bug 105) plus
   --s2 vom Item-Number selbst ergäbe sonst eine zu große Lücke
   zwischen Heading und „01". */
.newsletter-content h2 + .newsletter-item-number {
  margin-block-start: 0;
}

/* Headline-Paragraph direkt nach der Nummer: Stack-Gap überschreiben,
   damit „01" und der **Bold-Headline** als Einheit wirken. Analog
   zu .newsletter-content h2 + p (Bug 105). */
.newsletter-content .newsletter-item-number + p {
  margin-block-start: 0;
}