/* ═══════════════════════════════════════════════
   KeepersNook — Unified Component Styles v2.0
   Brand: Literata + Plus Jakarta Sans · Teal/Amber
   Overhauled for visual polish & Brunch Pro compat
   ═══════════════════════════════════════════════ */

/* ─── Brand Tokens ─── */
:root {
  /* Primary */
  --kn-primary: #2A7B6F;
  --kn-primary-light: #3A9B8C;
  --kn-primary-pale: #E6F3F0;
  --kn-primary-dark: #1E5C53;

  /* Accent */
  --kn-accent: #D08B3A;
  --kn-accent-light: #E4AD5E;
  --kn-accent-pale: #FDF3E0;

  /* Neutrals */
  --kn-neutral-900: #1C2926;
  --kn-neutral-600: #3B4845;
  --kn-neutral-400: #6B7572;
  --kn-neutral-200: #A8B0AD;
  --kn-neutral-100: #F2F6F4;
  --kn-neutral-50: #FFFFFF;

  /* Silo Colors */
  --kn-silo-fish: #3A82B8;
  --kn-silo-fish-pale: #E6F0FA;
  --kn-silo-chickens: #C47040;
  --kn-silo-chickens-pale: #FDE8DC;
  --kn-silo-reptiles: #5A8F4A;
  --kn-silo-reptiles-pale: #E8F3E6;
  --kn-silo-birds: #7B68AE;
  --kn-silo-birds-pale: #F0ECF7;
  --kn-silo-mammals: #C47878;
  --kn-silo-mammals-pale: #FAE8E8;
  --kn-silo-saltwater: #2A8FA0;
  --kn-silo-saltwater-pale: #E0F4F7;

  /* Semantic */
  --kn-safe: #4A8F5A;
  --kn-safe-pale: #E8F0E9;
  --kn-warning: #B8434E;
  --kn-warning-pale: #F8E6E8;
  --kn-info: #4A7FB5;
  --kn-info-pale: #E6F0FA;
  --kn-caution: #D08B3A;
  --kn-caution-pale: #FDF3E0;

  /* Typography */
  --kn-font-display: 'Literata', Georgia, serif;
  --kn-font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;

  /* Spacing */
  --kn-space-xs: 0.25rem;
  --kn-space-sm: 0.5rem;
  --kn-space-md: 1rem;
  --kn-space-lg: 1.5rem;
  --kn-space-xl: 2rem;
  --kn-space-2xl: 3rem;

  /* Radius */
  --kn-radius: 6px;
  --kn-radius-lg: 10px;
  --kn-radius-pill: 999px;

  /* Shadows */
  --kn-shadow-card: 0 2px 8px rgba(0,0,0,.04);
  --kn-shadow-hover: 0 4px 16px rgba(0,0,0,.08);
  --kn-border-subtle: 1px solid #E6F3F0;
}


/* ─── Global: Feast/Brunch Pro Overrides ─── */

body .entry-content,
body .site-inner .entry-content {
  font-family: var(--kn-font-body) !important;
  color: var(--kn-neutral-600) !important;
  line-height: 1.75 !important;
  font-size: 16px !important;
  -webkit-font-smoothing: antialiased;
}

body .entry-content p {
  margin-bottom: 1.25em !important;
  font-family: var(--kn-font-body) !important;
}

body .entry-content strong,
body .site-inner .entry-content strong {
  font-weight: 600 !important;
  color: var(--kn-neutral-900) !important;
}

body .entry-title,
body .entry-content h1,
body .entry-content h2,
body .entry-content h3,
body .entry-content h4 {
  font-family: var(--kn-font-display) !important;
  color: var(--kn-neutral-900) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

body .entry-content h1,
body .entry-title { font-size: 1.875rem !important; font-weight: 700 !important; }
body .entry-content h2 { font-size: 1.5rem !important; font-weight: 600 !important; margin-top: 2.5rem !important; }
body .entry-content h3 { font-size: 1.25rem !important; font-weight: 600 !important; margin-top: 1.75rem !important; }

body .entry-content a:not(.kn-pick a):not(.kn-related) {
  color: var(--kn-primary) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(42,123,111,.5) !important;
  text-underline-offset: 3px !important;
  transition: text-decoration-color .15s;
}

body .entry-content a:not(.kn-pick a):not(.kn-related):hover {
  text-decoration-color: var(--kn-primary) !important;
}

body .entry-content a:visited:not(.kn-pick a):not(.kn-related) {
  color: var(--kn-primary-dark) !important;
}

/* Highlight span */
.kn-hl {
  background: rgba(42,123,111,.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}


/* ─── 1. Styled Lists ─── */

.kn-list-check,
.kn-list-dot,
.kn-list-arrow,
.kn-list-numbered {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.25em !important;
}

.kn-list-check li,
.kn-list-dot li,
.kn-list-arrow li,
.kn-list-numbered li {
  padding: 6px 0 6px 28px !important;
  position: relative;
  line-height: 1.6;
}

.kn-list-check li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--kn-safe);
  font-weight: 700;
}

.kn-list-dot li::before {
  content: '\2022';
  position: absolute;
  left: 6px;
  color: var(--kn-primary);
  font-weight: 700;
  font-size: 1.2em;
}

.kn-list-arrow li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--kn-primary);
  font-weight: 600;
}

.kn-list-numbered {
  counter-reset: kn-counter;
}

.kn-list-numbered li {
  counter-increment: kn-counter;
  padding-left: 36px !important;
}

.kn-list-numbered li::before {
  content: counter(kn-counter);
  position: absolute;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kn-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 8px;
}


/* ─── 2. Callouts & Summary Boxes ─── */

.kn-callout {
  border-radius: 0 var(--kn-radius-lg) var(--kn-radius-lg) 0;
  padding: 18px 22px;
  margin: 24px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--kn-shadow-card);
}

.kn-callout__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.kn-callout__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.kn-callout__content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--kn-neutral-900);
}

.kn-callout__content p:last-child {
  margin-bottom: 0 !important;
}

/* Callout variants */
.kn-callout--tip {
  border-left: 4px solid var(--kn-safe);
  background: var(--kn-safe-pale);
}
.kn-callout--tip .kn-callout__icon,
.kn-callout--tip .kn-callout__label { color: var(--kn-safe); }

.kn-callout--warning {
  border-left: 4px solid var(--kn-warning);
  background: var(--kn-warning-pale);
}
.kn-callout--warning .kn-callout__icon,
.kn-callout--warning .kn-callout__label { color: var(--kn-warning); }

.kn-callout--info {
  border-left: 4px solid var(--kn-info);
  background: var(--kn-info-pale);
}
.kn-callout--info .kn-callout__icon,
.kn-callout--info .kn-callout__label { color: var(--kn-info); }

.kn-callout--safety {
  border-left: 5px solid var(--kn-warning);
  background: var(--kn-warning-pale);
}
.kn-callout--safety .kn-callout__icon,
.kn-callout--safety .kn-callout__label { color: var(--kn-warning); }

.kn-callout--conditional {
  border-left: 4px solid var(--kn-caution);
  background: var(--kn-caution-pale);
}
.kn-callout--conditional .kn-callout__icon,
.kn-callout--conditional .kn-callout__label { color: var(--kn-caution); }

/* Quick Summary Box */
.kn-summary {
  border-left: 4px solid var(--kn-primary);
  background: var(--kn-primary-pale);
  border-radius: 0 var(--kn-radius-lg) var(--kn-radius-lg) 0;
  padding: 20px 24px;
  margin: 24px 0;
  box-shadow: var(--kn-shadow-card);
}

.kn-summary__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--kn-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kn-summary__verdict {
  font-size: 15px;
  line-height: 1.7;
  color: var(--kn-neutral-900);
}

.kn-summary__picks {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--kn-neutral-600);
}


/* ─── 3. Data Strips & Fact Cards ─── */

.kn-facts-strip {
  display: flex;
  background: #fff;
  border-radius: var(--kn-radius-lg);
  border: var(--kn-border-subtle);
  overflow: hidden;
  margin: 24px 0;
  box-shadow: var(--kn-shadow-card);
}

.kn-facts-strip__item {
  flex: 1;
  padding: 18px 14px;
  text-align: center;
  border-right: 1px solid #E6F3F0;
}

.kn-facts-strip__item:last-child {
  border-right: none;
}

.kn-facts-strip__icon {
  color: var(--kn-primary);
  margin-bottom: 6px;
}

.kn-facts-strip__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--kn-neutral-400);
  margin-bottom: 3px;
}

.kn-facts-strip__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--kn-neutral-900);
}

/* Nutrition / Fact Table */
.kn-fact-table {
  border-radius: var(--kn-radius-lg);
  overflow: hidden;
  border: var(--kn-border-subtle);
  margin: 24px 0;
  box-shadow: var(--kn-shadow-card);
}

.kn-fact-table__header {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--kn-neutral-900);
  color: #fff;
}

.kn-fact-table__header-title {
  font-weight: 600;
  font-size: 14px;
}

.kn-fact-table__row {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #E6F3F0;
  font-size: 13px;
}

.kn-fact-table__row:nth-child(even) {
  background: var(--kn-neutral-100);
}

.kn-fact-table__row:last-child {
  border-bottom: none;
}

/* Comparison Table */
.kn-compare-table {
  border-radius: var(--kn-radius-lg);
  overflow: hidden;
  border: var(--kn-border-subtle);
  margin: 24px 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: var(--kn-shadow-card);
}

.kn-compare-table th {
  padding: 14px 16px;
  text-align: center;
  font-family: var(--kn-font-display);
  font-weight: 600;
  font-size: 15px;
}

.kn-compare-table th.kn-compare-table__featured {
  background: var(--kn-primary-pale);
}

.kn-compare-table td {
  padding: 12px 16px;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid #E6F3F0;
}

.kn-compare-table tr:nth-child(even) td {
  background: var(--kn-neutral-100);
}

.kn-compare-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--kn-neutral-600);
}

/* Cost Bars */
.kn-cost-bars {
  margin: 24px 0;
}

.kn-cost-bars__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--kn-neutral-400);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.kn-cost-bar {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}

.kn-cost-bar__name {
  font-weight: 600;
  color: var(--kn-neutral-900);
}

.kn-cost-bar__track {
  height: 20px;
  background: var(--kn-neutral-100);
  border-radius: 4px;
  overflow: hidden;
}

.kn-cost-bar__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--kn-primary);
}

.kn-cost-bar__price {
  font-weight: 700;
  color: var(--kn-neutral-900);
  font-size: 12px;
  min-width: 55px;
  text-align: right;
}


/* ─── 4. Scoring — Score Bars with Color Coding ─── */

.kn-score-bar {
  margin-bottom: 14px;
}

.kn-score-bar__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.kn-score-bar__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--kn-neutral-600);
}

.kn-score-bar__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--kn-neutral-900);
}

.kn-score-bar__track {
  height: 10px;
  background: var(--kn-neutral-100);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #E6F3F0;
}

.kn-score-bar__fill {
  height: 100%;
  border-radius: 5px;
  transition: width .6s ease;
}

/* Color-coded score fills */
.kn-score-bar__fill--green,
.kn-score-bar__fill[data-score="high"] {
  background: linear-gradient(90deg, #4A8F5A, #5DAF6B);
}

.kn-score-bar__fill--amber,
.kn-score-bar__fill[data-score="mid"] {
  background: linear-gradient(90deg, #D08B3A, #E4AD5E);
}

.kn-score-bar__fill--red,
.kn-score-bar__fill[data-score="low"] {
  background: linear-gradient(90deg, #B8434E, #D4585F);
}

/* Default green when no modifier */
.kn-score-bar__fill:not(.kn-score-bar__fill--green):not(.kn-score-bar__fill--amber):not(.kn-score-bar__fill--red):not([data-score]) {
  background: linear-gradient(90deg, var(--kn-primary), var(--kn-primary-light));
}


/* ─── 5. Compatibility Verdict [kn_compat] ─── */

.kn-compat-verdict {
  border-radius: var(--kn-radius-lg);
  overflow: hidden;
  border: var(--kn-border-subtle);
  margin: 24px 0;
  box-shadow: var(--kn-shadow-card);
  background: #fff;
}

.kn-compat-verdict__header {
  background: var(--kn-neutral-900);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
}

.kn-compat-verdict__body {
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.kn-compat-verdict__species {
  font-family: var(--kn-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--kn-neutral-900);
}

/* Percentage Ring — larger and more prominent */
.kn-compat-verdict__ring {
  width: 80px;
  height: 80px;
  position: relative;
}

.kn-compat-verdict__ring svg {
  width: 80px;
  height: 80px;
}

.kn-compat-verdict__ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kn-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--kn-neutral-900);
}

/* Note text: FIXED — no longer all-caps amber invisible text */
.kn-compat-verdict__note {
  margin: 0 20px 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--kn-accent);
  border-radius: 0 var(--kn-radius) var(--kn-radius) 0;
  background: var(--kn-accent-pale);
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--kn-neutral-900) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}

.kn-compat-verdict__note strong {
  font-weight: 600 !important;
  color: var(--kn-neutral-900) !important;
}

/* Score breakdown inside compat */
.kn-compat-verdict__scores {
  padding: 0 20px 20px;
}


/* ─── 6. Feeding Safety Card [kn_feedsafe] ─── */

.kn-feedsafe {
  border-radius: var(--kn-radius-lg);
  overflow: hidden;
  border: var(--kn-border-subtle);
  margin: 24px 0;
  box-shadow: var(--kn-shadow-card);
  background: #fff;
}

.kn-feedsafe__header {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
}

.kn-feedsafe__header--safe { background: var(--kn-safe); }
.kn-feedsafe__header--conditional { background: var(--kn-caution); }
.kn-feedsafe__header--unsafe { background: var(--kn-warning); }

.kn-feedsafe__body {
  padding: 20px;
}

.kn-feedsafe__title {
  font-family: var(--kn-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--kn-neutral-900);
  margin-bottom: 8px;
}

.kn-feedsafe__parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.kn-feedsafe__part {
  border-radius: var(--kn-radius);
  padding: 14px 16px;
  border: 1px solid transparent;
}

.kn-feedsafe__part--safe {
  background: var(--kn-safe-pale);
  border-color: rgba(74,143,90,.2);
}

.kn-feedsafe__part--toxic {
  background: var(--kn-warning-pale);
  border-color: rgba(184,67,78,.2);
}

.kn-feedsafe__part-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.kn-feedsafe__part--safe .kn-feedsafe__part-label {
  color: var(--kn-safe);
}

.kn-feedsafe__part--toxic .kn-feedsafe__part-label {
  color: var(--kn-warning);
}

.kn-feedsafe__part-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kn-feedsafe__part-list li {
  font-size: 13px;
  padding: 3px 0;
  color: var(--kn-neutral-900);
}

.kn-feedsafe__part--safe .kn-feedsafe__part-list li::before {
  content: '\2713 ';
  color: var(--kn-safe);
  font-weight: 700;
}

.kn-feedsafe__part--toxic .kn-feedsafe__part-list li::before {
  content: '\2717 ';
  color: var(--kn-warning);
  font-weight: 700;
}

.kn-feedsafe__meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--kn-neutral-600);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #E6F3F0;
}


/* ─── 7. Interactive: Tabs, FAQ, Checklist, Toggle ─── */

/* Tabs */
.kn-tabs {
  margin: 24px 0;
}

.kn-tabs__nav {
  display: flex;
  border-bottom: 2px solid #E6F3F0;
  gap: 4px;
}

.kn-tabs__btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--kn-neutral-400);
  font-family: var(--kn-font-body);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s, background .15s;
  border-radius: var(--kn-radius) var(--kn-radius) 0 0;
}

.kn-tabs__btn:hover {
  color: var(--kn-primary);
  background: var(--kn-primary-pale);
}

.kn-tabs__btn.is-active {
  color: var(--kn-primary);
  border-bottom-color: var(--kn-primary);
  background: var(--kn-primary-pale);
}

.kn-tabs__panel {
  display: none;
  padding: 18px 0;
}

.kn-tabs__panel.is-active {
  display: block;
}

/* FAQ Accordion [kn_faq] */
.kn-faq {
  margin: 24px 0;
}

.kn-faq__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--kn-primary);
  margin-bottom: 12px;
}

.kn-faq__item {
  background: #fff;
  border-radius: var(--kn-radius-lg);
  border: var(--kn-border-subtle);
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: var(--kn-shadow-card);
  transition: box-shadow .2s, border-color .2s;
}

.kn-faq__item:hover {
  border-color: var(--kn-primary-light);
  box-shadow: var(--kn-shadow-hover);
}

.kn-faq__item.is-open {
  border-color: var(--kn-primary);
}

.kn-faq__question {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--kn-neutral-900);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--kn-font-body);
  transition: background .15s;
}

.kn-faq__question:hover {
  background: var(--kn-neutral-100);
}

.kn-faq__item.is-open .kn-faq__question {
  background: var(--kn-primary-pale);
  color: var(--kn-primary-dark);
  border-bottom: 1px solid #E6F3F0;
}

.kn-faq__icon {
  width: 20px;
  height: 20px;
  color: var(--kn-neutral-200);
  transition: transform .25s ease, color .2s;
  flex-shrink: 0;
}

.kn-faq__item.is-open .kn-faq__icon {
  transform: rotate(45deg);
  color: var(--kn-primary);
}

.kn-faq__answer {
  display: none;
  padding: 16px 18px;
  font-size: 14px;
  color: var(--kn-neutral-600);
  line-height: 1.7;
}

.kn-faq__item.is-open .kn-faq__answer {
  display: block;
}

.kn-faq__answer p:last-child {
  margin-bottom: 0 !important;
}

/* Checklist */
.kn-checklist {
  border-radius: var(--kn-radius-lg);
  border: var(--kn-border-subtle);
  overflow: hidden;
  margin: 24px 0;
  box-shadow: var(--kn-shadow-card);
}

.kn-checklist__header {
  background: var(--kn-neutral-900);
  color: #fff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.kn-checklist__counter {
  margin-left: auto;
  font-weight: 400;
  opacity: .6;
  font-size: 11px;
}

.kn-checklist__body {
  padding: 8px 14px;
  background: #fff;
}

.kn-checklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-bottom: 1px solid #E6F3F0;
  cursor: pointer;
  font-size: 14px;
  color: var(--kn-neutral-900);
  transition: background .15s;
}

.kn-checklist__item:hover {
  background: var(--kn-neutral-100);
}

.kn-checklist__item:last-child {
  border-bottom: none;
}

.kn-checklist__box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--kn-neutral-200);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s;
}

.kn-checklist__item.is-checked .kn-checklist__box {
  border-color: var(--kn-safe);
  background: var(--kn-safe);
  color: #fff;
}

.kn-checklist__item.is-checked .kn-checklist__text {
  text-decoration: line-through;
  opacity: .55;
}

/* Toggle Reveal */
.kn-toggle {
  background: #fff;
  border-radius: var(--kn-radius-lg);
  border: var(--kn-border-subtle);
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: var(--kn-shadow-card);
  transition: border-color .2s;
}

.kn-toggle:hover {
  border-color: var(--kn-primary-light);
}

.kn-toggle__header {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--kn-neutral-900);
  transition: background .15s;
}

.kn-toggle__header:hover {
  background: var(--kn-neutral-100);
}

.kn-toggle__header-icon {
  transition: transform .25s ease;
  color: var(--kn-neutral-200);
}

.kn-toggle.is-open .kn-toggle__header {
  background: var(--kn-primary-pale);
  border-bottom: 1px solid #E6F3F0;
}

.kn-toggle.is-open .kn-toggle__header-icon {
  transform: rotate(180deg);
  color: var(--kn-primary);
}

.kn-toggle__content {
  display: none;
  padding: 16px 18px;
  font-size: 14px;
  color: var(--kn-neutral-600);
  line-height: 1.7;
  background: #fff;
}

.kn-toggle.is-open .kn-toggle__content {
  display: block;
}


/* ─── 8. Decision Picks [kn_picks] ─── */

.kn-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.kn-pick {
  background: #fff;
  border-radius: var(--kn-radius-lg);
  border: var(--kn-border-subtle);
  overflow: hidden;
  box-shadow: var(--kn-shadow-card);
  transition: box-shadow .2s, transform .2s;
}

.kn-pick:hover {
  box-shadow: var(--kn-shadow-hover);
  transform: translateY(-2px);
}

.kn-pick__badge {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

/* Pick color variants */
.kn-pick__badge--best,
.kn-pick:first-child .kn-pick__badge { background: var(--kn-primary); }
.kn-pick__badge--value,
.kn-pick:nth-child(2) .kn-pick__badge { background: var(--kn-accent); }
.kn-pick__badge--budget,
.kn-pick:nth-child(3) .kn-pick__badge { background: var(--kn-neutral-600); }

.kn-pick__badge-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.kn-pick__rank {
  font-family: var(--kn-font-display);
  font-size: 20px;
  font-weight: 700;
  opacity: .3;
}

.kn-pick__body {
  padding: 18px;
}

.kn-pick__title {
  font-family: var(--kn-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--kn-neutral-900);
  margin-bottom: 6px;
}

.kn-pick__desc {
  font-size: 13px;
  color: var(--kn-neutral-600);
  line-height: 1.6;
  margin-bottom: 10px;
}

.kn-pick__use {
  font-size: 11px;
  color: var(--kn-neutral-400);
  padding: 5px 10px;
  background: var(--kn-neutral-100);
  border-radius: var(--kn-radius-pill);
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
}

.kn-pick__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--kn-primary);
  margin-top: 8px;
}

.kn-pick__link {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--kn-primary);
  color: #fff !important;
  border-radius: var(--kn-radius);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s;
}

.kn-pick__link:hover {
  background: var(--kn-primary-dark);
}


/* ─── 9. Pros & Cons [kn_proscons] ─── */

.kn-proscons {
  display: flex;
  border-radius: var(--kn-radius-lg);
  overflow: hidden;
  border: var(--kn-border-subtle);
  margin: 24px 0;
  box-shadow: var(--kn-shadow-card);
}

.kn-proscons__col {
  flex: 1;
}

.kn-proscons__col--pros {
  background: var(--kn-safe-pale);
}

.kn-proscons__col--cons {
  background: var(--kn-warning-pale);
  border-left: 1px solid rgba(168,176,173,.15);
}

.kn-proscons__label {
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kn-proscons__label--pros {
  color: var(--kn-safe);
  background: rgba(74,143,90,.08);
  border-bottom: 2px solid var(--kn-safe);
}

.kn-proscons__label--cons {
  color: var(--kn-warning);
  background: rgba(184,67,78,.08);
  border-bottom: 2px solid var(--kn-warning);
}

.kn-proscons__list {
  padding: 14px 18px;
}

.kn-proscons__item {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--kn-neutral-900);
  margin-bottom: 8px;
  line-height: 1.5;
}

.kn-proscons__item:last-child {
  margin-bottom: 0;
}

.kn-proscons__col--pros .kn-proscons__item::before {
  content: '\2713';
  color: var(--kn-safe);
  font-weight: 700;
  flex-shrink: 0;
}

.kn-proscons__col--cons .kn-proscons__item::before {
  content: '\2717';
  color: var(--kn-warning);
  font-weight: 700;
  flex-shrink: 0;
}


/* ─── 10. Steps ─── */

.kn-steps {
  margin: 24px 0;
}

.kn-step {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border-radius: var(--kn-radius-lg);
  border: var(--kn-border-subtle);
  align-items: flex-start;
  margin-bottom: 12px;
  box-shadow: var(--kn-shadow-card);
}

.kn-step__number {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--kn-neutral-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kn-font-display);
  font-size: 15px;
  font-weight: 600;
}

.kn-step__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--kn-neutral-900);
  margin-bottom: 3px;
}

.kn-step__body {
  font-size: 14px;
  color: var(--kn-neutral-600);
  line-height: 1.6;
}

/* Related Card */
.kn-related {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  background: var(--kn-neutral-100);
  border-radius: var(--kn-radius-lg);
  border: var(--kn-border-subtle);
  align-items: center;
  margin: 24px 0;
  text-decoration: none !important;
  box-shadow: var(--kn-shadow-card);
  transition: border-color .15s, box-shadow .15s;
}

.kn-related:hover {
  border-color: var(--kn-primary);
  box-shadow: var(--kn-shadow-hover);
}

.kn-related__icon-box {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: var(--kn-radius);
  background: var(--kn-primary-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kn-primary);
}

.kn-related__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--kn-primary);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.kn-related__title {
  font-family: var(--kn-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--kn-neutral-900);
}


/* ─── 11. E-E-A-T Components ─── */

/* Sources Block */
.kn-sources {
  border-radius: var(--kn-radius-lg);
  border: var(--kn-border-subtle);
  overflow: hidden;
  margin: 24px 0;
  box-shadow: var(--kn-shadow-card);
}

.kn-sources__header {
  padding: 12px 18px;
  background: var(--kn-neutral-100);
  border-bottom: 1px solid #E6F3F0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kn-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}

.kn-sources__list {
  padding: 12px 18px;
  background: #fff;
}

.kn-source {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E6F3F0;
}

.kn-source:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.kn-source__num {
  font-size: 11px;
  font-weight: 700;
  color: var(--kn-primary);
  font-family: var(--kn-font-display);
  min-width: 18px;
}

.kn-source__text {
  font-size: 13px;
  color: var(--kn-neutral-900);
  font-weight: 500;
}

.kn-source__meta {
  font-size: 11.5px;
  color: var(--kn-neutral-400);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kn-source__badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}

.kn-source__badge--journal { background: var(--kn-primary-pale); color: var(--kn-primary); }
.kn-source__badge--university { background: var(--kn-silo-fish-pale); color: var(--kn-silo-fish); }
.kn-source__badge--expert { background: var(--kn-accent-pale); color: var(--kn-accent); }
.kn-source__badge--government { background: var(--kn-safe-pale); color: var(--kn-safe); }

/* Expert Review Card */
.kn-expert-review {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--kn-safe-pale);
  border-radius: var(--kn-radius-lg);
  border: 1px solid rgba(74,143,90,.15);
  margin: 24px 0;
  box-shadow: var(--kn-shadow-card);
}

.kn-expert-review__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--kn-safe);
  text-transform: uppercase;
}

.kn-expert-review__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--kn-neutral-900);
}


/* ─── 12. CTAs ─── */

/* Verdict / Bottom Line */
.kn-verdict {
  background: var(--kn-neutral-900);
  border-radius: var(--kn-radius-lg);
  padding: 24px 28px;
  margin: 32px 0;
  box-shadow: 0 4px 16px rgba(28,41,38,.12);
}

.kn-verdict__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--kn-accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kn-verdict__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--kn-neutral-200);
}

.kn-verdict__text strong {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Cross-silo CTA */
.kn-cross-silo {
  background: linear-gradient(135deg, #1C2926, #243530);
  border-radius: var(--kn-radius-lg);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 32px 0;
  box-shadow: 0 4px 16px rgba(28,41,38,.12);
}

.kn-cross-silo__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--kn-primary-light);
  margin-bottom: 4px;
}

.kn-cross-silo__title {
  font-family: var(--kn-font-display);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.kn-cross-silo__icons {
  display: flex;
  gap: 8px;
}

.kn-cross-silo__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.1);
}

/* Newsletter CTA */
.kn-subscribe {
  background: linear-gradient(135deg, var(--kn-primary-pale), var(--kn-neutral-100));
  border-radius: var(--kn-radius-lg);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: var(--kn-border-subtle);
  margin: 24px 0;
  box-shadow: var(--kn-shadow-card);
}

.kn-subscribe__btn {
  padding: 10px 22px;
  background: var(--kn-primary);
  color: #fff;
  border-radius: 7px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}

.kn-subscribe__btn:hover {
  background: var(--kn-primary-dark);
}


/* ─── 13. Comprehensive Table Styling ─── */

/* WordPress / entry-content tables */
body .entry-content table,
body .site-inner table,
.kn-table {
  width: auto;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 24px 0 !important;
  font-family: var(--kn-font-body) !important;
  font-size: 14px !important;
  background: #fff !important;
  border: 1px solid #E6F3F0 !important;
  border-radius: var(--kn-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--kn-shadow-card);
}

/* Wrap for responsive horizontal scroll */
.kn-table-wrap,
.entry-content .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
  border-radius: var(--kn-radius-lg);
}

.kn-table-wrap table,
.entry-content .wp-block-table table {
  margin: 0 !important;
}

/* Sticky header — teal background, white text */
body .entry-content table thead th,
body .entry-content table th,
body .site-inner table thead th,
.kn-table thead th,
.kn-table th {
  background: var(--kn-primary) !important;
  color: #fff !important;
  font-family: var(--kn-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  padding: 12px 16px !important;
  text-align: left !important;
  border: none !important;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

body .entry-content table thead th:first-child,
.kn-table thead th:first-child {
  border-radius: var(--kn-radius-lg) 0 0 0;
}

body .entry-content table thead th:last-child,
.kn-table thead th:last-child {
  border-radius: 0 var(--kn-radius-lg) 0 0;
}

/* Table cells */
body .entry-content table td,
body .site-inner table td,
.kn-table td {
  padding: 12px 16px !important;
  color: var(--kn-neutral-900) !important;
  font-family: var(--kn-font-body) !important;
  font-size: 14px !important;
  border-bottom: 1px solid #E6F3F0 !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  vertical-align: middle !important;
}

/* Alternating row stripes */
body .entry-content table tbody tr:nth-child(even),
body .site-inner table tbody tr:nth-child(even),
.kn-table tbody tr:nth-child(even) {
  background: var(--kn-neutral-100) !important;
}

body .entry-content table tbody tr:nth-child(odd),
body .site-inner table tbody tr:nth-child(odd),
.kn-table tbody tr:nth-child(odd) {
  background: #fff !important;
}

/* Last row — no bottom border */
body .entry-content table tbody tr:last-child td,
.kn-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Row hover */
body .entry-content table tbody tr:hover,
.kn-table tbody tr:hover {
  background: rgba(42,123,111,.04) !important;
}

/* Caption styling */
body .entry-content table caption,
.kn-table caption {
  text-align: left !important;
  font-family: var(--kn-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--kn-neutral-900) !important;
  padding: 12px 16px !important;
  caption-side: top !important;
  background: var(--kn-neutral-100);
  border-bottom: 1px solid #E6F3F0;
}

/* First column emphasis in data tables */
body .entry-content table td:first-child,
.kn-table td:first-child {
  font-weight: 600 !important;
  color: var(--kn-neutral-900) !important;
}

/* Gutenberg table block overrides */
body .entry-content .wp-block-table {
  margin: 24px 0 !important;
}

body .entry-content .wp-block-table table {
  border: 1px solid #E6F3F0 !important;
}

body .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: #fff !important;
}

body .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
  background: var(--kn-neutral-100) !important;
}

body .entry-content .wp-block-table figcaption {
  text-align: left !important;
  font-size: 13px !important;
  color: var(--kn-neutral-400) !important;
  margin-top: 8px !important;
}


/* ─── 14. Navigation ─── */

/* More Dropdown */
.kn-nav-more-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 0 0 var(--kn-radius-lg) var(--kn-radius-lg);
  box-shadow: 0 8px 24px rgba(28,41,38,.12);
  border: 1px solid #E6F3F0;
  padding: 8px;
  min-width: 240px;
  z-index: 100;
  display: none;
}

.menu-item-has-children:hover .kn-nav-more-dropdown,
.menu-item-has-children:focus-within .kn-nav-more-dropdown {
  display: block;
}

.kn-nav-more-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none !important;
}

.kn-nav-more-dropdown a:hover {
  background: var(--kn-neutral-100);
}

/* Silo color dots in nav */
.kn-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

/* Footer */
.kn-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 24px;
}

.kn-footer-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--kn-primary-light);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.kn-footer-widget a {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  margin-bottom: 8px;
  line-height: 1;
}

.kn-footer-widget a:hover {
  color: var(--kn-accent);
}

.kn-footer-bottom {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: rgba(255,255,255,.3);
}


/* ─── 15. Easy Table of Contents Override ─── */

#ez-toc-container {
  background: var(--kn-neutral-100) !important;
  border: 1px solid #E6F3F0 !important;
  border-radius: var(--kn-radius-lg) !important;
  padding: 18px 22px !important;
  box-shadow: var(--kn-shadow-card) !important;
}

#ez-toc-container .ez-toc-title {
  font-family: var(--kn-font-display) !important;
  font-weight: 600 !important;
  color: var(--kn-neutral-900) !important;
}

#ez-toc-container a {
  color: var(--kn-primary) !important;
}


/* ─── 16. Shared Header Bar for Shortcode Components ─── */

.kn-component-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.kn-component-header--dark {
  background: var(--kn-neutral-900);
  color: #fff;
}

.kn-component-header--teal {
  background: var(--kn-primary);
  color: #fff;
}

.kn-component-header__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .7;
}


/* ─── Responsive: 768px (Tablet) ─── */

@media (max-width: 768px) {
  .kn-facts-strip { flex-direction: column; }
  .kn-facts-strip__item { border-right: none; border-bottom: 1px solid #E6F3F0; }
  .kn-facts-strip__item:last-child { border-bottom: none; }

  .kn-picks { grid-template-columns: 1fr; }
  .kn-proscons { flex-direction: column; }
  .kn-proscons__col--cons { border-left: none; border-top: 1px solid #E6F3F0; }

  .kn-feedsafe__parts { grid-template-columns: 1fr; }
  .kn-compat-verdict__body { grid-template-columns: 1fr; gap: 12px; }

  .kn-footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .kn-cross-silo { flex-direction: column; text-align: center; }

  /* Tables: horizontal scroll on mobile */
  body .entry-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  body .entry-content table thead,
  body .entry-content table tbody,
  body .entry-content table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
}

/* ─── Responsive: 480px (Mobile) ─── */

@media (max-width: 480px) {
  .kn-cost-bar { grid-template-columns: 80px 1fr auto; }
  .kn-compare-table { font-size: 12px; }
  .kn-compare-table th,
  .kn-compare-table td { padding: 8px 10px !important; }
  .kn-footer-grid { grid-template-columns: 1fr; }

  .kn-compat-verdict__body {
    padding: 16px;
  }

  .kn-compat-verdict__note {
    margin: 0 16px 14px;
  }

  .kn-pick__body {
    padding: 14px;
  }

  body .entry-content table th,
  body .entry-content table td {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}


/* ─── Print Styles ─── */

@media print {
  .kn-faq__answer { display: block !important; }
  .kn-toggle__content { display: block !important; }
  .kn-callout, .kn-summary, .kn-compat-verdict,
  .kn-feedsafe, .kn-proscons, .kn-picks,
  .kn-sources, .kn-verdict {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
}


/* ═══ FIX: kn_picks as stacked list (not 3-col grid) when content is H3+prose ═══ */
/* The grid layout only works with .kn-pick card children. 
   When kn_picks contains raw H3s + prose + proscons, force single column */
.kn-picks:not(:has(.kn-pick)) {
  display: block !important;
  grid-template-columns: none !important;
}

/* Fallback for browsers without :has() */
.kn-picks > h3,
.kn-picks > p,
.kn-picks > .kn-proscons,
.kn-picks > .kn-callout,
.kn-picks > ul,
.kn-picks > table,
.kn-picks > div:not(.kn-pick) {
  grid-column: 1 / -1;
}


/* ═══ FIX: kn_picks ranked item cards ═══ */
/* When kn_picks contains H3s (ranked items), style each H3 group as a card */

.kn-picks:not(:has(.kn-pick)) {
  display: block !important;
  counter-reset: kn-pick-counter;
}

/* Each H3 inside picks starts a new visual card */
.kn-picks > h3 {
  counter-increment: kn-pick-counter;
  background: var(--kn-primary);
  color: #fff;
  font-family: var(--kn-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 14px 20px;
  margin: 28px 0 0 0;
  border-radius: var(--kn-radius-lg) var(--kn-radius-lg) 0 0;
  border: 1px solid var(--kn-primary);
  border-bottom: none;
}

.kn-picks > h3:first-child {
  margin-top: 0;
}

/* Stats line (the <p> with <strong>Comb:</strong> etc.) right after H3 */
.kn-picks > h3 + p {
  background: var(--kn-neutral-100);
  padding: 10px 20px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--kn-neutral-600);
  border-left: 1px solid #E6F3F0;
  border-right: 1px solid #E6F3F0;
  line-height: 1.6;
}

.kn-picks > h3 + p strong {
  color: var(--kn-neutral-900);
  font-weight: 700;
}

/* Prose paragraphs inside picks get card body treatment */
.kn-picks > p {
  background: #fff;
  padding: 12px 20px 0;
  margin: 0;
  border-left: 1px solid #E6F3F0;
  border-right: 1px solid #E6F3F0;
  font-size: 15px;
  line-height: 1.7;
}

.kn-picks > p:last-of-type,
.kn-picks > p + .kn-proscons,
.kn-picks > p + .kn-callout {
  margin-bottom: 0;
}

/* Proscons inside picks gets rounded bottom corners */
.kn-picks > .kn-proscons {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0 0 var(--kn-radius-lg) var(--kn-radius-lg);
  border: 1px solid #E6F3F0;
  border-top: none;
}

/* Bullet lists inside picks */
.kn-picks > ul {
  background: #fff;
  padding: 8px 20px 8px 40px;
  margin: 0;
  border-left: 1px solid #E6F3F0;
  border-right: 1px solid #E6F3F0;
}

/* Callouts inside picks */
.kn-picks > .kn-callout {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  border-left-width: 4px;
  border-right: 1px solid #E6F3F0;
}

/* Table inside picks (comparison table) */
.kn-picks > table,
.kn-picks + table {
  margin-top: 24px;
}

/* When a proscons is NOT followed by another H3 (last item), close the card */
.kn-picks > .kn-proscons:last-child,
.kn-picks > p:last-child {
  border-radius: 0 0 var(--kn-radius-lg) var(--kn-radius-lg);
  padding-bottom: 16px;
  border-bottom: 1px solid #E6F3F0;
}


/* Override earlier conflicting rules */


body .entry-content table thead th {
  white-space: normal !important;
  word-wrap: break-word !important;
}

body .entry-content table td {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Constrain the entry-content itself */
.entry-content {
  overflow-x: hidden;
  max-width: 100%;
}


/* ═══ FIX: Picks H3 text must be white on teal bg ═══ */
.kn-picks > h3,
.kn-picks > h3 a {
  color: #fff !important;
}

/* Remove the conflicting table-layout:fixed from earlier */
body .entry-content table {
  table-layout: auto !important;
}


/* First column slightly wider for breed/item names */
body .entry-content table td:first-child,
body .entry-content table th:first-child {
  min-width: 80px;
  max-width: 120px;
}


/* ═══ TABLE FIX (final): scroll wrapper + max-content width ═══ */
.kn-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 24px 0;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--kn-radius-lg);
}

.kn-table-wrap table {
  width: max-content !important;
  min-width: 620px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
}

.kn-table-wrap th {
  white-space: nowrap;
}

/* Override all earlier conflicting table rules */
body .entry-content table {
  table-layout: auto !important;
  display: table !important;
}