/* =========================================================
   CoHostMarket Blog Layout + Brand Styling
   Brand: #008489
   ========================================================= */

/* --- Layout container: use more width (less "centered") --- */
.cmh-article{
  width: 100%;
  max-width: 1320px;          /* increase usable space */
  margin: 0 auto;
  padding: 0 14px;            /* small side padding */
}

/* If your theme adds a big left padding/margin in the blog content area,
   you can override it here by targeting your article wrapper only. */
.cmh-article{
  box-sizing: border-box;
}

/* --- STOP any newspaper/multi-column behavior from theme --- */
.cmh-article,
.cmh-article *{
  column-count: 1 !important;
  column-width: auto !important;
  column-gap: normal !important;
  column-rule: none !important;
}

/* --- Two-column layout: give main more space and push sidebar right --- */
.cmh-layout{
  display: flex !important;
  align-items: flex-start !important;
  gap: 34px !important;       /* space between content + sidebar */
}

/* Main column: wider */
.cmh-main{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Sidebar: fixed width, sits right */
.cmh-sidebar{
  flex: 0 0 360px !important;
}

/* If your page is still looking too centered, try widening the sidebar slightly */
@media (min-width: 1200px){
  .cmh-sidebar{ flex-basis: 380px !important; }
}

/* --- Sticky newsletter --- */
.cmh-sticky{
  position: sticky !important;
  top: 110px !important;
  z-index: 10 !important;
}

/* Sticky breaks if any parent has overflow hidden */
.cmh-article,
.cmh-layout,
.cmh-main,
.cmh-sidebar,
.cmh-sticky{
  overflow: visible !important;
}

/* =========================================================
   Typography + Article Blocks
   ========================================================= */
.cmh-main p,
.cmh-main li{
  font-size: 16.5px;
  line-height: 1.75;
  color: #2b2f33;
}

.cmh-main h2{
  margin: 26px 0 10px;
  font-size: 30px;
  line-height: 1.2;
  color: #111827;
}

.cmh-main h3{
  margin: 0 0 10px;
  font-size: 20px;
  color: #111827;
}

/* Cards: light modern look */
.cmh-card{
  background: #f8fafc;
  border: 1px solid #e6edf3;
  border-radius: 14px;
  padding: 18px 18px;
}

/* Callout: brand accent */
.cmh-callout{
  background: #e8f6f5;
  border: 1px solid #bfe7e4;
  border-left: 6px solid #008489;
  border-radius: 12px;
  padding: 14px 14px;
}

/* HR */
.cmh-hr{
  border: 0;
  height: 1px;
  background: #e6edf3;
  margin: 26px 0;
}

/* =========================================================
   Newsletter Box (Light + Brand Green)
   ========================================================= */
.cmh-newsletter{
  background: #f6f9fb;              /* light grey instead of black */
  border: 1px solid #e6edf3;
  border-radius: 16px;
  padding: 18px 18px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
}

.cmh-kicker{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #667085;
  margin: 0 0 8px;
}

.cmh-title{
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 8px;
  color: #0f172a;
  font-weight: 800;
}

.cmh-subtitle{
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 14px;
  color: #475467;
}

/* Inputs */
.cmh-newsletter label{
  display: block;
  font-size: 13px;
  color: #344054;
  margin: 10px 0 6px;
  font-weight: 600;
}

.cmh-newsletter input{
  width: 100%;
  border: 1px solid #d0d5dd;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.cmh-newsletter input:focus{
  border-color: #008489;
  box-shadow: 0 0 0 4px rgba(0, 132, 137, 0.12);
}

/* Button */
.cmh-newsletter button{
  width: 100%;
  border: 0;
  margin-top: 14px;
  background: #008489;
  color: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.cmh-newsletter button:hover{
  filter: brightness(0.96);
}

.cmh-smallprint{
  margin: 10px 0 0;
  font-size: 12px;
  color: #667085;
}

/* =========================================================
   CTA (Light Grey + Brand Button)
   ========================================================= */
.cmh-cta{
  background: #f6f9fb;
  border: 1px solid #e6edf3;
  border-radius: 16px;
  padding: 18px 18px;
  margin-top: 26px;
}

.cmh-cta h3{
  margin-top: 0;
  margin-bottom: 10px;
}

.cmh-cta a{
  display: inline-block;
  margin-top: 12px;
  background: #008489;
  color: #ffffff !important;
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 800;
}

/* =========================================================
   Mobile: stack layout, disable sticky
   ========================================================= */
@media (max-width: 991px){
  .cmh-layout{ display: block !important; }
  .cmh-sidebar{ width: 100% !important; margin-top: 18px !important; }
  .cmh-sticky{ position: static !important; top: auto !important; }
  .cmh-main h2{ font-size: 26px; }
}

/* Break out of theme container */
.cmh-article{
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Reduce the leftover left gutter without breaking the theme layout */
.cmh-article{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cmh-layout{
  padding-left: 0 !important;
  margin-left: 0 !important;
}


/* =========================================
   CoHostMarket Blog Enhancements
   Progress Bar + TOC + CTA + Related Posts
   Brand: #008489
========================================= */

:root{
  --cmh-brand: #008489;
  --cmh-bg: #ffffff;
  --cmh-soft: #f5f7f9;
  --cmh-border: #e6edf2;
  --cmh-text: #1f2937;
  --cmh-muted: #6b7280;
}

/* ---------- Reading Progress Bar ---------- */
.cmh-progress-wrap{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.06);
  z-index: 9999;
}
.cmh-progress-bar{
  height: 100%;
  width: 0%;
  background: var(--cmh-brand);
  transition: width 0.08s linear;
}

/* Avoid overlap with sticky header if any */
body{ scroll-padding-top: 90px; }

/* ---------- Anchor Menu (TOC) ---------- */
.cmh-toc{
  background: var(--cmh-soft);
  border: 1px solid var(--cmh-border);
  border-radius: 14px;
  padding: 16px 16px;
  margin: 0 0 18px;
}
.cmh-toc .cmh-kicker{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cmh-muted);
}
.cmh-toc ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.cmh-toc li{
  margin: 8px 0;
}
.cmh-toc a{
  color: #0f172a;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  display: inline-block;
}
.cmh-toc a:hover{
  color: var(--cmh-brand);
  text-decoration: underline;
}
.cmh-toc a.is-active{
  color: var(--cmh-brand);
  font-weight: 700;
}

/* ---------- Inline Mid-Article CTA ---------- */
.cmh-inline-cta{
  background: linear-gradient(135deg, rgba(0,132,137,0.10), rgba(0,132,137,0.04));
  border: 1px solid rgba(0,132,137,0.25);
  border-radius: 16px;
  padding: 18px 18px;
  margin: 22px 0;
}
.cmh-inline-cta .cmh-inline-cta-title{
  margin: 0 0 6px;
  font-size: 18px;
  color: #0f172a;
  font-weight: 800;
}
.cmh-inline-cta p{
  margin: 0 0 12px;
  color: var(--cmh-muted);
}
.cmh-inline-cta .cmh-inline-cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cmh-btn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}
.cmh-btn-primary{
  background: var(--cmh-brand);
  color: #fff;
  border: 1px solid var(--cmh-brand);
}
.cmh-btn-primary:hover{ filter: brightness(0.95); }
.cmh-btn-ghost{
  background: #fff;
  color: var(--cmh-brand);
  border: 1px solid rgba(0,132,137,0.35);
}
.cmh-btn-ghost:hover{ background: rgba(0,132,137,0.06); }

/* ---------- Related Posts ---------- */
.cmh-related{
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cmh-border);
}
.cmh-related h3{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
}
.cmh-related-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.cmh-related-card{
  background: #fff;
  border: 1px solid var(--cmh-border);
  border-radius: 14px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cmh-related-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.cmh-related-tag{
  display: inline-block;
  font-size: 12px;
  color: var(--cmh-brand);
  font-weight: 800;
  margin-bottom: 8px;
}
.cmh-related-title{
  font-weight: 900;
  margin: 0 0 6px;
  line-height: 1.25;
  color: #0f172a;
}
.cmh-related-desc{
  margin: 0;
  font-size: 13px;
  color: var(--cmh-muted);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 1100px){
  .cmh-related-grid{ grid-template-columns: 1fr; }
}

/* TOC: keep bullets inside the box */
.cmh-toc ul{
  list-style: none;           /* remove default bullets */
  margin: 10px 0 0;
  padding: 0;                 /* remove default left padding that pushes bullets out */
}

.cmh-toc li{
  position: relative;
  padding-left: 18px;         /* space for custom bullet */
  margin: 8px 0;
}

/* Custom bullet */
.cmh-toc li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #008489;        /* your brand green */
  transform: translateY(-50%);
}

/* Links */
.cmh-toc a{
  color: #111827;
  text-decoration: none;
  display: inline-block;
  line-height: 1.35;
}

.cmh-toc a:hover{
  color: #008489;
  text-decoration: underline;
}

/* HARD remove default list bullets (all browsers) */
.cmh-toc ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Prevent ::marker (modern browsers) */
.cmh-toc li::marker{
  content: none;
}

/* List item spacing + custom bullet */
.cmh-toc li{
  position: relative;
  padding-left: 18px;
  margin: 8px 0;
}

/* Custom green bullet */
.cmh-toc li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #008489;
  transform: translateY(-50%);
}

.cmh-cta-highlight {
  color: #008489;
  font-weight: 600;
}

/* Related posts block */
.cmh-related{
  margin-top: 26px !important;
}

.cmh-related h3{
  margin: 0 0 12px !important;
}

/* Grid layout + spacing between cards */
.cmh-related-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important; /* ✅ space between cards */
}

/* Card styling */
.cmh-related-card{
  display: block !important;
  text-decoration: none !important;
  background: #ffffff !important;
  border: 1px solid #e6eef5 !important;
  border-radius: 14px !important;
  padding: 16px 16px 18px !important;
  margin: 0 !important; /* IMPORTANT: prevents theme margins fighting gap */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cmh-related-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12, 33, 56, 0.10);
  border-color: rgba(0, 132, 137, 0.35);
}

/* Responsive */
@media (max-width: 980px){
  .cmh-related-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* CTA buttons spacing */
.cmh-cta-buttons{
  display: flex;
  gap: 12px; /* 👈 space between buttons */
  flex-wrap: wrap;
}

/* Inline CTA buttons spacing */
.cmh-inline-cta-actions{
  display: flex;
  gap: 12px; /* 👈 space between buttons */
  flex-wrap: wrap;
  margin-top: 12px;
}

/* FORCE spacing between the 2 CTA buttons (wins vs theme styles) */
.cmh-inline-cta-actions{
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px !important;
  margin-top: 12px;
}

/* Remove any theme margins that may cause button collision */
.cmh-inline-cta-actions .cmh-btn{
  margin: 0 !important;
}

/* Fallback: if gap is ignored or theme forces inline layout */
.cmh-inline-cta-actions .cmh-btn + .cmh-btn{
  margin-left: 12px !important;
}