/* ═══════════════════════════════════════════════════════════════
   Innowell Learning Academy — iwart- design system
   Single source of truth. Consolidated from the 37 per-article
   <style> blocks; values are unchanged.

   Added for native editing:
   - .iwart-list / .iwart-list-numbered / .iwart-glossary now draw their
     markers with ::before, so a plain core/list block renders identically
     to the old inline-SVG markup.
   - The legacy .iwart-dot span rules are kept, so any article still using
     the old markup looks exactly the same.
   ═══════════════════════════════════════════════════════════════ */

/* FONTS ARE NOT DECLARED HERE.
   They used to be two @font-face rules pointing at
   https://innowell.org/wp-content/uploads/… — an absolute production URL, which
   is exactly what breaks on a staging domain. The Innowell theme now declares
   them, resolving the file location against the current site. See
   innowell/functions.php → innowell_font_face_css(). */

#iwart-outer, #iwart-outer * { font-family: "PPPangramSans", sans-serif !important; }

/* ─── WIDTH ───────────────────────────────────────────────────
   The teal band is full width because the page template says so, not
   because of a CSS trick. templates/single-article.php (plugin) and
   single-la_article.php (Innowell theme) emit no .site-main, so Hello
   Elementor's cap — body:not([class*=elementor-page-]) .site-main
   { max-width:1140px } — cannot match. That is the whole mechanism.

   An earlier version of this file also carried a viewport-unit bleed:
       margin: 0 calc(50% - 50vw);  +  overflow-x: clip
   That was a mistake and it is why the 5px teal edge disappeared. 50vw
   counts the scrollbar but 50% does not, so on any page tall enough to
   scroll the margins came out slightly negative, the band overhung the
   viewport by half a scrollbar on each side, and overflow-x:clip then
   cut that overhang off — taking the 5px padding, and with it the teal
   strip down each side, with it. The design was right; the safety net
   was eating it.

   The bleed is now opt-in, for a theme whose single template does cap
   the content column. Add the body class and nothing else changes:
       add_filter( 'body_class', fn( $c ) => array_merge( $c, [ 'iwla-bleed' ] ) );
   ───────────────────────────────────────────────────────────── */

/* Kill the theme's duplicate title if it somehow still renders. */
body.iwla-article .page-header { display: none !important; }

/* Opt-in only. Never enabled by default — see the note above. */
body.iwla-bleed #iwart-outer {
  width: auto !important;
  margin-left:  calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
body.iwla-bleed { overflow-x: clip; }

/* The teal edge, asserted on the card as well as via the outer's padding.
   Belt and braces: if anything ever overrides that padding again, the
   5px strip down each side survives. */
body.iwla-article #iwart-card {
  margin-left: auto !important;
  margin-right: auto !important;
}

#iwart-outer {
  --iwart-teal:      #44afb7;
  --iwart-dark-teal: #0c4a4e;
  --iwart-coral:     #ff886d;
  --iwart-cream:     #fdf8f5;
  --iwart-body:      #2e4444;
  --iwart-muted:     #607070;
  --iwart-alert-red: #e5484d;

  background: var(--iwart-teal) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 5px 5px 5px !important;
  margin: 0 !important;
  max-width: none !important;
  position: relative !important;
  overflow: hidden !important;
}

#iwart-card {
  width: 100% !important;
  max-width: 1900px !important;
  margin: 0 auto !important;
  background: var(--iwart-cream) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 20px !important;
  border-bottom-left-radius: 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
}

/* ─── READING COLUMN ─────────────────────────────────────────── */
.iwart-content { max-width: 933px !important; margin: 0 auto !important; padding: 96px 24px 0 24px !important; box-sizing: border-box !important; }

/* ─── BREADCRUMB ─────────────────────────────────────────────── */
.iwart-breadcrumb { display: flex !important; align-items: center !important; gap: 22px !important; margin-bottom: 36px !important; flex-wrap: wrap !important; }
.iwart-back-link { display: inline-flex !important; align-items: center !important; gap: 8px !important; text-decoration: none !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.11em !important; text-transform: uppercase !important; color: var(--iwart-coral) !important; }
.iwart-back-link svg { flex-shrink: 0 !important; display: block !important; }
.iwart-crumb-path { font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.11em !important; text-transform: uppercase !important; color: var(--iwart-teal) !important; }

/* ─── HEADLINE + META ────────────────────────────────────────── */
.iwart-headline { font-weight: 600 !important; font-size: clamp(36px, 6vw, 88px) !important; line-height: 0.9 !important; letter-spacing: -0.05em !important; color: var(--iwart-dark-teal) !important; margin: 0 0 32px 0 !important; }

.iwart-meta { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; font-size: 16px !important; color: var(--iwart-body) !important; margin: 0 0 32px 0 !important; }
.iwart-meta b { font-weight: 600 !important; }
.iwart-meta-dot { display: inline-flex !important; flex-shrink: 0 !important; width: 4px !important; height: 4px !important; line-height: 0 !important; }
.iwart-meta-dot svg { display: block !important; width: 4px !important; height: 4px !important; }

.iwart-learn { display: flex !important; align-items: baseline !important; gap: 10px !important; flex-wrap: wrap !important; margin: 0 0 32px 0 !important; }
.iwart-learn-label { font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.11em !important; text-transform: uppercase !important; color: var(--iwart-dark-teal) !important; flex-shrink: 0 !important; }
.iwart-learn p { margin: 0 !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.5 !important; color: var(--iwart-body) !important; }

/* ─── HEADINGS + BODY ────────────────────────────────────────── */
.iwart-h3 { font-weight: 600 !important; font-size: 28px !important; line-height: 0.95 !important; letter-spacing: -0.05em !important; color: var(--iwart-dark-teal) !important; margin: 64px 0 20px 0 !important; }
.iwart-content > .iwart-h3:first-child { margin-top: 0 !important; }
.iwart-h4 { font-weight: 600 !important; font-size: 19px !important; line-height: 1.2 !important; letter-spacing: -0.03em !important; color: var(--iwart-dark-teal) !important; margin: 40px 0 14px 0 !important; }

.iwart-p { font-weight: 400 !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--iwart-body) !important; margin: 0 0 20px 0 !important; }
.iwart-p:last-child { margin-bottom: 0 !important; }
.iwart-p a { color: var(--iwart-teal) !important; font-weight: 600 !important; text-decoration: none !important; }
.iwart-p a:hover { text-decoration: underline !important; }

.iwart-intro { font-weight: 400 !important; font-size: 18px !important; line-height: 1.6 !important; color: var(--iwart-dark-teal) !important; margin: 0 0 48px 0 !important; }
.iwart-quote { font-weight: 400 !important; font-style: italic !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--iwart-dark-teal) !important; margin: 0 0 20px 0 !important; padding-left: 20px !important; border-left: 3px solid rgba(68,175,183,0.35) !important; }
.iwart-caption { font-weight: 400 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--iwart-muted) !important; margin: 16px 0 32px 0 !important; font-style: italic !important; }

/* ─── CAPTION BOX ────────────────────────────────────────────── */
.iwart-caption-box { border-radius: 3px !important; padding: 18px 24px !important; margin: 16px 0 32px 0 !important; box-sizing: border-box !important; background: rgba(68,175,183,0.05) !important; border-left: 4px solid var(--iwart-teal) !important; }
.iwart-caption-box p { font-weight: 400 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--iwart-body) !important; margin: 0 !important; font-style: normal !important; }

/* ─── BULLETED LIST ──────────────────────────────────────────── */
.iwart-list { list-style: none !important; margin: 0 0 32px 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.iwart-list li {
  display: flex !important; align-items: flex-start !important; gap: 12px !important;
  font-weight: 400 !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--iwart-body) !important;
}
.iwart-list li b { font-weight: 600 !important; color: var(--iwart-dark-teal) !important; }
.iwart-list li a { color: var(--iwart-teal) !important; font-weight: 600 !important; text-decoration: none !important; }
.iwart-list li a:hover { text-decoration: underline !important; }

/* Native core/list markers — drawn in CSS, identical 4px teal dot */
.iwart-list > li::before {
  content: "" !important; flex-shrink: 0 !important; width: 4px !important; height: 4px !important;
  border-radius: 50% !important; background: var(--iwart-teal) !important; margin-top: 11px !important;
}
/* Legacy inline-SVG dots are hidden inside lists so nothing draws twice — the
   ::before marker above is pixel-identical to the SVG it replaces. Dots inside
   callout lists and the meta row are untouched. */
.iwart-list > li > .iwart-dot,
.iwart-glossary > li > .iwart-dot { display: none !important; }
.iwart-dot { display: inline-flex !important; flex-shrink: 0 !important; width: 4px !important; height: 4px !important; margin-top: 11px !important; line-height: 0 !important; }
.iwart-dot svg { display: block !important; width: 4px !important; height: 4px !important; }
.iwart-list li > span:last-child { flex: 1 1 auto !important; min-width: 0 !important; }

/* Label + description rows */
.iwart-list-body { display: flex !important; flex-wrap: wrap !important; flex: 1 1 auto !important; column-gap: 6px !important; }
.iwart-list-label { flex: 0 0 116px !important; }
.iwart-list-desc { flex: 1 1 260px !important; min-width: 200px !important; }

/* ─── NUMBERED / STEP LIST ───────────────────────────────────── */
.iwart-list-numbered { list-style: none !important; counter-reset: iwart-step !important; margin: 0 0 32px 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.iwart-list-numbered li {
  display: flex !important; align-items: flex-start !important; gap: 14px !important;
  font-weight: 400 !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--iwart-body) !important;
  counter-increment: iwart-step !important;
}
.iwart-list-numbered li::before {
  content: counter(iwart-step) !important; flex-shrink: 0 !important; width: 22px !important; height: 22px !important;
  border-radius: 50% !important; background: var(--iwart-teal) !important; color: #fff !important;
  font-weight: 600 !important; font-size: 12px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-top: 1px !important; line-height: 1 !important;
}
.iwart-list-numbered li > span:last-child { flex: 1 1 auto !important; min-width: 0 !important; }
/* Legacy .iwart-steps markup */
.iwart-step-num { counter-increment: iwart-step !important; flex-shrink: 0 !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: var(--iwart-teal) !important; color: var(--iwart-cream) !important; font-weight: 600 !important; font-size: 11px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-top: 1px !important; }
.iwart-step-num::before { content: counter(iwart-step) !important; }

/* ─── GLOSSARY LIST ──────────────────────────────────────────── */
.iwart-glossary { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; }
.iwart-glossary li {
  display: flex !important; align-items: flex-start !important; gap: 12px !important;
  font-weight: 400 !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--iwart-body) !important;
  padding: 16px 0 !important; border-bottom: 1px solid rgba(12,74,78,0.08) !important;
}
.iwart-glossary > li::before {
  content: "" !important; flex-shrink: 0 !important; width: 4px !important; height: 4px !important;
  border-radius: 50% !important; background: var(--iwart-teal) !important; margin-top: 11px !important;
}
.iwart-glossary li:first-child { padding-top: 0 !important; }
.iwart-glossary li:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.iwart-glossary li > span:last-child { flex: 1 1 auto !important; min-width: 0 !important; }
.iwart-glossary li b { font-weight: 600 !important; color: var(--iwart-dark-teal) !important; }

/* ─── CALLOUTS ───────────────────────────────────────────────── */
.iwart-callout { border-radius: 3px !important; padding: 18px 24px !important; margin: 32px 0 !important; box-sizing: border-box !important; }
.iwart-callout-teal  { background: rgba(68,175,183,0.05) !important; border-left: 4px solid var(--iwart-teal) !important; }
.iwart-callout-coral { background: rgba(255,136,109,0.10) !important; border-left: 4px solid var(--iwart-coral) !important; }
.iwart-callout-coral.iwart-callout-icon-row { display: flex !important; align-items: flex-start !important; gap: 14px !important; }
.iwart-callout p { font-weight: 400 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--iwart-body) !important; margin: 0 !important; }
.iwart-callout p + p { margin-top: 10px !important; }
.iwart-callout-teal .iwart-note-label { font-weight: 600 !important; color: var(--iwart-dark-teal) !important; display: block !important; margin-bottom: 4px !important; }
.iwart-callout-coral .iwart-important-label { font-weight: 600 !important; color: var(--iwart-coral) !important; display: block !important; margin-bottom: 4px !important; }
.iwart-callout-teal a, .iwart-callout a { color: var(--iwart-teal) !important; font-weight: 600 !important; text-decoration: none !important; }
.iwart-callout a:hover { text-decoration: underline !important; }
.iwart-callout-icon { flex-shrink: 0 !important; width: 22px !important; height: 22px !important; margin-top: 1px !important; line-height: 0 !important; }
.iwart-callout-icon svg { display: block !important; width: 22px !important; height: 22px !important; }

.iwart-callout-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.iwart-callout-list li { display: flex !important; align-items: flex-start !important; gap: 10px !important; font-weight: 400 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--iwart-body) !important; }
.iwart-callout-list .iwart-dot { margin-top: 6px !important; }
.iwart-callout-list li > span:last-child { flex: 1 1 auto !important; min-width: 0 !important; }

/* ─── "SEE:" REFERENCE ROW ───────────────────────────────────── */
.iwart-see { font-weight: 400 !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--iwart-muted) !important; margin: 0 0 32px 0 !important; }
.iwart-see-label { font-weight: 600 !important; color: var(--iwart-dark-teal) !important; margin-right: 6px !important; }
.iwart-see a { color: var(--iwart-teal) !important; text-decoration: none !important; font-weight: 600 !important; }
.iwart-see a:hover { text-decoration: underline !important; }
.iwart-see-sep { color: var(--iwart-muted) !important; margin: 0 8px !important; }

/* ─── FIGURES ────────────────────────────────────────────────── */
.iwart-figure { margin: 40px 0 !important; }
.iwart-figure img { display: block !important; width: 100% !important; border-radius: 10px !important; }

.iwart-figure-bordered { margin: 40px 0 0 0 !important; }
.iwart-figure-bordered img,
.iwart-figure-bordered video {
  display: block !important; width: 100% !important; height: auto !important; box-sizing: border-box !important;
  border: 10px solid var(--iwart-dark-teal) !important; border-radius: 10px !important;
}
.iwart-figure-sm { max-width: 320px !important; margin-left: 0 !important; margin-right: auto !important; }

.iwart-figure-phone { margin: 40px 0 0 0 !important; display: flex !important; justify-content: center !important; }
.iwart-figure-phone svg { display: block !important; width: 100% !important; max-width: 380px !important; height: auto !important; }

/* Inline icon glyphs */
.iwart-icon-inline { display: inline-block !important; vertical-align: -3px !important; margin: 0 1px !important; }
.iwart-icon-wrap { white-space: nowrap !important; display: inline-block !important; }

/* ─── TABLE ──────────────────────────────────────────────────── */
.iwart-table-wrap { margin: 40px 0 !important; overflow-x: auto !important; border-radius: 10px !important; }
.iwart-table { width: 100% !important; min-width: 640px !important; border-collapse: separate !important; border-spacing: 0 !important; border: none !important; }
.iwart-table th, .iwart-table td { border: none !important; border-style: hidden !important; }
.iwart-table thead th {
  background: var(--iwart-dark-teal) !important; color: var(--iwart-cream) !important; font-weight: 600 !important; font-size: 14px !important;
  text-align: left !important; padding: 16px 18px !important; white-space: nowrap !important; border: none !important;
}
.iwart-table thead th:first-child { border-radius: 10px 0 0 0 !important; }
.iwart-table thead th:last-child  { border-radius: 0 10px 0 0 !important; }
.iwart-table tbody td {
  padding: 14px 18px !important; font-weight: 400 !important; font-size: 14px !important; color: var(--iwart-dark-teal) !important;
  border: none !important; border-bottom: 1px solid rgba(12,74,78,0.08) !important;
}
.iwart-table tbody td:first-child { font-weight: 600 !important; }
.iwart-table tbody tr:last-child td { border-bottom: none !important; }
.iwart-table tbody td a { color: var(--iwart-teal) !important; font-weight: 600 !important; text-decoration: none !important; }
.iwart-table tbody td a:hover { text-decoration: underline !important; }

/* ─── PREV / NEXT NAV ────────────────────────────────────────── */
.iwart-nav { max-width: 933px !important; margin: 80px auto 0 auto !important; padding: 0 24px !important; box-sizing: border-box !important; }
.iwart-nav-rule { height: 1px !important; background: rgba(12,74,78,0.10) !important; margin: 0 0 40px 0 !important; }
.iwart-nav-row { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 24px !important; padding-bottom: 40px !important; }
.iwart-nav-item { display: flex !important; flex-direction: column !important; gap: 10px !important; max-width: 48% !important; text-decoration: none !important; }
.iwart-nav-item.is-next { align-items: flex-end !important; text-align: right !important; }
.iwart-nav-label { display: flex !important; align-items: center !important; gap: 10px !important; font-weight: 600 !important; font-size: 18px !important; letter-spacing: -0.03em !important; color: var(--iwart-dark-teal) !important; }
.iwart-nav-item.is-next .iwart-nav-label { flex-direction: row-reverse !important; }
.iwart-nav-label svg { flex-shrink: 0 !important; display: block !important; }
.iwart-nav-title { font-weight: 600 !important; font-size: 16px !important; color: var(--iwart-dark-teal) !important; text-decoration: none !important; line-height: 1.4 !important; }
.iwart-nav-item:hover .iwart-nav-title { color: var(--iwart-teal) !important; }

/* ─── RELATED ARTICLES (static grid) ─────────────────────────── */
.iwart-related { max-width: 933px !important; margin: 0 auto 96px auto !important; padding: 0 24px !important; box-sizing: border-box !important; }
.iwart-related-head { display: flex !important; align-items: center !important; margin-bottom: 28px !important; }
.iwart-related-head h3 { font-weight: 600 !important; font-size: 28px !important; line-height: 0.95 !important; letter-spacing: -0.05em !important; color: var(--iwart-dark-teal) !important; margin: 0 !important; }

.iwart-related-cards { display: flex !important; gap: 20px !important; flex-wrap: wrap !important; }
.iwart-related-card { flex: 1 1 calc(50% - 10px) !important; min-width: 280px !important; background: #fff !important; border-radius: 20px !important; padding: 24px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; }
.iwart-related-pill { display: inline-flex !important; align-items: center !important; height: 18px !important; padding: 0 10px !important; border-radius: 9999px !important; background: rgba(68,175,183,0.09) !important; color: var(--iwart-teal) !important; font-weight: 500 !important; font-size: 10px !important; align-self: flex-start !important; margin-bottom: 16px !important; white-space: nowrap !important; }
.iwart-related-title { font-weight: 600 !important; font-size: 16px !important; line-height: 1.4 !important; color: var(--iwart-dark-teal) !important; margin: 0 0 10px 0 !important; }
.iwart-related-desc { font-weight: 400 !important; font-size: 12px !important; line-height: 1.5 !important; color: var(--iwart-muted) !important; margin: 0 0 auto 0 !important; }
.iwart-related-read { font-weight: 600 !important; font-size: 12px !important; color: var(--iwart-dark-teal) !important; text-decoration: none !important; margin-top: 16px !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.iwart-related-read span { color: var(--iwart-teal) !important; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 768px) {
  .iwart-figure-bordered img,
  .iwart-figure-bordered video { border-width: 8px !important; border-radius: 9px !important; }
}

@media (max-width: 767px) {
  #iwart-outer { padding: 0 6px 4px 6px !important; }
  #iwart-card  { border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; }
  .iwart-content { padding-top: 56px !important; }
  .iwart-h3 { font-size: 22px !important; margin-top: 48px !important; }
  .iwart-h4 { font-size: 17px !important; margin-top: 32px !important; }
  .iwart-meta { margin-bottom: 24px !important; }
  .iwart-figure-bordered img,
  .iwart-figure-bordered video { border-width: 6px !important; border-radius: 8px !important; }
  .iwart-figure-phone svg { max-width: 300px !important; }
  .iwart-figure-sm { max-width: 220px !important; }
  .iwart-nav-row { flex-direction: column !important; gap: 32px !important; }
  .iwart-nav-item, .iwart-nav-item.is-next { max-width: 100% !important; align-items: flex-start !important; text-align: left !important; }
  .iwart-nav-item.is-next .iwart-nav-label { flex-direction: row !important; }
  .iwart-related-cards { flex-direction: column !important; }
  .iwart-related-card { flex: 1 1 auto !important; }
  .iwart-list-label { flex: 0 0 100% !important; }
  .iwart-list-desc { flex: 1 1 100% !important; }
}