/* ===============================================================
   LR ARTICLE — global component for editorial guide bodies.
   Spec: PATTERNS.md §23. Source of truth for this file is
   .claude/build-tools/_shared/lr-article.css; it is deployed to
   astra-child/assets/css/ and enqueued on single posts.

   Added 2026-09-04, replacing fifteen per-article <style> blocks
   that had drifted apart: 65 distinct selectors, of which the
   shared vocabulary below covers 33. Every difference between the
   fifteen was numeric drift (0.75 vs 0.8 vs 0.85rem padding,
   0.12 vs 0.13 alpha, #fff vs #ffffff) except three real ones:

     - Six posts used .lr-note for an amber caution while seven
       used it for a grey aside. Those six now carry .lr-warning,
       which is what they meant and what the other six already used.
     - .lr-warning and .lr-important were byte-identical under two
       names. .lr-important is kept as an alias.
     - Table min-width was genuinely per-table (640-900px) because
       column counts differ. That is carried on the wrapper as a
       .lr-table modifier, not lost.

   Colour comes from the LR globals. The old blocks used
   var(--e-global-color-primary) whose fallback is the legacy
   #042151, and #b7791f/#fffaf0 for cautions — neither is in the
   LR palette. Mapped to LR — Navy, LR — Gold Dark and LR — Cream.

   Tables are NOT styled here. They render through the real
   .lr-table component (PATTERNS.md §14), so the site has exactly
   one table treatment.
   =============================================================== */

.lr-article{--lr-a-ink:#1F2937;--lr-a-muted:#6B7280;--lr-a-navy:#102A4C;
  --lr-a-gold:#C9A36E;--lr-a-gold-dark:#A98352;--lr-a-cream:#F4F1EC;
  --lr-a-hairline:#E4E4E8;--lr-a-grey-bg:#F2F2F4}

/* --- callout family -------------------------------------------
   One shape, four accents. The 4px left rule is the established
   article idiom and is kept; only the colours move onto palette. */
.lr-article .lr-answer-box,
.lr-article .lr-note,
.lr-article .lr-warning,
.lr-article .lr-important,
.lr-article .lr-practitioner-box,
.lr-article .lr-cta{
  margin:1.5rem 0;
  padding:1rem 1.25rem;
  border-radius:.5rem;
}
.lr-article .lr-answer-box p:last-child,
.lr-article .lr-note p:last-child,
.lr-article .lr-warning p:last-child,
.lr-article .lr-important p:last-child,
.lr-article .lr-cta p:last-child{margin-bottom:0}

/* The direct answer to the question in the H1. Navy rule, quiet tint. */
.lr-article .lr-answer-box{
  border-left:4px solid var(--lr-a-navy);
  background:var(--lr-a-grey-bg);
}
/* A neutral aside. */
.lr-article .lr-note{
  border-left:4px solid var(--lr-a-muted);
  background:rgba(0,0,0,.03);
}
/* A caution. .lr-important is the same thing under an older name. */
.lr-article .lr-warning,
.lr-article .lr-important{
  border-left:4px solid var(--lr-a-gold-dark);
  background:var(--lr-a-cream);
}
/* A practitioner sidebar — one post uses it; inert elsewhere. */
.lr-article .lr-practitioner-box{
  border-left:4px solid var(--lr-a-gold);
  background:var(--lr-a-cream);
}

/* --- in-article CTA card -------------------------------------- */
.lr-article .lr-cta{
  border:1px solid var(--lr-a-hairline);
  border-left:1px solid var(--lr-a-hairline);
  border-radius:.875rem;
  background:#FFFFFF;
  padding:1.5rem 1.625rem;
}
.lr-article .lr-cta h2,
.lr-article .lr-cta h3{
  margin:0 0 .5rem;
  font-size:1.1875rem;
  line-height:1.3;
  color:var(--lr-a-navy);
}
/* All six posts stack the action and the phone line, not a row. */
.lr-article .lr-cta-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.875rem;
  margin-top:1.125rem;
}
/* Gold primary, PATTERNS.md §19. Was a square navy block keyed to the
   legacy Elementor primary; this is the site's button. */
.lr-article .lr-cta-button{
  display:inline-block;
  padding:.875rem 1.75rem;
  border:0;
  border-radius:999px;
  background:var(--lr-a-gold);
  color:#FFFFFF !important;
  font-family:"Inter",sans-serif;
  font-size:.9375rem;
  font-weight:500;
  line-height:1.4;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background .16s ease;
}
.lr-article .lr-cta-button:hover,
.lr-article .lr-cta-button:focus{background:var(--lr-a-gold-dark);color:#FFFFFF !important}
.lr-article .lr-cta-button:focus-visible{outline:2px solid var(--lr-a-gold-dark);outline-offset:2px}
.lr-article .lr-cta-contact{font-size:.875rem;font-weight:600;line-height:1.5;color:var(--lr-a-muted)}

/* --- checklist ------------------------------------------------- */
.lr-article .lr-checklist{
  margin:1.5rem 0;
  padding:1.125rem 1.375rem;
  border:1px solid var(--lr-a-hairline);
  border-radius:.5rem;
  background:rgba(0,0,0,.02);
}
.lr-article .lr-checklist ul{margin:0;padding-left:1.25rem}
.lr-article .lr-checklist li{margin-bottom:.375rem}
.lr-article .lr-checklist li:last-child{margin-bottom:0}

/* --- numbered steps -------------------------------------------- */
.lr-article .lr-steps{list-style:none;margin:1.5rem 0;padding:0;counter-reset:lr-step}
.lr-article .lr-steps > li{
  counter-increment:lr-step;
  position:relative;
  margin:0 0 .875rem;
  padding-left:2.5rem;
  line-height:1.6;
}
.lr-article .lr-steps > li::before{
  content:counter(lr-step);
  position:absolute;left:0;top:.0625rem;
  width:1.625rem;height:1.625rem;
  border-radius:50%;
  background:var(--lr-a-navy);
  color:#D9B98A;
  font-family:"Inter",sans-serif;
  font-size:.8125rem;font-weight:600;
  line-height:1.625rem;text-align:center;
}

/* --- disclosure ------------------------------------------------ */
.lr-article details{
  margin:0 0 .75rem;
  padding:.875rem 1rem;
  border:1px solid var(--lr-a-hairline);
  border-radius:.5rem;
}
.lr-article summary{cursor:pointer;font-weight:600;color:var(--lr-a-navy)}
.lr-article details p{margin:.75rem 0 .125rem}
.lr-article details p:last-child{margin-bottom:0}

/* --- small print, sources, review line ------------------------- */
.lr-article .lr-small,
.lr-article .lr-sources,
.lr-article .lr-reviewed{font-size:.9375rem;line-height:1.6;color:var(--lr-a-muted)}
.lr-article .lr-sources{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--lr-a-hairline)}

/* --- in-page table of contents --------------------------------- */
.lr-article .lr-toc{
  margin:1.5rem 0;
  padding:1.125rem 1.375rem;
  border:1px solid var(--lr-a-hairline);
  border-radius:.5rem;
  background:var(--lr-a-grey-bg);
}
.lr-article .lr-toc ol{margin:0;padding-left:1.25rem}
.lr-article .lr-toc li{margin-bottom:.3125rem}

/* Anchored headings clear the sticky header. */
.lr-article h2,
.lr-article h3{scroll-margin-top:110px}

/* --- looser rhythm modifier -------------------------------------
   Two of the fifteen (the ACRA annual-filing and EPC guides) are long
   reference pieces and set a looser body rhythm and bigger heading
   gaps. That is a real editorial choice, not drift, so it survives as
   a modifier rather than being averaged away. */
.lr-article-loose{line-height:1.75}
.lr-article-loose h2{margin-top:2.5rem}
.lr-article-loose h3{margin-top:1.8rem}
.lr-article-loose ul,
.lr-article-loose ol{padding-left:1.35rem}
.lr-article-loose li{margin-bottom:.5rem}

/* --- aliases and one-off blocks --------------------------------
   Four of the fifteen named a shared shape differently. Rather than
   rewrite published markup, the old names are aliased onto the
   component they already meant.
     .lr-answer   = .lr-answer-box  (business-structures guide)
     .lr-callout  = .lr-note        (compliance-timeline guide)
     .lr-decision = a bordered panel, as .lr-cta was before it
                    gained the button row.
   The choice grid and the timeline step are genuinely one-off
   layouts; they live here so nothing is left in a page. */
.lr-article .lr-answer,
.lr-article .lr-callout,
.lr-article .lr-decision{
  margin:1.5rem 0;
  padding:1rem 1.25rem;
  border-radius:.5rem;
}
.lr-article .lr-answer p:last-child,
.lr-article .lr-callout p:last-child,
.lr-article .lr-decision p:last-child{margin-bottom:0}
.lr-article .lr-answer{border-left:4px solid var(--lr-a-navy);background:var(--lr-a-grey-bg)}
.lr-article .lr-callout{border-left:4px solid var(--lr-a-muted);background:rgba(0,0,0,.03)}
.lr-article .lr-decision{border:1px solid var(--lr-a-hairline);background:rgba(0,0,0,.025)}

/* Two-up choice cards. */
.lr-article .lr-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin:1.5rem 0;
}
@media (max-width:767px){
  .lr-article .lr-choice-grid{grid-template-columns:1fr}
}
.lr-article .lr-choice-card{
  padding:1.125rem 1.25rem;
  border:1px solid var(--lr-a-hairline);
  border-radius:.5rem;
}
.lr-article .lr-choice-card h3{margin-top:0;margin-bottom:.5rem}

/* Left-ruled timeline steps. */
.lr-article .lr-timeline-step{
  margin:1.5rem 0;
  padding-left:1rem;
  border-left:3px solid var(--lr-a-hairline);
}
.lr-article .lr-timeline-step h3{margin-top:0;margin-bottom:.4375rem}

.lr-article .lr-cta-link{font-weight:600}