/* =============================================================================
   FD Single Post
   =============================================================================
   Styling for individual blog post pages. Covers:

     - Post hero (featured image, title, meta, excerpt)
     - Mobile article gutters
     - Body headings (h2, h3, h4, etc) with accent rule treatment
     - Body links with bottom-border underlines
     - Media and captions
     - Integrated editorial lists (ordered and unordered)
     - SimpleTOC plugin table-of-contents styling
     - Pull quotes, blockquotes, custom callouts (.fd-callout etc)
     - Code and tables
     - Scriptless social sharing block
   ============================================================================= */


/* =============================================================================
   1. Post hero — featured image and title area
   =============================================================================
   Note: H1 typography settings are left to Salient's theme options to control
   site-wide. Only colour overrides here.
   ============================================================================= */

body.single-post .featured-media-under-header,
body.single-post .featured-media-under-header__content {
  color: var(--fd-text);
}

body.single-post .featured-media-under-header h1,
body.single-post .featured-media-under-header .entry-title {
  color: var(--fd-text-strong) !important;
}

body.single-post .featured-media-under-header__meta-wrap,
body.single-post .featured-media-under-header__meta-wrap a,
body.single-post .featured-media-under-header__excerpt {
  color: var(--fd-text-muted) !important;
}

/* Category badge in the hero */
body.single-post .featured-media-under-header__cat-wrap .meta-category a {
  color: var(--fd-bg) !important;
  background: var(--fd-accent) !important;
}

/* Slight desaturation on the featured image for editorial feel */
body.single-post .featured-media-under-header__featured-media img {
  filter: saturate(0.92) contrast(1.04);
}


/* -----------------------------------------------------------------------------
   Mobile article gutters — proper edge padding on small screens
   ----------------------------------------------------------------------------- */

@media only screen and (max-width: 999px) {
  body.single-post article.post .content-inner,
  body.single-post .featured-media-under-header__content {
    padding-left: var(--fd-mobile-gutter) !important;
    padding-right: var(--fd-mobile-gutter) !important;
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 690px) {
  body.single-post article.post .content-inner,
  body.single-post .featured-media-under-header__content {
    padding-left: var(--fd-mobile-gutter-small) !important;
    padding-right: var(--fd-mobile-gutter-small) !important;
  }
}


/* =============================================================================
   2. Body headings — H2/H3 with accent rule below H2
   ============================================================================= */

body.single-post article.post .content-inner h2.wp-block-heading,
body.single-post article.post .content-inner h2 {
  position: relative;

  margin-top: clamp(48px, 6vw, 76px) !important;
  margin-bottom: 22px !important;
  padding-bottom: 16px !important;

  color: var(--fd-text-strong) !important;

  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

/* Small fading rule below every H2 */
body.single-post article.post .content-inner h2.wp-block-heading::after,
body.single-post article.post .content-inner h2::after {
  content: "";
  display: block;

  width: 54px;
  height: 1px;

  margin-top: 16px;

  background: linear-gradient(
    90deg,
    var(--fd-accent),
    rgba(196, 152, 107, 0)
  );
  opacity: 0.95;
}


body.single-post article.post .content-inner h3.wp-block-heading,
body.single-post article.post .content-inner h3 {
  margin-top: clamp(34px, 4.5vw, 56px) !important;
  margin-bottom: 16px !important;

  color: var(--fd-text-strong) !important;

  line-height: 1.16 !important;
  letter-spacing: -0.026em !important;
}

body.single-post article.post .content-inner h4,
body.single-post article.post .content-inner h5,
body.single-post article.post .content-inner h6 {
  color: var(--fd-text-strong) !important;
}


/* Tighter spacing when H2 follows another content block */
body.single-post article.post .content-inner figure + h2,
body.single-post article.post .content-inner p + h2,
body.single-post article.post .content-inner ul + h2,
body.single-post article.post .content-inner ol + h2,
body.single-post article.post .content-inner blockquote + h2 {
  margin-top: clamp(56px, 7vw, 88px) !important;
}

body.single-post article.post .content-inner h2 + p {
  margin-top: 0 !important;
}

@media only screen and (max-width: 690px) {
  body.single-post article.post .content-inner h2.wp-block-heading,
  body.single-post article.post .content-inner h2 {
    margin-top: 46px !important;
    margin-bottom: 20px !important;
    padding-bottom: 14px !important;
    line-height: 1.12 !important;
  }

  body.single-post article.post .content-inner h2.wp-block-heading::after,
  body.single-post article.post .content-inner h2::after {
    width: 42px;
    margin-top: 14px;
  }
}


/* =============================================================================
   3. Body links — underline accent style
   ============================================================================= */

body.single-post article.post .content-inner a {
  color: var(--fd-accent-strong) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--fd-accent-line);
  box-shadow: none !important;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease;
}

body.single-post article.post .content-inner a:hover,
body.single-post article.post .content-inner a:focus {
  color: var(--fd-text-strong) !important;
  border-bottom-color: rgba(240, 236, 228, 0.72);
}

/* Don't underline image links, button links, share links */
body.single-post article.post .content-inner figure a,
body.single-post article.post .content-inner .wp-block-button a,
body.single-post article.post .content-inner .scriptlesssocialsharing a {
  border-bottom: none !important;
}


/* =============================================================================
   4. Media — figures and captions
   ============================================================================= */

body.single-post article.post .content-inner figure {
  margin-top: clamp(26px, 3.5vw, 44px) !important;
  margin-bottom: clamp(30px, 4vw, 52px) !important;
}

body.single-post article.post .content-inner figure img {
  border-radius: 0 !important;
  filter: saturate(0.94) contrast(1.03);
}

body.single-post article.post .content-inner figcaption,
body.single-post article.post .content-inner .wp-caption-text {
  color: var(--fd-text-soft) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  margin-top: 10px !important;
}


/* =============================================================================
   5. Editorial lists — bullets become accent rules, numbers get serif treatment
   ============================================================================= */

body.single-post article.post .content-inner ul.wp-block-list,
body.single-post article.post .content-inner ol.wp-block-list {
  position: relative;

  margin: clamp(24px, 3vw, 38px) 0 clamp(30px, 3.5vw, 46px) 0 !important;
  padding: 0 !important;

  color: var(--fd-text);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  list-style: none !important;
  list-style-type: none !important;
}

body.single-post article.post .content-inner ol.wp-block-list {
  counter-reset: fd-editorial-counter !important;
}

body.single-post article.post .content-inner ul.wp-block-list li,
body.single-post article.post .content-inner ol.wp-block-list li {
  position: relative;

  margin: 0 !important;
  padding: 0 0 0 44px !important;

  color: var(--fd-text) !important;
  font-size: clamp(16px, 1.05vw, 18px) !important;
  line-height: 1.68 !important;

  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
}

body.single-post article.post .content-inner ul.wp-block-list li:not(:last-child),
body.single-post article.post .content-inner ol.wp-block-list li:not(:last-child) {
  margin-bottom: 16px !important;
}

/* Suppress default list markers */
body.single-post article.post .content-inner ul.wp-block-list li::marker,
body.single-post article.post .content-inner ol.wp-block-list li::marker {
  content: "" !important;
  color: transparent !important;
  font-size: 0 !important;
}


/* Custom bullet — fading accent rule */
body.single-post article.post .content-inner ul.wp-block-list > li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.86em;

  width: 18px;
  height: 1px;

  background: linear-gradient(
    90deg,
    var(--fd-accent),
    rgba(196, 152, 107, 0.2)
  );
}


/* Custom number — leading-zero serif treatment */
body.single-post article.post .content-inner ol.wp-block-list > li {
  counter-increment: fd-editorial-counter;
}

body.single-post article.post .content-inner ol.wp-block-list > li::before {
  content: counter(fd-editorial-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.18em;

  color: var(--fd-accent);
  font-size: 0.72em;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 600;

  border-bottom: 1px solid rgba(196, 152, 107, 0.55);
  padding-bottom: 5px;
}


/* Subtle divider line between list items */
body.single-post article.post .content-inner ul.wp-block-list > li:not(:last-child)::after,
body.single-post article.post .content-inner ol.wp-block-list > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 44px;
  right: 0;
  bottom: -8px;

  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(196, 152, 107, 0.18),
    rgba(196, 152, 107, 0)
  );
}


/* Inline formatting inside list items */
body.single-post article.post .content-inner ul.wp-block-list li strong,
body.single-post article.post .content-inner ol.wp-block-list li strong {
  color: var(--fd-text-strong) !important;
  font-weight: 600;
}

body.single-post article.post .content-inner ul.wp-block-list li code,
body.single-post article.post .content-inner ol.wp-block-list li code {
  color: var(--fd-text-strong);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.12em 0.38em;
  border-radius: 4px;
}


/* -----------------------------------------------------------------------------
   Nested lists — smaller, muted
   ----------------------------------------------------------------------------- */

body.single-post article.post .content-inner li > ul.wp-block-list,
body.single-post article.post .content-inner li > ol.wp-block-list {
  margin: 14px 0 4px 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  list-style: none !important;
  list-style-type: none !important;
}

body.single-post article.post .content-inner li > ul.wp-block-list li,
body.single-post article.post .content-inner li > ol.wp-block-list li {
  padding-left: 34px !important;
  font-size: 0.96em !important;
  line-height: 1.55 !important;
  color: var(--fd-text-muted) !important;

  list-style: none !important;
  list-style-type: none !important;
}

body.single-post article.post .content-inner li > ul.wp-block-list > li::before {
  left: 5px;
  top: 0.86em;
  width: 13px;
  height: 1px;
  background: rgba(196, 152, 107, 0.72);
  box-shadow: none;
}

body.single-post article.post .content-inner li > ol.wp-block-list {
  counter-reset: fd-editorial-sub-counter !important;
}

body.single-post article.post .content-inner li > ol.wp-block-list > li {
  counter-increment: fd-editorial-sub-counter;
}

body.single-post article.post .content-inner li > ol.wp-block-list > li::before {
  content: counter(fd-editorial-sub-counter);
  left: 2px;
  top: 0.24em;

  color: rgba(196, 152, 107, 0.82);
  font-size: 0.72em;
  border-bottom: none;
  padding-bottom: 0;
}

/* No dividers between nested list items */
body.single-post article.post .content-inner li > ul.wp-block-list > li::after,
body.single-post article.post .content-inner li > ol.wp-block-list > li::after {
  display: none !important;
}


/* Tighten spacing when list follows a heading */
body.single-post article.post .content-inner h2 + ul.wp-block-list,
body.single-post article.post .content-inner h2 + ol.wp-block-list,
body.single-post article.post .content-inner h3 + ul.wp-block-list,
body.single-post article.post .content-inner h3 + ol.wp-block-list {
  margin-top: 18px !important;
}


@media only screen and (max-width: 690px) {
  body.single-post article.post .content-inner ul.wp-block-list,
  body.single-post article.post .content-inner ol.wp-block-list {
    margin: 24px 0 34px 0 !important;
    padding-left: 0 !important;
  }

  body.single-post article.post .content-inner ul.wp-block-list li,
  body.single-post article.post .content-inner ol.wp-block-list li {
    padding-left: 36px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  body.single-post article.post .content-inner ul.wp-block-list > li:not(:last-child)::after,
  body.single-post article.post .content-inner ol.wp-block-list > li:not(:last-child)::after {
    left: 36px;
  }
}


/* =============================================================================
   6. SimpleTOC — table-of-contents plugin styling
   =============================================================================
   Treats the TOC as a connected unit — title + list joined visually, with
   shared accent border and background panel.
   ============================================================================= */

body.single-post article.post .content-inner h2.simpletoc-title {
  position: relative !important;

  margin: clamp(32px, 4vw, 56px) 0 0 0 !important;
  padding:
    clamp(24px, 3vw, 34px)
    clamp(22px, 3vw, 34px)
    0
    clamp(22px, 3vw, 34px) !important;

  color: var(--fd-accent) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    ) !important;

  border: 1px solid rgba(196, 152, 107, 0.22) !important;
  border-bottom: none !important;
  border-left: 1px solid rgba(196, 152, 107, 0.58) !important;

  box-shadow:
    var(--fd-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;

  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Suppress the standard H2 accent rule on TOC title */
body.single-post article.post .content-inner h2.simpletoc-title::after {
  display: none !important;
  content: none !important;
}


body.single-post article.post .content-inner ol.simpletoc-list,
body.single-post article.post .content-inner ul.simpletoc-list {
  position: relative !important;

  margin: 0 0 clamp(34px, 4vw, 60px) 0 !important;
  padding:
    18px
    clamp(22px, 3vw, 34px)
    clamp(24px, 3vw, 34px)
    clamp(22px, 3vw, 34px) !important;

  color: var(--fd-text) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    ) !important;

  border: 1px solid rgba(196, 152, 107, 0.22) !important;
  border-top: none !important;
  border-left: 1px solid rgba(196, 152, 107, 0.58) !important;

  box-shadow:
    var(--fd-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;

  list-style: none !important;
  list-style-type: none !important;
  counter-reset: fd-toc-counter !important;
}

/* Thin separator between TOC title and list */
body.single-post article.post .content-inner h2.simpletoc-title + ol.simpletoc-list::before,
body.single-post article.post .content-inner h2.simpletoc-title + ul.simpletoc-list::before {
  content: "";
  display: block;

  width: 100%;
  height: 1px;

  margin-bottom: 18px;

  background: linear-gradient(
    90deg,
    rgba(196, 152, 107, 0.36),
    rgba(196, 152, 107, 0)
  );
}

body.single-post article.post .content-inner ol.simpletoc-list > li,
body.single-post article.post .content-inner ul.simpletoc-list > li {
  position: relative !important;

  margin: 0 !important;
  padding: 0 0 0 34px !important;

  color: var(--fd-text) !important;
  list-style: none !important;
  list-style-type: none !important;

  counter-increment: fd-toc-counter;
}

body.single-post article.post .content-inner ol.simpletoc-list > li:not(:last-child),
body.single-post article.post .content-inner ul.simpletoc-list > li:not(:last-child) {
  margin-bottom: 12px !important;
}

body.single-post article.post .content-inner ol.simpletoc-list > li::marker,
body.single-post article.post .content-inner ul.simpletoc-list > li::marker {
  content: "" !important;
  color: transparent !important;
  font-size: 0 !important;
}

body.single-post article.post .content-inner ol.simpletoc-list > li::before,
body.single-post article.post .content-inner ul.simpletoc-list > li::before {
  content: counter(fd-toc-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.28em;

  color: var(--fd-accent);
  font-size: 0.68em;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Suppress inherited list dividers */
body.single-post article.post .content-inner ol.simpletoc-list > li::after,
body.single-post article.post .content-inner ul.simpletoc-list > li::after {
  display: none !important;
  content: none !important;
}


/* TOC links */
body.single-post article.post .content-inner ol.simpletoc-list a,
body.single-post article.post .content-inner ul.simpletoc-list a {
  color: var(--fd-text-strong) !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;

  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.45 !important;
  font-weight: 500;
  letter-spacing: -0.01em;

  opacity: 0.88;

  transition:
    opacity 160ms ease,
    color 160ms ease;
}

body.single-post article.post .content-inner ol.simpletoc-list a:hover,
body.single-post article.post .content-inner ul.simpletoc-list a:hover {
  color: var(--fd-accent-strong) !important;
  opacity: 1;
}


/* Nested TOC items */
body.single-post article.post .content-inner ol.simpletoc-list li ol,
body.single-post article.post .content-inner ol.simpletoc-list li ul,
body.single-post article.post .content-inner ul.simpletoc-list li ol,
body.single-post article.post .content-inner ul.simpletoc-list li ul {
  margin-top: 10px !important;
  padding-left: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  list-style: none !important;
  counter-reset: fd-toc-sub-counter !important;
}

body.single-post article.post .content-inner ol.simpletoc-list li li,
body.single-post article.post .content-inner ul.simpletoc-list li li {
  padding-left: 28px !important;
  counter-increment: fd-toc-sub-counter;
}

body.single-post article.post .content-inner ol.simpletoc-list li li::before,
body.single-post article.post .content-inner ul.simpletoc-list li li::before {
  content: counter(fd-toc-sub-counter);
  color: rgba(196, 152, 107, 0.72);
}


@media only screen and (max-width: 690px) {
  body.single-post article.post .content-inner h2.simpletoc-title {
    margin-top: 28px !important;
    padding:
      22px
      20px
      0
      20px !important;
  }

  body.single-post article.post .content-inner ol.simpletoc-list,
  body.single-post article.post .content-inner ul.simpletoc-list {
    margin-bottom: 36px !important;
    padding:
      16px
      20px
      24px
      20px !important;
  }

  body.single-post article.post .content-inner ol.simpletoc-list > li,
  body.single-post article.post .content-inner ul.simpletoc-list > li {
    padding-left: 32px !important;
  }
}


/* =============================================================================
   7. Editorial callouts and pull quotes
   =============================================================================
   Shared treatment for blockquotes, WordPress quote blocks, and custom
   callout divs (.fd-callout, .fd-key-takeaway, .fd-note).
   ============================================================================= */

body.single-post article.post .content-inner blockquote,
body.single-post article.post .content-inner .wp-block-quote,
body.single-post article.post .content-inner .fd-callout,
body.single-post article.post .content-inner .fd-key-takeaway,
body.single-post article.post .content-inner .fd-note {
  position: relative;

  margin: clamp(34px, 4vw, 60px) 0 !important;
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3.4vw, 44px) !important;

  color: var(--fd-text) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    ) !important;

  border: 1px solid rgba(196, 152, 107, 0.22) !important;
  border-left: 1px solid rgba(196, 152, 107, 0.58) !important;

  box-shadow:
    var(--fd-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}


/* Large decorative quote mark on blockquotes only */
body.single-post article.post .content-inner blockquote::before,
body.single-post article.post .content-inner .wp-block-quote::before {
  content: "\201C";
  position: absolute;
  top: 10px;
  right: 24px;

  color: rgba(196, 152, 107, 0.22);
  font-size: clamp(72px, 9vw, 130px);
  line-height: 1;
}


body.single-post article.post .content-inner blockquote p,
body.single-post article.post .content-inner .wp-block-quote p,
body.single-post article.post .content-inner .fd-callout p,
body.single-post article.post .content-inner .fd-key-takeaway p,
body.single-post article.post .content-inner .fd-note p {
  color: var(--fd-text-strong) !important;
  font-size: clamp(19px, 1.35vw, 25px) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.025em;
  margin-bottom: 0 !important;
}


body.single-post article.post .content-inner blockquote cite,
body.single-post article.post .content-inner .wp-block-quote cite {
  display: block;
  margin-top: 18px;

  color: var(--fd-accent) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
}


/* Custom callout labels — set via ::before content */
body.single-post article.post .content-inner .fd-callout::before,
body.single-post article.post .content-inner .fd-key-takeaway::before,
body.single-post article.post .content-inner .fd-note::before {
  display: block;
  margin-bottom: 14px;

  color: var(--fd-accent);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

body.single-post article.post .content-inner .fd-callout::before {
  content: "Dragon Note";
}

body.single-post article.post .content-inner .fd-key-takeaway::before {
  content: "Key Takeaway";
}

body.single-post article.post .content-inner .fd-note::before {
  content: "Note";
}


/* =============================================================================
   8. Code and tables
   ============================================================================= */

body.single-post article.post .content-inner code {
  font-family: var(--fd-font-mono);
  color: var(--fd-text-strong);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.12em 0.38em;
  border-radius: 4px;
}

body.single-post article.post .content-inner pre {
  font-family: var(--fd-font-mono);
  color: var(--fd-text);
  background: #0d0d0d !important;
  border: 1px solid var(--fd-line);
  padding: 22px !important;
  overflow: auto;
}

body.single-post article.post .content-inner pre code {
  background: transparent;
  border: none;
  padding: 0;
}


/* =============================================================================
   8b. Tables
   =============================================================================
   Design:
   - Table background matches page background (no box effect)
   - Subtle banded rows using a slightly-lifted background for alternating rows
   - Header row uses accent ochre + small uppercase treatment for structure
   - Thin accent rule at the top of the table, softer rule at the bottom
   - No vertical borders — keeps the editorial register
   - Horizontal scroll on mobile (cleaner than reflow)

   The .fd-table-wrap wrapper is added automatically to every post table by
   the fd_wrap_tables filter in functions.php — no manual HTML editing.
   ============================================================================= */

body.single-post article.post .content-inner .fd-table-wrap {
  /* Wrapper allows horizontal scroll without affecting the table styling */
  width: 100%;
  margin: clamp(28px, 4vw, 52px) 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* If wrapped, the table itself loses its outer margin (the wrapper has it) */
body.single-post article.post .content-inner .fd-table-wrap table {
  margin: 0 !important;
}


/* =============================================================================
   Table base — replaces the existing table styling in single-post.css
   ============================================================================= */

body.single-post article.post .content-inner table {
  width: 100%;
  margin: clamp(28px, 4vw, 52px) 0 !important;

  background: var(--fd-bg);
  color: var(--fd-text);

  border-collapse: collapse;
  border-spacing: 0;

  /* Thin accent rule at top, softer rule at bottom */
  border-top: 1px solid var(--fd-accent-line);
  border-bottom: 1px solid var(--fd-line);

  /* Slightly tighter line-height than body text — tables are scannable */
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
}


/* =============================================================================
   Header row — small uppercase accent, slightly emphasised
   ============================================================================= */

body.single-post article.post .content-inner thead {
  background: transparent;
}

body.single-post article.post .content-inner thead tr {
  background: transparent !important;
}

body.single-post article.post .content-inner th {
  padding: 14px 18px;

  /* Accent colour, uppercase, slightly smaller — signals "this is structure" */
  color: var(--fd-accent) !important;
  font-size: 0.72em !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;

  /* Soft line below the header */
  border-bottom: 1px solid var(--fd-accent-line);
  background: transparent;
}


/* =============================================================================
   Body rows — banded alternating backgrounds
   =============================================================================
   The banding is subtle. The eye can track across a row without losing place,
   but the rows don't compete with the surrounding content.
   ============================================================================= */

body.single-post article.post .content-inner tbody tr {
  background: var(--fd-bg);
  transition: background 160ms ease-out;
}

/* Alternating row — slightly lifted */
body.single-post article.post .content-inner tbody tr:nth-child(even) {
  background: var(--fd-bg-card);
}

/* Optional: subtle hover state — helps readers track when reading a row */
body.single-post article.post .content-inner tbody tr:hover {
  background: var(--fd-bg-card-hover);
}


/* =============================================================================
   Cells — comfortable padding, readable text
   ============================================================================= */

body.single-post article.post .content-inner td {
  padding: 14px 18px;

  color: var(--fd-text);
  vertical-align: top;

  /* Very subtle horizontal lines between rows — only show if banding isn't
     enough on its own. Comment out if the banding alone reads cleanly. */
  border-bottom: 1px solid var(--fd-line-soft);
}

body.single-post article.post .content-inner tbody tr:last-child td {
  border-bottom: none;
}


/* -----------------------------------------------------------------------------
   Inline content inside cells — strong text, code, links inherit properly
   ----------------------------------------------------------------------------- */

body.single-post article.post .content-inner td strong {
  color: var(--fd-text-strong);
  font-weight: 600;
}

body.single-post article.post .content-inner td code {
  /* Slightly more contrast against the alternating row colour */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}


/* =============================================================================
   Mobile — slightly tighter, horizontal scroll if wrapper present
   ============================================================================= */

@media only screen and (max-width: 690px) {

  body.single-post article.post .content-inner .fd-table-wrap {
    /* Visible scroll indicator on mobile — a thin shadow on the right edge
       hints that the table extends beyond the viewport */
    position: relative;
  }

  body.single-post article.post .content-inner .fd-table-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(31, 29, 26, 0),
      var(--fd-bg)
    );
    opacity: 0.7;
  }

  body.single-post article.post .content-inner table {
    font-size: 13px;
  }

  body.single-post article.post .content-inner th,
  body.single-post article.post .content-inner td {
    padding: 11px 14px;
    /* On mobile, prevent text wrapping so the table maintains its structure
       and the user can scroll horizontally to read fully */
    white-space: nowrap;
  }
}


/* =============================================================================
   9. Scriptless social sharing block
   ============================================================================= */

body.single-post article.post .content-inner .scriptlesssocialsharing {
  margin-bottom: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(24px, 3vw, 36px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.single-post article.post .content-inner .scriptlesssocialsharing__heading {
  color: var(--fd-text-soft) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
}

body.single-post article.post .content-inner .scriptlesssocialsharing__buttons a.button {
  background: transparent !important;
  color: var(--fd-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

body.single-post article.post .content-inner .scriptlesssocialsharing__buttons a.button:hover {
  color: var(--fd-bg) !important;
  border-color: var(--fd-accent) !important;
  background: var(--fd-accent) !important;
}