/* BeautyAppt Article System — Article CSS
   Applies only on single posts because plugin enqueues conditionally.
*/

/* =====================================================
   1) Layout: remove Divi sidebar / two-column structure
===================================================== */
.single-post #sidebar { display: none !important; }
.single-post #left-area { width: 100% !important; }
.single-post #main-content .container:before { display: none !important; }

/* =====================================================
   2) Container
===================================================== */
.ba-article {
  padding: 56px 18px;
}

.ba-article__inner {
  max-width: 860px; /* slightly wider for large title */
  margin: 0 auto;
}

/* =====================================================
   3) Featured image
===================================================== */
.ba-article__image {
  width: 500px;
  margin: 0 auto 32px auto;
}

.ba-article__image img {
  width: 500px !important;
  height: 500px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
  border-radius: 12px;
  margin: 0;
}
/* =====================================================
   4) Category above title
===================================================== */
.ba-article__category {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 14px;
}

/* =====================================================
   5) Title + subtitle
===================================================== */
.ba-article__title {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.10;
  margin: 0 0 14px 0;
}

.ba-article__subtitle {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.28;
  margin: 0 0 18px 0;
  opacity: 0.85;
}

/* =====================================================
   6) Byline: name only + date under
===================================================== */
.ba-article__byline {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  margin: 0 0 30px 0;
}

.ba-article__author {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.ba-article__date {
  font-size: 18px;
  font-weight: 400;
  opacity: 0.72;
  line-height: 1.25;
  margin-top: 4px;
}

/* =====================================================
   7) Body typography baseline
===================================================== */
.ba-article__content,
.ba-article__content p,
.ba-article__content li {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.0;
}

/* Comfortable paragraph rhythm */
.ba-article__content p {
  margin: 0 0 0.5em 0;
}

/* Headings in article */
.ba-article__content h2,
.ba-article__content h3,
.ba-article__content h4 {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.0;
  margin: 0.6em 0 0.6em 0;
}

.ba-article__content h2 { font-size: 32px; }
.ba-article__content h3 { font-size: 24px; }
.ba-article__content h4 { font-size: 20px; }

/* Links */
.ba-article__content a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* =====================================================
   Editorial list styling (restores bullets, less "WP default")
   - Divi often disables list markers; we force them back.
===================================================== */

/* Base list layout */
.ba-article__content ul,
.ba-article__content ol {
  margin: 0.85em 0 1.25em 0;
  padding-left: 1.25em;
}

/* Force bullets/numbers to appear even if theme resets them */
.ba-article__content ul {
  list-style: disc !important;
  list-style-position: outside;
}

.ba-article__content ol {
  list-style: decimal !important;
  list-style-position: outside;
}

/* Ensure list items actually render markers */
.ba-article__content li {
  display: list-item;
  margin: 0.45em 0;
  padding-left: 0.15em; /* tiny spacing so text doesn't collide with marker */
}

/* Nested lists feel intentional */
.ba-article__content ul ul,
.ba-article__content ol ol,
.ba-article__content ul ol,
.ba-article__content ol ul {
  margin-top: 0.5em;
  margin-bottom: 0.75em;
  padding-left: 1.15em;
}

.ba-article__content ul ul { list-style-type: circle !important; }
.ba-article__content ul ul ul { list-style-type: square !important; }

/* Optional: make ordered list numbers slightly more "editorial" */
.ba-article__content ol li::marker {
  font-weight: 600;
  opacity: 0.85;
}

/* Optional: make bullet markers a touch lighter */
.ba-article__content ul li::marker {
  opacity: 0.75;
}

/* =====================================================
   Images / media
===================================================== */
.ba-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 22px 0;
}

/* Captions (if present) */
.ba-article__content figcaption {
  font-size: 14px;
  opacity: 0.75;
  margin-top: 8px;
}

/* Embeds (charts/iframes/video) */
.ba-article__content iframe,
.ba-article__content video {
  max-width: 100%;
  width: 100%;
  margin: 22px 0;
  border-radius: 10px;
}

/* =====================================================
   Blockquotes (long-form friendly)
===================================================== */
.ba-article__content blockquote {
  margin: 1.0em 0;
  padding: 0.8em 1.1em;
  border-left: 4px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.02);
  border-radius: 10px;
}

.ba-article__content blockquote p {
  margin: 0.6em 0;
}

/* Horizontal rules */
.ba-article__content hr {
  border: 0;
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin: 2.2em 0;
}

/* Inline code / code blocks (useful for templates / technical blogs) */
.ba-article__content code {
  font-size: 0.92em;
  background: rgba(0,0,0,0.05);
  padding: 0.15em 0.35em;
  border-radius: 6px;
}

.ba-article__content pre {
  background: rgba(0,0,0,0.06);
  padding: 16px 18px;
  border-radius: 12px;
  overflow: auto;
  margin: 1.4em 0;
}

.ba-article__content pre code {
  background: none;
  padding: 0;
}

/* =====================================================
   Tables (for pasted-in data)
===================================================== */
.ba-article__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 16px;
}

.ba-article__content th,
.ba-article__content td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  text-align: left;
}

.ba-article__content th {
  font-weight: 700;
}

/* =====================================================
   8) Author box (shows only if toggle is on in your template)
===================================================== */
.ba-authorbox {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.ba-authorbox__img img {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.ba-authorbox__name {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.2;
}

.ba-authorbox__role {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  opacity: 0.75;
  margin-bottom: 10px;
  line-height: 1.3;
}

.ba-authorbox__bio {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.75;
}

/* =====================================================
   9) Responsive adjustments
===================================================== */
@media (max-width: 768px) {
  .ba-article { padding: 40px 16px; }
  .ba-article__inner { max-width: 100%; }

  .ba-article__title { font-size: 36px; }
  .ba-article__subtitle { font-size: 22px; }

  .ba-article__content,
  .ba-article__content p,
  .ba-article__content li {
    font-size: 17px;
    line-height: 1.8;
  }

  .ba-article__content h2 { font-size: 26px; }
  .ba-article__content h3 { font-size: 21px; }
  .ba-article__content h4 { font-size: 19px; }

  /* Lists on mobile: slightly tighter indent */
  .ba-article__content ul,
  .ba-article__content ol {
    padding-left: 1.1em;
  }

  .ba-authorbox {
    grid-template-columns: 56px 1fr;
  }

  .ba-authorbox__img img {
    width: 56px;
    height: 56px;
  }
}

/* =====================================================
   10) Rhythm reset (balanced editorial spacing)
   Paste at the VERY END of article.css
===================================================== */

/* Comfortable text again */
.ba-article__content,
.ba-article__content p,
.ba-article__content li {
  font-size: 18px;
  line-height: 1.6;            /* comfortable */
}

/* Paragraph rhythm (not airy, not cramped) */
.ba-article__content p {
  margin: 0 0 0.9em 0;
}

/* Headings: consistent, NOT huge */
.ba-article__content h2,
.ba-article__content h3,
.ba-article__content h4 {
  line-height: 1.2;
  margin: 1.1em 0 0.45em 0;    /* top/bottom balanced */
}

/* Kill the "dramatic jump" when a heading follows text or a list */
.ba-article__content p + h2,
.ba-article__content p + h3,
.ba-article__content p + h4,
.ba-article__content ul + h2,
.ba-article__content ul + h3,
.ba-article__content ul + h4,
.ba-article__content ol + h2,
.ba-article__content ol + h3,
.ba-article__content ol + h4 {
  margin-top: 0.8em;
}

/* If a heading is followed immediately by a paragraph, tighten that too */
.ba-article__content h2 + p,
.ba-article__content h3 + p,
.ba-article__content h4 + p {
  margin-top: 0.35em;
}

/* Lists: editorial spacing (tight but readable) */
.ba-article__content ul,
.ba-article__content ol {
  margin: 0.75em 0 0.95em 0;
  padding-left: 1.25em;
}

.ba-article__content li {
  margin: 0.3em 0;
}

/* HR: not a massive gap */
.ba-article__content hr {
  margin: 1.4em 0;
}

/* Optional: tighten “single-line paragraphs” that are separated by hard returns
   (your post has several one-sentence paragraphs in a row) */
.ba-article__content p + p {
  margin-top: 0;
}