/* ============================================================
   BLOG CSS — liannebyrne.com
   One consistent system built from existing blog design language
   ============================================================ */

/* ── BLOG CONTENT WRAPPER ── */
.blog-content {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px,6vw,72px) clamp(20px,4vw,40px);
}

/* ── BODY TEXT ── */
.blog-content p {
  font-family: Manrope, sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: #3A4520;
  margin-bottom: 24px;
}

/* ── HEADINGS ── */
.blog-content h2 {
  font-family: Lustria, Georgia, serif;
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 400;
  color: #233114;
  margin: 56px 0 20px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.blog-content h3 {
  font-family: Lustria, Georgia, serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 400;
  color: #263014;
  margin: 36px 0 14px;
  line-height: 1.35;
  letter-spacing: -.015em;
}

.blog-content h4 {
  font-family: TenorSans, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #52691f;
  margin: 28px 0 10px;
}

/* ── LEAF BULLETS ── */
.blog-content ul {
  list-style: none;
  margin: 0 0 28px 0;
  padding: 0;
}

.blog-content ul li {
  position: relative;
  padding-left: 34px;
  font-family: Manrope, sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: #3A4520;
  margin-bottom: 10px;
}

.blog-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239baa4c'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 22H5.71C6.66 19.07 8.14 16.4 10.5 14.35C8.5 17 7.45 19.27 6.83 22H8.73C10.31 17.13 13.65 13.47 18 10.97C15.41 13.79 13.98 17.23 13.03 22H14.9C16.5 15.47 21 12 21 12C21 12 19 11.8 17 8Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.blog-content ol {
  padding-left: 24px;
  margin-bottom: 28px;
}

.blog-content ol li {
  font-family: Manrope, sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: #3A4520;
  margin-bottom: 10px;
}

/* ── PULL QUOTES ── */
.blog-content blockquote,
.pullquote,
.pull-quote {
  border-left: 3px solid #9baa4c;
  padding: 24px 32px;
  margin: 48px 0;
  background: #f7f8f1;
  border-radius: 0 2px 2px 0;
}

.blog-content blockquote p,
.pullquote p,
.pull-quote p {
  font-family: Lustria, Georgia, serif;
  font-size: 20px;
  font-style: italic;
  line-height: 1.6;
  color: #233114;
  margin: 0;
}

/* ── NUMBERED SECTION PANELS ── */
.numbered-item,
.friction-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 24px;
  margin: 40px 0;
  padding: 32px;
  background: #f7f8f1;
  border-radius: 2px;
}

.numbered-item-number,
.friction-num {
  font-family: Lustria, Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  color: #9baa4c;
  line-height: 1;
  grid-row: 1 / 3;
  padding-top: 2px;
}

.numbered-item-title,
.friction-title {
  font-family: Lustria, Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  color: #233114;
  margin-bottom: 10px;
  line-height: 1.3;
}

.numbered-item-body,
.friction-body {
  font-family: Manrope, sans-serif;
  font-size: 16px;
  line-height: 1.82;
  color: #4A5530;
  margin: 0;
}

/* ── CALLOUT / REFLECTION BOXES ── */
.blog-callout,
.checklist,
.reflection-box {
  background: #f7f8f1;
  padding: 36px 40px;
  margin: 40px 0;
  border-radius: 2px;
  border-left: none;
}

.blog-callout h4,
.checklist h4,
.reflection-box h4 {
  font-family: Lustria, Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: #233114;
  margin: 0 0 18px;
  letter-spacing: -.01em;
}

.blog-callout p,
.checklist p,
.reflection-box p {
  font-family: Manrope, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #3A4520;
  margin-bottom: 10px;
}

.blog-callout ul li::before,
.checklist ul li::before,
.reflection-box ul li::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239baa4c'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 22H5.71C6.66 19.07 8.14 16.4 10.5 14.35C8.5 17 7.45 19.27 6.83 22H8.73C10.31 17.13 13.65 13.47 18 10.97C15.41 13.79 13.98 17.23 13.03 22H14.9C16.5 15.47 21 12 21 12C21 12 19 11.8 17 8Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  top: 6px;
}

/* ── DARK STAT CALLOUT ── */
.stat-callout {
  background: #233114;
  color: #eef3e6;
  padding: 40px 48px;
  margin: 48px 0;
  text-align: center;
  border-radius: 2px;
}

.stat-callout .stat-num {
  font-family: Lustria, Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  color: #9baa4c;
  display: block;
  line-height: 1;
}

.stat-callout .stat-label {
  font-family: Manrope, sans-serif;
  font-size: 14px;
  color: rgba(238,243,230,.75);
  margin-top: 12px;
  line-height: 1.6;
}

/* ── INLINE BLOG CTA PANEL ── */
.blog-cta {
  background: #233114;
  padding: 48px;
  margin: 64px 0;
  border-radius: 2px;
  text-align: center;
}

.blog-cta-eyebrow {
  font-family: TenorSans, sans-serif;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #b5c463;
  display: block;
  margin-bottom: 12px;
}

.blog-cta h3 {
  font-family: Lustria, Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: white;
  margin: 0 0 14px;
  letter-spacing: -.02em;
}

.blog-cta p {
  font-family: Manrope, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(238,243,230,.7);
  margin-bottom: 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.blog-cta .button {
  background: #96ae43;
  color: #233114;
  border-color: #96ae43;
}

/* ── AUTHOR BOX ── */
.author-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 32px 36px;
  background: #f7f8f1;
  border-radius: 2px;
}

.author-box img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-box-name {
  font-family: Lustria, Georgia, serif !important;
  font-size: 16px !important;
  color: #233114 !important;
  margin: 0 0 6px !important;
  font-style: normal !important;
}

.author-box-bio {
  font-family: Manrope, sans-serif !important;
  font-size: 13px !important;
  color: #52691f !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ── MARKDOWN TABLE (green/red zone) ── */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 15px;
}

.blog-content th {
  font-family: TenorSans, sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 16px;
  background: #f7f8f1;
  color: #233114;
  text-align: left;
  border-bottom: 2px solid #9baa4c;
}

.blog-content td {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(155,170,76,.15);
  color: #3A4520;
  vertical-align: top;
  line-height: 1.7;
  font-family: Manrope, sans-serif;
}

.blog-content tr:last-child td {
  border-bottom: none;
}

/* ── IMAGE CAPTIONS ── */
.blog-content img {
  width: 100%;
  height: auto;
  display: block;
  margin: 36px 0;
  border-radius: 2px;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .blog-content {
    padding: 32px 20px;
  }
  .blog-content h2 { margin-top: 40px; }
  .numbered-item, .friction-item { padding: 22px; gap: 0 16px; }
  .numbered-item-number, .friction-num { font-size: 28px; }
  .blog-callout, .checklist, .reflection-box { padding: 24px 22px; }
  .stat-callout { padding: 32px 24px; }
  .stat-callout .stat-num { font-size: 44px; }
  .blog-cta { padding: 36px 28px; }
  .author-box { flex-direction: column; align-items: center; text-align: center; padding: 28px 20px; }
}

/* ── NUMBERED SECTIONS — proper display ── */
.blog-content .numbered-item,
.blog-content .friction-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 20px;
  margin: 36px 0;
  padding: 28px 28px 28px 0;
  border-top: 1px solid var(--border);
  background: transparent;
}

.blog-content .numbered-item-number,
.blog-content .friction-num {
  font-family: Lustria, Georgia, serif;
  font-size: 40px;
  font-weight: 400;
  color: #9baa4c;
  line-height: 1;
  grid-row: 1 / 3;
  padding-top: 2px;
}

.blog-content .numbered-item-title,
.blog-content .friction-title {
  font-family: Lustria, Georgia, serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  color: #233114;
  margin: 0 0 8px;
  line-height: 1.3;
}

.blog-content .numbered-item-body,
.blog-content .friction-body {
  font-family: Manrope, sans-serif;
  font-size: 16px;
  line-height: 1.82;
  color: #4A5530;
  margin: 0;
}

/* In markdown H3s that represent numbered sections - style them */
.blog-content h3:has(+ ul),
.blog-content h3 + p + ul,
.blog-content h3 + ul {
  margin-top: 0;
}

/* Numbered H3 sections - when H3 starts with two digits */
.blog-content h3 {
  counter-increment: section;
  position: relative;
}

/* Green callout box */
.blog-content .blog-callout[style*="background:var(--deep)"],
.blog-callout-dark {
  background: var(--deep) !important;
  color: white !important;
  padding: 28px 32px;
  margin: 40px 0;
  border-radius: 2px;
}
.blog-callout-dark p,
.blog-callout-dark h4 {
  color: white !important;
}

/* Mobile numbered fix */
@media(max-width:600px) {
  .blog-content .numbered-item,
  .blog-content .friction-item {
    grid-template-columns: 36px 1fr;
    gap: 0 12px;
    padding: 20px 0;
  }
  .blog-content .numbered-item-number,
  .blog-content .friction-num {
    font-size: 28px;
  }
}

/* ── NUMBERED LISTS — restore numbers ── */
.blog-content ol {
  list-style-type: decimal !important;
  padding-left: 28px !important;
}
.blog-content ol li {
  display: list-item !important;
  list-style: decimal !important;
}

/* ── AUTHOR BOX — override blog.css ── */
.author-box {
  display: grid !important;
  grid-template-columns: 80px 1fr !important;
  gap: 20px !important;
  align-items: center !important;
}
.author-box img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
@media (max-width: 700px) {
  .author-box {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
  }
}

/* ── GREEN BOXES IN BLOG CONTENT — force white text ── */
.blog-content .green-box,
.blog-content .green-box h2,
.blog-content .green-box h3,
.blog-content .green-box h4,
.blog-content .green-box p,
.blog-content .green-box li,
.blog-content [style*="background:var(--deep)"],
.blog-content [style*="background:var(--deep)"] h2,
.blog-content [style*="background:var(--deep)"] h3,
.blog-content [style*="background:var(--deep)"] h4,
.blog-content [style*="background:var(--deep)"] p,
.blog-content [style*="background:var(--deep)"] li {
  color: white !important;
}
.blog-content .green-box .eyebrow,
.blog-content [style*="background:var(--deep)"] .eyebrow {
  color: #b5c463 !important;
}
/* bullet SVG white version inside dark boxes */
.blog-content .green-box ul li::before,
.blog-content [style*="background:var(--deep)"] ul li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b5c463'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 22H5.71C6.66 19.07 8.14 16.4 10.5 14.35C8.5 17 7.45 19.27 6.83 22H8.73C10.31 17.13 13.65 13.47 18 10.97C15.41 13.79 13.98 17.23 13.03 22H14.9C16.5 15.47 21 12 21 12C21 12 19 11.8 17 8Z'/%3E%3C/svg%3E") !important;
}