/* =========================================
   EBE / Phyto – Unified Rich Text Styling
   Works for ALL dynamic pages
   ========================================= */

/* Base text */
.custom-css-styling {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

/* -----------------------------------------
   Headings
----------------------------------------- */

.custom-css-styling h1 {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 0 14px 0 !important;
}

.custom-css-styling h2 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 28px 0 10px 0 !important;
}

.custom-css-styling h3 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 22px 0 8px 0 !important;
}

.custom-css-styling h4 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin: 18px 0 6px 0 !important;
}

/* -----------------------------------------
   Line breaks (normalize everywhere)
----------------------------------------- */

.category-22 br {
  display: none !important;
}

/* -----------------------------------------
   Paragraphs
----------------------------------------- */

.custom-css-styling p {
  margin: 0 0 12px 0 !important;
  line-height: 1.65 !important;
}

/* Prevent extra gaps when p is inside li */
.custom-css-styling li p {
  margin: 0 !important;
}

/* -----------------------------------------
   Lists
----------------------------------------- */

.custom-css-styling ul,
.custom-css-styling ol {
  margin: 6px 0 16px 0 !important;
  padding-left: 1.3rem !important;
}

.custom-css-styling li {
  margin: 4px 0 !important;
  line-height: 1.5 !important;
}

/* Tighten heading → list spacing */
.custom-css-styling h1 + ul,
.custom-css-styling h2 + ul,
.custom-css-styling h3 + ul,
.custom-css-styling h4 + ul,
.custom-css-styling h1 + ol,
.custom-css-styling h2 + ol,
.custom-css-styling h3 + ol,
.custom-css-styling h4 + ol {
  margin-top: 6px !important;
}

/* -----------------------------------------
   Section rhythm
----------------------------------------- */

/* Add breathing room before new sections */
.custom-css-styling p + h2,
.custom-css-styling p + h3,
.custom-css-styling ul + h2,
.custom-css-styling ul + h3,
.custom-css-styling ol + h2,
.custom-css-styling ol + h3 {
  margin-top: 28px !important;
}

/* -----------------------------------------
   Emphasis
----------------------------------------- */

.custom-css-styling strong {
  font-weight: 600 !important;
}

/* -----------------------------------------
   Mobile adjustments
----------------------------------------- */

@media (max-width: 768px) {
  .custom-css-styling {
    font-size: 15px !important;
  }

  .custom-css-styling h1 {
    font-size: 1.8rem !important;
  }

  .custom-css-styling h2 {
    font-size: 1.4rem !important;
  }
}
