/* ADIY Knowledge Hub: article content components (single posts only).
   Scoped to .adiy-article, which the plugin wraps around the post body.
   Covers the components used in the ADIY deep-dive articles (box, tbl-scroll,
   faq, prod, sources, vf, eq, codecap) and in the blog posts (callout,
   code-container, cta-box, faq-item, project-card, author-box).
   Colours read WoodMart variables first; fallbacks are the adiy.in values. */

.adiy-article {
  --a-green: var(--wd-primary-color, #2F6A41);
  --a-green-deep: #1F4A2D;
  --a-wash: #F4F8F3;
  --a-tint: #EAF2EA;
  --a-line: #DFE7DE;
  --a-ink: var(--wd-title-color, #242424);
  --a-text: #3F4740;
  --a-muted: #626B63;
  --a-warn-bg: #FFF7E0;
  --a-warn-edge: #C99400;
  --a-warn-ink: #7A5600;
  --a-bad: #A3261B;
  --a-code-bg: #17231B;
  --a-code-ink: #E6EFE6;
  --a-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  color: var(--a-text);
  font-size: 17px;
  line-height: 1.7;
  max-width: 820px;
  overflow-wrap: break-word;
}
.adiy-article *, .adiy-article *::before, .adiy-article *::after { box-sizing: border-box; }
.adiy-article img { max-width: 100%; height: auto; }
.adiy-article h2 { font-size: 26px; line-height: 1.3; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--a-line); scroll-margin-top: 110px; color: var(--a-ink); }
.adiy-article h3 { font-size: 20px; line-height: 1.35; margin: 30px 0 10px; scroll-margin-top: 110px; color: var(--a-ink); }
.adiy-article h4 { font-size: 17px; margin: 22px 0 8px; color: var(--a-ink); }
.adiy-article p { margin: 0 0 18px; }
.adiy-article ul, .adiy-article ol { margin: 0 0 18px; padding-left: 24px; }
.adiy-article li { margin-bottom: 6px; }
.adiy-article a { color: var(--a-green); text-decoration: underline; text-underline-offset: 2px; }
.adiy-article a:hover { color: var(--a-green-deep); }
.adiy-article a:focus-visible, .adiy-article summary:focus-visible { outline: 3px solid #1F6FEB; outline-offset: 2px; }

/* lead paragraph */
.adiy-article .standfirst { font-size: 20px; line-height: 1.55; color: var(--a-text); margin: 0 0 24px; }

/* "On this page" contents (generated by the plugin) */
.adiy-toc { border: 1px solid var(--a-line); border-left: 4px solid var(--a-green); background: var(--a-wash); padding: 12px 18px; margin: 0 0 32px; font-size: 15px; }
.adiy-toc summary { cursor: pointer; font-weight: 700; color: var(--a-ink); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.adiy-toc ol { margin: 10px 0 4px; padding-left: 22px; columns: 2; column-gap: 32px; }
.adiy-toc li { margin-bottom: 4px; break-inside: avoid; }
.adiy-toc a { text-decoration: none; }
.adiy-toc a:hover { text-decoration: underline; }

/* code */
.adiy-article pre { background: var(--a-code-bg); color: var(--a-code-ink); border-left: 4px solid var(--a-green); padding: 16px 18px; overflow-x: auto; margin: 0 0 22px; font: 13.5px/1.6 var(--a-mono); border-radius: 4px; max-width: 100%; white-space: pre; }
.adiy-article code { font-family: var(--a-mono); font-size: .88em; background: var(--a-tint); border: 1px solid var(--a-line); border-radius: 3px; padding: 1px 5px; color: var(--a-green-deep); }
.adiy-article pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.adiy-article .codecap { font-size: 13px; color: var(--a-muted); margin: -12px 0 24px; font-style: italic; }
.adiy-article .eq { background: var(--a-wash); border: 1px solid var(--a-line); padding: 14px 18px; margin: 0 0 22px; text-align: center; font-size: 18px; font-family: Georgia, "Times New Roman", serif; overflow-x: auto; }
.adiy-article .code-container { margin: 0 0 22px; border-radius: 4px; overflow: hidden; }
.adiy-article .code-container pre { margin: 0; border-radius: 0; }
.adiy-article .code-header { background: var(--a-green-deep); color: #fff; font: 12px/1.4 var(--a-mono); padding: 8px 14px; display: flex; justify-content: space-between; gap: 8px; }

/* tables: always scroll inside their wrapper, never widen the page */
.adiy-article .tbl-scroll { overflow-x: auto; margin: 0 0 24px; max-width: 100%; -webkit-overflow-scrolling: touch; }
.adiy-article table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 0; }
.adiy-article caption { caption-side: top; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--a-green); padding-bottom: 8px; }
.adiy-article th, .adiy-article td { border: 1px solid var(--a-line); padding: 8px 12px; text-align: left; vertical-align: top; }
.adiy-article th { background: var(--a-tint); color: var(--a-ink); font-size: 14px; }
.adiy-article tbody tr:nth-child(even) { background: #FAFCFA; }

/* callouts: deep-dive "box" and blog "callout" share one look */
.adiy-article .box, .adiy-article .callout, .adiy-article .safety-warning {
  border-left: 4px solid var(--a-green); background: var(--a-wash); padding: 14px 18px; margin: 0 0 24px; font-size: 15.5px; border-radius: 0 4px 4px 0;
}
.adiy-article .box > :last-child, .adiy-article .callout > :last-child { margin-bottom: 0; }
.adiy-article .box .lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--a-green); margin-bottom: 6px; }
.adiy-article .box.warn, .adiy-article .callout.warning, .adiy-article .callout-warning, .adiy-article .callout.caution, .adiy-article .safety-warning { background: var(--a-warn-bg); border-left-color: var(--a-warn-edge); }
.adiy-article .box.warn .lbl { color: var(--a-warn-ink); }
.adiy-article .box.ok, .adiy-article .callout.tip, .adiy-article .callout-tip { border-left-color: #2E8B4F; }
.adiy-article .callout.info, .adiy-article .callout-info { border-left-color: #2F6A8A; background: #F2F7FA; }
.adiy-article .callout-icon { display: inline-block; margin-right: 6px; }

/* verification badges used in specification tables */
.adiy-article .vf { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 3px; white-space: nowrap; }
.adiy-article .vf.y { background: #E9F5ED; color: #1D6B39; border: 1px solid #B6DDC2; }
.adiy-article .vf.n { background: #FDEEEE; color: var(--a-bad); border: 1px solid #F0C2C2; }

/* product box (deep dives) and call to action (blogs) */
.adiy-article .prod, .adiy-article .cta-box { border: 1px solid var(--a-line); border-top: 3px solid var(--a-green); background: var(--a-wash); padding: 18px 20px; margin: 32px 0 26px; }
.adiy-article .prod h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--a-green); }
.adiy-article .prod ul { margin: 0; }
.adiy-article .btn, .adiy-article .cta-btn { display: inline-block; background: var(--a-green); color: #fff; text-decoration: none; padding: 9px 16px; font-weight: 700; border-radius: 3px; margin-top: 6px; }
.adiy-article .btn:hover, .adiy-article .cta-btn:hover { background: var(--a-green-deep); color: #fff; }

/* FAQ: deep dives use <details>; blogs use .faq-item blocks */
.adiy-article .faq { border-top: 1px solid var(--a-line); margin-top: 14px; }
.adiy-article .faq details { border-bottom: 1px solid var(--a-line); padding: 12px 0; }
.adiy-article .faq summary { cursor: pointer; font-weight: 700; color: var(--a-ink); }
.adiy-article .faq details p { margin: 10px 0 0; }
.adiy-article .faq-item { border-bottom: 1px solid var(--a-line); padding: 12px 0; }
.adiy-article .faq-item h3, .adiy-article .faq-item h4, .adiy-article .faq-question { margin: 0 0 6px; font-size: 17px; }

/* sources, author, project cards */
.adiy-article .sources { font-size: 14.5px; }
.adiy-article .author-box { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--a-line); padding: 16px; margin: 28px 0; background: var(--a-wash); }
.adiy-article .project-card, .adiy-article .card, .adiy-article .article-card { border: 1px solid var(--a-line); padding: 16px 18px; margin: 0 0 18px; border-radius: 4px; }
.adiy-article .project-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.adiy-article .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }

@media (max-width: 640px) {
  .adiy-article { font-size: 16px; }
  .adiy-article h2 { font-size: 22px; }
  .adiy-article .standfirst { font-size: 18px; }
  .adiy-toc ol { columns: 1; }
}
@media print {
  .adiy-toc { display: none; }
  .adiy-article pre { white-space: pre-wrap; }
}