/* ============================================================
   KINNECT BLOG TEMPLATE v3 — full-width desktop, no green void
   Scope: .page-wrapper.background-color-moss only
   ============================================================ */

/* Paper page field — ink for content; footer overridden below */
.page-wrapper.background-color-moss {
  background-color: #f7f3ec !important;
  background-image: none !important;
  color: #1c1917 !important;
}

/* ---- NAV: compact moss strip only (not a tall green hero) ---- */
.page-wrapper.background-color-moss .navbar6_component.white,
.page-wrapper.background-color-moss .navbar6_component {
  background-color: #5e7034 !important;
  background-image: none !important;
}
.page-wrapper.background-color-moss .navbar6_container {
  background: transparent !important;
}
.page-wrapper.background-color-moss .navbar6_link,
.page-wrapper.background-color-moss .navbar6_link.light,
.page-wrapper.background-color-moss .w-nav-link,
.page-wrapper.background-color-moss .navbar6_menu .w-nav-link {
  color: #fcfcfc !important;
}
.page-wrapper.background-color-moss .navbar6_logo-link img,
.page-wrapper.background-color-moss .w-nav-brand img,
.page-wrapper.background-color-moss .navbar6_logo {
  filter: none !important;
  opacity: 1 !important;
}

/* ---- HEADER: NO solid moss wall; paper + dark type ---- */
.page-wrapper.background-color-moss .section_blog-post-header {
  background-color: #f7f3ec !important;
  background-image: none !important;
  color: #1c1917 !important;
  padding-bottom: 1.5rem !important;
}
.page-wrapper.background-color-moss .section_blog-post-header h1,
.page-wrapper.background-color-moss .section_blog-post-header .blog-name,
.page-wrapper.background-color-moss .section_blog-post-header .Blog-name,
.page-wrapper.background-color-moss .section_blog-post-header .text-size-large,
.page-wrapper.background-color-moss .section_blog-post-header .text-size-regular,
.page-wrapper.background-color-moss .section_blog-post-header .text-size-small,
.page-wrapper.background-color-moss .section_blog-post-header p,
.page-wrapper.background-color-moss .section_blog-post-header * {
  color: #1c1917 !important;
}

/* Kill TLDR H2 hero */
.page-wrapper.background-color-moss h2.blog-post_title,
.page-wrapper.background-color-moss .blog-post_title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

/* Accent blur gone */
.page-wrapper.background-color-moss .blog-post_accent-blur {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* FULL WIDTH header stack — no 42rem trap */
.page-wrapper.background-color-moss .section_blog-post-header .max-width-xxlarge,
.page-wrapper.background-color-moss .section_blog-post-header .max-width-xxlarge.align-center,
.page-wrapper.background-color-moss .section_blog-post-header .max-width-large,
.page-wrapper.background-color-moss .section_blog-post-header .max-width-large.align-center {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Hero image: full container width */
.page-wrapper.background-color-moss .blog-post-header_image-wrapper {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-wrapper.background-color-moss .blog-post-header_image,
.page-wrapper.background-color-moss .blog-post-header_image-wrapper img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* ---- CONTENT: full site container width ---- */
.page-wrapper.background-color-moss .section_blog-post-content,
.page-wrapper.background-color-moss .padding-section-large.is-blog-post-content {
  background-color: #f7f3ec !important;
  color: #1c1917 !important;
}

.page-wrapper.background-color-moss .section_blog-post-content .max-width-large,
.page-wrapper.background-color-moss .section_blog-post-content .max-width-large.align-center,
.page-wrapper.background-color-moss .section_blog-post-content .align-center {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Body text: full width of container — NO 40rem phone column */
.page-wrapper.background-color-moss .section_blog-post-content .text-rich-text.w-richtext,
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: #1c1917 !important;
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  letter-spacing: -0.01em;
  text-align: left !important;
}

.page-wrapper.background-color-moss .section_blog-post-content .w-richtext p,
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext li {
  color: #1c1917 !important;
  font-size: inherit !important;
  line-height: 1.7 !important;
}

.page-wrapper.background-color-moss .section_blog-post-content .w-richtext h2,
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext h3,
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext h4 {
  color: #1c1917 !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
  text-align: left !important;
}

/* Links: site-ish dark cherry, no loud AI stripe treatment */
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext a {
  color: #5f1410 !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Blockquote/CTA: clean card, NO orange left stripe */
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext blockquote {
  background: #ffffff !important;
  color: #1c1917 !important;
  border-left: none !important;
  border: 1px solid rgba(28, 25, 23, 0.1) !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 1.75rem 0 !important;
  max-width: none !important;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
  text-align: left !important;
}
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext blockquote * {
  color: #1c1917 !important;
}
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext blockquote a {
  color: #5f1410 !important;
  font-weight: 600 !important;
}

.page-wrapper.background-color-moss .section_blog-post-content .w-richtext li {
  margin-bottom: 0.45rem !important;
}
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext ul {
  padding-left: 1.25rem !important;
}

/* Safari figure */
.w-richtext figure.w-richtext-align-fullwidth {
  max-width: 100% !important;
  display: grid;
}

/* ---- FOOTER: dark band so white logo + white links work ---- */
.page-wrapper.background-color-moss .footer2_wrapper,
.page-wrapper.background-color-moss .section_footerv2,
.page-wrapper.background-color-moss .footerv2_component {
  background-color: #1c1917 !important;
  color: #fcfcfc !important;
}
.page-wrapper.background-color-moss .footer2_wrapper *,
.page-wrapper.background-color-moss .section_footerv2 *,
.page-wrapper.background-color-moss .footerv2_component * {
  color: #fcfcfc !important;
}
.page-wrapper.background-color-moss .footer2_wrapper a,
.page-wrapper.background-color-moss .section_footerv2 a,
.page-wrapper.background-color-moss .footer_legal-link,
.page-wrapper.background-color-moss .text-style-link.is-footer-cta,
.page-wrapper.background-color-moss .footer_credit-text {
  color: #fcfcfc !important;
}
.page-wrapper.background-color-moss .footer2_wrapper img,
.page-wrapper.background-color-moss .section_footerv2 img,
.page-wrapper.background-color-moss .footer3_logo {
  filter: none !important;
  opacity: 1 !important;
}
/* form inputs readable on dark */
.page-wrapper.background-color-moss .footer2_wrapper input,
.page-wrapper.background-color-moss .section_footerv2 input,
.page-wrapper.background-color-moss .footerv2_form input {
  color: #1c1917 !important;
  background: #fcfcfc !important;
}

/* Index cards */
.page-wrapper.background-color-moss .blog-header_item,
.page-wrapper.background-color-moss .navbar6_blog-item {
  background: #ffffff !important;
  border-radius: 12px !important;
  color: #1c1917 !important;
}

@media screen and (max-width: 767px) {
  .page-wrapper.background-color-moss .section_blog-post-content .w-richtext {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
  }
}

/* ============================================================
   v4 HERO FIX — site CSS sets wrapper height:50px + overflow:hidden
   and image float/width 500%. That forces a useless ribbon.
   Natural asset is ~1408x768 — show a real hero band.
   ============================================================ */
.page-wrapper.background-color-moss .blog-post-header_image-wrapper {
  width: 100% !important;
  height: auto !important;
  min-height: 280px !important;
  max-height: 420px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 1rem !important;
  margin-bottom: 1.25rem !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  position: relative !important;
}

.page-wrapper.background-color-moss .blog-post-header_image,
.page-wrapper.background-color-moss .blog-post-header_image-wrapper img {
  float: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 280px !important;
  max-height: 420px !important;
  aspect-ratio: 21 / 9 !important;
  object-fit: cover !important;
  object-position: center center !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

/* Header vertical rhythm: less empty cream */
.page-wrapper.background-color-moss .padding-section-large.is-blog-post-header {
  padding-top: 5.5rem !important;
  padding-bottom: 1rem !important;
}
.page-wrapper.background-color-moss .section_blog-post-header h1.blog-name,
.page-wrapper.background-color-moss .section_blog-post-header .blog-name {
  max-width: 48rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
}
.page-wrapper.background-color-moss .section_blog-post-header .margin-bottom.margin-medium {
  margin-bottom: 1rem !important;
}

@media screen and (max-width: 767px) {
  .page-wrapper.background-color-moss .blog-post-header_image-wrapper,
  .page-wrapper.background-color-moss .blog-post-header_image {
    min-height: 180px !important;
    max-height: 240px !important;
    aspect-ratio: 16 / 9 !important;
  }
  .page-wrapper.background-color-moss .padding-section-large.is-blog-post-header {
    padding-top: 4rem !important;
  }
}

/* ---- v4.1: modern nav (less "old olive chrome") + Q&A type scale ---- */
.page-wrapper.background-color-moss .navbar6_component.white,
.page-wrapper.background-color-moss .navbar6_component {
  background-color: #1c1917 !important; /* match modern footer band */
}

/* Q&A / post body: headings as editorial, not stacked display titles */
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext h2,
.page-wrapper.background-color-moss .section_blog-post-content .text-rich-text.w-richtext h2 {
  font-size: 1.375rem !important; /* ~22px */
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin-top: 2.25rem !important;
  margin-bottom: 0.6rem !important;
  max-width: 40rem !important;
}
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext h3 {
  font-size: 1.125rem !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
  max-width: 40rem !important;
}
.page-wrapper.background-color-moss .section_blog-post-content .w-richtext p {
  max-width: 40rem !important; /* readable measure for long Q&A prose only */
}