/* ═══════════════════════════════════════════════════════════════
   Planted Indoors — Brand CSS
   Single source of truth: design-tokens.json v1.0.0
   Loads after Kadence parent + child style.css
   ═══════════════════════════════════════════════════════════════

   Sections:
   1. @font-face (self-hosted Mukta + Source Sans 3, latin subset)
   2. :root design tokens
   3. Base resets using tokens
   4. Component: FTC Disclosure Band
   5. Component: Award Chips (6 variants)
   6. Component: Price Band
   7. Component: Where-to-Buy CTA Button
   8. Component: Product Card
   9. Component: Comparison Table
   10. Component: Author Box
   ═══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────
   1. @font-face — self-hosted, latin subset only
   No Google Fonts CDN request at runtime → CWV safe
   ────────────────────────────────────────────────── */

/* Mukta 400 */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mukta-v17-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mukta 600 */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/mukta-v17-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mukta 700 — PRELOADED (headings above fold) */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/mukta-v17-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mukta 800 */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/mukta-v17-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  Source Sans 3 — variable font (one file, all weights)
  PRELOADED at weight 400 (body copy above fold)
*/
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 100 900; /* variable range */
  font-display: swap;
  src: url('../fonts/source-sans-3-v19-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ──────────────────────────────────────────────────
   2. :root design tokens
   Source: design-tokens.json v1.0.0
   ────────────────────────────────────────────────── */
:root {
  /* ── Colour — Brand ── */
  --pi-leaf:          #3f7d52;
  --pi-leaf-deep:     #2f5d3e;
  --pi-terra:         #c2734a;
  --pi-cta:           #b65f3c;
  --pi-cta-deep:      #9e4f30;

  /* ── Colour — Surface ── */
  --pi-cream:         #f6f4ec;
  --pi-cream-alt:     #efe9da;
  --pi-white:         #ffffff;

  /* ── Colour — Text ── */
  --pi-ink:           #232a22;
  --pi-body:          #3d473a;
  --pi-muted:         #5d6657;

  /* ── Colour — Line / State ── */
  --pi-line:          #e3dfd0;
  --pi-line-strong:   #cfc9b6;
  --pi-pro:           #3f7d52;
  --pi-con:           #a85a45;
  --pi-focus:         #2f5d3e;

  /* ── Typography ── */
  --pi-font-head: 'Mukta', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pi-font-body: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── Type scale ── */
  --pi-text-xs:      0.75rem;   /* 12px — legal, captions */
  --pi-text-sm:      0.875rem;  /* 14px — meta, chips */
  --pi-text-base:    1rem;      /* 16px — body min */
  --pi-text-md:      1.125rem;  /* 18px — lead paragraph */
  --pi-text-lg:      1.375rem;  /* 22px — H4 */
  --pi-text-xl:      1.75rem;   /* 28px — H3 */
  --pi-text-2xl:     2.25rem;   /* 36px — H2 */
  --pi-text-3xl:     3rem;      /* 48px — H1 */
  --pi-text-display: 3.75rem;   /* 60px — hero */

  /* ── Weights ── */
  --pi-w-regular:    400;
  --pi-w-medium:     500;
  --pi-w-semibold:   600;
  --pi-w-bold:       700;
  --pi-w-extrabold:  800;

  /* ── Line heights ── */
  --pi-lh-tight:     1.1;
  --pi-lh-snug:      1.25;
  --pi-lh-normal:    1.6;
  --pi-lh-relaxed:   1.7;

  /* ── Spacing ── */
  --pi-sp-1:   4px;
  --pi-sp-2:   8px;
  --pi-sp-3:   12px;
  --pi-sp-4:   16px;
  --pi-sp-5:   20px;
  --pi-sp-6:   24px;
  --pi-sp-8:   32px;
  --pi-sp-10:  40px;
  --pi-sp-12:  48px;
  --pi-sp-16:  64px;
  --pi-sp-20:  80px;
  --pi-sp-24:  96px;

  /* ── Border radius ── */
  --pi-r-sm:   6px;
  --pi-r-md:   10px;
  --pi-r-lg:   14px;
  --pi-r-xl:   20px;
  --pi-r-pill: 999px;

  /* ── Shadows ── */
  --pi-sh-sm: 0 1px 2px rgba(35,42,34,.06);
  --pi-sh-md: 0 4px 14px rgba(35,42,34,.08);
  --pi-sh-lg: 0 14px 40px rgba(35,42,34,.12);

  /* ── Layout ── */
  --pi-container: 1080px;
  --pi-prose:     720px;
  --pi-gutter:    24px;
}

/* ── Override Kadence global palette → brand colours
   Kadence uses --global-palette* throughout its component CSS.
   These overrides ensure brand colours propagate into Kadence's
   buttons, links, and structural elements.
   NOTE: Kadence's INLINE `:root` block loads after this external
   stylesheet and will reset these for body-level bg/text — which
   is why the body/heading rules below also use !important. ── */
:root {
  --global-palette1:            var(--pi-leaf-deep);
  --global-palette2:            var(--pi-leaf);
  --global-palette3:            var(--pi-ink);
  --global-palette4:            var(--pi-body);
  --global-palette5:            var(--pi-muted);
  --global-palette7:            var(--pi-cream-alt);
  --global-palette8:            var(--pi-cream);
  --global-palette9:            var(--pi-white);
  --global-body-font-family:    var(--pi-font-body);
  --global-heading-font-family: var(--pi-font-head);
}


/* ──────────────────────────────────────────────────
   3. Base resets using tokens
   !important on background/color/font-family beats
   Kadence's inline `body { background: var(--global-palette8); }`
   which loads after this external stylesheet in the cascade.
   ────────────────────────────────────────────────── */
body {
  background:  var(--pi-cream)    !important;
  color:       var(--pi-body)     !important;
  font-family: var(--pi-font-body)!important;
  font-size:   var(--pi-text-base);
  line-height: var(--pi-lh-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pi-font-head)!important;
  color:       var(--pi-ink)      !important;
  line-height: var(--pi-lh-tight);
}

a {
  color: var(--pi-leaf-deep);
}

a:hover {
  color: var(--pi-leaf);
}

:focus-visible {
  outline: 2px solid var(--pi-focus);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}


/* ──────────────────────────────────────────────────
   4. FTC Disclosure Band
   MUST sit above the first affiliate link on every
   money page. Accessible, visually distinct callout.
   ────────────────────────────────────────────────── */
.pi-ftc-disclosure {
  background: var(--pi-cream-alt);
  border-left: 4px solid var(--pi-leaf);
  border-radius: var(--pi-r-sm);
  padding: var(--pi-sp-4) var(--pi-sp-6);
  margin-block: var(--pi-sp-6);
  font-size: var(--pi-text-sm);
  color: var(--pi-muted);
  line-height: var(--pi-lh-relaxed);
}

.pi-ftc-disclosure a {
  color: var(--pi-leaf-deep);
  text-decoration: underline;
}

.pi-ftc-disclosure strong {
  color: var(--pi-ink);
}


/* ──────────────────────────────────────────────────
   5. Award Chips
   Six variants per spec. Pill shape, terracotta-based.
   Compliant text (no image) for screen readers.
   ────────────────────────────────────────────────── */
.pi-chip {
  display: inline-block;
  font-family: var(--pi-font-head);
  font-size: var(--pi-text-sm);
  font-weight: var(--pi-w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--pi-sp-1) var(--pi-sp-4);
  border-radius: var(--pi-r-pill);
  background: var(--pi-terra);
  color: var(--pi-white);
  white-space: nowrap;
  line-height: 1.6;
}

/* Variant overrides — background colour shifts per chip type */
.pi-chip--overall      { background: var(--pi-leaf-deep); }
.pi-chip--beginners    { background: var(--pi-leaf);      }
.pi-chip--value        { background: var(--pi-cta);       }
.pi-chip--small-spaces { background: var(--pi-terra);     }
.pi-chip--herbs        { background: var(--pi-leaf);      }
.pi-chip--seed-starting{ background: var(--pi-cta-deep);  }


/* ──────────────────────────────────────────────────
   6. Price Band
   $ / $$ / $$$ USD — NEVER live prices, NEVER £
   ────────────────────────────────────────────────── */
.pi-price-band {
  display: inline-block;
  font-family: var(--pi-font-head);
  font-size: var(--pi-text-sm);
  font-weight: var(--pi-w-bold);
  padding: 2px var(--pi-sp-3);
  border-radius: var(--pi-r-pill);
  border: 1.5px solid currentColor;
  line-height: 1.5;
}

.pi-price--budget  { color: var(--pi-leaf-deep); border-color: var(--pi-leaf-deep); }
.pi-price--mid     { color: var(--pi-cta);       border-color: var(--pi-cta);       }
.pi-price--premium { color: var(--pi-cta-deep);  border-color: var(--pi-cta-deep);  }


/* ──────────────────────────────────────────────────
   7. Where-to-Buy CTA Button
   Primary affiliate CTA — terracotta fill, pill radius.
   All affiliate links carry rel="sponsored noopener".
   ────────────────────────────────────────────────── */
.pi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pi-font-head);
  font-weight: var(--pi-w-semibold);
  font-size: var(--pi-text-base);
  text-decoration: none;
  padding: var(--pi-sp-3) var(--pi-sp-8);
  border-radius: var(--pi-r-pill);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  border: none;
}

.pi-btn--cta {
  background: var(--pi-cta);
  color: var(--pi-white);
}

.pi-btn--cta:hover,
.pi-btn--cta:focus {
  background: var(--pi-cta-deep);
  color: var(--pi-white);
  box-shadow: var(--pi-sh-md);
}

.pi-btn--cta:focus-visible {
  outline: 2px solid var(--pi-focus);
  outline-offset: 2px;
}

.pi-wtb {
  margin-block-start: var(--pi-sp-5);
}


/* ──────────────────────────────────────────────────
   8. Product Card
   Full numbered pick block for ranked listicles.
   ────────────────────────────────────────────────── */
.pi-product-card {
  background: var(--pi-white);
  border: 1px solid var(--pi-line);
  border-radius: var(--pi-r-lg);
  box-shadow: var(--pi-sh-sm);
  padding: var(--pi-sp-8);
  margin-block: var(--pi-sp-8);
  scroll-margin-top: var(--pi-sp-8);
}

.pi-product-card__header {
  display: flex;
  align-items: center;
  gap: var(--pi-sp-4);
  margin-block-end: var(--pi-sp-4);
}

.pi-card-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  background: var(--pi-leaf-deep);
  color: var(--pi-white);
  font-family: var(--pi-font-head);
  font-weight: var(--pi-w-bold);
  font-size: var(--pi-text-sm);
  border-radius: 50%;
}

.pi-product-card__name {
  font-size: var(--pi-text-xl);
  font-weight: var(--pi-w-bold);
  color: var(--pi-ink);
  margin: 0 0 var(--pi-sp-3);
  font-family: var(--pi-font-head);
}

.pi-product-card__meta {
  display: flex;
  align-items: center;
  gap: var(--pi-sp-4);
  margin-block-end: var(--pi-sp-5);
  flex-wrap: wrap;
}

.pi-product-card__what,
.pi-product-card__best-for,
.pi-product-card__evidence {
  margin-block: var(--pi-sp-3);
  color: var(--pi-body);
  line-height: var(--pi-lh-relaxed);
}

/* Pros / Cons columns */
.pi-product-card__pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pi-sp-6);
  margin-block: var(--pi-sp-6);
  padding: var(--pi-sp-6);
  background: var(--pi-cream-alt);
  border-radius: var(--pi-r-md);
}

@media (max-width: 600px) {
  .pi-product-card__pros-cons {
    grid-template-columns: 1fr;
  }
}

.pi-pros,
.pi-cons {
  font-size: var(--pi-text-base);
}

.pi-pros__label,
.pi-cons__label {
  font-family: var(--pi-font-head);
  font-weight: var(--pi-w-semibold);
  font-size: var(--pi-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-end: var(--pi-sp-2);
}

.pi-pros__label { color: var(--pi-pro); }
.pi-cons__label { color: var(--pi-con); }

.pi-pros ul,
.pi-cons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pi-pros ul li::before {
  content: "✓ ";
  color: var(--pi-pro);
  font-weight: var(--pi-w-bold);
}

.pi-cons ul li::before {
  content: "✗ ";
  color: var(--pi-con);
  font-weight: var(--pi-w-bold);
}

.pi-pros ul li,
.pi-cons ul li {
  padding-block: var(--pi-sp-1);
  color: var(--pi-body);
  line-height: var(--pi-lh-snug);
}


/* ──────────────────────────────────────────────────
   9. Comparison Table
   Real <table> with <th scope> — accessible by spec.
   Winner row highlighted. Price-band column.
   Horizontally scrollable on mobile.
   ────────────────────────────────────────────────── */
.pi-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--pi-sp-8);
  border-radius: var(--pi-r-md);
  box-shadow: var(--pi-sh-sm);
  border: 1px solid var(--pi-line);
}

.pi-comparison-table {
  width: 100%;
  min-width: 560px; /* forces scroll on small viewports */
  border-collapse: collapse;
  background: var(--pi-white);
  font-size: var(--pi-text-sm);
  color: var(--pi-body);
}

.pi-comparison-table caption {
  caption-side: bottom;
  font-size: var(--pi-text-xs);
  color: var(--pi-muted);
  padding: var(--pi-sp-2) var(--pi-sp-4);
}

.pi-comparison-table thead tr {
  background: var(--pi-leaf-deep);
  color: var(--pi-white);
}

.pi-comparison-table th[scope] {
  font-family: var(--pi-font-head);
  font-weight: var(--pi-w-semibold);
  text-align: left;
  padding: var(--pi-sp-4) var(--pi-sp-5);
  font-size: var(--pi-text-sm);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pi-comparison-table td {
  padding: var(--pi-sp-4) var(--pi-sp-5);
  border-bottom: 1px solid var(--pi-line);
  vertical-align: middle;
  line-height: var(--pi-lh-snug);
}

.pi-comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.pi-comparison-table tbody tr:hover {
  background: var(--pi-cream-alt);
}

/* Winner row */
.pi-table-row--winner {
  background: rgba(47, 93, 62, 0.06); /* leaf-deep at 6% */
  font-weight: var(--pi-w-semibold);
}

.pi-table-row--winner td:first-child::before {
  content: "★ ";
  color: var(--pi-leaf-deep);
}


/* ──────────────────────────────────────────────────
   10. Author Box
   Michael Probert — monogram avatar, no headshot.
   No "expert reviewer" element (never add one).
   ────────────────────────────────────────────────── */
.pi-author-box {
  background: var(--pi-cream-alt);
  border: 1px solid var(--pi-line);
  border-radius: var(--pi-r-lg);
  padding: var(--pi-sp-8);
  margin-block: var(--pi-sp-10);
}

.pi-author-box__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--pi-sp-6);
}

@media (max-width: 480px) {
  .pi-author-box__inner {
    flex-direction: column;
    align-items: center;
  }
}

/* Monogram — no headshot per spec */
.pi-author-monogram {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  background: var(--pi-leaf-deep);
  color: var(--pi-white);
  font-family: var(--pi-font-head);
  font-weight: var(--pi-w-bold);
  font-size: var(--pi-text-xl);
  letter-spacing: -0.01em;
  user-select: none;
}

.pi-author-box__name {
  font-family: var(--pi-font-head);
  font-size: var(--pi-text-md);
  font-weight: var(--pi-w-bold);
  color: var(--pi-ink);
  margin-block: 0 var(--pi-sp-3);
}

.pi-author-box__bio {
  font-size: var(--pi-text-base);
  color: var(--pi-body);
  line-height: var(--pi-lh-relaxed);
  margin: 0;
}