.elementor-24342 .elementor-element.elementor-element-10eeabd{--display:flex;}/* Start custom CSS for heading, class: .elementor-element-8587a2d *//* =========================================
   KETO ZONE — HEADING WIDGET ONLY
   Apply to Elementor Heading widget class: dc-hero-heading
   ========================================= */

:root{
  /* Keto Zone-ish palette: deep navy + teal + keto lime */
  --kz-navy: #0B1B3A;
  --kz-teal: #00B5D8;
  --kz-lime: #A3E635;
}

/* Main heading */
.dc-hero-heading .elementor-heading-title{
  color: var(--kz-navy);
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 1.05;
  font-size: clamp(34px, 4vw, 56px);
  margin: 0;
  text-wrap: balance; /* nicer line breaks where supported */
}

/* Premium underline (Keto Zone vibe) */
.dc-hero-heading .elementor-heading-title{
  position: relative;
  padding-bottom: 14px;
}

.dc-hero-heading .elementor-heading-title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(220px, 58%);
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kz-teal), var(--kz-lime));
  box-shadow: 0 10px 22px rgba(0, 181, 216, .18);
  opacity: .98;
}

/* Optional: subtle “glow” on hover (feels modern) */
.dc-hero-heading:hover .elementor-heading-title::after{
  box-shadow: 0 14px 28px rgba(163, 230, 53, .18), 0 12px 26px rgba(0, 181, 216, .22);
}

/* Mobile tuning */
@media (max-width: 640px){
  .dc-hero-heading .elementor-heading-title{
    font-size: clamp(30px, 7vw, 40px);
    line-height: 1.08;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-737aac2 *//* =========================================================
   A) SELECTORS — if your theme differs, update these.
   ---------------------------------------------------------
   Common content wrapper options:
   .entry-content, .elementor-widget-theme-post-content,
   .wp-block-post-content, .post-content, .content-area
   ========================================================= */

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content){
  max-width: var(--dc-maxw);
  margin-inline: auto;
  padding-inline: clamp(18px, 3vw, 28px);
  color: var(--dc-text);
}

/* Improve base font for long reading */
body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content){
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   HERO / TOP LABEL (“DR. DON COLBERT...” pill)
   ========================================================= */

/* If that label is a paragraph/small heading at the top */
body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content)
  :is(p, h6, .subtitle, .post-subtitle):first-child{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(22,163,74,.22);
  background: rgba(22,163,74,.08);
  color: rgba(15,23,42,.88);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 14px 0 18px;
}

/* =========================================================
   HEADINGS
   ========================================================= */

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) h1{
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 6px 0 18px;
  font-weight: 900;
}

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) h2{
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  margin: 46px 0 14px;
  font-weight: 850;
  letter-spacing: -0.02em;
  position: relative;
  padding-top: 10px;
}

/* Fancy accent underline for H2 */
body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) h2::after{
  content:"";
  display:block;
  height: 4px;
  width: 110px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dc-accent), var(--dc-accent-2));
  opacity: .9;
}

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) h3{
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.3;
  margin: 28px 0 10px;
  font-weight: 800;
}

/* Improve paragraph rhythm */
body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) p{
  margin: 14px 0;
  color: rgba(15,23,42,.90);
}

/* Strong text looks intentional */
body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) strong{
  color: rgba(15,23,42,.95);
  font-weight: 800;
}

/* =========================================================
   LINKS
   ========================================================= */

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) a{
  color: var(--dc-link);
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(90deg, rgba(29,78,216,.18), rgba(29,78,216,.18));
  background-size: 100% 28%;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: filter .18s ease, transform .18s ease;
}

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) a:hover{
  filter: brightness(.9);
}

/* =========================================================
   INTRO PARAGRAPH — makes the opener feel “pro”
   (Applies to first paragraph after H1)
   ========================================================= */

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) h1 + p{
  font-size: 19px;
  line-height: 1.75;
  color: rgba(15,23,42,.82);
  margin-top: 10px;
}

/* =========================================================
   QUICK NAVIGATION / TOC BLOCK
   ---------------------------------------------------------
   Works when you have a “Quick Navigation:” line and a list.
   If your TOC has a wrapper class, you can target it instead.
   ========================================================= */

/* Find the paragraph that contains "Quick Navigation" and style it */
body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content)
  p:has(strong):has(> strong:only-child){
  /* leave general paragraphs alone */
}

/* If your TOC heading is a bold paragraph like “Quick Navigation: ...” */
body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content)
  p strong:contains("Quick Navigation"){
  /* Not supported in pure CSS across browsers; ignore. */
}

/* Practical approach: style any TOC wrapper if present */
body.single :is(.kz-toc, .toc, .ez-toc-container, .rank-math-toc, .wp-block-table-of-contents){
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 18px 18px 10px 18px;
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(22,163,74,.10), transparent 50%),
    radial-gradient(1200px 500px at 90% 0%, rgba(245,158,11,.10), transparent 50%),
    var(--dc-surface);
  box-shadow: var(--dc-shadow);
  margin: 34px 0 26px;
}

/* If you do NOT have a TOC wrapper, you can manually wrap it in HTML:
   <div class="kz-toc"> ... </div>
*/

/* TOC title */
body.single :is(.kz-toc, .toc, .ez-toc-container, .rank-math-toc, .wp-block-table-of-contents) :is(.toc-title, .ez-toc-title, h2, h3, p strong){
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* TOC list */
body.single :is(.kz-toc, .toc, .ez-toc-container, .rank-math-toc, .wp-block-table-of-contents) ol,
body.single :is(.kz-toc, .toc, .ez-toc-container, .rank-math-toc, .wp-block-table-of-contents) ul{
  margin: 12px 0 6px;
  padding-left: 22px;
}

body.single :is(.kz-toc, .toc, .ez-toc-container, .rank-math-toc, .wp-block-table-of-contents) li{
  margin: 10px 0;
  line-height: 1.4;
  color: rgba(15,23,42,.88);
}

body.single :is(.kz-toc, .toc, .ez-toc-container, .rank-math-toc, .wp-block-table-of-contents) a{
  background-image: none;
  color: rgba(15,23,42,.92);
  font-weight: 800;
  text-decoration: none;
}

body.single :is(.kz-toc, .toc, .ez-toc-container, .rank-math-toc, .wp-block-table-of-contents) a:hover{
  color: var(--dc-accent);
}

/* =========================================================
   LISTS (your Top 10 items should look crisp)
   ========================================================= */

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) ul,
body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) ol{
  margin: 16px 0 18px;
  padding-left: 22px;
}

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) li{
  margin: 10px 0;
}

/* If your “Top 10 supplements” list is an ordered list,
   this makes the numbers look premium */
body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) ol{
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) ol > li{
  counter-increment: item;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  background: rgba(15,23,42,.02);
}

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) ol > li::before{
  content: counter(item);
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
  border: 1px solid rgba(22,163,74,.25);
  background: rgba(22,163,74,.10);
}

/* Make the supplement name pop if it’s bolded */
body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) ol > li strong{
  font-weight: 900;
}

/* =========================================================
   QUOTES / CALLOUTS (if you add them later)
   ========================================================= */

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) blockquote{
  margin: 26px 0;
  padding: 18px 18px 18px 18px;
  border-left: 5px solid var(--dc-accent);
  border-radius: 14px;
  background: rgba(22,163,74,.06);
  color: rgba(15,23,42,.88);
}

/* =========================================================
   SEPARATORS / HR
   ========================================================= */

body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) hr{
  border: 0;
  height: 1px;
  background: rgba(15,23,42,.10);
  margin: 34px 0;
}

/* =========================================================
   MOBILE TUNING
   ========================================================= */

@media (max-width: 640px){
  body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content){
    font-size: 17px;
    line-height: 1.75;
  }

  body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) h1{
    font-size: 34px;
  }

  body.single :is(.entry-content, .elementor-widget-theme-post-content, .wp-block-post-content, .post-content) ol > li{
    grid-template-columns: 34px 1fr;
    padding: 12px 12px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}/* End custom CSS */