/*
 * ═══════════════════════════════════════════════════════════════════
 *  FERN & FANG CO. — Global Knowledgebase Stylesheet
 *  Version: 1.0 · March 2026
 *
 *  HOW TO USE:
 *  Option A — Appearance → Customize → Additional CSS (paste entire file)
 *  Option B — Upload as fern-fang-custom.css to your child theme folder,
 *             then add to functions.php:
 *
 *    function fern_fang_styles() {
 *        wp_enqueue_style(
 *            'fern-fang-custom',
 *            get_stylesheet_directory_uri() . '/fern-fang-custom.css',
 *            array(), '1.0'
 *        );
 *    }
 *    add_action( 'wp_enqueue_scripts', 'fern_fang_styles' );
 *
 *  TABLE OF CONTENTS:
 *  1.  Design Tokens (CSS Variables)
 *  2.  Base Typography
 *  3.  Intro Lead (the green left-border paragraph)
 *  4.  Headings (h2, h3 article styles)
 *  5.  Callout Boxes (tip, warning, fact, note, gold)
 *  6.  Spec Grids (2-col and 3-col data grids)
 *  7.  Stat Chips (horizontal pill row)
 *  8.  Pull Quote
 *  9.  Comparison Table
 *  10. Checklist
 *  11. Numbered Steps
 *  12. Side-by-Side Cards (2-col and 3-col)
 *  13. Dark Banner Accent
 *  14. Section Divider
 *  15. Prev / Next Navigation Cards
 *  16. Utility — mark highlight
 *  17. Scrollbar styling
 *  18. Responsive overrides
 * ═══════════════════════════════════════════════════════════════════
 */


/* ─────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Colour palette */
  --ff-cream:        #F7F3EC;   /* page background */
  --ff-warm-white:   #FDFAF5;   /* card / cell background */
  --ff-forest:       #2D4A3E;   /* primary dark green — headings, accents */
  --ff-forest-deep:  #1C3329;   /* deeper forest — dark banners */
  --ff-moss:         #4A6741;   /* secondary green */
  --ff-sage:         #7A9E72;   /* sage — borders, dividers */
  --ff-sage-light:   #B8D4B0;   /* sage light — subtle fills */
  --ff-teal:         #2A7B6F;   /* teal — links, active states, tip callouts */
  --ff-teal-light:   #E3F0EE;   /* teal light — tip callout background */
  --ff-amber:        #C4843A;   /* amber — warning callouts */
  --ff-amber-light:  #FDF0E0;   /* amber light — warning callout background */
  --ff-gold:         #B8960C;   /* gold — gold callouts */
  --ff-gold-light:   #FDF8E1;   /* gold light — gold callout background */
  --ff-ink:          #1C2B26;   /* primary text */
  --ff-mid:          #5A6B60;   /* secondary text, intro lead */
  --ff-light:        #8FA88A;   /* tertiary text, labels */
  --ff-note-bg:      #F5F0FF;   /* purple-tinted note callout background */
  --ff-note-text:    #6B4BA8;   /* note callout label colour */

  /* Typography */
  --ff-font-display: 'Playfair Display', Georgia, serif;
  --ff-font-body:    'Lora', Georgia, serif;
  --ff-font-ui:      'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --ff-article-padding: 3rem;
}


/* ─────────────────────────────────────────────────────────────────
   2. BASE TYPOGRAPHY
   Apply to your article content wrapper. In BetterDocs this is
   typically .docs-single-content or .entry-content.
   If you want these styles everywhere, you can broaden the selector.
   ───────────────────────────────────────────────────────────────── */

.entry-content,
.docs-single-content,
.ff-content {
  font-family: var(--ff-font-body);
  color: var(--ff-ink);
  line-height: 1.8;
  font-size: 0.97rem;
}

.entry-content p,
.docs-single-content p,
.ff-content p {
  margin-bottom: 1.15rem;
  color: var(--ff-ink);
  font-size: 0.97rem;
  line-height: 1.8;
}

.entry-content a,
.docs-single-content a,
.ff-content a {
  color: var(--ff-teal);
  text-decoration: underline;
  text-decoration-color: rgba(42, 123, 111, 0.3);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.entry-content a:hover,
.docs-single-content a:hover,
.ff-content a:hover {
  color: var(--ff-forest);
  text-decoration-color: var(--ff-forest);
}

.entry-content strong,
.docs-single-content strong,
.ff-content strong {
  color: var(--ff-forest);
  font-weight: 600;
}

.entry-content em,
.docs-single-content em,
.ff-content em {
  color: var(--ff-mid);
}


/* ─────────────────────────────────────────────────────────────────
   3. INTRO LEAD
   The italic left-border paragraph at the top of each article.

   BLOCK EDITOR USAGE:
   Add a Paragraph block → Advanced panel (right sidebar)
   → Additional CSS class: ff-intro-lead
   ───────────────────────────────────────────────────────────────── */

.ff-intro-lead,
.intro-lead {
  font-family: var(--ff-font-body);
  font-size: 1.12rem;
  color: var(--ff-mid);
  font-style: italic;
  line-height: 1.85;
  border-left: 3px solid var(--ff-sage);
  padding-left: 1.25rem;
  margin-bottom: 2.5rem !important;
}


/* ─────────────────────────────────────────────────────────────────
   4. HEADINGS
   Override default theme headings inside article content.
   ───────────────────────────────────────────────────────────────── */

.entry-content h2,
.docs-single-content h2,
.ff-content h2 {
  font-family: var(--ff-font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ff-forest);
  margin: 2.5rem 0 1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.entry-content h3,
.docs-single-content h3,
.ff-content h3 {
  font-family: var(--ff-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ff-forest);
  margin: 1.5rem 0 0.5rem;
}

/* Section icon badge inside h2 — add a <span class="ff-section-icon"> */
.ff-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--ff-teal-light);
  border-radius: 6px;
  font-size: 0.85rem;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 0.5rem;
}


/* ─────────────────────────────────────────────────────────────────
   5. CALLOUT BOXES
   Five variants: tip (teal), warning (amber), fact (green),
   note (purple), gold (gold).

   BLOCK EDITOR USAGE:
   Use a Group block → Additional CSS class: ff-callout ff-tip
   Inside the group add an Icon/Emoji paragraph + a Text paragraph.

   Or use a Custom HTML block:
   <div class="ff-callout ff-tip">
     <span class="ff-callout-icon">💡</span>
     <div class="ff-callout-body">
       <strong>Tip Title</strong>
       <p>Your tip text here.</p>
     </div>
   </div>
   ───────────────────────────────────────────────────────────────── */

.ff-callout {
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin: 1.8rem 0;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.ff-callout-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  line-height: 1;
}

.ff-callout-body {
  flex: 1;
}

.ff-callout-body strong {
  font-family: var(--ff-font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.35rem;
  color: inherit; /* overridden per variant */
}

.ff-callout-body p {
  font-size: 0.9rem;
  margin: 0 !important;
  line-height: 1.65;
}

/* Tip — teal */
.ff-tip {
  background: var(--ff-teal-light);
  border: 1px solid rgba(42, 123, 111, 0.18);
}
.ff-tip .ff-callout-body strong { color: var(--ff-teal); }

/* Warning — amber */
.ff-warning {
  background: var(--ff-amber-light);
  border: 1px solid rgba(196, 132, 58, 0.2);
}
.ff-warning .ff-callout-body strong { color: var(--ff-amber); }

/* Fun Fact — green */
.ff-fact {
  background: linear-gradient(135deg, #F0F7EE, #E8F4E5);
  border: 1px solid rgba(74, 103, 65, 0.18);
}
.ff-fact .ff-callout-body strong { color: var(--ff-moss); }

/* Note — purple */
.ff-note {
  background: var(--ff-note-bg);
  border: 1px solid rgba(120, 80, 180, 0.15);
}
.ff-note .ff-callout-body strong { color: var(--ff-note-text); }

/* Gold — highlight / community */
.ff-gold {
  background: var(--ff-gold-light);
  border: 1px solid rgba(184, 150, 12, 0.2);
}
.ff-gold .ff-callout-body strong { color: var(--ff-gold); }


/* ─────────────────────────────────────────────────────────────────
   6. SPEC GRIDS
   Data grids for at-a-glance stats. Two variants: 2-column and 3-column.

   BLOCK EDITOR USAGE:
   Custom HTML block:
   <div class="ff-spec-grid">
     <div class="ff-spec-cell">
       <div class="ff-spec-label">Label</div>
       <div class="ff-spec-value">Value</div>
     </div>
     ...repeat cells...
   </div>
   ───────────────────────────────────────────────────────────────── */

.ff-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(74, 103, 65, 0.12);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.5rem 0;
}

.ff-spec-grid.ff-three-col {
  grid-template-columns: repeat(3, 1fr);
}

.ff-spec-cell {
  background: var(--ff-warm-white);
  padding: 1rem 1.2rem;
}

.ff-spec-label {
  font-family: var(--ff-font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ff-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.ff-spec-value {
  font-family: var(--ff-font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ff-forest);
}


/* ─────────────────────────────────────────────────────────────────
   7. STAT CHIPS
   Horizontal pill row for quick stats — lighter than a full grid.

   BLOCK EDITOR USAGE:
   Custom HTML block:
   <div class="ff-chips">
     <div class="ff-chip">
       <span class="ff-chip-label">Label</span>
       <span class="ff-chip-value">Value</span>
     </div>
     ...
   </div>
   ───────────────────────────────────────────────────────────────── */

.ff-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0;
}

.ff-chip {
  display: inline-flex;
  flex-direction: column;
  background: var(--ff-warm-white);
  border: 1px solid rgba(74, 103, 65, 0.14);
  border-radius: 8px;
  padding: 0.6rem 1rem;
}

.ff-chip-label {
  font-family: var(--ff-font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ff-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ff-chip-value {
  font-family: var(--ff-font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ff-forest);
}


/* ─────────────────────────────────────────────────────────────────
   8. PULL QUOTE
   Full-width centred quote with top/bottom sage border lines.

   BLOCK EDITOR USAGE:
   Paragraph block → Additional CSS class: ff-pull-quote
   ───────────────────────────────────────────────────────────────── */

.ff-pull-quote {
  font-family: var(--ff-font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ff-forest);
  border-top: 2px solid var(--ff-sage);
  border-bottom: 2px solid var(--ff-sage);
  padding: 1.25rem 0;
  margin: 2rem 0 !important;
  text-align: center;
  line-height: 1.55;
}


/* ─────────────────────────────────────────────────────────────────
   9. COMPARISON TABLE
   Styled data table — forest header, alternating row tint.

   BLOCK EDITOR USAGE:
   Use a WordPress Table block, then add Additional CSS class: ff-table
   Or use Custom HTML for full control.
   ───────────────────────────────────────────────────────────────── */

.ff-table,
table.ff-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: var(--ff-font-ui);
  font-size: 0.88rem;
  border-radius: 10px;
  overflow: hidden;
}

.ff-table th {
  background: var(--ff-forest);
  color: white;
  padding: 0.65rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.ff-table th:first-child { border-radius: 10px 0 0 0; }
.ff-table th:last-child  { border-radius: 0 10px 0 0; }

.ff-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(74, 103, 65, 0.1);
  color: var(--ff-ink);
  vertical-align: top;
}

.ff-table tr:nth-child(even) td {
  background: rgba(227, 240, 238, 0.35);
}

.ff-table tr:last-child td { border-bottom: none; }
.ff-table tr:last-child td:first-child { border-radius: 0 0 0 10px; }
.ff-table tr:last-child td:last-child  { border-radius: 0 0 10px 0; }


/* ─────────────────────────────────────────────────────────────────
   10. CHECKLIST
   Interactive checkboxes — click to tick.

   BLOCK EDITOR USAGE:
   Custom HTML block:
   <ul class="ff-checklist">
     <li><span class="ff-check" onclick="this.classList.toggle('ff-checked');this.textContent=this.classList.contains('ff-checked')?'✓':''"></span><span>Item text</span></li>
   </ul>
   ───────────────────────────────────────────────────────────────── */

.ff-checklist {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
}

.ff-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.45rem 0;
  font-size: 0.93rem;
  border-bottom: 1px solid rgba(74, 103, 65, 0.07);
}

.ff-checklist li:last-child { border-bottom: none; }

.ff-check {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ff-sage);
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  cursor: pointer;
  transition: all 0.15s;
  background: white;
  font-size: 0.65rem;
  line-height: 1;
}

.ff-check.ff-checked {
  background: var(--ff-teal);
  border-color: var(--ff-teal);
  color: white;
}


/* ─────────────────────────────────────────────────────────────────
   11. NUMBERED STEPS
   Numbered step-by-step list with title + description per step.

   BLOCK EDITOR USAGE:
   Custom HTML block:
   <ol class="ff-steps">
     <li class="ff-step">
       <div class="ff-step-num">1</div>
       <div class="ff-step-body">
         <div class="ff-step-title">Step title here</div>
         <p class="ff-step-desc">Step description here.</p>
       </div>
     </li>
   </ol>
   ───────────────────────────────────────────────────────────────── */

.ff-steps {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ff-step {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(74, 103, 65, 0.08);
}

.ff-step:last-child { border-bottom: none; }

.ff-step-num {
  width: 28px;
  height: 28px;
  background: var(--ff-forest);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.ff-step-body { flex: 1; }

.ff-step-title {
  font-family: var(--ff-font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ff-forest);
  margin-bottom: 0.2rem;
}

.ff-step-desc {
  font-size: 0.88rem;
  color: var(--ff-mid);
  margin: 0 !important;
  line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────────
   12. SIDE-BY-SIDE CARDS
   Two-column and three-column card layouts for comparisons,
   category overviews, and grouped information.

   BLOCK EDITOR USAGE:
   Custom HTML block:
   <div class="ff-cards ff-cards-2">
     <div class="ff-card">
       <div class="ff-card-title">Card Title</div>
       <p>Card content here.</p>
     </div>
     <div class="ff-card">
       <div class="ff-card-title">Card Title</div>
       <p>Card content here.</p>
     </div>
   </div>

   Use ff-cards-3 for three columns.
   ───────────────────────────────────────────────────────────────── */

.ff-cards {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.ff-cards-2 { grid-template-columns: 1fr 1fr; }
.ff-cards-3 { grid-template-columns: 1fr 1fr 1fr; }

.ff-card {
  background: var(--ff-warm-white);
  border: 1px solid rgba(74, 103, 65, 0.12);
  border-radius: 10px;
  padding: 1.2rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ff-card:hover {
  border-color: rgba(42, 123, 111, 0.3);
  box-shadow: 0 4px 16px rgba(42, 123, 111, 0.07);
}

.ff-card-title {
  font-family: var(--ff-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ff-forest);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.ff-card p {
  font-size: 0.88rem;
  margin: 0 !important;
  color: var(--ff-mid);
  line-height: 1.65;
}


/* ─────────────────────────────────────────────────────────────────
   13. DARK BANNER ACCENT
   A full-width dark green banner for key callouts and announcements.

   BLOCK EDITOR USAGE:
   Custom HTML block:
   <div class="ff-banner">
     <span class="ff-banner-icon">✅</span>
     <div class="ff-banner-text">
       <strong>Banner Label</strong>
       Banner body text here.
     </div>
   </div>
   ───────────────────────────────────────────────────────────────── */

.ff-banner {
  background: var(--ff-forest);
  color: white;
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ff-banner-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.ff-banner-text {
  font-family: var(--ff-font-ui);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.ff-banner-text strong {
  color: var(--ff-sage-light) !important;
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}


/* ─────────────────────────────────────────────────────────────────
   14. SECTION DIVIDER
   A subtle botanical section break.

   BLOCK EDITOR USAGE:
   Custom HTML block:
   <div class="ff-divider"><span>🌿</span></div>

   Or use a Separator block with Additional CSS class: ff-divider
   ───────────────────────────────────────────────────────────────── */

.ff-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0;
  opacity: 0.25;
}

.ff-divider::before,
.ff-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ff-forest);
}

.ff-divider span {
  font-size: 0.9rem;
  line-height: 1;
}

/* Separator block default override */
.wp-block-separator.ff-divider {
  border: none;
  height: auto;
}


/* ─────────────────────────────────────────────────────────────────
   15. PREV / NEXT NAVIGATION CARDS
   BetterDocs generates these automatically, but this styles them
   to match the knowledgebase aesthetic.
   Targets BetterDocs default classes — adjust if your theme differs.
   ───────────────────────────────────────────────────────────────── */

.docs-pagination,
.ff-doc-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(74, 103, 65, 0.15);
}

.docs-pagination a,
.ff-doc-nav a {
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(74, 103, 65, 0.15);
  border-radius: 10px;
  text-decoration: none !important;
  color: inherit;
  transition: all 0.2s;
  background: var(--ff-warm-white);
  display: block;
}

.docs-pagination a:hover,
.ff-doc-nav a:hover {
  border-color: var(--ff-teal);
  box-shadow: 0 4px 16px rgba(42, 123, 111, 0.1);
  transform: translateY(-2px);
}

.docs-pagination .next-doc,
.ff-doc-nav .ff-nav-next {
  text-align: right;
}

.docs-pagination .doc-nav-dir,
.ff-nav-dir {
  font-family: var(--ff-font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ff-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  display: block;
}

.docs-pagination .doc-nav-title,
.ff-nav-title {
  font-family: var(--ff-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ff-forest);
}


/* ─────────────────────────────────────────────────────────────────
   16. UTILITY — MARK HIGHLIGHT
   Inline text highlight using the brand sage green.
   Works on native <mark> elements automatically.
   ───────────────────────────────────────────────────────────────── */

mark,
.ff-mark {
  background: linear-gradient(
    120deg,
    rgba(184, 212, 176, 0.55),
    rgba(184, 212, 176, 0.25)
  );
  padding: 0 0.2em;
  border-radius: 2px;
  color: inherit;
}


/* ─────────────────────────────────────────────────────────────────
   17. SCROLLBAR STYLING
   Subtle thin scrollbar on sidebar and content areas.
   ───────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: rgba(74, 103, 65, 0.2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 103, 65, 0.4);
}


/* ─────────────────────────────────────────────────────────────────
   18. RESPONSIVE OVERRIDES
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .ff-cards-2,
  .ff-cards-3 {
    grid-template-columns: 1fr;
  }

  .ff-spec-grid.ff-three-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .ff-chips {
    gap: 0.4rem;
  }

  .ff-pull-quote {
    font-size: 1.05rem;
  }

  .ff-intro-lead,
  .intro-lead {
    font-size: 1rem;
  }

  .docs-pagination,
  .ff-doc-nav {
    grid-template-columns: 1fr;
  }

  .ff-table {
    font-size: 0.8rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

}

@media (max-width: 480px) {

  .ff-spec-grid,
  .ff-spec-grid.ff-three-col {
    grid-template-columns: 1fr;
  }

  .ff-callout {
    flex-direction: column;
    gap: 0.5rem;
  }

  .ff-banner {
    flex-direction: column;
    text-align: center;
  }

}