/* =============================================================================
   TFOS Blog — Main Stylesheet
   The Family Office Stack
   =============================================================================
   TABLE OF CONTENTS
   1.  CSS Custom Properties (Design Tokens)
   2.  Reset & Base
   3.  Typography Base
   4.  Layout Containers
   5.  Site Header & Navigation
   6.  Single Post — Two-Column Layout
   7.  TOC Sidebar
   8.  Post Header (breadcrumb, meta, title, description, author)
   9.  Post Body Content (paragraphs, headings, lists, tables, media)
   10. CTA Banner
   11. Related Posts
   12. Post Navigation (Prev/Next)
   13. Blog Archive & Post Cards
   14. Pagination
   15. Site Footer
   16. Utility Classes
   17. Responsive — Tablet (≤1100px)
   18. Responsive — Mobile (≤768px)
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Colours */
  --color-text-primary:   #030303;
  --color-text-secondary: #1a1a1a;
  --color-text-muted:     rgba(3, 3, 3, 0.55);
  --color-text-headline:  rgba(3, 3, 3, 1);
  --color-text-desc:      rgba(3, 3, 3, 0.80);
  --color-border:         #000000;
  --color-border-light:   #e8e6f0;
  --color-white:          #ffffff;
  --color-bg-page:        #ffffff;

  /* Aurora Pastels */
  --color-blue-1:   #7EB3ED;
  --color-blue-2:   #A8C8F5;
  --color-blue-3:   #BDD4F5;
  --color-blue-4:   #C8DFFB;
  --color-peach-1:  #F5CEAA;
  --color-peach-2:  #F8DFC0;

  /* Lavender (TOC / Cards) */
  --color-lavender:       #F0EDF8;
  --color-lavender-dark:  #DDD7F0;
  --color-lavender-border:#ccc8e8;

  /* Banner defaults (overridable via PHP inline styles) */
  --banner-color1: #2563EB;
  --banner-color2: #06B6D4;
  --banner-color3: #3B82F6;

  /* Typography */
  --font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Sizes */
  --size-h1:    40px;
  --size-desc:  18px;
  --size-h2:    24px;
  --size-h3:    19px;
  --size-h4:    16px;
  --size-body:  17px;
  --size-small: 13px;
  --size-label: 11px;

  /* Line Heights */
  --lh-headline: 1.20;
  --lh-desc:     1.20;
  --lh-body:     1.72;
  --lh-heading:  1.25;

  /* Letter Spacing */
  --ls-headline: -0.03em;
  --ls-desc:     -0.02em;
  --ls-label:    0.08em;

  /* Spacing */
  --gap-sm:   16px;
  --gap-md:   32px;
  --gap-lg:   56px;
  --gap-xl:   80px;

  /* Layout */
  --container-max:       1280px;
  --container-narrow:    1040px;
  --sidebar-width:       288px;
  --signup-sidebar-width: 216px;
  --content-max:         720px;
  --header-height:       53px;   /* inspector: div.header-inner 1280×53 */

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* clip without creating scroll container — preserves position:sticky */
}

body {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Cards are <a> tags — suppress the global hover underline on all their children */
.tfos-ls-card:hover,
.tfos-ls-card:hover *,
.tfos-hp-content-card:hover,
.tfos-hp-content-card:hover *,
.provider-row:hover,
.provider-row:hover *,
.similar-card:hover,
.similar-card:hover * {
  text-decoration: none;
}
a:focus-visible {
  outline: 2px solid var(--color-blue-1);
  outline-offset: 2px;
  border-radius: 2px;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol { list-style: none; }

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY BASE
   ───────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: var(--lh-heading);
  color: var(--color-text-primary);
  font-weight: 500;
}

p { margin-bottom: 1.25em; }
p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────────────────────────────────────
   4. LAYOUT CONTAINERS
   ───────────────────────────────────────────────────────────────────────────── */
.tfos-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 40px;
}

.tfos-container-narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: 40px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. SITE HEADER & NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */
.tfos-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  height: var(--header-height);
  /* Smart sticky: slide up on scroll-down, slide back on scroll-up */
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.tfos-site-header.header-hidden {
  transform: translateY(-100%);
}

.tfos-header-inner {
  max-width: 1280px;    /* inspector: div.header-inner exactly 1280px */
  margin-inline: auto;
  padding-inline: 0;    /* no extra padding — icon+name+5links+CTA fill the full 1280px */
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Branding — icon + site name in a flex row (matches design) */
.tfos-site-branding {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.tfos-site-branding:hover { text-decoration: none; }

/* 28×28 purple icon with pulse SVG */
.tfos-nav-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, #7C6FE0 0%, #5D4FD6 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tfos-nav-icon svg { width: 14px; height: 14px; }

.tfos-site-name {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: rgb(3, 3, 3);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.tfos-site-logo img {
  height: 40px;
  width: auto;
}

/* Primary Nav — flex:1 + center links in available space */
.tfos-primary-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tfos-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  flex-wrap: nowrap; /* keep all items on one line */
}

.tfos-nav-list li a {
  display: inline-block;
  padding: 6px 12px;              /* inspector: 6px 12px */
  font-size: 13.5px;              /* inspector: 13.5px Inter */
  font-weight: 400;
  color: rgba(3, 3, 3, 0.50);    /* inspector: #03030380 */
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.tfos-nav-list li a:hover {
  color: #030303;
  background: rgba(0, 0, 0, 0.04);
  text-decoration: none;
}
.tfos-nav-list li.current-menu-item > a,
.tfos-nav-list li.current-page-ancestor > a {
  color: #030303;       /* active page: full black, no underline, slightly heavier */
  font-weight: 500;
  text-decoration: none;
  background: transparent;
}

/* Dropdown */
.tfos-nav-list li { position: relative; }

.tfos-nav-list li ul {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  min-width: 200px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  pointer-events: none;
  list-style: none;
  z-index: 200;
}
.tfos-nav-list li:hover > ul,
.tfos-nav-list li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.tfos-nav-list li ul li a {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}

/* Header Actions */
.tfos-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Mobile search form — hidden on desktop, shown only inside open mobile nav */
.tfos-mobile-search-form { display: none; }

.tfos-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  transition: background 0.15s, color 0.15s;
}
.tfos-search-toggle:hover { background: var(--color-lavender); color: var(--color-text-primary); }

.tfos-header-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;              /* inspector: 7px 16px → height ~34.8px */
  background: #030303;            /* inspector: #030303 */
  color: #ffffff;
  font-size: 13px;                /* inspector: 13px Inter */
  font-weight: 400;
  border-radius: 20px;            /* pill shape */
  transition: background 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.tfos-header-cta-btn:hover { background: #333; text-decoration: none; }

/* Mobile toggle — hidden on desktop */
.tfos-mobile-menu-toggle { display: none; }

/* Search Overlay */
.tfos-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tfos-search-overlay[hidden] { display: none; }
.tfos-search-overlay-inner {
  width: 100%;
  max-width: 600px;
  padding: 24px;
  position: relative;
}
.tfos-search-form {
  display: flex;
  gap: 12px;
}
.tfos-search-form input[type="search"] {
  flex: 1;
  padding: 14px 18px;
  font-size: 18px;
  font-family: var(--font-sans);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color 0.15s;
}
.tfos-search-form input[type="search"]:focus { border-color: var(--color-blue-1); }
.tfos-search-form button {
  padding: 0 18px;
  background: var(--color-text-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
}
.tfos-search-close {
  position: absolute;
  top: -8px;
  right: 24px;
  font-size: 20px;
  color: var(--color-text-muted);
}
.tfos-search-close:hover { color: var(--color-text-primary); }


/* ─────────────────────────────────────────────────────────────────────────────
   6. SINGLE POST — TWO-COLUMN LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */
.tfos-single-wrap {
  min-height: 60vh;
}

.tfos-single-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 40px;
  padding-top: 40px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  column-gap: 56px;
  align-items: stretch; /* sidebar stretches to article height so sticky TOC can travel */
}

/* ── Inner grid: article body + right signup sidebar ───────────────────── */
.tfos-body-signup-wrap {
  display: grid;
  grid-template-columns: 1fr var(--signup-sidebar-width);
  column-gap: 40px;
  align-items: start;
  min-width: 0;   /* prevent overflow in grid child */
}
/* When signup is hidden, collapse to a transparent single-column passthrough */
.tfos-body-signup-wrap.no-signup {
  display: contents;
}

/* Content area — no hard max-width when signup sidebar is present */
.tfos-post-content {
  min-width: 0;
}
/* Restore max-width when no signup sidebar (display:contents parent) */
.tfos-body-signup-wrap.no-signup .tfos-post-content {
  max-width: var(--content-max);
  width: 100%;
}

/* ── Signup Sidebar ─────────────────────────────────────────────────────── */
.tfos-signup-sidebar {
  min-width: 0;
}

.signup-widget {
  position: sticky;
  top: calc(var(--header-height) + 28px);
  background: linear-gradient(175deg, #EEEAF8 0%, #DDD6F3 55%, #D0C8EE 100%);
  border-radius: 10px;
  padding: 28px 22px 24px;
  overflow: hidden;
}

/* Purple accent bar along the top */
.signup-widget-accent {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #6B5CE7;
  border-radius: 10px 10px 0 0;
}

.signup-widget-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B5CE7;
  margin: 4px 0 14px;
}

.signup-widget-heading {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #030303;
  margin-bottom: 10px;
}

.signup-widget-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(3, 3, 3, 0.6);
  margin-bottom: 20px;
}

/* Form */
.signup-widget-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signup-widget-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.signup-widget-field-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(3, 3, 3, 0.55);
  letter-spacing: 0.02em;
}

.signup-widget-input {
  width: 100%;
  padding: 9px 11px;
  font-family: var(--font-sans);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(107, 92, 231, 0.22);
  border-radius: 6px;
  outline: none;
  color: #030303;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.signup-widget-input::placeholder { color: rgba(3, 3, 3, 0.35); }
.signup-widget-input:focus {
  background: #ffffff;
  border-color: #6B5CE7;
  box-shadow: 0 0 0 3px rgba(107, 92, 231, 0.12);
}

.signup-widget-submit {
  margin-top: 4px;
  width: 100%;
  padding: 11px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  background: #030303;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.signup-widget-submit:hover  { background: #222222; }
.signup-widget-submit:active { transform: translateY(1px); }

.signup-widget-micro {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: rgba(3, 3, 3, 0.4);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.01em;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. TOC SIDEBAR
   ───────────────────────────────────────────────────────────────────────────── */
.tfos-toc-sidebar {
  width: var(--sidebar-width);
}

.toc-sticky-inner {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
  background: transparent;
  padding: 24px 0 54px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-lavender-dark) transparent;
  /* Bottom fade — signals more content to scroll; hidden when at bottom */
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
}
.toc-sticky-inner.toc-fade-hidden {
  -webkit-mask-image: none;
          mask-image: none;
}
.toc-sticky-inner::-webkit-scrollbar { width: 4px; }
.toc-sticky-inner::-webkit-scrollbar-thumb { background: var(--color-lavender-dark); border-radius: 4px; }

.toc-heading {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  padding-bottom: 0;
  border-bottom: none;
}

.toc-nav { display: flex; flex-direction: column; }
.toc-loading { font-size: 13px; color: var(--color-text-muted); font-style: italic; }

/* TOC items */
.toc-item { display: flex; }

/* Section break between H2 groups */
.toc-section-break {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 8px 0;
}

/* TOC links */
.toc-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  width: 100%;
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  margin: 1px 0;
}
.toc-link:hover {
  border-left-color: rgba(107, 92, 231, 0.35);
  background: rgba(107, 92, 231, 0.05);
  color: var(--color-text-secondary);
  text-decoration: none;
}
.toc-link.is-active {
  border-left-color: #6B5CE7;
  background: rgba(107, 92, 231, 0.09);
  color: var(--color-text-primary);
  font-weight: 500;
}

.toc-link-text { flex: 1; }

/* No arrow chevron */
.toc-arrow { display: none; }

/* Indentation by heading level */
.toc-item[data-level="2"] .toc-link { padding-left: 8px; }
.toc-item[data-level="3"] .toc-link { padding-left: 20px; font-size: 12.5px; }
.toc-item[data-level="4"] .toc-link { padding-left: 32px; font-size: 12px; color: var(--color-text-muted); }
.toc-item[data-level="4"] .toc-link:hover,
.toc-item[data-level="4"] .toc-link.is-active { color: var(--color-text-secondary); }


/* ─────────────────────────────────────────────────────────────────────────────
   8. POST HEADER
   ───────────────────────────────────────────────────────────────────────────── */

/* Breadcrumb */
.tfos-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 29px; /* +5px */
  flex-wrap: wrap;
}
.breadcrumb-sep { opacity: 0.5; }
.breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumb-link:hover { color: var(--color-text-primary); text-decoration: underline; }
.breadcrumb-current {
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 360px;
}

/* Category badge + date row */
.post-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 25px; /* +5px */
}

.post-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--color-lavender-dark);
  border-radius: var(--radius-sm);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background 0.15s;
}
.post-cat-badge:hover { background: var(--color-lavender); text-decoration: none; }

.post-date {
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/* Post Title */
.post-title {
  font-family: var(--font-serif);
  font-size: var(--size-h1);
  font-weight: 500;
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline); /* -0.05em */
  color: var(--color-text-headline);
  margin-bottom: 30px; /* +10px */
}

/* Meta Description */
.post-meta-description {
  font-family: var(--font-sans);
  font-size: var(--size-desc); /* 18px */
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: var(--ls-desc); /* -0.03em */
  color: var(--color-text-desc);
  margin-bottom: 38px; /* +10px */
}

/* Author row */
.post-author-row {
  display: flex;
  align-items: center;
  margin-bottom: 29px; /* +5px */
}
.author-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.author-link:hover .author-name { text-decoration: underline; }

.author-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.author-name {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-primary);
}

/* Divider — 50% opacity, +5px space below */
.post-header-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.50);
  margin-bottom: 37px; /* +5px */
}

/* Featured image */
.post-featured-image {
  width: 100%;
  margin-bottom: 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.post-featured-image .featured-img {
  width: 100%;
  height: auto;
  display: block;
}
.featured-img-caption {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 8px 16px;
  background: var(--color-lavender);
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. POST BODY CONTENT
   ───────────────────────────────────────────────────────────────────────────── */
.post-body {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}

/* Headings within content — all -0.05em letter-spacing */
.post-body h2 {
  font-family: var(--font-serif);
  font-size: var(--size-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin-top: 52px;
  margin-bottom: 18px;
  scroll-margin-top: calc(var(--header-height) + 32px);
}

/* Section divider — draws a line above every h2 except the first.
   :not(:first-of-type) is the most reliable selector: works in Gutenberg,
   Classic editor, and any nesting level. No JS or PHP needed. */
.post-body h2:not(:first-of-type) {
  border-top: 1px solid rgba(0, 0, 0, 0.50);
  padding-top: 52px;
  margin-top: 0;
}
.post-body h3 {
  font-family: var(--font-serif);
  font-size: var(--size-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin-top: 38px;
  margin-bottom: 14px;
  scroll-margin-top: calc(var(--header-height) + 32px);
}
.post-body h4 {
  font-family: var(--font-sans);
  font-size: var(--size-h4);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: -0.03em;
  color: var(--color-text-secondary);
  margin-top: 30px;
  margin-bottom: 10px;
  scroll-margin-top: calc(var(--header-height) + 32px);
}
.post-body h5 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-top: 24px;
  margin-bottom: 8px;
  scroll-margin-top: calc(var(--header-height) + 32px);
}
.post-body h6 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 20px;
  margin-bottom: 8px;
  scroll-margin-top: calc(var(--header-height) + 32px);
}

/* Paragraphs */
.post-body p {
  margin-bottom: 1.5em;
  color: var(--color-text-primary);
}

/* Italic block quote style */
.post-body p em,
.post-body em { font-style: italic; }

/* Links */
.post-body a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-blue-1);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.post-body a:hover {
  text-decoration-color: var(--color-text-primary);
}

/* Lists */
.post-body ul,
.post-body ol {
  margin: 0 0 1.5em 0;
  padding-left: 28px;
}
.post-body ol {
  list-style: decimal;
}
/* Unordered lists — purple diamond bullet via ::before */
.post-body ul {
  list-style: none;
  padding-left: 20px;
}
.post-body ul li {
  position: relative;
  padding-left: 18px;
}
.post-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--color-purple, #6B5CE7);
  transform: rotate(45deg);
  border-radius: 1px;
  flex-shrink: 0;
}
.post-body li {
  margin-bottom: 0.5em;
  line-height: var(--lh-body);
}
.post-body li > ul,
.post-body li > ol {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

/* Blockquote */
.post-body blockquote {
  margin: 40px 0;
  padding: 28px 32px;
  background: var(--color-lavender);
  border-left: 4px solid var(--color-lavender-dark);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.post-body blockquote p {
  font-size: 18px;
  line-height: 1.65;
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}
.post-body blockquote cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 12px;
}

/* Code */
.post-body code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875em;
  background: var(--color-lavender);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

.post-body pre {
  background: #1a1a2e;
  border-radius: var(--radius-md);
  padding: 24px 28px;
  overflow-x: auto;
  margin: 32px 0;
}
.post-body pre code {
  background: none;
  padding: 0;
  font-size: 14px;
  color: #e2e8f0;
  line-height: 1.7;
}

/* ── TABLES ────────────────────────────────────────────────────────────────────
   Uses border-collapse: SEPARATE (not collapse) because:
   • border-radius + overflow:hidden only works reliably in separate mode
   • borders on <tr> are ignored in collapse mode — cells must carry borders
   • gives a proper visible frame on the last row
   Works with plain <table> and Gutenberg's <figure class="wp-block-table"><table>
   Inline styles stripped server-side via tfos_normalize_table_markup().
   ──────────────────────────────────────────────────────────────────────────── */

/* Gutenberg wraps the table in a <figure class="wp-block-table"> — give that the frame */
.post-body .wp-block-table {
  margin: 32px 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Table inside the Gutenberg figure: no duplicate outer border */
.post-body .wp-block-table table {
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
}

/* Standalone table (not inside Gutenberg figure) */
.post-body table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 32px 0;
  font-size: 15px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Header row background */
.post-body thead tr,
.post-body tr:first-child:has(th) {
  background: var(--color-lavender) !important;
}

/* Header cells — border on the CELL (not the tr), works in both separate & collapse */
.post-body th {
  padding: 14px 16px;
  text-align: left;
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted) !important;
  background: transparent !important;
  font-style: normal !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important; /* subtle header separator */
}

/* Body cells */
.post-body td {
  padding: 14px 16px;
  vertical-align: top;
  background: transparent !important;
  font-weight: 400 !important;
  color: rgba(3, 3, 3, 0.65) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--color-border-light) !important; /* row separator */
}

/* Last row: the table outer border acts as the bottom frame, cell border sits just inside it */
.post-body tbody tr:last-child td {
  border-bottom: 1px solid var(--color-border-light) !important;
}

/* First column — slightly bolder, full-darkness */
.post-body tbody td:first-child {
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
}

.post-body tbody tr:hover { background: rgba(240, 237, 248, 0.5); }

/* Font/family override — covers any remaining pasted-content styling */
.post-body table, .post-body th, .post-body td {
  font-family: var(--font-sans) !important;
  line-height: 1.55 !important;
}

/* Images within content */
.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 24px 0;
}
.post-body figure {
  margin: 32px 0;
}
.post-body figcaption {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* Horizontal rule */
.post-body hr {
  border-top: 1px solid var(--color-border-light);
  margin: 40px 0;
}

/* Section divider — after each major section */
.post-body hr.section-divider {
  border-top: 1px solid rgba(24, 24, 24, 0.40);
  margin: 52px 0 0;
}

/* Pull quote */
.post-body .pullquote {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  border-left: 4px solid rgba(24, 24, 24, 0.40);
  padding: 24px 0 24px 24px;
  margin: 40px 0;
}

/* WordPress default classes */
.post-body .wp-block-image { margin: 32px 0; }
.post-body .alignwide  { margin-inline: -40px; }
.post-body .alignfull  { margin-inline: calc(-50vw + 50%); }
.post-body .alignleft  { float: left; margin: 8px 24px 16px 0; }
.post-body .alignright { float: right; margin: 8px 0 16px 24px; }
.post-body .aligncenter { margin-inline: auto; display: block; }
.post-body::after { content: ''; display: table; clear: both; }

/* Embeds & iframes */
.post-body .wp-block-embed { margin: 32px 0; }
.post-body .wp-block-embed__wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}
.post-body .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
}

/* Post tags */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-light);
}
.post-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-lavender);
  border: 1px solid var(--color-lavender-border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.15s;
}
.post-tag:hover { background: var(--color-lavender-dark); text-decoration: none; }


/* ─────────────────────────────────────────────────────────────────────────────
   10. CTA BANNER
   ───────────────────────────────────────────────────────────────────────────── */
.tfos-cta-banner {
  max-width: calc(var(--container-max) - 80px); /* 1280 - 40×2 = 1200px, matches article content width */
  margin-inline: auto;
  padding: 64px 40px;
  margin-top: 64px;
  /* Background set inline via PHP mesh gradient */
  background: radial-gradient(ellipse at 20% 50%, #2563EB 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, #06B6D4 0%, transparent 60%),
              radial-gradient(ellipse at 50% 80%, #3B82F6 0%, transparent 60%),
              linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.cta-banner-inner {
  max-width: 680px;
}

.cta-eyebrow {
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.cta-headline {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.cta-description {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 28px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  background: var(--color-white);
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}
.cta-btn:hover {
  opacity: 0.90;
  transform: translateY(-1px);
  text-decoration: none;
}

/* Full-width banner wrappers */
.tfos-related-wrap,
.tfos-post-nav-wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 40px;
}

.tfos-related-wrap { padding-top: 64px; padding-bottom: 24px; }
.tfos-post-nav-wrap { padding-top: 8px; padding-bottom: 72px; }


/* ─────────────────────────────────────────────────────────────────────────────
   11. RELATED POSTS
   ───────────────────────────────────────────────────────────────────────────── */
/* Related posts spans the full TOC + gap + content width */
.tfos-related-posts { width: 100%; }

.related-posts-heading {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 28px;
  row-gap: 36px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. POST NAVIGATION (PREV / NEXT)
   ───────────────────────────────────────────────────────────────────────────── */
.post-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--color-border-light);
  gap: 40px;
}

.post-nav-prev,
.post-nav-next { flex: 1; }
.post-nav-next { text-align: right; }

/* Direction label: "← PREVIOUS" / "NEXT →" */
.post-nav-dir {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(3, 3, 3, 0.55);
  margin: 0 0 6px;
  text-transform: uppercase;
}

/* Post title link */
a.post-nav-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: #030303;
  text-decoration: none;
  transition: opacity 0.15s;
}
a.post-nav-title:hover {
  opacity: 0.65;
  text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. BLOG ARCHIVE & POST CARDS
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   13a. FEATURED POST HERO
   ───────────────────────────────────────────────────────────────────────────── */
.tfos-featured-wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 40px 40px 0;
}

.tfos-featured-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  transition: box-shadow 0.22s;
  text-decoration: none;
  color: inherit;
}
.tfos-featured-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.10);
}

.tfos-feat-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-lavender-dark) 0%, var(--color-blue-3) 60%, var(--color-peach-1) 100%);
}
.tfos-feat-img-fill {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.tfos-feat-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-lavender-dark) 0%, var(--color-blue-3) 60%, var(--color-peach-1) 100%);
}
.tfos-featured-card:hover .tfos-feat-img-fill { transform: scale(1.04); }

.tfos-feat-body {
  padding: 40px 44px;
  background: #fafaf9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.tfos-feat-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tfos-feat-badge {
  display: inline-flex;
  padding: 3px 9px;
  background: var(--color-lavender-dark);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--color-text-primary);
}
.tfos-feat-date,
.tfos-feat-read {
  font-size: 12px;
  color: var(--color-text-muted);
}

.tfos-feat-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.20;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.tfos-feat-desc {
  font-size: 15px;
  line-height: 1.62;
  color: var(--color-text-muted);
}

.tfos-feat-author {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
}
.tfos-feat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6B5CE7 0%, #A18AFF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.tfos-feat-author-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* Section label above grid */
.tfos-section-header {
  max-width: var(--container-max);
  margin-inline: auto;
}
.tfos-section-header-inner {
  padding: 48px 40px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tfos-section-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Archive Header */
.tfos-archive-header {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border-light);
  padding-block: 64px 52px;   /* vertical only — horizontal handled by inner */
}
.tfos-archive-header-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 40px;       /* aligns title left-edge with first card */
}

.archive-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.archive-title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
  margin-bottom: 0;
  /* Accent underline drawn via padding + pseudo element */
  position: relative;
  padding-bottom: 20px;
}
/* Brand accent line — 40px, brand purple, left-aligned under the title */
.archive-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: #6B5CE7;
  border-radius: 2px;
}
.post-nav-next .archive-title::after { left: auto; right: 0; }

.archive-description {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-secondary);
  max-width: 500px;
  line-height: 1.65;
  margin-top: 20px;
  margin-bottom: 0;
}

.archive-post-count {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Category Filter Bar */
.tfos-cat-filter-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: var(--header-height);
  z-index: 50;
}
.tfos-cat-filter-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 52px;
}
.tfos-cat-filter-inner::-webkit-scrollbar { display: none; }

.cat-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.cat-filter-btn:hover { background: var(--color-lavender); color: var(--color-text-primary); text-decoration: none; }
.cat-filter-btn.is-active {
  background: var(--color-text-primary);
  color: var(--color-white);
}
.cat-filter-btn.is-active:hover { opacity: 0.85; }

/* Archive Body */
.tfos-archive-body {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 48px 40px 80px;
}

/* Posts Grid */
.tfos-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 36px;
  margin-bottom: 56px;
}

/* No-posts state */
.tfos-no-posts {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
}
.tfos-no-posts p {
  font-size: 17px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}
.btn-primary {
  display: inline-flex;
  padding: 10px 24px;
  background: var(--color-text-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.8; text-decoration: none; }

/* Post Card */
.tfos-post-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}
.tfos-post-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.post-card-thumb-link { display: block; overflow: hidden; }
.post-card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--color-lavender);
  overflow: hidden;
}
.post-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
  display: block;
}
.tfos-post-card:hover .post-card-img { transform: scale(1.03); }
.post-card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-lavender) 0%, var(--color-blue-4) 100%);
}

.post-card-body {
  padding: 22px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.card-cat-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 9px;
  background: var(--color-lavender-dark);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background 0.15s;
}
.card-cat-badge:hover { background: var(--color-lavender); text-decoration: none; }

.post-card-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.28;
  margin: 0;
}
.post-card-title-link {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: opacity 0.15s;
}
.post-card-title-link:hover { opacity: 0.75; text-decoration: none; }

.post-card-excerpt {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-light);
}

.card-author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-author-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50%;
  object-fit: cover;
}
.card-author-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
}
.card-date {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. PAGINATION
   ───────────────────────────────────────────────────────────────────────────── */
.tfos-pagination {
  display: flex;
  justify-content: center;
}
.tfos-pagination .page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.tfos-pagination .page-numbers li a,
.tfos-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tfos-pagination .page-numbers li a:hover {
  background: var(--color-lavender);
  border-color: var(--color-lavender-border);
  color: var(--color-text-primary);
  text-decoration: none;
}
.tfos-pagination .page-numbers li span.current {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-white);
}
.tfos-pagination .page-numbers li span.dots {
  border: none;
  background: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. SITE FOOTER
   ───────────────────────────────────────────────────────────────────────────── */
.tfos-site-footer {
  background: var(--color-text-primary);
  color: var(--color-white);
  padding: 64px 0 0;
}

.tfos-footer-inner {
  max-width: var(--container-max, 1280px);
  margin-inline: auto;
  padding-inline: 48px;
}

/* Footer Brand */
.tfos-footer-brand {
  margin-bottom: 48px;
}
.footer-logo img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.footer-site-name {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
}
.footer-description {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.60);
  max-width: 420px;
  line-height: 1.65;
  margin-top: 12px;
}

/* Footer Widgets */
.tfos-footer-widgets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 32px;
}

.footer-widget-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
  margin-bottom: 16px;
}

.footer-widget a,
.footer-col-links a {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  padding: 3px 0;
  transition: color 0.15s;
}
.footer-widget a:hover,
.footer-col-links a:hover { color: var(--color-white); text-decoration: none; }
.footer-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Footer Bottom */
.tfos-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}
.footer-nav { }
.footer-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav-list li a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}
.footer-nav-list li a:hover { color: var(--color-white); text-decoration: none; }


/* ─────────────────────────────────────────────────────────────────────────────
   16. UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────────────── */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--color-blue-1);
  clip: auto !important;
  clip-path: none;
  color: var(--color-text-primary);
  display: block;
  font-size: 14px;
  font-weight: 400;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  word-wrap: normal;
  z-index: 9999;
}


/* ─────────────────────────────────────────────────────────────────────────────
   17. RESPONSIVE — TABLET (≤ 1100px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root {
    --sidebar-width: 240px;
    --size-h1: 40px;
    --size-desc: 22px;
    --size-h2: 28px;
    --size-h3: 23px;
  }

  .tfos-single-container {
    column-gap: 36px;
    padding-inline: 28px;
  }

  /* On tablet, collapse the signup widget into a bottom banner below the article */
  .tfos-body-signup-wrap {
    grid-template-columns: 1fr;
  }
  .tfos-signup-sidebar {
    display: none;   /* hide on tablet — show only on desktop */
  }

  .tfos-posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .related-posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .tfos-footer-widgets {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Featured hero — tablet */
  .tfos-featured-wrap { padding: 24px 24px 0; }
  .tfos-feat-body { padding: 28px 32px; }
  .tfos-feat-title { font-size: 20px; }
  .tfos-section-header-inner { padding: 36px 24px 20px; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   17b. TABLE SCROLL WRAPPER (mobile-friendly horizontal scroll)
   ───────────────────────────────────────────────────────────────────────────── */
.tfos-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tfos-table-scroll table {
  min-width: 540px;   /* force horizontal scroll on narrow screens */
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. RESPONSIVE — MOBILE (≤ 768px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
    --size-h1: 32px;
    --size-desc: 18px;
    --size-h2: 24px;
    --size-h3: 20px;
    --size-h4: 18px;
  }

  /* Header mobile */
  .tfos-primary-nav { display: none; }
  .tfos-primary-nav.is-open {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    z-index: 99;
    padding: 24px;
    overflow-y: auto;
  }
  .tfos-nav-list { flex-direction: column; align-items: flex-start; }
  .tfos-nav-list li { width: 100%; }
  .tfos-nav-list li a { display: block; width: 100%; padding: 12px 16px; font-size: 17px; }
  .tfos-nav-list li ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; margin-left: 16px; }

  /* Mobile search bar inside nav */
  .tfos-mobile-search-form {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 20px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .tfos-mobile-search-form input[type="search"] {
    flex: 1;
    padding: 12px 16px;
    font-size: 15px;
    font-family: var(--font-sans);
    border: none;
    outline: none;
    background: var(--color-lavender);
    color: var(--color-text-primary);
  }
  .tfos-mobile-search-form button {
    padding: 12px 14px;
    background: var(--color-lavender);
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
  }
  .tfos-mobile-search-form button:hover { color: var(--color-text-primary); }

  .tfos-mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    margin-left: auto;
  }
  .hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
  }
  .tfos-mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .tfos-mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
  .tfos-mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hide search toggle and CTA on mobile — search lives inside the menu */
  .tfos-header-actions .tfos-header-cta-btn { display: none; }
  .tfos-header-actions .tfos-search-toggle { display: none; }

  /* Single post: stack sidebar above content */
  .tfos-single-container {
    grid-template-columns: 1fr;
    padding-inline: 20px;
    row-gap: 0;
  }

  /* TOC becomes collapsible accordion on mobile */
  .tfos-toc-sidebar { width: 100%; margin-bottom: 32px; }
  .toc-sticky-inner {
    position: static;
    max-height: none;
  }
  .toc-heading {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .toc-heading::after {
    content: '▾';
    font-size: 14px;
    transition: transform 0.2s;
  }
  .toc-heading.is-open::after { transform: rotate(180deg); }
  .toc-nav {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .toc-nav.is-open { display: flex; }

  .tfos-post-content { max-width: 100%; padding-bottom: 48px; }

  /* Post header */
  .tfos-breadcrumb { font-size: 12px; margin-bottom: 16px; }
  .post-meta-row { gap: 10px; margin-bottom: 16px; }
  .post-title { font-size: 26px; line-height: 1.22; margin-bottom: 20px; }
  .post-meta-description { font-size: 16px; line-height: 1.55; margin-bottom: 28px; }
  .post-author-row { margin-bottom: 22px; }
  .post-header-divider { margin-bottom: 24px; }

  /* Featured hero — mobile (stack image above body) */
  .tfos-featured-wrap { padding: 20px 20px 0; }
  .tfos-featured-card { grid-template-columns: 1fr; }
  .tfos-feat-img { aspect-ratio: 16/9; }
  .tfos-feat-body { padding: 24px 24px; gap: 12px; }
  .tfos-feat-title { font-size: 19px; }
  .tfos-section-header-inner { padding: 32px 20px 16px; }

  /* Featured image — contained with padding, no bleed */
  .post-featured-image {
    border-radius: var(--radius-md);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 28px;
    width: 100%;
  }

  /* Post body */
  .post-body { font-size: 16px; }
  .post-body p { margin-bottom: 20px; }
  .post-body h2 { font-size: 20px; margin-top: 36px; margin-bottom: 14px; }
  .post-body h2:not(:first-of-type) { padding-top: 36px; margin-top: 0; }
  .post-body h3 { font-size: 17px; margin-top: 28px; margin-bottom: 10px; }
  .post-body h4 { font-size: 15px; margin-top: 22px; }
  .post-body ul, .post-body ol { padding-left: 20px; }
  .post-body blockquote { padding: 4px 0 4px 16px; margin: 24px 0; }

  /* Pull quote */
  .post-body .pullquote {
    font-size: 17px;
    padding: 16px 0 16px 18px;
    margin: 28px 0;
  }

  /* Section divider */
  .section-divider { margin: 32px 0 0; }

  /* Tables — horizontal scroll on mobile */
  .post-body table {
    font-size: 13px;
    margin: 24px 0;
  }
  /* Scrollable wrapper added server-side via tfos_table_scroll_wrapper() */
  .tfos-table-scroll {
    margin: 0 -20px;        /* bleed to edges on mobile for max table width */
    padding: 0 20px;
    width: calc(100% + 40px);
    box-sizing: border-box;
  }
  .post-body th { padding: 8px 12px; }
  .post-body td { padding: 10px 12px; }

  /* Archive */
  .tfos-archive-header { padding-block: 48px 40px; }
  .tfos-archive-header-inner { padding-inline: 20px; }
  .tfos-archive-body { padding: 32px 20px 60px; }
  .tfos-cat-filter-inner { padding-inline: 20px; }
  .tfos-posts-grid { grid-template-columns: 1fr; gap: 20px; }

  .related-posts-grid { grid-template-columns: 1fr; gap: 16px; }

  .tfos-related-wrap,
  .tfos-post-nav-wrap { padding-inline: 20px; }

  .tfos-cta-banner { padding: 48px 24px; border-radius: var(--radius-lg); }
  .cta-headline { font-size: 26px; }

  .tfos-footer-widgets { grid-template-columns: 1fr; gap: 32px; }
  .tfos-footer-inner { padding-inline: 20px; }
  .tfos-footer-bottom { flex-direction: column; align-items: flex-start; }

  .post-nav { flex-wrap: wrap; gap: 12px; }
  .post-nav-next { flex: none; }

  .tfos-container,
  .tfos-container-narrow { padding-inline: 20px; }

  .post-body .alignwide { margin-inline: -20px; }
}

@media (max-width: 480px) {
  :root {
    --size-h1: 28px;
    --size-desc: 16px;
  }

  .post-title { font-size: 22px; }
  .post-meta-description { font-size: 15px; }
  .post-body { font-size: 15px; }
  .post-body h2 { font-size: 18px; }
  .post-body h3 { font-size: 16px; }
  .post-body .pullquote { font-size: 16px; }
  .cta-headline { font-size: 22px; }

  .tfos-single-container { padding-inline: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LANDSCAPE — Provider Directory
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Landscape archive header ─────────────────────────────────────────────── */
.tfos-landscape-header { background: #fff; }

/* ── Provider grid ────────────────────────────────────────────────────────── */
.tfos-providers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 40px;
  padding-block: 40px 0;
}

/* ── Provider card ────────────────────────────────────────────────────────── */
.tfos-provider-card {
  background: #EDE9F7;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tfos-provider-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(107, 92, 231, 0.13);
}

.provider-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Logo area */
.provider-card-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 28px 24px 20px;
  background: #EDE9F7;
}
.provider-card-logo {
  max-height: 52px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
}
.provider-card-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: rgba(107, 92, 231, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.provider-card-logo-placeholder span {
  font-size: 26px;
  font-weight: 600;
  color: #6B5CE7;
  font-family: var(--font-serif);
}

/* Card body */
.provider-card-body {
  padding: 0 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.provider-card-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  color: #030303;
  margin: 0;
  line-height: 1.3;
}
.provider-card-location {
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(3, 3, 3, 0.48);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Service type badges on card */
.provider-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.provider-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #4b3eb5;
  background: rgba(107, 92, 231, 0.12);
  border-radius: 4px;
  padding: 3px 7px;
  text-decoration: none;
  transition: background 0.15s;
}
.provider-badge:hover {
  background: rgba(107, 92, 231, 0.22);
}
.provider-badge--more {
  color: rgba(3, 3, 3, 0.4);
  background: rgba(3, 3, 3, 0.06);
}

/* Tagline */
.provider-card-tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(3, 3, 3, 0.65);
  line-height: 1.5;
  margin: 4px 0 0;
}

/* ── Single Provider page ─────────────────────────────────────────────────── */
.tfos-provider-single { background: #fff; }

/* Hero */
.tfos-provider-hero {
  background: #EDE9F7;
  padding-block: 48px 40px;
  border-bottom: 1px solid rgba(107, 92, 231, 0.12);
}
.provider-breadcrumb {
  margin-bottom: 28px;
}
.provider-breadcrumb a {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(3, 3, 3, 0.5);
  text-decoration: none;
  transition: color 0.15s;
}
.provider-breadcrumb a:hover { color: #6B5CE7; }

.provider-hero-inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.provider-hero-logo-wrap {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 12px;
}
.provider-hero-logo {
  max-width: 72px;
  max-height: 72px;
  object-fit: contain;
}
.provider-hero-logo-placeholder {
  width: 72px;
  height: 72px;
  background: rgba(107, 92, 231, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.provider-hero-logo-placeholder span {
  font-size: 32px;
  font-weight: 600;
  color: #6B5CE7;
  font-family: var(--font-serif);
}

.provider-hero-meta { flex: 1; min-width: 0; }

.provider-hero-name {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  color: #030303;
  margin: 0 0 8px;
  line-height: 1.15;
}
.provider-hero-tagline {
  font-family: var(--font-sans);
  font-size: 16px;
  color: rgba(3, 3, 3, 0.65);
  margin: 0 0 16px;
  line-height: 1.5;
}
.provider-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.provider-hero-badges .provider-badge {
  font-size: 11px;
  padding: 4px 10px;
}
.provider-website-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

/* Body grid */
.tfos-provider-body {
  padding-block: 48px 64px;
}
.provider-body-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

/* Sections */
.provider-section {
  margin-bottom: 40px;
}
.provider-section-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(3, 3, 3, 0.45);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e6f0;
}

/* Strengths / Limitations */
.provider-sl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.provider-sl-col {
  border-radius: 10px;
  padding: 20px 22px;
}
.provider-sl-col--strengths { background: #F0FDF4; border: 1px solid #BBF7D0; }
.provider-sl-col--limitations { background: #FFFBEB; border: 1px solid #FDE68A; }

.provider-sl-heading {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #030303;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.provider-sl-icon {
  font-style: normal;
  opacity: 0.7;
}
.provider-sl-list {
  margin: 0;
  padding-left: 18px;
}
.provider-sl-list li {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(3, 3, 3, 0.75);
  line-height: 1.6;
  margin-bottom: 6px;
}

/* Info sidebar card */
.provider-info-card {
  background: #F9F8FD;
  border: 1px solid #E8E4F5;
  border-radius: 12px;
  padding: 24px;
  position: sticky;
  top: calc(var(--header-height) + 24px);
}
.provider-info-card-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(3, 3, 3, 0.4);
  margin: 0 0 16px;
}
.provider-info-list { margin: 0; }
.provider-info-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  padding-block: 10px;
  border-bottom: 1px solid #E8E4F5;
}
.provider-info-row:last-child { border-bottom: none; }
.provider-info-row dt {
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(3, 3, 3, 0.45);
  font-weight: 500;
  padding-top: 1px;
}
.provider-info-row dd {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #030303;
  margin: 0;
  line-height: 1.5;
}
.provider-info-link {
  color: #6B5CE7;
  text-decoration: none;
  font-size: 13px;
  word-break: break-all;
}
.provider-info-link:hover { text-decoration: underline; }
.provider-reviewed-date {
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(3, 3, 3, 0.35);
  margin: 14px 0 0;
  text-align: right;
}

/* ── Taxonomy archive pages (client_fit / region) reuse same layout ───────── */
.tfos-landscape-wrap .tfos-archive-body { padding-bottom: 64px; }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Landscape
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .tfos-providers-grid { grid-template-columns: repeat(2, 1fr); }
  .provider-body-grid { grid-template-columns: 1fr; }
  .provider-info-card { position: static; }
}

@media (max-width: 680px) {
  .tfos-providers-grid {
    grid-template-columns: 1fr;
    padding-inline: 20px;
  }
  .provider-hero-inner { flex-direction: column; gap: 20px; }
  .provider-sl-grid { grid-template-columns: 1fr; }
  .provider-hero-name { font-size: 28px; }
}