/* ==========================================================================
   WING Article Design System v1.0 (Wing theme 1.6) — shared styles for
   article bodies (.wing-article-body, .wa-*). Loaded on single posts only.
   Based on the approved pack's wing-articles.css, adapted to the theme:
   colours come from the theme tokens (so the accessibility menu's high
   contrast mode applies), logical properties for RTL, the theme's focus
   ring, no motion. Articles carry no inline CSS.
   ========================================================================== */

.wing-article-body {
  --wa-primary: var(--primary, #1257EE);
  --wa-primary-hover: var(--primary-hover, #0B47D1);
  --wa-heading: var(--heading, #0A1B5C);
  --wa-text: var(--text, #4A5A87);
  --wa-muted: var(--muted, #5A6A9C);
  --wa-tint: var(--tint, #EEF4FE);
  --wa-border: var(--border-featured, #86A5F5);
  --wa-line: var(--border, #E6EDF8);
  --wa-ok: #0B6B45;
  --wa-surface: var(--card, #FFFFFF);
  line-height: 1.8;
}
.wing-article-body > *:first-child { margin-top: 0; }
.wing-article-body h2 { scroll-margin-top: calc(var(--header-h, 70px) + 1rem); }
.wing-article-body section[id], .wing-article-body h2[id], .wing-article-body h3[id] { scroll-margin-top: calc(var(--header-h, 70px) + 1rem); }

/* Lead, summaries and call-outs */
.wa-lead { font-size: 1.08rem; color: var(--wa-heading); background: linear-gradient(135deg, #F7F9FF, #EEF3FF); border: 1px solid var(--wa-line); border-radius: 18px; padding: 1.25rem 1.4rem; margin: 0 0 1.5rem; }
.wa-lead > :last-child { margin-bottom: 0; }
.wa-quick, .wa-callout, .wa-tldr { border: 1px solid var(--wa-line); border-inline-start: 5px solid var(--wa-primary); border-radius: 16px; padding: 1.15rem 1.25rem; margin: 1.4rem 0; background: var(--wa-surface); }
.wa-quick h2, .wa-callout h2, .wa-tldr h2 { margin-top: 0; }
.wa-quick > :last-child, .wa-callout > :last-child, .wa-tldr > :last-child { margin-bottom: 0; }
.wa-callout--ok { border-inline-start-color: var(--wa-ok); background: #F3FBF7; }

/* Table of contents */
.wa-toc { background: var(--wa-tint); border: 1px solid var(--wa-line); border-radius: 16px; padding: 1.1rem 1.25rem; margin: 1.5rem 0 2rem; }
.wa-toc strong { display: block; margin-bottom: .45rem; color: var(--wa-heading); }
.wa-toc ul { columns: 2; column-gap: 2rem; margin: .2rem 0; padding-inline-start: 1.25rem; }
.wa-toc li { break-inside: avoid; margin: .2rem 0; }
.wa-toc a { font-weight: 650; }

/* Cards and grids */
.wa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.3rem 0; }
.wa-card { border: 1px solid var(--wa-line); border-radius: 16px; padding: 1.1rem; background: var(--wa-surface); }
.wa-card h3 { margin-top: 0; }
.wa-card > :last-child { margin-bottom: 0; }
.wa-card--accent { background: var(--wa-tint); border-color: #B8C9F7; }

/* Numbered steps */
.wa-steps { counter-reset: wa-step; list-style: none; padding: 0 !important; margin: 1.2rem 0; }
.wa-steps > li { counter-increment: wa-step; position: relative; border: 1px solid var(--wa-line); border-radius: 14px; padding-block: 1rem; padding-inline: 3.8rem 1rem; margin: .75rem 0; background: var(--wa-surface); }
.wa-steps > li::before { content: counter(wa-step); position: absolute; inset-inline-start: 1rem; top: 1rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--wa-primary); color: #fff; font-weight: 800; }

/* Check lists: the tick is decoration; the text carries the meaning */
.wa-checklist { list-style: none; padding: 0 !important; margin: 1rem 0; }
.wa-checklist > li { position: relative; padding-inline-start: 1.9rem; margin: .55rem 0; }
.wa-checklist > li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--wa-ok); font-weight: 900; }

/* Tables: the wrapper scrolls on narrow screens and can be reached with the keyboard */
.wa-table-wrap { overflow-x: auto; margin: 1.3rem 0; border-radius: 12px; }
.wa-table-wrap:focus-visible { outline: 3px solid var(--wa-primary); outline-offset: 3px; }
.wa-table { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--wa-surface); }
.wa-table caption { text-align: start; font-weight: 800; margin-bottom: .55rem; color: var(--wa-heading); }
.wa-table th, .wa-table td { border: 1px solid var(--wa-line); padding: .8rem; text-align: start; vertical-align: top; }
.wa-table th { background: var(--wa-tint); color: var(--wa-heading); }

/* FAQ and decision helpers: native <details>/<summary>, no JavaScript */
.wa-faq details, .wa-decision details { border: 1px solid var(--wa-line); border-radius: 14px; background: var(--wa-surface); margin: .7rem 0; }
.wa-faq summary, .wa-decision summary { cursor: pointer; font-weight: 800; padding: 1rem 1.1rem; color: var(--wa-heading); border-radius: 14px; }
.wa-faq summary:hover, .wa-decision summary:hover { background: var(--wa-tint); }
.wa-faq details > div, .wa-decision details > div { padding: 0 1.1rem 1rem; }
.wa-faq details > div > :last-child, .wa-decision details > div > :last-child { margin-bottom: 0; }

/* Related articles */
.wa-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1.2rem 0; }
.wa-related a { display: block; border: 1px solid var(--wa-line); border-radius: 13px; padding: 1rem; text-decoration: none; font-weight: 750; background: var(--wa-surface); color: var(--wa-primary); }
.wa-related a:hover { background: var(--wa-tint); border-color: #AFC4FA; text-decoration: underline; }

/* Plans, sources, author box */
.wa-plan-zone { margin: 1.7rem 0; }
.wa-plan-zone .plan { max-width: 380px; }
.wa-source-note { font-size: .92rem; color: var(--wa-muted); border-top: 1px solid var(--wa-line); padding-top: .8rem; margin-top: 1.2rem; }
.wa-author { background: #FAFBFE; border: 1px solid var(--wa-line); border-radius: 14px; padding: 1rem 1.15rem; margin-top: 1.5rem; }
.wa-author strong { color: var(--wa-heading); }
.wa-author > :last-child { margin-bottom: 0; }

/* Focus: the theme's visible ring on every interactive element in the article */
.wing-article-body a:focus-visible, .wing-article-body summary:focus-visible { outline: 3px solid var(--wa-primary); outline-offset: 3px; border-radius: 6px; }

/* The accessibility menu's high-contrast mode: stronger borders, no tinted gradients */
html.a11y-contrast .wing-article-body { --wa-line: #4D4D4D; --wa-ok: #04502F; }
html.a11y-contrast .wa-lead, html.a11y-contrast .wa-callout--ok, html.a11y-contrast .wa-author { background: #fff; }
html.a11y-contrast .wa-card--accent, html.a11y-contrast .wa-related a:hover { border-color: #4D4D4D; }

@media (max-width: 760px) {
  .wa-toc ul { columns: 1; }
  .wa-grid, .wa-related { grid-template-columns: 1fr; }
  .wa-table { min-width: 560px; }
  .wa-steps > li { padding-inline: 3.4rem .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wing-article-body * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  .wa-toc, .wa-plan-zone { display: none; }
  .wa-faq details > div, .wa-decision details > div { display: block; }
}