/* ==========================================================================
   SFDC FALCON — DESIGN SYSTEM  (assets/css/theme.css)
   --------------------------------------------------------------------------
   One shared stylesheet, no build step. Loaded by includes/header.php on
   every top-level page, AFTER Bootstrap so these rules win where they overlap.

   HOW TO USE / EXTEND
   - All raw values (colors, spacing, radii, shadows, fonts) live as CSS
     variables in :root below. New sections should ONLY use the variables,
     never hard-coded hex values — that keeps future sections consistent.
   - Component classes are prefixed "fx-" (falcon) so they can never collide
     with Bootstrap classes used elsewhere on the site.
   - To build a new homepage section, copy this skeleton:

       <section class="fx-section" id="my-section">
         <div class="container">
           <div class="fx-section-head">
             <p class="fx-eyebrow">Small label</p>
             <h2 class="fx-title">Section title</h2>
             <p class="fx-subtitle">One-line supporting text.</p>
           </div>
           ...cards / content...
         </div>
       </section>

     Add class "fx-section--alt" for the tinted alternating background.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand color scale — "night flight": deep navy ink + electric sky blue
     (Salesforce family) + falcon orange as the warm accent. */
  --fx-ink-900: #0a0f1e;   /* darkest navy — hero & footer background   */
  --fx-ink-800: #111832;   /* raised dark surface                        */
  --fx-ink-700: #1c2547;   /* dark borders / hover                       */
  --fx-blue-600: #0176d3;  /* Salesforce blue — primary actions          */
  --fx-blue-700: #0b5cab;  /* primary hover                              */
  --fx-sky-400: #38bdf8;   /* electric sky — gradients, dark-bg accents  */
  --fx-violet-400: #818cf8;/* secondary gradient stop                    */
  --fx-orange-500: #ff5d2d;/* falcon orange — eyebrows, tags, sparks     */
  --fx-amber-400: #fbbf24; /* small highlights (stars, badges)           */

  /* Neutral surfaces & text (light theme content area) */
  --fx-surface-0: #f6f8fc; /* page background                            */
  --fx-surface-1: #ffffff; /* cards                                      */
  --fx-surface-2: #eef2f9; /* tinted alt-section background              */
  --fx-border:   #e3e8f2;  /* hairline borders                           */
  --fx-text-900: #101828;  /* headings                                   */
  --fx-text-600: #475069;  /* body                                       */
  --fx-text-400: #7a8299;  /* muted / meta                               */

  /* Text on dark surfaces */
  --fx-on-dark:       #eef2ff;
  --fx-on-dark-muted: #a5b0d0;

  /* Typography */
  --fx-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --fx-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing scale (use these instead of arbitrary px) */
  --fx-space-1: 0.25rem;
  --fx-space-2: 0.5rem;
  --fx-space-3: 0.75rem;
  --fx-space-4: 1rem;
  --fx-space-5: 1.5rem;
  --fx-space-6: 2rem;
  --fx-space-7: 3rem;
  --fx-space-8: 4.5rem;

  /* Radius & shadows */
  --fx-radius-sm: 10px;
  --fx-radius-md: 16px;
  --fx-radius-lg: 24px;
  --fx-radius-pill: 999px;
  --fx-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --fx-shadow-md: 0 6px 16px -6px rgba(16, 24, 40, .12);
  --fx-shadow-lg: 0 24px 48px -16px rgba(16, 24, 40, .22);
  --fx-shadow-glow: 0 0 0 1px rgba(56, 189, 248, .25), 0 8px 32px -8px rgba(1, 118, 211, .45);

  /* Signature gradient (headline highlights, underlines, buttons) */
  --fx-gradient: linear-gradient(110deg, var(--fx-sky-400), var(--fx-violet-400));

  /* Motion */
  --fx-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. GLOBAL BASE (applies site-wide)
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--fx-font-body);
  background: var(--fx-surface-0);
  color: var(--fx-text-600);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--fx-text-900); }

::selection { background: rgba(56, 189, 248, .35); }

/* Visible focus for keyboard users — never remove */
:focus-visible {
  outline: 3px solid var(--fx-sky-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   .fx-btn          base
   .fx-btn--primary solid Salesforce-blue
   .fx-btn--glow    gradient CTA for dark backgrounds
   .fx-btn--ghost   outline for dark backgrounds
   -------------------------------------------------------------------------- */
.fx-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--fx-font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: .8rem 1.6rem;
  border-radius: var(--fx-radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .2s var(--fx-ease), box-shadow .2s var(--fx-ease), background-color .2s;
}
.fx-btn:hover { transform: translateY(-2px); }

.fx-btn--primary {
  background: var(--fx-blue-600);
  color: #fff;
  box-shadow: var(--fx-shadow-md);
}
.fx-btn--primary:hover { background: var(--fx-blue-700); color: #fff; }

.fx-btn--glow {
  background: var(--fx-gradient);
  color: var(--fx-ink-900);
  box-shadow: var(--fx-shadow-glow);
}
.fx-btn--glow:hover { color: var(--fx-ink-900); filter: brightness(1.06); }

.fx-btn--ghost {
  background: rgba(255, 255, 255, .04);
  color: var(--fx-on-dark);
  border-color: rgba(165, 176, 208, .35);
}
.fx-btn--ghost:hover { color: #fff; border-color: var(--fx-sky-400); background: rgba(56, 189, 248, .08); }

/* --------------------------------------------------------------------------
   4. NAVBAR  (includes/navbar.php — shared by all top-level pages)
   Bootstrap handles the collapse behaviour; this restyles the shell.
   -------------------------------------------------------------------------- */
.fx-nav {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fx-border);
  padding-top: .55rem;
  padding-bottom: .55rem;
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow .25s var(--fx-ease);
}
.fx-nav.is-scrolled { box-shadow: var(--fx-shadow-md); }

.fx-nav .navbar-brand img { height: 46px; width: auto; }

.fx-nav .nav-link {
  font-family: var(--fx-font-display);
  font-weight: 500;
  color: var(--fx-text-900);
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  border-radius: var(--fx-radius-pill);
  transition: color .2s, background-color .2s;
}
.fx-nav .nav-link:hover,
.fx-nav .nav-link:focus { color: var(--fx-blue-600); background: var(--fx-surface-2); }

.fx-nav .dropdown-menu {
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  box-shadow: var(--fx-shadow-lg);
  padding: .5rem;
  margin-top: .5rem;
}
.fx-nav .dropdown-item {
  border-radius: var(--fx-radius-sm);
  padding: .55rem .9rem;
  font-weight: 500;
  color: var(--fx-text-600);
}
.fx-nav .dropdown-item:hover { background: var(--fx-surface-2); color: var(--fx-blue-600); }

/* Highlighted nav CTA (Resume Builder) */
.fx-nav .fx-nav-cta {
  background: var(--fx-ink-900);
  color: #fff !important;
  margin-left: .5rem;
}
.fx-nav .fx-nav-cta:hover { background: var(--fx-blue-600); }

@media (max-width: 991.98px) {
  .fx-nav .fx-nav-cta { margin-left: 0; display: inline-block; margin-top: .25rem; }
}

/* Compat shim: guide pages (apex.php etc.) have a sticky sidebar with top:0 —
   offset it below the now-sticky navbar. `body` prefix out-specifies the
   page's inline .sidebar-accordion rule. */
body .sidebar-accordion {
  top: 72px;
  height: calc(100vh - 72px);
}

/* --------------------------------------------------------------------------
   5. SECTION SHELL — shared rhythm for every homepage section
   -------------------------------------------------------------------------- */
.fx-section { padding: var(--fx-space-8) 0; }
.fx-section--alt { background: var(--fx-surface-2); }

.fx-section-head { max-width: 720px; margin: 0 auto var(--fx-space-7); text-align: center; }

.fx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--fx-font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fx-orange-500);
  margin-bottom: var(--fx-space-3);
}
/* small dash before the eyebrow text */
.fx-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--fx-orange-500);
  border-radius: 2px;
}

.fx-title {
  font-family: var(--fx-font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: var(--fx-space-3);
}

.fx-subtitle { font-size: 1.06rem; color: var(--fx-text-600); margin: 0; }

/* --------------------------------------------------------------------------
   6. HERO  (homepage)
   Dark "night flight" panel: aurora mesh + fine blueprint grid, gradient
   headline, search bar, stat chips.
   -------------------------------------------------------------------------- */
.fx-hero {
  position: relative;
  background:
    radial-gradient(52rem 30rem at 12% -12%, rgba(1, 118, 211, .40), transparent 60%),
    radial-gradient(44rem 26rem at 88% -4%, rgba(129, 140, 248, .28), transparent 62%),
    radial-gradient(30rem 20rem at 70% 110%, rgba(255, 93, 45, .16), transparent 65%),
    var(--fx-ink-900);
  color: var(--fx-on-dark);
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(4.5rem, 9vw, 7rem);
  overflow: hidden;
}
/* blueprint grid overlay, faded toward the bottom */
.fx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(165, 176, 208, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 176, 208, .09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 90%);
  mask-image: linear-gradient(#000 30%, transparent 90%);
  pointer-events: none;
}

.fx-hero-inner { position: relative; max-width: 800px; margin: 0 auto; text-align: center; }

.fx-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--fx-on-dark-muted);
  border: 1px solid rgba(165, 176, 208, .3);
  border-radius: var(--fx-radius-pill);
  padding: .35rem 1rem;
  margin-bottom: var(--fx-space-5);
  background: rgba(255, 255, 255, .04);
}
.fx-hero-badge .fx-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fx-orange-500);
  box-shadow: 0 0 10px var(--fx-orange-500);
}

.fx-hero h1 {
  font-family: var(--fx-font-display);
  font-size: clamp(2.3rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: var(--fx-space-4);
}
/* gradient-highlighted words inside the h1 */
.fx-hero h1 .fx-grad {
  background: var(--fx-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fx-hero-lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--fx-on-dark-muted);
  max-width: 620px;
  margin: 0 auto var(--fx-space-6);
  line-height: 1.7;
}

.fx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-space-3);
  justify-content: center;
  margin-bottom: var(--fx-space-6);
}

/* Hero search — filters the topics grid live (assets/js/site.js) */
.fx-hero-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 460px;
  margin: 0 auto var(--fx-space-6);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(165, 176, 208, .3);
  border-radius: var(--fx-radius-pill);
  padding: .35rem .5rem .35rem 1.1rem;
  transition: border-color .2s, box-shadow .2s;
}
.fx-hero-search:focus-within { border-color: var(--fx-sky-400); box-shadow: var(--fx-shadow-glow); }
.fx-hero-search svg { flex: none; color: var(--fx-on-dark-muted); }
.fx-hero-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 1rem;
  padding: .45rem 0;
}
.fx-hero-search input::placeholder { color: var(--fx-on-dark-muted); }
.fx-hero-search button {
  flex: none;
  border: 0;
  border-radius: var(--fx-radius-pill);
  background: var(--fx-blue-600);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: background-color .2s;
}
.fx-hero-search button:hover { background: var(--fx-blue-700); }

/* Trending quick-links under the hero search */
.fx-hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: calc(-1 * var(--fx-space-4)) 0 var(--fx-space-6);
  font-size: .85rem;
  color: var(--fx-on-dark-muted);
}
.fx-hero-chips a {
  color: var(--fx-on-dark);
  text-decoration: none;
  border: 1px solid rgba(165, 176, 208, .3);
  border-radius: var(--fx-radius-pill);
  padding: .3rem .9rem;
  transition: all .2s var(--fx-ease);
}
.fx-hero-chips a:hover { border-color: var(--fx-sky-400); color: var(--fx-sky-400); }

/* Stat chips under the hero actions */
.fx-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fx-space-3) var(--fx-space-6);
  color: var(--fx-on-dark-muted);
  font-size: .95rem;
}
.fx-hero-stats strong {
  display: block;
  font-family: var(--fx-font-display);
  font-size: 1.4rem;
  color: #fff;
}

/* --------------------------------------------------------------------------
   7. TOPIC CARDS  (includes/topics-grid.php — data-driven learning tracks)
   auto-fill grid: any number of topics wraps cleanly, no layout edits needed.
   -------------------------------------------------------------------------- */
.fx-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--fx-space-4);
}

.fx-topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fx-space-3);
  background: var(--fx-surface-1);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  padding: var(--fx-space-5);
  text-decoration: none;
  transition: transform .25s var(--fx-ease), box-shadow .25s var(--fx-ease), border-color .25s;
}
.fx-topic-card:hover {
  transform: translateY(-5px);
  border-color: rgba(1, 118, 211, .35);
  box-shadow: var(--fx-shadow-lg);
}
/* top accent line that "lights up" on hover */
.fx-topic-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 16px; right: 16px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--fx-gradient);
  opacity: 0;
  transition: opacity .25s;
}
.fx-topic-card:hover::before { opacity: 1; }

.fx-topic-top { display: flex; align-items: center; justify-content: space-between; }

/* Icon tile */
.fx-topic-icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--fx-radius-sm);
  background: linear-gradient(135deg, rgba(1, 118, 211, .1), rgba(129, 140, 248, .14));
  color: var(--fx-blue-600);
}

.fx-topic-card h3 {
  font-family: var(--fx-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}
.fx-topic-card p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--fx-text-600); flex-grow: 1; }

/* "Explore" affordance pinned to the card bottom */
.fx-topic-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--fx-font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--fx-blue-600);
}
.fx-topic-cta svg { transition: transform .2s var(--fx-ease); }
.fx-topic-card:hover .fx-topic-cta svg { transform: translateX(4px); }

/* Topic group header — used when the grid is grouped by category
   (e.g. "AI & Agentforce" / "Core Salesforce"). */
.fx-topic-group { margin-bottom: var(--fx-space-7); }
.fx-topic-group:last-child { margin-bottom: 0; }
.fx-topic-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--fx-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--fx-space-5);
  padding-bottom: var(--fx-space-3);
  border-bottom: 1px solid var(--fx-border);
}
.fx-topic-group-head h3 {
  font-family: var(--fx-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}
.fx-topic-group-head p { margin: 0; font-size: .95rem; color: var(--fx-text-400); }

/* "Coming soon" topic card — rendered as a non-link placeholder */
.fx-topic-card--soon { cursor: default; border-style: dashed; background: transparent; }
.fx-topic-card--soon:hover { transform: none; box-shadow: none; border-color: var(--fx-border); }
.fx-topic-card--soon:hover::before { opacity: 0; }
.fx-topic-card--soon .fx-topic-icon { background: var(--fx-surface-2); color: var(--fx-text-400); }
.fx-topic-card--soon h3, .fx-topic-card--soon p { color: var(--fx-text-400); }

/* --------------------------------------------------------------------------
   8. TAG PILLS  (category/tag concept — reused across topics & posts)
   -------------------------------------------------------------------------- */
.fx-tag {
  display: inline-block;
  font-family: var(--fx-font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: var(--fx-radius-pill);
  background: var(--fx-surface-2);
  color: var(--fx-text-600);
  border: 1px solid var(--fx-border);
}
.fx-tag--orange { background: rgba(255, 93, 45, .1); color: #d43d10; border-color: rgba(255, 93, 45, .25); }
.fx-tag--blue   { background: rgba(1, 118, 211, .09); color: var(--fx-blue-700); border-color: rgba(1, 118, 211, .22); }
.fx-tag--violet { background: rgba(129, 140, 248, .12); color: #4f46e5; border-color: rgba(129, 140, 248, .3); }

/* --------------------------------------------------------------------------
   9. POST CARDS  (includes/latest-posts.php — tutorials & blog previews)
   -------------------------------------------------------------------------- */
.fx-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--fx-space-4);
}

.fx-post-card {
  display: flex;
  flex-direction: column;
  gap: var(--fx-space-3);
  background: var(--fx-surface-1);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  padding: var(--fx-space-5);
  text-decoration: none;
  transition: transform .25s var(--fx-ease), box-shadow .25s var(--fx-ease), border-color .25s;
}
.fx-post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--fx-shadow-lg);
  border-color: rgba(1, 118, 211, .35);
}
.fx-post-card h3 {
  font-family: var(--fx-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
.fx-post-card:hover h3 { color: var(--fx-blue-600); }
.fx-post-card p { margin: 0; font-size: .94rem; line-height: 1.65; flex-grow: 1; }
.fx-post-meta { display: flex; align-items: center; gap: .6rem; }
.fx-post-read {
  font-family: var(--fx-font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--fx-blue-600);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.fx-post-card:hover .fx-post-read svg { transform: translateX(4px); }
.fx-post-read svg { transition: transform .2s var(--fx-ease); }

/* --- Featured spotlight: one large lead card + stacked side cards.
       Collapses to a single column on mobile. --- */
.fx-spotlight {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--fx-space-4);
}
.fx-spotlight .fx-post-card:first-child {
  grid-row: span 2;
  justify-content: flex-end;
  padding: var(--fx-space-6);
  color: var(--fx-on-dark-muted);
  background:
    radial-gradient(30rem 18rem at 85% -20%, rgba(56, 189, 248, .30), transparent 60%),
    radial-gradient(24rem 16rem at 0% 120%, rgba(255, 93, 45, .22), transparent 60%),
    var(--fx-ink-800);
  border: 0;
  min-height: 320px;
}
.fx-spotlight .fx-post-card:first-child h3 { color: #fff; font-size: 1.5rem; }
.fx-spotlight .fx-post-card:first-child p { color: var(--fx-on-dark-muted); flex-grow: 0; }
.fx-spotlight .fx-post-card:first-child .fx-post-read { color: var(--fx-sky-400); }
@media (max-width: 767.98px) {
  .fx-spotlight { grid-template-columns: 1fr; }
  .fx-spotlight .fx-post-card:first-child { grid-row: auto; min-height: 0; }
}

/* --- Tag filter chips (above the latest-posts grid; wired in site.js) --- */
.fx-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-space-2);
  justify-content: center;
  margin-bottom: var(--fx-space-5);
}
.fx-chip {
  font-family: var(--fx-font-display);
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem 1.1rem;
  border-radius: var(--fx-radius-pill);
  border: 1px solid var(--fx-border);
  background: var(--fx-surface-1);
  color: var(--fx-text-600);
  cursor: pointer;
  transition: all .2s var(--fx-ease);
}
.fx-chip:hover { border-color: var(--fx-blue-600); color: var(--fx-blue-600); }
.fx-chip.is-active { background: var(--fx-ink-900); border-color: var(--fx-ink-900); color: #fff; }

/* --------------------------------------------------------------------------
   10. CTA BAND  (dark strip — Resume Builder / any future promo)
   -------------------------------------------------------------------------- */
.fx-cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(40rem 20rem at 85% -30%, rgba(56, 189, 248, .25), transparent 60%),
    radial-gradient(30rem 18rem at 10% 130%, rgba(255, 93, 45, .18), transparent 60%),
    var(--fx-ink-800);
  border-radius: var(--fx-radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  color: var(--fx-on-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fx-space-5);
}
.fx-cta-band h2 {
  font-family: var(--fx-font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
}
.fx-cta-band p { color: var(--fx-on-dark-muted); max-width: 520px; margin: 0; }

/* --------------------------------------------------------------------------
   11. NEWSLETTER STUB  (includes/newsletter.php)
   Front-end only for now — assets/js/site.js shows a "coming soon" note.
   Wire the <form> action to a real provider (Mailchimp/Buttondown) later.
   -------------------------------------------------------------------------- */
.fx-newsletter {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.fx-newsletter-form {
  display: flex;
  gap: .5rem;
  background: var(--fx-surface-1);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-pill);
  padding: .35rem;
  box-shadow: var(--fx-shadow-md);
}
.fx-newsletter-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: .6rem 1rem;
  font-size: 1rem;
  color: var(--fx-text-900);
}
.fx-newsletter-note { font-size: .85rem; color: var(--fx-text-400); margin-top: var(--fx-space-3); }

/* --------------------------------------------------------------------------
   11b. FOUNDER SECTION  (includes/about-section.php — homepage)
   Photo card + bio + stat chips on the dark surface.
   -------------------------------------------------------------------------- */
.fx-founder {
  background:
    radial-gradient(46rem 26rem at 85% -10%, rgba(1, 118, 211, .35), transparent 60%),
    radial-gradient(34rem 22rem at 8% 115%, rgba(255, 93, 45, .14), transparent 62%),
    var(--fx-ink-900);
  color: var(--fx-on-dark-muted);
}
.fx-founder-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--fx-space-7);
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
}
@media (max-width: 767.98px) {
  .fx-founder-grid { grid-template-columns: 1fr; text-align: center; }
  .fx-founder-photo { margin: 0 auto; }
  .fx-founder-stats, .fx-founder-actions { justify-content: center; }
}
.fx-founder-photo {
  position: relative;
  width: min(280px, 70vw);
  border-radius: var(--fx-radius-lg);
  overflow: hidden;
  box-shadow: var(--fx-shadow-glow);
  border: 1px solid rgba(56, 189, 248, .35);
}
.fx-founder-photo img { display: block; width: 100%; height: auto; }
.fx-founder h2 {
  font-family: var(--fx-font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 .3rem;
}
.fx-founder-role {
  font-family: var(--fx-font-display);
  font-weight: 600;
  color: var(--fx-sky-400);
  margin-bottom: var(--fx-space-4);
}
.fx-founder-bio { line-height: 1.75; margin-bottom: var(--fx-space-5); }
.fx-founder-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-space-2);
  margin-bottom: var(--fx-space-5);
}
.fx-founder-stats .fx-stat {
  border: 1px solid rgba(165, 176, 208, .3);
  background: rgba(255, 255, 255, .05);
  border-radius: var(--fx-radius-pill);
  padding: .4rem 1rem;
  font-size: .88rem;
}
.fx-founder-stats .fx-stat strong { color: #fff; font-family: var(--fx-font-display); margin-right: .3rem; }
.fx-founder-actions { display: flex; flex-wrap: wrap; gap: var(--fx-space-3); }

/* --------------------------------------------------------------------------
   12. FOOTER  (includes/footer.php + blogs/includes/footer.php)
   Layout: brand block (logo, tagline, socials) + link columns in one CSS
   grid, then a slim bottom bar. Columns stack 2-up on mobile.
   -------------------------------------------------------------------------- */
.fx-footer {
  background: var(--fx-ink-900);
  color: var(--fx-on-dark-muted);
  padding: var(--fx-space-8) 0 var(--fx-space-5);
  margin-top: var(--fx-space-8);
  border-top: 1px solid var(--fx-ink-700);
}
.fx-footer a { color: var(--fx-on-dark-muted); text-decoration: none; transition: color .2s; }
.fx-footer a:hover { color: var(--fx-sky-400); }

.fx-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--fx-space-6);
}
@media (max-width: 991.98px) {
  .fx-footer-grid { grid-template-columns: 1fr 1fr; }
  .fx-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  .fx-footer-grid { grid-template-columns: 1fr; }
}

.fx-footer-brand img {
  height: 42px; width: auto; margin-bottom: var(--fx-space-3);
}
.fx-footer-brand p { font-size: .92rem; max-width: 300px; line-height: 1.65; margin-bottom: var(--fx-space-4); }

/* Social icon buttons */
.fx-footer-social { display: flex; gap: .6rem; }
.fx-footer-social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(165, 176, 208, .3);
  background: rgba(255, 255, 255, .04);
  transition: all .2s var(--fx-ease);
}
.fx-footer-social a:hover {
  border-color: var(--fx-sky-400);
  color: var(--fx-sky-400);
  transform: translateY(-2px);
}

.fx-footer h4 {
  font-family: var(--fx-font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--fx-space-4);
}
.fx-footer ul { list-style: none; padding: 0; margin: 0; }
.fx-footer li { margin-bottom: .65rem; font-size: .92rem; }
.fx-footer li .fx-tag { margin-left: .4rem; font-size: .6rem; padding: .15rem .5rem; }

.fx-footer-bottom {
  border-top: 1px solid var(--fx-ink-700);
  margin-top: var(--fx-space-7);
  padding-top: var(--fx-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-space-2) var(--fx-space-5);
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--fx-text-400);
}
.fx-footer-bottom .fx-disclaimer { flex-basis: 100%; margin-top: .2rem; }

/* --------------------------------------------------------------------------
   13. SCROLL-REVEAL  (assets/js/site.js adds .is-visible via
   IntersectionObserver; disabled automatically for reduced-motion users)
   -------------------------------------------------------------------------- */
.fx-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--fx-ease), transform .6s var(--fx-ease); }
.fx-reveal.is-visible { opacity: 1; transform: none; }
/* stagger helpers for card grids */
.fx-reveal[data-delay="1"] { transition-delay: .08s; }
.fx-reveal[data-delay="2"] { transition-delay: .16s; }
.fx-reveal[data-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx-reveal { opacity: 1; transform: none; transition: none; }
  .fx-btn, .fx-topic-card, .fx-post-card { transition: none; }
}

/* ==========================================================================
   14. CONTENT-PAGE SYNC LAYER
   --------------------------------------------------------------------------
   The guide pages (apex.php, lwc.php, flow.php, integration.php,
   agentforce.php, promptguide.php, admin.php) share the same markup classes
   (.reading-hero, .accordion-*, .content-*, .code-section) with their own
   inline <style> blocks written before this design system existed.

   Rather than editing thousands of lines per page, this layer re-skins those
   shared classes centrally. The `body ` prefix gives every rule higher
   specificity (0,1,1+) than the pages' inline single-class rules (0,1,0),
   so these win regardless of source order. Removing old inline styles
   page-by-page later is optional cleanup — the look is governed here.
   ========================================================================== */

/* --- Inner-page hero: same "night flight" surface as the homepage hero --- */
body .reading-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(52rem 30rem at 12% -12%, rgba(1, 118, 211, .40), transparent 60%),
    radial-gradient(44rem 26rem at 88% -4%, rgba(129, 140, 248, .28), transparent 62%),
    radial-gradient(30rem 20rem at 70% 110%, rgba(255, 93, 45, .16), transparent 65%),
    var(--fx-ink-900);
  color: var(--fx-on-dark-muted);
  padding: clamp(3.5rem, 7vw, 5.5rem) 20px;
}
body .reading-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(165, 176, 208, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 176, 208, .09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 95%);
  mask-image: linear-gradient(#000 30%, transparent 95%);
  pointer-events: none;
}
body .reading-hero .container { position: relative; }
body .reading-hero h1 {
  font-family: var(--fx-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  color: #fff;
}
body .reading-hero p { color: var(--fx-on-dark-muted); font-size: clamp(1.05rem, 2vw, 1.3rem); }

/* --- Guide sidebar (accordion) --- */
body .sidebar-accordion { background: var(--fx-surface-1); border-right: 1px solid var(--fx-border); }
body .accordion-title {
  font-family: var(--fx-font-display);
  font-weight: 700;
  color: var(--fx-text-900);
  border-bottom: 2px solid var(--fx-border);
}
body .accordion-header {
  background-color: var(--fx-surface-2);
  color: var(--fx-text-900);
  border-radius: var(--fx-radius-sm);
  font-family: var(--fx-font-display);
}
body .accordion-header:hover { background-color: #e2e9f5; }
body .sidebar-accordion .accordion-header.active { background-color: var(--fx-blue-600); color: #fff; }
body .accordion-subitem { border-left: 3px solid var(--fx-border); }
body .accordion-subitem a { color: var(--fx-text-600); }
body .accordion-subitem a:hover,
body .sidebar-accordion .accordion-subitem a.active { color: var(--fx-blue-600); }

/* --- Guide content area typography --- */
body .content-title {
  font-family: var(--fx-font-display);
  color: var(--fx-text-900);
  letter-spacing: -.02em;
}
body .content-subtitle { font-family: var(--fx-font-display); color: var(--fx-blue-700); }
body .content-section h2 { font-family: var(--fx-font-display); color: var(--fx-text-900); letter-spacing: -.01em; }
body .content-text { color: var(--fx-text-600); }

/* Exactly ONE bullet per point: kill the browser's default disc and draw a
   single themed marker. Pages variously ship their own li:before (lwc) or a
   commented-out one (apex) — these higher-specificity rules win either way.
   Nested lists keep the plain default disc (content: none on li li::before). */
body .content-list { list-style: none; }
body .content-list > li { position: relative; padding-left: 30px; }
body .content-list > li::before {
  content: "•";
  color: var(--fx-blue-600);
  font-size: 1.5rem;
  line-height: 1.2;
  position: absolute;
  left: 8px;
  top: 1px;
}
body .content-list li li::before { content: none; }

/* --- Guide content tables (.af-table) — styled globally here so every guide
   page gets the same polished look. body-prefixed selectors beat any per-page
   inline table rules (e.g. agentforce.php's originals). --- */
body table.af-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 26px 0;
  font-size: 1.02rem;
  line-height: 1.6;
  background: #fff;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(16, 24, 64, .05);
}
body table.af-table th,
body table.af-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--fx-border);
}
body table.af-table th + th,
body table.af-table td + td { border-left: 1px solid var(--fx-border); }
body table.af-table th {
  background: var(--fx-ink-900);
  color: #fff;
  font-family: var(--fx-font-display);
  font-weight: 600;
  letter-spacing: .01em;
  border-bottom: 2px solid var(--fx-blue-600);
}
body table.af-table tr:nth-child(even) td { background: var(--fx-surface-2); }
body table.af-table tr:last-child td { border-bottom: 0; }
body table.af-table td:first-child { font-weight: 600; color: var(--fx-text-900); }
body table.af-table a { color: var(--fx-blue-600); font-weight: 600; text-decoration: none; }
body table.af-table a:hover { text-decoration: underline; }
body table.af-table th a { color: #b7d4ff; }
body table.af-table code {
  background: var(--fx-surface-2);
  border: 1px solid var(--fx-border);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: .92em;
  color: var(--fx-blue-700);
}
/* Wide tables scroll inside themselves on small screens instead of
   stretching the page */
@media (max-width: 820px) {
  body table.af-table { display: block; overflow-x: auto; }
}

/* --- Code blocks + copy button --- */
body .code-section {
  background: var(--fx-ink-900);
  color: #dbe4ff;
  border-left: 4px solid var(--fx-sky-400);
  border-radius: var(--fx-radius-sm);
}
body .copy-btn { background: var(--fx-blue-600); border-radius: var(--fx-radius-pill); }
body .copy-btn:hover { background: var(--fx-blue-700); }

/* --- Generic inner-page hero for non-guide pages (tutorials, about, contact,
       future pages). Same surface as .reading-hero, opt-in via class. --- */
.fx-page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(52rem 30rem at 12% -12%, rgba(1, 118, 211, .40), transparent 60%),
    radial-gradient(44rem 26rem at 88% -4%, rgba(129, 140, 248, .28), transparent 62%),
    radial-gradient(30rem 20rem at 70% 110%, rgba(255, 93, 45, .16), transparent 65%),
    var(--fx-ink-900);
  color: var(--fx-on-dark-muted);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  text-align: center;
}
.fx-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(165, 176, 208, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 176, 208, .09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 95%);
  mask-image: linear-gradient(#000 30%, transparent 95%);
  pointer-events: none;
}
.fx-page-hero .container { position: relative; }
.fx-page-hero h1 {
  font-family: var(--fx-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  color: #fff;
  margin-bottom: var(--fx-space-4);
}
.fx-page-hero p { max-width: 680px; margin: 0 auto; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; }