/**
 * Component: Key Takeaways (KTA)
 * Targets: .key-takeaway wrapper div (applied via TinyMCE "Key Takeaway" style format)
 * Design Tokens: Uses tokens from design-tokens-base.css and site-overrides/design-tokens.css
 * Figma Source: https://www.figma.com/design/B1d1YtTMv0jhPz2e5CbaZN/?node-id=8034-34256
 *
 * Contexts:
 * - CPT post content (.brz-wp-post-content .key-takeaway)
 * - Archive LFC (#archive-lfc .key-takeaway, .archive-lfc-content .key-takeaway)
 */

/* ==========================================================================
   Base Styles (Mobile First: < 768px)
   ========================================================================== */

.key-takeaway {
  background: var(--gradient-deep) !important;
  border: 4px solid var(--color-deep-dark) !important;
  border-radius: var(--radius-2xl) !important;
  /* Figma: 36px → Token: 32px (closest match) */
  /* Variance: -4px (acceptable) */
  padding: var(--spacing-8) !important;
  margin-top: var(--spacing-8) !important;
  margin-bottom: var(--spacing-8) !important;
}

/* Title (h3 inside .key-takeaway) */
.key-takeaway h3 {
  font-family: var(--font-family-header) !important;
  font-size: var(--font-size-h5) !important;
  line-height: var(--line-height-h5) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-primary-light) !important;
  -webkit-text-fill-color: var(--color-primary-light) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  margin-top: 0 !important;
  margin-bottom: var(--spacing-6) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-2) !important;
}

/* Writing hand icon before title */
.key-takeaway h3::before {
  content: '' !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  background-image: url('images/writing-hand.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* List container */
.key-takeaway ul {
  list-style: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-4) !important;
}

/* List items */
.key-takeaway ul li {
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  font-family: var(--font-family-paragraph) !important;
  font-size: var(--font-size-p2-base) !important;
  line-height: var(--line-height-p2-base) !important;
  font-weight: var(--font-weight-regular) !important;
  color: var(--color-base-ghost-white) !important;
}

/* Paragraph tags inside list items (wpautop wraps li text in <p>) */
.key-takeaway ul li p {
  color: var(--color-base-ghost-white) !important;
  margin-bottom: 0 !important;
}

/* Checkmark icon (from Figma node 8046:11019) */
.key-takeaway ul li::before {
  content: '' !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  margin-right: var(--spacing-3) !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 0C8.4233 0 6.39323 0.615814 4.66652 1.76957C2.9398 2.92332 1.59399 4.5632 0.799269 6.48182C0.00454945 8.40044 -0.203385 10.5116 0.201759 12.5484C0.606904 14.5852 1.60693 16.4562 3.07538 17.9246C4.54383 19.3931 6.41475 20.3931 8.45155 20.7982C10.4884 21.2034 12.5996 20.9954 14.5182 20.2007C16.4368 19.406 18.0767 18.0602 19.2304 16.3335C20.3842 14.6068 21 12.5767 21 10.5C20.9968 7.7162 19.8895 5.04734 17.9211 3.0789C15.9527 1.11045 13.2838 0.00318476 10.5 0ZM15.9674 7.99394L9.47048 14.4908C9.373 14.5883 9.25727 14.6657 9.12989 14.7185C9.00251 14.7713 8.86598 14.7984 8.7281 14.7984C8.59021 14.7984 8.45368 14.7713 8.3263 14.7185C8.19892 14.6657 8.08319 14.5883 7.98571 14.4908L5.03265 11.5377C4.8378 11.3404 4.72893 11.074 4.7298 10.7967C4.73066 10.5194 4.8412 10.2537 5.03728 10.0576C5.23336 9.86153 5.49905 9.75098 5.77635 9.7501C6.05365 9.74922 6.32004 9.85809 6.51735 10.0529L8.7281 12.2637L14.4827 6.50918C14.68 6.31434 14.9464 6.20547 15.2237 6.20635C15.501 6.20723 15.7666 6.31778 15.9627 6.51387C16.1588 6.70995 16.2693 6.97565 16.2702 7.25295C16.2711 7.53025 16.1622 7.79663 15.9674 7.99394Z' fill='%2327A74A'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Links inside KTA list items */
.key-takeaway ul li a {
  color: var(--color-primary-light) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   Context Overrides: Archive LFC (#archive-lfc) & CPT (.brz-wp-post-content)
   ID selectors in lfc.css (#archive-lfc h3, etc.) and compound class selectors
   (.main-content .brz-wp-post-content h3, etc.) override base KTA selectors.
   These add .key-takeaway to the chain to win specificity in both contexts.
   ========================================================================== */

/* --- h3 title --- */
#archive-lfc .key-takeaway h3,
#archive-toc-lfc .key-takeaway h3,
.archive-lfc-content .key-takeaway h3,
.main-content .brz-wp-post-content .key-takeaway h3,
.main-content-post-nav .brz-wp-post-content .key-takeaway h3 {
  font-family: var(--font-family-header) !important;
  font-size: var(--font-size-h5) !important;
  line-height: var(--line-height-h5) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-primary-light) !important;
  -webkit-text-fill-color: var(--color-primary-light) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  margin-top: 0 !important;
  margin-bottom: var(--spacing-6) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-2) !important;
}

/* --- ul list container --- */
#archive-lfc .key-takeaway ul,
#archive-toc-lfc .key-takeaway ul,
.archive-lfc-content .key-takeaway ul,
.main-content .brz-wp-post-content .key-takeaway ul,
.main-content-post-nav .brz-wp-post-content .key-takeaway ul {
  list-style: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-4) !important;
  color: var(--color-base-ghost-white) !important;
}

/* --- li list items --- */
#archive-lfc .key-takeaway ul li,
#archive-toc-lfc .key-takeaway ul li,
.archive-lfc-content .key-takeaway ul li,
.main-content .brz-wp-post-content .key-takeaway ul li,
.main-content-post-nav .brz-wp-post-content .key-takeaway ul li {
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  font-family: var(--font-family-paragraph) !important;
  font-size: var(--font-size-p2-base) !important;
  line-height: var(--line-height-p2-base) !important;
  font-weight: var(--font-weight-regular) !important;
  color: var(--color-base-ghost-white) !important;
}

/* --- p inside li (wpautop) --- */
#archive-lfc .key-takeaway ul li p,
#archive-toc-lfc .key-takeaway ul li p,
.archive-lfc-content .key-takeaway ul li p,
.main-content .brz-wp-post-content .key-takeaway ul li p,
.main-content-post-nav .brz-wp-post-content .key-takeaway ul li p {
  color: var(--color-base-ghost-white) !important;
  margin-bottom: 0 !important;
}

/* --- links --- */
#archive-lfc .key-takeaway ul li a,
#archive-toc-lfc .key-takeaway ul li a,
.archive-lfc-content .key-takeaway ul li a,
.main-content .brz-wp-post-content .key-takeaway ul li a,
.main-content-post-nav .brz-wp-post-content .key-takeaway ul li a {
  color: var(--color-primary-light) !important;
  text-decoration: underline !important;
}

/* --- bold text --- */
#archive-lfc .key-takeaway ul li strong,
#archive-lfc .key-takeaway ul li b,
#archive-toc-lfc .key-takeaway ul li strong,
#archive-toc-lfc .key-takeaway ul li b,
.archive-lfc-content .key-takeaway ul li strong,
.archive-lfc-content .key-takeaway ul li b,
.main-content .brz-wp-post-content .key-takeaway ul li strong,
.main-content .brz-wp-post-content .key-takeaway ul li b,
.main-content-post-nav .brz-wp-post-content .key-takeaway ul li strong,
.main-content-post-nav .brz-wp-post-content .key-takeaway ul li b {
  color: var(--color-base-ghost-white) !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* ==========================================================================
   Tablet Styles (768px+)
   ========================================================================== */

@media (min-width: 768px) {
  .key-takeaway ul {
    /* C1: no list indent — list aligns with the heading's left edge (Figma list frame pl-0) */
    padding-left: 0 !important;
  }
}

/* ==========================================================================
   Desktop Styles (1440px+)
   ========================================================================== */

@media (min-width: 1440px) {
  .key-takeaway {
    padding: var(--spacing-10) !important;
  }

  .key-takeaway ul {
    /* C1: no list indent — list aligns with the heading's left edge (Figma list frame pl-0) */
    padding-left: 0 !important;
  }
}