.elementor-8786 .elementor-element.elementor-element-74264c4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}/* Start custom CSS *//* ==============================
   KAIMITO — FLOAT IMAGE WRAP + FIX OVERLAP
   ============================== */

/* 1) Float lead image (works if class is on the Image block or the Figure block) */
@media (min-width: 900px){
  /* If class is on the Image block wrapper/figure */
  .km-reading .entry-content figure.km-float-lead{
    float: left !important;
    width: 320px !important;          /* adjust 280–360 if you want */
    max-width: 40% !important;
    margin: 6px 22px 14px 0 !important;
  }

  /* If class is on the IMG itself */
  .km-reading .entry-content img.km-float-lead{
    float: left !important;
    width: 320px !important;
    max-width: 40% !important;
    margin: 6px 22px 14px 0 !important;
    display: block !important;
  }

  /* Make the image look premium */
  .km-reading .entry-content figure.km-float-lead img,
  .km-reading .entry-content img.km-float-lead{
    border-radius: 16px !important;
    height: auto !important;
  }

  /* IMPORTANT: stop headings from colliding with float */
  .km-reading .entry-content h2,
  .km-reading .entry-content h3,
  .km-reading .entry-content h4{
    clear: both !important; /* prevents the “overlapping stack” issue */
  }
}

/* Mobile: don’t float */
@media (max-width: 899px){
  .km-reading .entry-content figure.km-float-lead,
  .km-reading .entry-content img.km-float-lead{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 !important;
  }
}

/* Optional: if you want wrap ONLY for the intro paragraphs,
   add a Gutenberg HTML block after your intro with class "km-float-clear" */
.km-reading .entry-content .km-float-clear{
  clear: both !important;
}

/* 2) Fix Table of Contents overlap (your screenshot shows list items collapsing) */
.km-reading .elementor-widget-table-of-contents .elementor-toc__list,
.km-reading .elementor-widget-table-of-contents .elementor-toc__list-item{
  line-height: 1.5 !important;
}

.km-reading .elementor-widget-table-of-contents .elementor-toc__list-item{
  margin: 6px 0 !important;
}

.km-reading .elementor-widget-table-of-contents a{
  display: inline-block !important;
  padding: 2px 0 !important;
}

/* ==============================
   KAIMITO — MODERN POST POLISH (ADD-ON)
   Uses locked palette + calm editorial feel
   ============================== */

/* 1) Add subtle page rhythm (keeps it from feeling flat) */
.km-bg-cream{ background: #FFFDF5; 
  line-height: 1.5 !important;
}
.km-bg-surface{ background: #F8FAFC; }
.km-bg-highlight{ background: #F4F7E8; }

/* Optional: if your TOC section is currently white, this gives it surface feel */
.km-reading .elementor-widget-table-of-contents{
  background: #F8FAFC !important;
}

/* 2) TOC: narrower width + centered + modern card spacing */
@media (min-width: 900px){
  .km-reading .elementor-widget-table-of-contents{
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* TOC typography + spacing */
.km-reading .elementor-widget-table-of-contents{
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
}

.km-reading .elementor-widget-table-of-contents .elementor-toc__header-title{
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.km-reading .elementor-widget-table-of-contents .elementor-toc__list-item{
  margin: 6px 0 !important;
  line-height: 1.45 !important;
}

.km-reading .elementor-widget-table-of-contents a{
  color: #164F86 !important;         /* Secondary Dark */
  font-weight: 600 !important;
  text-decoration: none !important;
}

.km-reading .elementor-widget-table-of-contents a:hover{
  color: #8B2F5E !important;         /* Plum accent */
  text-decoration: underline !important;
}

/* 3) Improve body readability: enforce consistent spacing */
.km-reading .elementor-widget-theme-post-content .entry-content p{
  margin: 0 0 16px !important;
}

/* H2 spacing (stronger section separation) */
.km-reading .elementor-widget-theme-post-content .entry-content h2{
  margin-top: 36px !important;
  margin-bottom: 14px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
}

/* H3 spacing fix (your specific complaint) */
.km-reading .elementor-widget-theme-post-content .entry-content h3{
  margin-top: 48px !important;     /* space before */
  margin-bottom: 25px !important;  /* space after */
  line-height: 1.25 !important;
}

/* Add a little extra space after any heading when the next element is a paragraph */
.km-reading .elementor-widget-theme-post-content .entry-content h2 + p,
.km-reading .elementor-widget-theme-post-content .entry-content h3 + p{
  margin-top: 6px !important;
}

/* 4) Make the page feel “designed” with gentle dividers */
.km-reading .elementor-widget-theme-post-content .entry-content hr{
  border: none !important;
  border-top: 1px solid #E2E8F0 !important;
  margin: 26px 0 !important;
}

/* 5) Quick Picks / callout boxes: modern but calm (no shadow) */
.km-bg-surface .km-reading,
.km-bg-highlight .km-reading{
  border: 1px solid #E2E8F0;
  border-radius: 16px;
}

/* 6) Optional: make the date/meta feel more intentional */
.km-reading .elementor-widget-theme-post-info{
  color: #475569 !important;
  font-size: 13px !important;
}

/* 7) Margin for H3 */
.elementor-kit-10 h3
 {
    margin-top: 35px;
    margin-bottom: 25px;
}


/* ==============================
   KAIMITO — HTML IMAGE WRAP
   ============================== */

/* Desktop wrap */
@media (min-width: 900px){
  .km-reading img.km-float-lead{
    float: left;
    width: 300px;           /* sweet spot: 280–360 */
    max-width: 30%;
    margin: 6px 22px 14px 0;
    border-radius: 16px;
    height: auto;
    display: block;
  }

  /* Prevent headings from crashing into the image */
  .km-reading h2,
  .km-reading h3,
  .km-reading h4{
    clear: both;
  }
}

/* Mobile: stack normally */
@media (max-width: 899px){
  .km-reading img.km-float-lead{
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 14px 0;
  }
}/* End custom CSS */