/* ============================================================================
   4founder redesign — page CSS for route "post" (blog single article)
   HAND-WRITTEN companion to Template/redesign/pages/single-post.php. The
   design project has no single-post template, so this file is NOT generated
   by tools/redesign-port/extract.mjs (and never overwritten by it).
   Loaded only on this route; shared rules live in ../base.css, palette/scale
   vars in ../tokens.css.

   Scoping: everything is route-scoped under body.ff-redesign.ff-route-post,
   except the .ff-article typographic scale, which scopes under
   body.ff-redesign .ff-article (the class only exists on this template).
   ============================================================================ */

/* ── hover rules (must beat inline style="") — ffh numbering intentionally
      mirrors blog.css: ffh-2 article card, ffh-3 CTA primary, ffh-4 CTA
      outline. blog.css's ffh-1 (listing filter chips) has no counterpart on
      this page and is omitted. ──────────────────────────────────────────────── */
body.ff-redesign.ff-route-post .ffh-2:hover{transform:translateY(-5px) !important;box-shadow:var(--ff-shadow-lift) !important}
body.ff-redesign.ff-route-post .ffh-3:hover{transform:translateY(-2px) !important;background:var(--ff-brand-deep) !important}
body.ff-redesign.ff-route-post .ffh-4:hover{border-color:#a8d6ff !important;color:var(--ff-brand-deep) !important;background:#f5fbff !important}

/* ── .ff-article — typographic scale for the_content() output ─────────────── */
body.ff-redesign .ff-article {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ff-text);
  overflow-wrap: break-word;
}
body.ff-redesign .ff-article > :first-child { margin-top: 0; }
body.ff-redesign .ff-article > :last-child { margin-bottom: 0; }

body.ff-redesign .ff-article p {
  margin: 0 0 1.35em;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ff-text);
}

body.ff-redesign .ff-article h2 {
  margin: 2em 0 0.7em;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ff-heading);
}
body.ff-redesign .ff-article h3 {
  margin: 1.7em 0 0.6em;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ff-heading);
}
body.ff-redesign .ff-article h4 {
  margin: 1.5em 0 0.5em;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ff-heading);
}

body.ff-redesign .ff-article a {
  color: var(--ff-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.ff-redesign .ff-article a:hover { color: var(--ff-brand-deep); }

body.ff-redesign .ff-article ul,
body.ff-redesign .ff-article ol {
  margin: 0 0 1.35em;
  padding-left: 1.4em;
}
body.ff-redesign .ff-article li { margin: 0.45em 0; line-height: 1.65; }
body.ff-redesign .ff-article li > ul,
body.ff-redesign .ff-article li > ol { margin-bottom: 0; }

/* Covers plain <blockquote> and Gutenberg's .wp-block-quote alike. */
body.ff-redesign .ff-article blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  border-left: 3px solid var(--ff-brand);
  border-radius: 0 1rem 1rem 0;
  background: var(--ff-bg-tint);
  font-style: normal;
}
body.ff-redesign .ff-article blockquote p { margin: 0; }
body.ff-redesign .ff-article blockquote p + p { margin-top: 0.8em; }
body.ff-redesign .ff-article blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: 0.88rem;
  font-style: normal;
  color: var(--ff-text-muted);
}

body.ff-redesign .ff-article img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid var(--ff-border);
}

body.ff-redesign .ff-article figure { margin: 1.8em 0; }
body.ff-redesign .ff-article figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--ff-text-muted);
  text-align: center;
}

body.ff-redesign .ff-article table {
  width: 100%;
  margin: 1.8em 0;
  border-collapse: collapse;
  font-size: 0.98rem;
}
body.ff-redesign .ff-article th,
body.ff-redesign .ff-article td {
  padding: 10px 14px;
  border: 1px solid var(--ff-border);
  text-align: left;
  vertical-align: top;
}
body.ff-redesign .ff-article thead th {
  background: var(--ff-bg-tint);
  font-weight: 700;
  color: var(--ff-heading);
}

body.ff-redesign .ff-article hr {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--ff-border);
}

body.ff-redesign .ff-article strong { color: var(--ff-heading); }

/* ── Common WP editor classes, minimal ────────────────────────────────────── */
body.ff-redesign .ff-article .wp-block-image { margin: 1.8em 0; }

/* Classic-editor alignments (the existing posts predate the block editor). */
body.ff-redesign .ff-article img.aligncenter,
body.ff-redesign .ff-article .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
body.ff-redesign .ff-article .alignleft { float: left; margin: 0.4em 1.4em 1em 0; }
body.ff-redesign .ff-article .alignright { float: right; margin: 0.4em 0 1em 1.4em; }

/* Wide/full blocks break out of the 860px measure up to the 1000px mid width. */
body.ff-redesign .ff-article .alignwide,
body.ff-redesign .ff-article .alignfull {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, calc(100vw - 40px));
  max-width: none;
}

/* ── Post bodies that ship their own component CSS ────────────────────────
   The blog articles embed a <style> block scoped to .ff-blogartikel (boxed
   "Kurzantwort" / closing panel / graphic captions). Those component rules
   are (0,2,0)/(0,2,1) and therefore LOSE to the generic .ff-article element
   rules above (0,2,2), so the generic defaults leak into the components:

   R5-3 #10 — the dark panels paint themselves and let their children inherit
   the panel colour. The generic p/h2 colour blocked that inheritance and drew
   the copy in the light-surface body colour instead: 1.17:1 in .ff-kurzantwort
   (#24313d on #0f3d5e) and 1.10:1 in .ff-abschluss (#24313d on #1c2a3a).

   R5-3 #28 — .ff-grafik-caption (margin-top:18px) and .ff-disclaimer
   (margin-top:26px) lost their top margin to the generic p margin shorthand,
   so both boxes sat flush against the block above them with no gap.

   Re-raise the component layer above the generic defaults. The values mirror
   the embedded sheet, so the components render as their author intended. */
body.ff-redesign .ff-article .ff-blogartikel :is(.ff-kurzantwort, .ff-abschluss) :is(h2, h3, h4, p, strong) {
  color: inherit;                    /* panel colour, #fff: 11.4:1 / 14.6:1 */
}
body.ff-redesign .ff-article .ff-blogartikel .ff-abschluss p {
  color: rgba(255, 255, 255, 0.92);  /* 12.5:1 */
}
body.ff-redesign .ff-article .ff-blogartikel .ff-abschluss .ff-disclaimer {
  color: rgba(255, 255, 255, 0.8);   /* 9.8:1 */
  margin-top: 26px;
}
body.ff-redesign .ff-article .ff-blogartikel .ff-grafik-caption { margin-top: 18px; }

/* Body links. Same clash, third symptom: the generic `.ff-article a` rule painted
   every in-article link in --ff-brand (#0a8dff), which is 3.35:1 on white and fails
   AA — about 15 links per article. The post's own sheet asks for --ff-blue (#0f3d5e,
   8.9:1) and defines that token itself, so this hands the decision back to the
   article instead of overriding it. Buttons keep their own colours. */
body.ff-redesign .ff-article .ff-blogartikel a:not(.ff-button) {
  color: var(--ff-blue, #0f3d5e);
}

/* Secondary buttons on a LIGHT surface. `.ff-secondary` is authored for the dark
   closing panel — white text on rgba(255,255,255,0.12) — and reads 9.95:1 there.
   Dropped into a light `.ff-panel` the same rule composites to white on white:
   1:1, i.e. an invisible call to action ("Geschäftsadresse prüfen" and
   "Dienstleistungen für Gründer prüfen" on /einzelunternehmen-gruenden-ahv-
   selbstaendigkeit/). Give the light surface a readable default and re-assert the
   author's treatment inside the dark panel, so the mistake cannot recur in a new
   article either. */
body.ff-redesign .ff-article .ff-blogartikel .ff-button.ff-secondary {
  /* !important on the colour only: the article's embedded sheet sets
     `.ff-blogartikel .ff-button { color: var(--ff-white) !important }`, which no
     amount of specificity can outrank. Background and border need no flag. */
  color: var(--ff-blue, #0f3d5e) !important;   /* 8.9:1 on the white panel */
  background: #ffffff;
  border: 1px solid #cfe0f2;
}
body.ff-redesign .ff-article .ff-blogartikel .ff-abschluss .ff-button.ff-secondary {
  /* Also !important, and deliberately so: the light-surface rule above needs the
     flag to beat the article's own `color: var(--ff-white) !important`, and a
     flagged declaration outranks an unflagged one whatever the specificity — so
     without a flag here the light colour would follow the button INTO the dark
     panel and make it 1.14:1. Between two flagged declarations specificity
     decides again, and .ff-abschluss adds the class that wins. */
  color: #ffffff !important;               /* 9.95:1 over the dark panel */
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* !important: must beat the meta row's inline gap/font-size. */
  body.ff-redesign.ff-route-post .ff-post-meta {
    gap: 6px 10px !important;
    font-size: 0.85rem !important;
  }
  body.ff-redesign .ff-article blockquote { padding: 14px 16px; }
  /* Wide tables scroll inside the article instead of clipping. */
  body.ff-redesign .ff-article table {
    display: block;
    overflow-x: auto;
  }
}