/* ═══════════════════════════════════════════════════════════════
   ARCO KB — ARTICLE BODY v3.0.0
   Companion to arco-kb.css. The hub file styles .kbh-* and .kbp-*;
   this styles the article body inside .arco-kb. Checked against
   arco-base / arco-shell / arco-product / arco-kb: zero shared
   selectors, so it can be appended to arco-kb.css safely.
   LAW: zero !important, no id selectors, no specificity flags.

   It deliberately adds ONLY what the theme has no opinion about.
   arco-base already dresses a, code, pre, table, th, blockquote, hr
   and the h1-h6 scale — those are left alone, so an article inherits
   the same prose voice as every other page.
   ═══════════════════════════════════════════════════════════════ */

.arco-kb{
  --a-hover:#161B26;                                   /* the card-hover ground, as .kbh-dir-card uses */
  --a-azure:#7EB4E6;                                   /* navigation voice */
  --a-azure-line:rgba(126,180,230,.45);
  --a-err:#D27A54;                                     /* house error tone */
  --a-line-soft:rgba(201,169,110,.10);
}

/* ── layer spacing. Headings, links, code, tables keep the theme's voice ── */
.arco-kb h2{margin-top:0}
.arco-kb ol,.arco-kb ul{padding-left:1.35em}
.arco-kb li{margin:.45em 0}
/* The one thing arco-base does not set on inline code, and KB articles are
   full of long unbroken command strings: without this a single
   Get-TransportService line widens the page by 400px on a phone. */
.arco-kb code{overflow-wrap:break-word}

/* ── jump nav: the three layers, in the directory-card language ── */
.arco-jump{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:0 0 30px}
.arco-jump a{display:flex;flex-direction:column;padding:20px 22px;background:var(--arco-panel);
  border:1px solid var(--arco-line);border-radius:14px;color:var(--arco-bone);text-decoration:none;
  transition:border-color .18s,background .18s,transform .18s}
.arco-jump a:hover,.arco-jump a:focus-visible{background:var(--a-hover);border-color:var(--a-azure-line);
  transform:translateY(-2px);color:var(--arco-bone)}
.arco-jump b{display:block;font:700 18.5px/1.25 var(--arco-head);color:var(--arco-bone);margin-bottom:5px}
.arco-jump span{font-size:14px;line-height:1.6;color:var(--arco-muted)}
.arco-jump a:hover span{color:var(--arco-bone)}

/* ── layer 1: fix it now ── */
.arco-l1{background:var(--arco-panel);border:1px solid var(--arco-line);
  border-left:3px solid var(--arco-champ);border-radius:16px;padding:30px 32px 26px;margin:0 0 40px}
.arco-l1-h{color:var(--arco-champ)}
.arco-lead{font-size:17px;line-height:1.65;color:var(--arco-bone)}
.arco-steps li{margin:.6em 0}
.arco-stop{margin:1.3em 0 0;padding-top:1.1em;border-top:1px solid var(--a-line-soft);color:var(--arco-muted)}

/* ── layers 2 and 3 ── */
.arco-l2,.arco-l3{margin:0 0 40px;scroll-margin-top:104px}   /* clears the sticky header */
.arco-l2-h,.arco-l3-h{padding-bottom:12px;border-bottom:1px solid var(--arco-line)}

/* ── callouts. Recede into the panel they sit in ── */
.arco-note,.arco-warn{margin:1.3em 0;padding:16px 20px;border-radius:12px;background:var(--arco-deep);
  border:1px solid var(--arco-line);border-left:3px solid var(--arco-champ);color:var(--arco-muted);
  overflow-wrap:break-word}
.arco-note strong,.arco-note b{color:var(--arco-bone)}
.arco-warn{border-left-color:var(--a-err);color:var(--a-err)}
.arco-warn strong,.arco-warn b{color:var(--a-err)}

/* ── cause blocks ── */
.arco-cause{margin:1.8em 0;padding:24px 26px;background:var(--arco-panel);
  border:1px solid var(--arco-line);border-radius:14px}
.arco-cause h3{margin-top:0}
.arco-sym{color:var(--arco-muted);margin:.5em 0 1em;overflow-wrap:break-word}
.arco-sym-tag{display:inline-block;margin-right:.6em;padding:6px 13px;border-radius:999px;
  border:1px solid var(--arco-line2);color:var(--arco-champ);
  font:700 12px/1 var(--arco-head);letter-spacing:.08em;text-transform:uppercase}

/* ── code. pre already carries the theme's deep ground and gold hairline ── */
.arco-codewrap{margin:1.3em 0}
.arco-code-label{display:block;margin-bottom:9px;font:600 13px/1.5 var(--arco-body);color:var(--arco-muted)}
.arco-code{margin:0;border-radius:14px;padding:18px 20px;scrollbar-width:thin;
  scrollbar-color:var(--arco-champ) var(--arco-deep)}
.arco-code code{background:none;border:0;padding:0;font-size:.9em;color:var(--arco-bone);
  white-space:pre-wrap;overflow-wrap:anywhere}

/* ── tables. The theme paints a full gold grid on th/td; these want hairlines
      and a framed, scrollable container, so the vertical rules are cleared. ── */
.arco-tablewrap{margin:1.4em 0;overflow-x:auto;border:1px solid var(--arco-line);border-radius:14px}
.arco-table,.arco-codes{font-size:15px}
.arco-table th,.arco-codes th{border:0;border-bottom:1px solid var(--arco-line);
  font:700 12.5px/1.6 var(--arco-head);letter-spacing:.09em;text-transform:uppercase;
  padding:14px 18px;white-space:nowrap}
.arco-table td,.arco-codes td{border:0;border-bottom:1px solid var(--a-line-soft);
  padding:13px 18px;vertical-align:top;overflow-wrap:anywhere}
.arco-table tr:last-child td,.arco-codes tr:last-child td{border-bottom:0}
.arco-codes .arco-src{color:var(--arco-dim);font-size:13.5px;white-space:nowrap}

/* ── questions people ask ── */
.arco-faq{margin:1.3em 0;padding-bottom:1.1em;border-bottom:1px solid var(--a-line-soft)}
.arco-faq h4{margin-top:0}
.arco-faq p{color:var(--arco-muted);margin-bottom:0}

/* ── buy block: commerce, so champagne framing, never azure ── */
.arco-buy{margin:2em 0;padding:26px 28px;background:var(--arco-panel);
  border:1px solid var(--arco-line2);border-radius:16px}
.arco-buy-title{margin:0 0 10px;font:700 21px/1.25 var(--arco-head);color:var(--arco-champ)}
.arco-buy p{margin:.5em 0;color:var(--arco-muted)}
.arco-buy p:last-child{margin-bottom:0}
.arco-buy a{font-weight:700}

/* ── related ── */
.arco-related{margin:2.8em 0 0;padding-top:1.5em;border-top:1px solid var(--arco-line)}
.arco-related h2{font-size:21px;font-weight:700}
.arco-related ul{list-style:none;padding:0;margin:0}
.arco-related li{margin:.6em 0}
.arco-related a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── focus visibility (legibility law) ── */
.arco-kb a:focus-visible{outline:2px solid var(--arco-goldh);outline-offset:2px;border-radius:6px}

/* ── responsive ── */
@media(max-width:1020px){
  .arco-jump{grid-template-columns:1fr;gap:13px}
}
@media(max-width:767px){
  .arco-l1{padding:20px 18px}
  .arco-cause{padding:18px 18px}
  .arco-buy{padding:20px 18px}
  .arco-code{padding:15px 15px}
  .arco-buy-title{font-size:18.5px}
  .arco-jump b{font-size:16.5px}
  .arco-table,.arco-codes{font-size:14px}
  .arco-table th,.arco-codes th{padding:12px 13px}
  .arco-table td,.arco-codes td{padding:11px 13px}
}
@media(prefers-reduced-motion:reduce){
  .arco-jump a{transition:none}
  .arco-jump a:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   THE NORMALIZATION GUARD — the only !important in this file.
   arco-shell.css carries a justified data-override for the legal
   pages whose DB content holds pasted inline font sizes:

     body:not(.woocommerce-cart):not(.woocommerce-checkout)
       .arco-page-content span{font-size:17px !important}

   plus the same shape for p and li, and an h2/h3 colour rule at
   (0,3,2). If KB articles render inside .arco-page-content, that
   block takes EVERY span in an article to 17px — the symptom pill,
   the code label and the jump-card subtitle all blow up — and
   repaints the layer-1 heading bone instead of champagne.

   These four declarations exist only to survive that block. They
   are inert if your single-post template wraps articles in
   anything else, and they retire the day that block does.
   ═══════════════════════════════════════════════════════════════ */
/* His span rule scores (0,3,2) AND carries !important, so a plain
   .arco-kb .x at (0,2,0) loses even with !important of its own. The class
   is repeated to reach four class tokens — (0,4,0) — which outranks three
   classes regardless of element count. Legal CSS, and the only way to win
   this without hardcoding .arco-page-content into every selector. */
.arco-kb .arco-sym-tag.arco-sym-tag.arco-sym-tag{font-size:12px !important}
.arco-kb .arco-code-label.arco-code-label.arco-code-label{font-size:13px !important}
.arco-kb .arco-jump.arco-jump.arco-jump span{font-size:14px !important}
.arco-kb .arco-l1-h{color:var(--arco-champ) !important}
/* <p class="arco-buy-title"> and <p class="arco-warn"> are caught the same
   way: the p rule forces 17px !important, and .arco-page-content p at
   (0,3,2) repaints both muted. */
.arco-kb .arco-buy-title.arco-buy-title.arco-buy-title{font-size:21px !important;color:var(--arco-champ) !important}
.arco-kb .arco-warn.arco-warn.arco-warn{color:var(--a-err) !important}
.arco-kb .arco-warn.arco-warn.arco-warn strong,
.arco-kb .arco-warn.arco-warn.arco-warn b{color:var(--a-err) !important}
@media(max-width:767px){
  .arco-kb .arco-buy-title.arco-buy-title.arco-buy-title{font-size:18.5px !important}
}