/* ============================================================
   Article blocks — the four recurring furniture pieces inside a
   blog post's prose. The importer emits these class names (see
   inc/article-import.php); they are also safe to type by hand.

     .art-key      Key takeaways — a tinted panel before the story
     .art-steps    a numbered list — navy disc, one number each
     .art-sources  the citation list — deliberately quiet
     .art-note     the AI/legal disclaimer, quieter still
     .art-help     "How Dilendorf Law Firm helps" — a dark band

   Colours are literal rather than tokens: styleguide.html links
   this file on its own, without the site's palette.
   Circles carry !important because the classic skin squares off
   every corner on the page (classic.css: "square corners").
   ============================================================ */

/* ---------- Key takeaways ---------- */
.art-key{
  background:#EEF4F8;border:1px solid #D3E2EC;
  padding:26px 28px;margin:34px 0}
.art-key__t{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#5C6A76;margin:0 0 14px}
.art-key ul{margin:0;padding:0;list-style:none}
.art-key li{
  position:relative;margin:0;padding:8px 0 8px 24px;
  font-size:16px;line-height:1.55;color:#1C2025}
.art-key li::before{
  content:"";position:absolute;left:2px;top:16px;width:6px;height:6px;
  background:#002E48;border-radius:50% !important}

/* ---------- Numbered steps ----------
   Any top-level ordered list in a post reads as a sequence of
   moves, so it gets the discs; nested lists (sources, the help
   band) keep plain numerals. */
/* Numbering uses the native list-item counter, not a custom one: a
   sequence interrupted by a table continues with start="3" on the second
   list, and only list-item honours that. */
.art-steps,
.post-body > ol{list-style:none;margin:28px 0;padding:0}
.art-steps > li,
.post-body > ol > li{
  position:relative;margin:0;padding:16px 0 16px 52px;
  border-top:1px solid #D3E2EC;line-height:1.65}
.art-steps > li:first-child,
.post-body > ol > li:first-child{border-top:0}
.art-steps > li::before,
.post-body > ol > li::before{
  content:counter(list-item);
  position:absolute;left:0;top:14px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:#002E48;color:#fff;border-radius:50% !important;
  font-family:'Fraunces','Georgia',serif;font-weight:700;font-size:14px}
.art-steps > li > b:first-child,
.art-steps > li > strong:first-child,
.post-body > ol > li > b:first-child,
.post-body > ol > li > strong:first-child{color:#002E48}

/* ---------- How Dilendorf Law Firm helps ---------- */
.art-help{
  background:#002E48;color:#fff;
  padding:34px 34px 36px;margin:46px 0}
.art-help h2{
  font-family:'Fraunces','Georgia',serif;font-weight:600;
  font-size:26px;line-height:1.2;letter-spacing:-.01em;
  color:#fff;margin:0 0 14px}
.art-help p{color:#B9C8D3;font-size:16.5px;line-height:1.7;margin:0 0 14px}
.art-help ul{margin:18px 0 0;padding:0;list-style:none}
.art-help li{
  position:relative;margin:0;padding:8px 0 8px 22px;
  color:#E7EDF2;font-size:16px;line-height:1.55}
.art-help li::before{
  content:"";position:absolute;left:2px;top:16px;width:5px;height:5px;
  background:#fff;border-radius:50% !important}
.art-help .art-help__cta{
  display:inline-block;margin-top:26px;padding:13px 24px;
  background:#fff;color:#002E48;font-weight:600;font-size:15px;
  text-decoration:none}
.art-help .art-help__cta:hover{background:#5B3097;color:#fff;text-decoration:none}

/* ---------- Sources ---------- */
/* The quiet voice is set on the block, so a citation inherits it whatever
   shape it arrives in — list item, paragraph, or a bare line. */
.art-sources{margin:46px 0 0;font-size:13px;line-height:1.5;color:#5C636C}
.art-sources__t{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#5C6A76;margin:0 0 12px}
.art-sources ol{margin:0;padding-left:20px;list-style:decimal}
.art-sources li{font-size:13px;line-height:1.5;color:#5C636C;margin:7px 0}

/* ---------- Disclaimer ---------- */
.art-note{margin:26px 0 0;font-size:13.5px;line-height:1.6;color:#5C6A76}

@media(max-width:760px){
  .art-key{padding:22px 20px}
  .art-help{padding:26px 22px 28px}
  .art-help h2{font-size:22px}
  .art-steps > li,
  .post-body > ol > li{padding-left:46px}
}

/* ---------- Figures: a strip of tiles ----------
   Same idiom as the "By the Numbers" band on the home page — one bordered
   strip, hairline dividers, no separate cards. */
.art-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid #D3E2EC;margin:34px 0}
.art-stat{padding:24px 22px;border-left:1px solid #D3E2EC}
.art-stat:first-child{border-left:0}
.art-stat b{
  display:block;font-family:'Fraunces','Georgia',serif;font-weight:600;
  font-size:34px;line-height:1;color:#002E48;margin-bottom:10px;
  font-variant-numeric:tabular-nums}
.art-stat span{display:block;font-size:14px;line-height:1.5;color:#5C636C}
.art-stat sup a{color:#5C6A76;text-decoration:none;font-size:11px}

/* ---------- A bar chart ----------
   The emphasised series is the violet accent, everything else a slate that
   recedes. Bar widths travel as inline percentages: that is the data, not
   styling, so the importer keeps them. */
.art-chart{
  background:#EEF4F8;border:1px solid #D3E2EC;
  padding:24px 26px 22px;margin:34px 0}
.art-chart__t{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#5C6A76;margin:0 0 18px}
.art-bar{
  display:grid;grid-template-columns:70px 1fr 128px;align-items:center;
  gap:14px;margin:9px 0;font-size:14px}
.art-bar__l{color:#1C2025;font-weight:600}
.art-bar__track{background:#D8E4EC;height:20px;overflow:hidden}
.art-bar__fill{background:#5B3097;height:100%;display:block}
.art-bar__fill--2{background:#8FA9BA}
.art-bar__v{
  text-align:right;font-weight:600;color:#002E48;
  font-variant-numeric:tabular-nums}
.art-chart__note{
  font-size:12.5px;line-height:1.5;color:#5C6A76;margin:16px 0 0}

@media(max-width:760px){
  .art-stats{grid-template-columns:1fr}
  .art-stat{border-left:0;border-top:1px solid #D3E2EC;padding:20px}
  .art-stat:first-child{border-top:0}
  .art-chart{padding:20px 18px}
  .art-bar{grid-template-columns:56px 1fr 96px;gap:10px;font-size:13px}
}

/* A step that carries a heading rather than a bold opening phrase. */
.art-steps > li > h3:first-child{
  font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:19px;
  line-height:1.3;color:#002E48;margin:0 0 8px}
.art-steps > li > p{margin:0 0 12px}
.art-steps > li > p:last-child{margin-bottom:0}

/* ---------- Links inside the blocks ----------
   The site-wide rule lives in classic.css; these mirror it so the blocks
   render truthfully in styleguide.html, which loads this file on its own.
   Two styles, and only two: violet on a light ground, white on a dark one. */
.art-key a,.art-sources a,.art-note a,.art-stat a,.art-chart a{
  color:#5B3097;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(91,48,151,.42)}
.art-key a:hover,.art-sources a:hover,.art-note a:hover{
  color:#4A2679;text-decoration-color:currentColor}
.art-help a:not(.art-help__cta){
  color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45)}
.art-help a:not(.art-help__cta):hover{text-decoration-color:#FFFFFF}

/* ---------- The bars grow ----------
   Each bar runs out from the left when the chart comes into view, a
   tenth of a second behind the one above it, so the series reads in
   order rather than appearing all at once. The inline width stays the
   target; only the scale is animated, which keeps the number honest and
   costs no layout.

   Armed by main.js: without the class the bars are drawn full width. */
.art-bar__fill{transform-origin:left center}
.charts-armed .art-chart:not(.in) .art-bar__fill{transform:scaleX(0)}
.charts-armed .art-chart.in .art-bar__fill{
  transform:scaleX(1);
  transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.charts-armed .art-chart.in .art-bar:nth-child(3) .art-bar__fill{transition-delay:.10s}
.charts-armed .art-chart.in .art-bar:nth-child(4) .art-bar__fill{transition-delay:.20s}
.charts-armed .art-chart.in .art-bar:nth-child(5) .art-bar__fill{transition-delay:.30s}
.charts-armed .art-chart.in .art-bar:nth-child(6) .art-bar__fill{transition-delay:.40s}

@media(prefers-reduced-motion:reduce){
  .charts-armed .art-chart:not(.in) .art-bar__fill,
  .charts-armed .art-chart.in .art-bar__fill{transform:none;transition:none}
}

/* ---------- Frequently asked questions ----------
   Real <details>/<summary>: it opens without JavaScript, it is announced
   correctly by a screen reader, and a search engine reads the question and
   its answer as a pair whether the item is open or shut. The marker is
   drawn with a pseudo-element, so nothing depends on the browser's own
   triangle. */
/* Headed by an ordinary <h2>: it belongs in the article's outline, and a
   rule above it only repeats what the heading already says. */
.art-faq{margin:34px 0}
.art-faq h2{
  font-family:'Fraunces','Georgia',serif;font-weight:500;
  font-size:1.7rem;line-height:1.2;letter-spacing:-.01em;
  color:#002E48;margin:0 0 6px}

.art-faq details{border-bottom:1px solid #D3E2EC}
.art-faq summary{
  position:relative;display:block;list-style:none;cursor:pointer;
  padding:18px 44px 18px 0;
  font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:19px;
  line-height:1.35;color:#002E48}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  margin-top:-6px;
  background:
    linear-gradient(#5B3097,#5B3097) center/13px 1.5px no-repeat,
    linear-gradient(#5B3097,#5B3097) center/1.5px 13px no-repeat;
  transition:transform .22s ease}
.art-faq details[open] summary::after{transform:rotate(45deg)}
.art-faq summary:hover{color:#5B3097}
.art-faq summary:focus-visible{outline:2px solid #5B3097;outline-offset:3px}
.art-faq details > *:not(summary){
  font-size:16.5px;line-height:1.7;color:#3A4750;margin:0 0 14px;max-width:62em}
.art-faq details > *:not(summary):last-child{margin-bottom:22px}

@media(max-width:760px){
  .art-faq summary{font-size:17px;padding-right:36px}
}

/* Sources written as paragraphs rather than a list — the numbering is
   already in the text, so they only need the block's quiet voice. */
.art-sources p:not(.art-sources__t){
  font-size:13px;line-height:1.5;color:#5C636C;margin:0 0 7px}
.art-sources p:not(.art-sources__t):last-child{margin-bottom:0}