/* Designed blog articles (from the Avada custom CSS) */
/* ============================================================

   EVE CLINICS — BLOG CUSTOM STYLES

   Add this to: Appearance → Customise → Additional CSS

   OR your child theme's style.css

   ============================================================ */



/* ── Brand Variables ─────────────────────────────────────── */

:root {

  --ec-green:      #0f9280;

  --ec-green-dark: #005560;

  --ec-yellow:     #e6af2e;

  --ec-purple:     #7d6b91;

  --ec-dark:       #1d1d1d;

  --ec-bg-light:   #f4faf9;

  --ec-bg-teal:    #e8f5f3;

  --ec-rule:       #d0e8e4;

}
/* ── Post Body Typography ────────────────────────────────── */

.ec-blog p {

  color: #3a3a3a;

  font-size: 16.5px;

  line-height: 1.85;

  margin-bottom: 20px;

}
/* ── Headings with green top rule ────────────────────────── */

.ec-blog h2 {

  font-size: clamp(22px, 2.8vw, 30px);

  color: var(--ec-green-dark);

  margin-top: 52px;

  margin-bottom: 16px;

  padding-top: 18px;

  border-top: 3px solid var(--ec-green);

  line-height: 1.25;

}
.ec-blog h3 {

  font-size: 19px;

  color: var(--ec-dark);

  margin-top: 32px;

  margin-bottom: 10px;

  padding-left: 14px;

  border-left: 3px solid var(--ec-yellow);

  line-height: 1.3;

}
/* ── Horizontal Rule ─────────────────────────────────────── */

.ec-blog hr {

  border: none;

  border-top: 1px solid var(--ec-rule);

  margin: 44px 0;

}
/* ── Intro Pull Quote ────────────────────────────────────── */

.ec-blog .ec-intro {

  font-size: 18px;

  line-height: 1.7;

  color: #4a4a4a;

  border-left: 4px solid var(--ec-green);

  padding: 14px 22px;

  margin-bottom: 36px;

  background: var(--ec-bg-teal);

  font-style: italic;

}
/* ── Callout / Info Box ──────────────────────────────────── */

.ec-blog .ec-callout {

  background: var(--ec-bg-teal);

  border-left: 4px solid var(--ec-green);

  padding: 20px 26px;

  margin: 32px 0;

  border-radius: 2px;

}
.ec-blog .ec-callout strong {

  display: block;

  color: var(--ec-green-dark);

  font-size: 14px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  margin-bottom: 8px;

}
.ec-blog .ec-callout p {

  margin-bottom: 0;

  font-size: 15.5px;

  color: #3a3a3a;

}
/* ── Dark Callout (teal background) ─────────────────────── */

.ec-blog .ec-callout-dark {

  background: var(--ec-green-dark);

  border-left: 4px solid var(--ec-yellow);

  padding: 20px 26px;

  margin: 32px 0;

  border-radius: 2px;

}
.ec-blog .ec-callout-dark strong {

  display: block;

  color: var(--ec-yellow);

  font-size: 14px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  margin-bottom: 8px;

}
.ec-blog .ec-callout-dark p {

  margin-bottom: 0;

  font-size: 15.5px;

  color: rgba(255,255,255,0.82);

}
/* ── Blockquote (legacy — maps to callout style) ─────────── */

.ec-blog blockquote {

  background: var(--ec-bg-teal);

  border-left: 4px solid var(--ec-green);

  padding: 20px 26px;

  margin: 32px 0;

  border-radius: 2px;

  font-style: normal;

}
.ec-blog blockquote p {

  margin-bottom: 0;

  font-size: 15.5px;

  color: #3a3a3a;

}
/* ── Lists ───────────────────────────────────────────────── */

.ec-blog ul,

.ec-blog ol {

  margin: 0 0 22px 0;

  padding-left: 0;

  list-style: none;

}
.ec-blog ul li,

.ec-blog ol li {

  padding: 7px 0 7px 28px;

  position: relative;

  border-bottom: 1px solid var(--ec-rule);

  font-size: 15.5px;

  color: #3a3a3a;

  line-height: 1.6;

}
.ec-blog ul li:last-child,

.ec-blog ol li:last-child {

  border-bottom: none;

}
.ec-blog ul li::before {

  content: '';

  position: absolute;

  left: 0;

  top: 16px;

  width: 10px;

  height: 2px;

  background: var(--ec-green);

}
.ec-blog ol {

  counter-reset: ec-counter;

}
.ec-blog ol li::before {

  counter-increment: ec-counter;

  content: counter(ec-counter);

  position: absolute;

  left: 0;

  top: 7px;

  width: 20px;

  height: 20px;

  background: var(--ec-green);

  color: #fff;

  font-size: 11px;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

}
/* ── Tables ──────────────────────────────────────────────── */

.ec-blog table {

  width: 100%;

  border-collapse: collapse;

  margin: 28px 0 36px;

  font-size: 14.5px;

}
.ec-blog table thead tr {

  background: var(--ec-green-dark);

}
.ec-blog table thead th {

  color: #fff;

  padding: 13px 16px;

  text-align: left;

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-weight: 600;

}
.ec-blog table tbody tr {

  border-bottom: 1px solid var(--ec-rule);

}
.ec-blog table tbody tr:nth-child(even) {

  background: var(--ec-bg-teal);

}
.ec-blog table tbody td {

  padding: 12px 16px;

  color: #3a3a3a;

  vertical-align: top;

}
/* ── Day-by-Day Timeline ─────────────────────────────────── */

.ec-timeline {

  margin: 32px 0 48px;

  position: relative;

}
.ec-timeline::before {

  content: '';

  position: absolute;

  left: 30px;

  top: 0;

  bottom: 0;

  width: 2px;

  background: var(--ec-rule);

}
.ec-tl-item {

  display: flex;

  gap: 24px;

  margin-bottom: 28px;

  position: relative;

}
.ec-tl-badge {

  flex-shrink: 0;

  width: 60px;

  height: 60px;

  background: var(--ec-green-dark);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  z-index: 1;

  border-radius: 2px;

}
.ec-tl-badge .ec-day-label {

  font-size: 8px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: rgba(255,255,255,0.65);

  line-height: 1;

  font-family: inherit;

}
.ec-tl-badge .ec-day-num {

  font-size: 18px;

  font-weight: 700;

  color: #fff;

  line-height: 1.2;

}
.ec-tl-item.ec-tl-milestone .ec-tl-badge {

  background: var(--ec-yellow);

}
.ec-tl-item.ec-tl-milestone .ec-tl-badge .ec-day-label {

  color: var(--ec-dark);

  opacity: 0.7;

}
.ec-tl-item.ec-tl-milestone .ec-tl-badge .ec-day-num {

  color: var(--ec-dark);

}
.ec-tl-content {

  flex: 1;

  padding-top: 6px;

}
.ec-tl-content h3 {

  margin-top: 0;

  margin-bottom: 8px;

  border-left: none;

  padding-left: 0;

  font-size: 17px;

}
.ec-tl-content p {

  font-size: 15px;

  margin-bottom: 0;

}
/* ── Planning Grid ───────────────────────────────────────── */

.ec-plan-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin: 28px 0 40px;

}
.ec-plan-card {

  background: #fff;

  border: 1px solid var(--ec-rule);

  border-top: 3px solid var(--ec-green);

  padding: 18px 20px;

}
.ec-plan-card.ec-caution {

  border-top-color: var(--ec-yellow);

}
.ec-plan-card.ec-avoid {

  border-top-color: var(--ec-purple);

}
.ec-plan-card .ec-plan-q {

  font-weight: 600;

  font-size: 14.5px;

  color: var(--ec-dark);

  margin-bottom: 6px;

}
.ec-plan-card .ec-plan-a {

  font-size: 14px;

  color: #5a5a5a;

  line-height: 1.55;

  margin-bottom: 0;

}
/* ── Author Box ──────────────────────────────────────────── */

.ec-author {

  display: flex;

  gap: 20px;

  align-items: flex-start;

  background: var(--ec-bg-teal);

  border: 1px solid var(--ec-rule);

  border-left: 4px solid var(--ec-green);

  padding: 24px;

  margin-top: 48px;

}
.ec-author-avatar {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  background: var(--ec-green);

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  font-weight: 700;

  color: #fff;

  letter-spacing: -0.02em;

}
.ec-author-name {

  font-size: 17px;

  font-weight: 700;

  color: var(--ec-green-dark);

  margin-bottom: 2px;

}
.ec-author-cred {

  font-size: 11px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--ec-green);

  margin-bottom: 8px;

}
.ec-author-bio {

  font-size: 14px;

  color: #4a4a4a;

  line-height: 1.6;

  margin-bottom: 0;

}
/* ── FAQ Accordion ───────────────────────────────────────── */

.ec-faq { margin: 24px 0; }
.ec-faq-item {

  border-top: 1px solid var(--ec-rule);

}
.ec-faq-item:last-child {

  border-bottom: 1px solid var(--ec-rule);

}
.ec-faq-question {

  font-weight: 600;

  font-size: 16px;

  color: var(--ec-dark);

  padding: 18px 36px 18px 0;

  cursor: pointer;

  position: relative;

  user-select: none;

  line-height: 1.4;

}
.ec-faq-question::after {

  content: '+';

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  font-size: 24px;

  font-weight: 300;

  color: var(--ec-green);

  transition: transform 0.25s;

}
.ec-faq-item.open .ec-faq-question::after {

  transform: translateY(-50%) rotate(45deg);

}
.ec-faq-answer {

  font-size: 15px;

  color: #4a4a4a;

  line-height: 1.75;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.35s ease, padding 0.25s;

}
.ec-faq-item.open .ec-faq-answer {

  max-height: 600px;

  padding-bottom: 20px;

}
/* ── CTA Banner ──────────────────────────────────────────── */

.ec-cta {

  background: var(--ec-green-dark);

  padding: 32px 36px;

  margin: 44px 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 20px;

  border-radius: 2px;

}
.ec-cta p {

  color: rgba(255,255,255,0.88) !important;

  font-size: 16px !important;

  margin-bottom: 0 !important;

  flex: 1;

  min-width: 200px;

}
.ec-cta p strong {

  display: block;

  color: #fff;

  font-size: 18px;

  margin-bottom: 6px;

}
.ec-cta a {

  background: var(--ec-yellow);

  color: var(--ec-dark) !important;

  padding: 12px 28px;

  font-weight: 700;

  font-size: 13px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  text-decoration: none !important;

  white-space: nowrap;

  border-radius: 2px;

  transition: background 0.2s;

}
.ec-cta a:hover {

  background: #c99a20;

}
/* ── Quick Facts Bar ─────────────────────────────────────── */

.ec-facts {

  background: var(--ec-green);

  padding: 20px 28px;

  margin: 32px 0;

  display: flex;

  flex-wrap: wrap;

  gap: 12px 32px;

  border-radius: 2px;

}
.ec-facts span {

  color: #fff;

  font-size: 13.5px;

  font-weight: 500;

}
.ec-facts span::before {

  content: '✦  ';

  color: var(--ec-yellow);

}
@media (max-width: 680px) {

  .ec-plan-grid {

    grid-template-columns: 1fr;

  }

  .ec-timeline::before {

    left: 28px;

  }

  .ec-cta {

    flex-direction: column;

    align-items: flex-start;

  }

  .ec-author {

    flex-direction: column;

  }

}
/* ── Inline Floated Images ───────────────────────────────── */

.ec-inline-image {

  margin: 0 0 24px 0;

  padding: 0;

}
.ec-inline-image img {

  width: 100%;

  height: auto;

  display: block;

}
.ec-inline-image figcaption {

  font-size: 12px;

  color: #8a8178;

  letter-spacing: 0.04em;

  margin-top: 8px;

  text-align: center;

  font-style: italic;

}
.ec-inline-right {

  float: right;

  width: 42%;

  margin: 4px 0 24px 32px;

}
.ec-inline-left {

  float: left;

  width: 42%;

  margin: 4px 32px 24px 0;

}
/* Clear floats after image sections */

.ec-inline-right + p,

.ec-inline-left + p {

  overflow: hidden;

}
.ec-blog h2 {

  clear: both;

}
@media (max-width: 680px) {

  .ec-inline-right,

  .ec-inline-left {

    float: none;

    width: 100%;

    margin: 0 0 24px 0;

  }

}
/* ── References ──────────────────────────────────────────── */

.ec-blog ol.ec-references {

  counter-reset: ec-counter;

  margin: 16px 0 0 0;

  padding-left: 0;

  list-style: none;

}
.ec-blog ol.ec-references li {

  counter-increment: ec-counter;

  padding: 8px 0 8px 36px;

  border-bottom: 1px solid var(--ec-rule);

  font-size: 13.5px;

  color: #5a5a5a;

  line-height: 1.6;

}
.ec-blog ol.ec-references li:last-child {

  border-bottom: none;

}
.ec-blog ol.ec-references li::before {

  content: counter(ec-counter);

  position: absolute;

  left: 0;

  top: 9px;

  width: 22px;

  height: 22px;

  background: var(--ec-green-dark);

  color: #fff;

  font-size: 11px;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

}
.ec-blog ol.ec-references li em {

  font-style: italic;

  color: #3a3a3a;

}