/* =========================================================
   SINGLE POST (single.php)
   New page (no design hand-off file to port)  every value below comes
   from assets/css/base/tokens.css, per BRAND-IDENTITY.md §3.

   Scoping: every rule is anchored to .single-post  see BRAND-IDENTITY.md §2.
   ========================================================= */

.single-post, .single-post * { box-sizing: border-box; }
.single-post a { color: inherit; text-decoration: none; }
.single-post svg { display: block; }

/* ---------------- shared: eyebrow-style breadcrumb ---------------- */
.single-post .crumb {
  max-width: 720px;
  margin: 0 auto var(--fm-space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--fm-space-2);
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-11-5);
  letter-spacing: 0.5px;
  color: var(--fm-cream-dim);
}
.single-post .crumb a { transition: color var(--fm-duration-fast) var(--fm-ease); }
.single-post .crumb a:hover { color: var(--fm-gold-light); }
.single-post .crumb .sep { color: var(--fm-cream-dim); opacity: 0.5; }
.single-post .crumb .here {
  color: var(--fm-gold-light);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- hero (dark band) ---------------- */
.single-post .post-hero {
  background: var(--fm-black);
  padding: var(--fm-space-9) 72px;
  text-align: center;
}
.single-post .post-hero--with-media { padding-bottom: calc(var(--fm-space-9) + 72px); }

.single-post .post-hero-cat {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid var(--fm-gold);
  border-radius: var(--fm-radius-pill);
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-10-5);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fm-gold-light);
  margin-bottom: var(--fm-space-5);
  transition: background var(--fm-duration-fast) var(--fm-ease), color var(--fm-duration-fast) var(--fm-ease);
}
.single-post .post-hero-cat:hover { background: #000000; border-color: #000000; color: #ffffff; }

.single-post .post-hero-title {
  max-width: 820px;
  margin: 0 auto var(--fm-space-6);
  font-family: var(--fm-font-serif);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.25;
  color: var(--fm-headline-light);
}

.single-post .post-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--fm-space-3);
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-13);
  color: var(--fm-cream-dim);
}
.single-post .post-hero-author { display: flex; align-items: center; gap: var(--fm-space-2); color: var(--fm-cream); }
.single-post .post-hero-author img { width: 28px; height: 28px; border-radius: var(--fm-radius-circle); border: 1px solid var(--fm-hairline-dark); }
.single-post .post-hero-meta .dot { color: var(--fm-gold); opacity: 0.6; }

/* ---------------- featured image  overlaps the hero's bottom edge ---------------- */
.single-post .post-hero-media {
  max-width: 900px;
  margin: -72px auto 0;
  padding: 0 24px;
}
.single-post .post-hero-media-inner {
  aspect-ratio: 16 / 9;
  border-radius: var(--fm-radius-lg);
  overflow: hidden;
  box-shadow: var(--fm-shadow-mega);
  background: var(--fm-surface-warm-hi);
}
.single-post .post-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------- body wrap ---------------- */
.single-post .post-body-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--fm-space-9) 24px 0;
}

/* prose  the real post_content, styled generically since its markup
   comes from the block/classic editor rather than theme templates */
.single-post .post-body {
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-16);
  line-height: 1.85;
  color: var(--fm-ink);
}
.single-post .post-body > * + * { margin-top: var(--fm-space-5); }
.single-post .post-body h2 {
  font-family: var(--fm-font-serif);
  font-weight: 700;
  font-size: var(--fm-text-24);
  line-height: 1.35;
  color: var(--fm-ink);
  margin-top: var(--fm-space-8);
}
.single-post .post-body h3 {
  font-family: var(--fm-font-serif);
  font-weight: 700;
  font-size: var(--fm-text-21);
  line-height: 1.4;
  color: var(--fm-ink);
  margin-top: var(--fm-space-7);
}
.single-post .post-body h4 {
  font-family: var(--fm-font-sans);
  font-weight: 600;
  font-size: var(--fm-text-16);
  color: var(--fm-ink);
  margin-top: var(--fm-space-6);
}
.single-post .post-body a {
  color: var(--fm-gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--fm-outline-warm);
  transition: text-decoration-color var(--fm-duration-fast) var(--fm-ease);
}
.single-post .post-body a:hover { text-decoration-color: var(--fm-gold-deep); }
.single-post .post-body strong { color: var(--fm-ink-strong); font-weight: 600; }
.single-post .post-body ul,
.single-post .post-body ol { padding-left: 22px; }
.single-post .post-body li + li { margin-top: var(--fm-space-2); }
.single-post .post-body blockquote {
  padding: var(--fm-space-2) 0 var(--fm-space-2) var(--fm-space-6);
  border-left: 2px solid var(--fm-gold);
  font-family: var(--fm-font-serif);
  font-style: italic;
  font-size: var(--fm-text-19);
  line-height: 1.6;
  color: var(--fm-ink-mute);
}
.single-post .post-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fm-radius-lg);
}
.single-post .post-body figure { margin: 0; }
.single-post .post-body figcaption {
  margin-top: var(--fm-space-2);
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-12-5);
  font-style: italic;
  color: var(--fm-ink-faint);
  text-align: center;
}
.single-post .post-body hr { border: none; border-top: 1px solid var(--fm-divider-card); margin: var(--fm-space-8) 0; }

/* tags */
.single-post .post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fm-space-2);
  margin-top: var(--fm-space-8);
  padding-top: var(--fm-space-7);
  border-top: 1px solid var(--fm-divider-card);
}
.single-post .post-tags a {
  padding: 6px 14px;
  border: 1px solid var(--fm-divider-card);
  border-radius: var(--fm-radius-pill);
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-11-5);
  color: var(--fm-ink-mute);
  transition: border-color var(--fm-duration-fast) var(--fm-ease), color var(--fm-duration-fast) var(--fm-ease);
}
.single-post .post-tags a:hover { border-color: var(--fm-gold); color: var(--fm-gold-deep); }

/* author box */
.single-post .post-author-box {
  display: flex;
  gap: var(--fm-space-5);
  margin-top: var(--fm-space-7);
  padding: var(--fm-space-6);
  background: var(--fm-surface-warm-hi);
  border: 1px solid var(--fm-divider-card);
  border-radius: var(--fm-radius-lg);
}
.single-post .post-author-box img { width: 56px; height: 56px; border-radius: var(--fm-radius-circle); flex-shrink: 0; }
.single-post .post-author-label {
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-10-5);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fm-gold-deep);
  margin-bottom: 4px;
}
.single-post .post-author-name {
  font-family: var(--fm-font-serif);
  font-weight: 700;
  font-size: var(--fm-text-16);
  color: var(--fm-ink);
  margin-bottom: 6px;
}
.single-post .post-author-bio { font-family: var(--fm-font-sans); font-size: var(--fm-text-13-5); line-height: 1.7; color: var(--fm-ink-mute); }

/* prev/next nav */
.single-post .post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fm-space-5);
  margin-top: var(--fm-space-7);
  padding-bottom: var(--fm-space-9);
}
.single-post .post-nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--fm-space-2);
  padding: var(--fm-space-5);
  border: 1px solid var(--fm-divider-card);
  border-radius: var(--fm-radius-lg);
  transition: border-color var(--fm-duration-fast) var(--fm-ease), box-shadow var(--fm-duration-fast) var(--fm-ease);
}
.single-post .post-nav-link:hover { border-color: var(--fm-gold); box-shadow: var(--fm-shadow-card-hover); }
.single-post .post-nav-next { text-align: right; align-items: flex-end; }
.single-post .post-nav-dir {
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-10-5);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fm-gold-deep);
}
.single-post .post-nav-title { font-family: var(--fm-font-serif); font-weight: 700; font-size: var(--fm-text-14); color: var(--fm-ink); line-height: 1.4; }

/* related posts */
.single-post .post-related {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px var(--fm-space-9);
}
.single-post .post-related h2 {
  text-align: center;
  font-family: var(--fm-font-serif);
  font-weight: 700;
  font-size: var(--fm-text-24);
  color: var(--fm-ink);
  margin-bottom: var(--fm-space-7);
}
.single-post .post-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fm-space-7);
}
.single-post .post-related-card {
  border: 1px solid var(--fm-divider-card);
  border-radius: var(--fm-radius-lg);
  overflow: hidden;
  transition: border-color var(--fm-duration-base) var(--fm-ease), box-shadow var(--fm-duration-base) var(--fm-ease), transform var(--fm-duration-base) var(--fm-ease);
}
.single-post .post-related-card:hover {
  border-color: var(--fm-gold);
  box-shadow: var(--fm-shadow-card-hover);
  transform: translateY(-4px);
}
.single-post .post-related-media { display: block; aspect-ratio: 4 / 3; background: var(--fm-surface-warm-hi); }
.single-post .post-related-media img { width: 100%; height: 100%; object-fit: cover; }
.single-post .post-related-media-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, var(--fm-grad-thumb-1) 0%, var(--fm-grad-thumb-2) 55%, var(--fm-grad-thumb-3) 100%);
}
.single-post .post-related-body { padding: var(--fm-space-5); }
.single-post .post-related-date {
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-10-5);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fm-ink-faint);
}
.single-post .post-related-body h3 {
  margin-top: var(--fm-space-2);
  font-family: var(--fm-font-serif);
  font-weight: 700;
  font-size: var(--fm-text-16);
  line-height: 1.4;
  color: var(--fm-ink);
}
.single-post .post-related-body h3 a:hover { color: var(--fm-gold-deep); }

@media (max-width: 980px) {
  .single-post .post-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .single-post .post-hero { padding-left: 32px; padding-right: 32px; }
  .single-post .post-hero-media { margin-top: -48px; }
  .single-post .post-nav { grid-template-columns: 1fr; }
  .single-post .post-nav-next { text-align: left; align-items: flex-start; }
}
@media (max-width: 620px) {
  .single-post .post-hero { padding-left: 20px; padding-right: 20px; }
  .single-post .post-body-wrap { padding-left: 20px; padding-right: 20px; }
  .single-post .post-related { padding-left: 20px; padding-right: 20px; }
  .single-post .post-related-grid { grid-template-columns: 1fr; }
  .single-post .post-author-box { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   LIGHT THEME  scoped to .single-post, see page-about.css's own
   light-theme block for the pattern this follows.
   ========================================================= */
html[data-theme="light"] .single-post {
  --fm-black: #ffffff;
  --fm-cream: #000000;
  --fm-cream-dim: #656565;
  --fm-headline-light: #000000;
  --fm-hairline-dark: rgba(0, 0, 0, 0.1);
  --fm-gold-pale: #C9A236;
  --fm-gold-light: #C9A236;
}
/* .post-hero-cat uses --fm-black for dark text ON a solid gold hover
   fill, not as a panel background, so it stays dark rather than
   following the flip above  same reasoning as header.css's .ph-badge. */
html[data-theme="light"] .single-post .post-hero-cat:hover { color: #ffffff; }