/* ============================================================================
   lrl-content-design.css  —  SITE-WIDE BODY DESIGN LAYER
   Styles the article-body class family that every non-model CPT already emits
   (service / wiki / blog / law / brand / location / product / guide), turning
   plain prose into a designed, scannable layout WITHOUT changing any HTML.
   Reuses the --lrl-* variables from lrl-body-styles.css (:root). Enqueue site-wide
   (mu-plugin) AFTER lrl-body-styles.css. ASCII-only.
   ============================================================================ */

:root{
  --cd-ink:#0F172A; --cd-body:#1E293B; --cd-muted:#475569; --cd-faint:#64748B;
  --cd-line:#E2E8F0; --cd-bg:#F8FAFC; --cd-card:#FFFFFF; --cd-red:#DC2626; --cd-red-dk:#B91C1C;
  --cd-sky:#F0F9FF; --cd-radius:10px; --cd-shadow:0 1px 2px rgba(15,23,42,.06);
  --cd-shadow-md:0 4px 14px rgba(15,23,42,.08);
}

/* ---- content shell + rhythm ------------------------------------------------ */
/* NOTE: intentionally NO blanket ".lrl-body > * { max-width }" rule — that would clamp the
   full-bleed hub heroes and model component grids. Width stays with the theme/template; this
   layer only adds visual styling to prose + the article-class family. */
.lrl-body{ color:var(--cd-body); line-height:1.7; }
.lrl-body p{ font-size:1.0625rem; margin:0 0 1.05rem; }
.lrl-body a{ color:var(--cd-red); text-decoration:underline; text-underline-offset:2px; }
.lrl-body a:hover{ color:var(--cd-red-dk); }
.lrl-body strong{ color:var(--cd-ink); }
.lrl-body hr{ border:0; border-top:1px solid var(--cd-line); margin:2.5rem auto; max-width:860px; }

/* ---- lede / intro ---------------------------------------------------------- */
.lrl-article-lede, .lrl-body > .lede{
  font-size:1.2rem; line-height:1.6; color:var(--cd-muted); margin:0 auto 1.6rem; font-weight:400;
}

/* ---- meta + byline --------------------------------------------------------- */
.lrl-article-meta{ font-size:.8125rem; letter-spacing:.04em; text-transform:uppercase; color:var(--cd-faint); margin:0 auto .35rem; }
.lrl-article-byline{ font-size:.9375rem; color:var(--cd-muted); margin:0 auto 1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--cd-line); }
.lrl-article-byline a{ color:var(--cd-ink); font-weight:600; text-decoration:none; }

/* ---- THE ANSWER CAPSULE (service "Quick answer", AEO capsules) -------------- */
.lrl-answer, .lrl-quick-answer, .lrl-answer-capsule{
  display:block; background:linear-gradient(135deg,var(--cd-sky) 0%,var(--cd-bg) 100%);
  border:1px solid var(--cd-line); border-left:5px solid var(--cd-red);
  border-radius:var(--cd-radius); padding:1.15rem 1.35rem; margin:0 auto 1.9rem; max-width:860px;
  font-size:1.1rem; line-height:1.6; color:var(--cd-ink); box-shadow:var(--cd-shadow-md);
}
.lrl-answer strong:first-child, .lrl-answer b:first-child{ color:var(--cd-red-dk); }

/* ---- section headings ------------------------------------------------------ */
.lrl-body h2, .lrl-article-section h2{
  font-size:1.6rem; line-height:1.22; color:var(--cd-ink); font-weight:800;
  margin:2.6rem auto 1rem; padding-left:.85rem; border-left:4px solid var(--cd-red);
}
.lrl-body h3, .lrl-article-section h3{ font-size:1.2rem; color:var(--cd-ink); font-weight:700; margin:1.6rem auto .55rem; }
.lrl-article-section{ display:block; margin:0 auto; }

/* ---- lists ----------------------------------------------------------------- */
.lrl-body ul{ list-style:none; padding-left:0; margin:0 auto 1.25rem; }
.lrl-body ul > li{ position:relative; padding:.15rem 0 .15rem 1.6rem; margin:.4rem auto; }
.lrl-body ul > li::before{
  content:""; position:absolute; left:.1rem; top:.72rem; width:.5rem; height:.5rem;
  background:var(--cd-red); border-radius:50%;
}
.lrl-body ul ul{ margin:.3rem auto; }

/* ---- ordered lists -> numbered step cards (service "How we do it") ---------- */
.lrl-body ol{ list-style:none; counter-reset:cd-step; padding-left:0; margin:1.2rem auto 1.5rem; }
.lrl-body ol > li{
  counter-increment:cd-step; position:relative; padding:.9rem 1rem .9rem 3.4rem; margin:.6rem auto;
  background:var(--cd-card); border:1px solid var(--cd-line); border-radius:var(--cd-radius); box-shadow:var(--cd-shadow);
}
.lrl-body ol > li::before{
  content:counter(cd-step); position:absolute; left:.85rem; top:.85rem; width:1.8rem; height:1.8rem;
  background:var(--cd-red); color:#fff; font-weight:800; font-size:.95rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* ---- tables ---------------------------------------------------------------- */
.lrl-body table, .lrl-fitment-table table, table.lrl-fitment-table{
  width:100%; border-collapse:collapse; margin:1.1rem auto 1.4rem; font-size:.95rem;
  background:var(--cd-card); border:1px solid var(--cd-line); border-radius:var(--cd-radius); overflow:hidden; box-shadow:var(--cd-shadow);
}
.lrl-body thead th{ background:#F1F5F9; color:var(--cd-ink); text-align:left; font-weight:700;
  font-size:.8125rem; letter-spacing:.03em; text-transform:uppercase; padding:.7rem .9rem; border-bottom:2px solid var(--cd-line); }
.lrl-body td, .lrl-body th{ padding:.62rem .9rem; border-top:1px solid #F1F5F9; vertical-align:top; }
.lrl-body tbody tr:nth-child(even){ background:var(--cd-bg); }
@media (max-width:600px){ .lrl-body table{ display:block; overflow-x:auto; white-space:nowrap; } }

/* ---- related-links blocks -> card grid ------------------------------------- */
.lrl-related-reading, .lrl-related, .lrl-more, .lrl-nearby, .lrl-related-laws,
.lrl-related-more, .lrl-related-services{
  display:block; margin:2rem auto; padding-top:1.2rem; border-top:1px solid var(--cd-line);
}
.lrl-related-reading ul, .lrl-related ul, .lrl-more ul, .lrl-nearby ul, .lrl-related-laws ul,
.lrl-related-more ul, .lrl-related-services ul{
  list-style:none; padding:0; margin:.6rem auto 0; display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.lrl-related-reading li, .lrl-related li, .lrl-more li, .lrl-nearby li, .lrl-related-laws li,
.lrl-related-more li, .lrl-related-services li{
  padding:0; margin:0; background:var(--cd-card); border:1px solid var(--cd-line);
  border-radius:var(--cd-radius); box-shadow:var(--cd-shadow);
}
.lrl-related-reading li::before, .lrl-related li::before, .lrl-more li::before,
.lrl-nearby li::before, .lrl-related-laws li::before, .lrl-related-more li::before,
.lrl-related-services li::before{ display:none; }
.lrl-related-reading li a, .lrl-related li a, .lrl-more li a, .lrl-nearby li a, .lrl-related-laws li a,
.lrl-related-more li a, .lrl-related-services li a{
  display:block; padding:.8rem 1rem; text-decoration:none; color:var(--cd-ink); font-weight:600;
}
.lrl-related-reading li a:hover, .lrl-related li a:hover, .lrl-more li a:hover{ color:var(--cd-red); }

/* ---- sources / legal / location helper blocks ------------------------------ */
.lrl-article-sources, .lrl-sources-list{ font-size:.92rem; color:var(--cd-muted); }
.lrl-legal-disclaimer{
  background:var(--cd-bg); border-top:1px solid var(--cd-line); border-radius:var(--cd-radius);
  padding:1.1rem 1.25rem; margin:1.5rem auto; font-size:.9rem; font-style:italic; color:var(--cd-faint); line-height:1.6;
}
.lrl-zipcode-coverage, .lrl-local-context{
  background:var(--cd-bg); border:1px solid var(--cd-line); border-radius:var(--cd-radius);
  padding:1rem 1.2rem; margin:1.2rem auto;
}

/* ---- CTA band -------------------------------------------------------------- */
.lrl-article-cta, .lrl-cta{
  background:linear-gradient(135deg,var(--cd-ink) 0%,var(--cd-body) 100%); color:#fff;
  border-radius:var(--cd-radius); padding:1.7rem 1.5rem; margin:2.6rem auto; text-align:center; max-width:860px;
}
.lrl-article-cta h2, .lrl-cta h2{ color:#fff; border:0; padding:0; margin:0 0 .6rem; font-size:1.4rem; }
.lrl-article-cta p, .lrl-cta p{ color:#CBD5E1; margin:0 0 1.1rem; }
.lrl-article-cta a, .lrl-cta a{
  display:inline-block; background:var(--cd-red); color:#fff !important; font-weight:700; text-decoration:none;
  padding:.75rem 1.6rem; border-radius:8px; transition:background .15s;
}
.lrl-article-cta a:hover, .lrl-cta a:hover{ background:var(--cd-red-dk); }

/* ---- two-column compare (IS vs IS-NOT, FOR vs NOT-FOR) --------------------- */
.lrl-compare{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.4rem auto 1.7rem; max-width:980px;
  align-items:start;
}
@media (max-width:640px){ .lrl-compare{ grid-template-columns:1fr; } }
.lrl-compare__col{
  background:var(--cd-card); border:1px solid var(--cd-line); border-radius:var(--cd-radius);
  padding:1.05rem 1.2rem 1.1rem; box-shadow:var(--cd-shadow);
}
.lrl-compare__col--yes{ border-top:4px solid #16A34A; }
.lrl-compare__col--no{  border-top:4px solid var(--cd-red); }
.lrl-compare__col > p:first-child{ margin:0 0 .6rem; font-size:1rem; }
.lrl-compare__col--yes > p:first-child strong{ color:#15803D; }
.lrl-compare__col--no  > p:first-child strong{ color:var(--cd-red-dk); }
.lrl-compare__col ul{ margin:0; }
/* swap the plain red dot for check / x glyphs inside the compare columns */
.lrl-compare__col--yes ul > li::before{
  content:"\2713"; background:none; border-radius:0; color:#16A34A; font-weight:800;
  width:auto; height:auto; left:0; top:.18rem; font-size:.95rem;
}
.lrl-compare__col--no ul > li::before{
  content:"\2715"; background:none; border-radius:0; color:var(--cd-red); font-weight:800;
  width:auto; height:auto; left:0; top:.18rem; font-size:.9rem;
}
.lrl-compare__col ul > li{ padding-left:1.4rem; }

/* ---- blockquote ------------------------------------------------------------ */
.lrl-body blockquote{
  margin:1.4rem auto; padding:.6rem 1.2rem; border-left:4px solid var(--cd-line);
  color:var(--cd-muted); font-style:italic;
}