/* ─── Foundation Kit — CONTENT-ONLY component CSS ──────────────────────────
   Minimal, brand-neutral styling for the AEO/GEO answer components the
   content machinery emits. Contains NO nav, header, footer, hero, grid,
   button, badge, trust-bar, page-template, or @font-face rules — it cannot
   alter an existing site's skin or layout.

   Composition:
     1) fk-aeo.css verbatim  → .fk-lead / .fk-faq-answer / .fk-last-updated
     2) 5 .k-yt-facade rules lifted from global.css (YouTube facade visuals;
        the facade wrapper's aspect-ratio is inline in the emitted HTML)
     3) OPTIONAL .fk-author-box family (dormant until author meta is set) —
        carries two FK brand tokens flagged below; recolor or delete per site.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. AEO answer components (from fk-aeo.css, verbatim) ──────────────── */

/* 40-word answer lead — readable emphasis directly under the H1 (AEO #1). */
.fk-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 500;
  color: #1f2937;
  max-width: 70ch;
  margin: 0 0 1.5em;
}

/* FAQ answer block — comfortable reading measure under each question. */
.fk-faq-answer {
  font-size: 1rem;
  line-height: 1.7;
  color: #374151;
  max-width: 70ch;
  margin: 0 0 1.25em;
}

/* Last-updated meta line — small, muted, unobtrusive (AEO #5). */
.fk-last-updated {
  font-size: 0.9em;
  color: #6b7280;
}

.fk-last-updated-wrap {
  margin: 0 0 1.5em;
}

/* ── 2. YouTube click-to-load facade (from global.css, verbatim) ──────── */

.k-yt-facade { position: absolute; inset: 0; cursor: pointer; background: #000; border-radius: 12px; overflow: hidden; }
.k-yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; display: block; }
.k-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; background: #ff0000; border: none; border-radius: 12px; cursor: pointer; transition: background .15s, transform .15s; }
.k-yt-facade:hover .k-yt-play { background: #cc0000; transform: translate(-50%, -50%) scale(1.08); }
.k-yt-play::after { content: ''; display: block; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #fff; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); }

/* ── 3. OPTIONAL author box (from global.css) ─────────────────────────────
   Renders ONLY on single posts whose author has a WP bio set. Dormant on a
   fresh install (no author meta populated), so it does not touch existing
   pages. FLAG — two FK brand tokens below; per site either recolor to the
   site accent or delete this whole section if author boxes are not used:
       * accent color  #f48830   (label text, headshot ring)
       * font-family    'Plus Jakarta Sans'  (falls back to system-ui)
   Delete this section entirely to opt out. ────────────────────────────── */
.fk-author-box { float: right; width: 250px; margin: 4px 0 28px 32px; padding: 28px 22px; background: #f8f9fb; border: 1px solid rgba(0,0,0,.06); border-radius: 16px; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }
.fk-author-box-photo { margin-bottom: 16px; }
.fk-author-box-photo img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(244,136,48,.15); display: block; }
.fk-author-box-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #f48830; margin-bottom: 8px; line-height: 1; }
.fk-author-box-name { font-size: 17px; font-weight: 800; color: #58595b; margin-bottom: 10px; line-height: 1.3; }
.fk-author-box-bio { font-size: 13px; line-height: 1.7; color: #6b7280; margin-bottom: 16px; }
.fk-author-box-linkedin, .entry-content a.fk-author-box-linkedin { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0a66c2 !important; text-decoration: none !important; transition: all .2s ease; }
.fk-author-box-linkedin:hover, .entry-content a.fk-author-box-linkedin:hover { color: #004182 !important; }
.fk-author-box-linkedin svg { flex-shrink: 0; }
@media (max-width: 768px) {
  .fk-author-box { float: none; width: 100%; margin: 0 0 28px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 22px 20px; }
  .fk-author-box-photo { margin-bottom: 0; order: 1; }
  .fk-author-box-photo img { width: 56px; height: 56px; }
  .fk-author-box-label { width: 100%; order: 0; margin-bottom: 10px; }
  .fk-author-box-name { order: 2; flex: 1; margin-bottom: 0; }
  .fk-author-box-bio { width: 100%; order: 3; margin-top: 12px; }
  .fk-author-box-linkedin { order: 4; }
}