/* ═══════════════════════════════════════════════════════════════════

   GUIDE TYPOGRAPHY — readability + per-language fonts + colored links

   Loads AFTER style.css so these rules win on conflicts.

   ═══════════════════════════════════════════════════════════════════ */



/* ─── Per-language font stacks ────────────────────────────────────── */

:root {

    --font-latin: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --font-he: 'Heebo', 'Assistant', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-ar: 'Noto Sans Arabic', 'Tajawal', 'IBM Plex Sans Arabic', 'Geeza Pro', 'Segoe UI', 'Tahoma', sans-serif;

    --font-hi: 'Noto Sans Devanagari', 'Inter', sans-serif;

    --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

    /* Link palette — AA-contrast on dark bg, brighter & more saturated than v1.0 */

    --link-color: #5BB7FF;

    --link-hover: #9FD4FF;

    --link-visited: #C9B0FF;

    --link-underline: rgba(91, 183, 255, 0.45);

}



html[lang="ar"] body,

html[lang="ar"] .article-body { font-family: var(--font-ar); }

html[lang="he"] body,

html[lang="he"] .article-body { font-family: var(--font-he); }

html[lang="hi"] body,

html[lang="hi"] .article-body { font-family: var(--font-hi); }



/* ─── Article body: bigger, airier, easier to read ────────────────── */

.article-body {

    font-size: 17.5px;

    line-height: 1.8;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;

    hanging-punctuation: first allow-end;

}



html[lang="ar"] .article-body {

    font-size: 19px;

    line-height: 2.0;

    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "init" 1, "medi" 1, "fina" 1;

    word-spacing: 0.04em;

    /* Arabic prefers slightly heavier base weight for readability on dark bg */

    font-weight: 400;

}



html[lang="he"] .article-body {

    font-size: 17.5px;

    line-height: 1.9;

    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;

    /* Heebo renders better with explicit medium weight for body */

    font-weight: 400;

}



.article-body p {

    margin-block-end: 20px;

    color: var(--text);

}



/* limit line length for prose readability — ~75ch is the sweet spot */

.article-body > p,

.article-body > ul,

.article-body > ol {

    max-width: 75ch;

}

html[lang="ar"] .article-body > p,

html[lang="ar"] .article-body > ul,

html[lang="ar"] .article-body > ol { max-width: 70ch; }



/* ─── Headings: confident, clear hierarchy ────────────────────────── */

.article-body h2 {

    font-size: 32px;

    font-weight: 800;

    margin-block: 56px 20px;

    line-height: 1.25;

    letter-spacing: -0.015em;

    color: var(--text);

    text-wrap: balance;

    position: relative;

    padding-block-end: 12px;

    border-block-end: 2px solid rgba(91, 183, 255, 0.18);

}

.article-body h3 {

    font-size: 23px;

    font-weight: 700;

    margin-block: 38px 14px;

    line-height: 1.35;

    letter-spacing: -0.005em;

    color: var(--text);

    text-wrap: balance;

}

.article-body h4 {

    font-size: 18px;

    font-weight: 700;

    margin-block: 24px 10px;

    color: var(--text);

    letter-spacing: 0;

}

html[lang="ar"] .article-body h2 { font-size: 32px; font-weight: 700; letter-spacing: 0; line-height: 1.45; }

html[lang="ar"] .article-body h3 { font-size: 24px; font-weight: 700; letter-spacing: 0; line-height: 1.5; }

html[lang="he"] .article-body h2 { letter-spacing: 0; font-weight: 800; }

html[lang="he"] .article-body h3 { letter-spacing: 0; font-weight: 700; }



/* ─── Links: ALWAYS visibly colored, accessible, language-agnostic ── */

.article-body a {

    color: var(--link-color);

    text-decoration: underline;

    text-decoration-color: var(--link-underline);

    text-decoration-thickness: 1.5px;

    text-underline-offset: 3px;

    transition: color .15s ease, text-decoration-color .15s ease, background-color .15s ease;

    word-break: break-word;

    font-weight: 500;

    border-radius: 2px;

}

.article-body a:hover,

.article-body a:focus-visible {

    color: var(--link-hover);

    text-decoration-color: var(--link-hover);

    text-decoration-thickness: 2px;

    background-color: rgba(91, 183, 255, 0.08);

}

.article-body a:visited { color: var(--link-visited); }

.article-body a:focus-visible {

    outline: 2px solid var(--link-hover);

    outline-offset: 3px;

}



/* External link indicator (subtle) */

.article-body a[href^="http"]:not([href*="polymarkets.co.il"])::after {

    content: " ↗";

    font-size: 0.85em;

    opacity: 0.7;

    margin-inline-start: 1px;

}



/* ─── Lists: better spacing & marker color ────────────────────────── */

.article-body ul,

.article-body ol {

    margin-block: 18px;

    padding-inline-start: 26px;

}

.article-body li {

    margin-block-end: 8px;

    line-height: 1.8;

}

.article-body ul li::marker { color: var(--link-color); }

.article-body ol li::marker { color: var(--link-color); font-weight: 600; }



/* ─── Strong / em: subtle emphasis ────────────────────────────────── */

.article-body strong { color: var(--text); font-weight: 700; }

.article-body em { color: var(--text); font-style: italic; }



/* ─── Inline code: monospace, language-aware ──────────────────────── */

.article-body code {

    font-family: var(--font-mono);

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid var(--border);

    padding: 2px 7px;

    border-radius: 4px;

    font-size: 0.92em;

    color: #FFD580;

    white-space: normal;

    overflow-wrap: anywhere;

    direction: ltr;

    unicode-bidi: isolate;

}

/* GUIDE FIX 2026-06-20: long inline code (URLs, contract addrs) must wrap in

   narrow containers + table cells instead of overflowing on mobile. */

.article-body td code,

.article-body th code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

.article-body table { max-width: 100%; }

.article-body .table-wrap, .article-body .guide-table-wrap { overflow-x: auto; }



/* ─── Blockquote: logical-property based, RTL safe ────────────────── */

.article-body blockquote {

    border: none;

    border-inline-start: 3px solid var(--accent);

    padding: 14px 20px;

    margin-block: 24px;

    background: var(--bg-surface);

    /* #101674: logical corners - flat against the accent bar, rounded on the far edge.
       Replaces the html[dir=rtl] twin that used to flip the physical shorthand. */

    border-radius: 0;

    border-start-end-radius: var(--radius-sm);

    border-end-end-radius: var(--radius-sm);

    color: var(--text-secondary);

    font-style: italic;

}



/* ─── Tables: logical alignment, striped rows, hover state ────────── */

.article-body table {

    margin-block: 28px;

    font-size: 15px;

    border-radius: var(--radius-sm);

    /* was overflow:hidden + collapse - that clipped glossary tooltips (.pm-gloss::after)

       opening out of a table cell. visible + separate lets tooltips escape; the edge

       cells below re-round the corners so the table still looks rounded. */

    overflow: visible;

    border-collapse: separate;

    border-spacing: 0;

    width: 100%;

}

.article-body table thead th:first-child { border-start-start-radius: var(--radius-sm); }

.article-body table thead th:last-child  { border-start-end-radius: var(--radius-sm); }

.article-body table tbody tr:last-child td:first-child { border-end-start-radius: var(--radius-sm); }

.article-body table tbody tr:last-child td:last-child  { border-end-end-radius: var(--radius-sm); }

.article-body th {

    background: rgba(91, 183, 255, 0.10);

    color: var(--text);

    font-weight: 700;

    border-block-end: 2px solid rgba(91, 183, 255, 0.25);

}

.article-body th,

.article-body td {

    text-align: start;

    padding: 12px 16px;

    border-block-end: 1px solid var(--border);

    vertical-align: top;

}

.article-body tbody tr:nth-child(even) {

    background: rgba(255, 255, 255, 0.02);

}

.article-body tbody tr {

    transition: background .12s ease;

}

.article-body tbody tr:hover {

    background: rgba(91, 183, 255, 0.06);

}

html[lang="ar"] .article-body table { font-size: 16px; }

html[lang="he"] .article-body table { font-size: 15.5px; }



/* ─── Callout boxes: tinted backgrounds, logical borders ──────────── */

.info-box, .warning-box, .success-box, .example-box {

    border-inline-start: 4px solid var(--accent);

    border-right: none;

    border-left: none;

    padding: 18px 22px;

    line-height: 1.8;

    font-size: 15.5px;

    border-radius: var(--radius-sm);

    margin-block: 22px;

}

.info-box {

    border-inline-start-color: #5BB7FF;

    background: rgba(91, 183, 255, 0.07);

}

.warning-box {

    border-inline-start-color: var(--yellow, #FFC857);

    background: rgba(255, 200, 87, 0.07);

}

.success-box {

    border-inline-start-color: var(--green, #4ADE80);

    background: rgba(74, 222, 128, 0.07);

}

.example-box {

    border: 1px solid var(--border);

    border-inline-start: 4px solid var(--text-secondary);

    background: rgba(255, 255, 255, 0.025);

}



.info-box h3, .warning-box h3, .success-box h3, .example-box h3 {

    margin-block: 4px 10px !important;

    font-size: 17px !important;

    padding-block-end: 0 !important;

    border-block-end: none !important;

}

html[lang="ar"] .info-box, html[lang="ar"] .warning-box,

html[lang="ar"] .success-box, html[lang="ar"] .example-box { font-size: 17px; line-height: 1.95; }

html[lang="he"] .info-box, html[lang="he"] .warning-box,

html[lang="he"] .success-box, html[lang="he"] .example-box { font-size: 16px; line-height: 1.9; }



.info-box ul, .warning-box ul, .success-box ul, .example-box ul,

.info-box ol, .warning-box ol, .success-box ol, .example-box ol {

    margin-block: 8px;

}

.info-box a, .warning-box a, .success-box a, .example-box a {

    color: var(--link-hover);

}



/* ─── Screenshots: caption polish ─────────────────────────────────── */

.guide-screenshot {

    margin-block: 28px;

}

.guide-screenshot img {

    border: 1px solid var(--border);

    border-radius: var(--radius);

}

/* #155 (operator "I see nothing yet"): style.css has a blanket `.article-body img{display:none}`
   (a stopgap that hid ALL guide media to suppress the 246 broken/uncaptured screenshots). That
   also hid the REAL captured screenshots. guide-single.php now DROPS blocks whose image is missing,
   so any remaining .guide-screenshot img is a real file - un-hide it here with a higher-specificity
   selector that beats the blanket rule. Responsive, centred, logical CSS. */
.article-body .guide-screenshot img {

    display: block !important;

    max-width: 100%;

    height: auto;

    margin-inline: auto;

}

.screenshot-caption {

    font-size: 13px;

    color: var(--text-secondary);

    text-align: center;

    margin-block-start: 8px;

    line-height: 1.6;

    font-style: italic;

}



/* ─── Chapter break: more presence ───────────────────────────────── */

.pm-chapter-break {

    margin-block: 56px 32px;

}

.chapter-number {

    color: var(--text-secondary);

    font-size: 13px;

    margin-block-end: 8px;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}

html[lang="ar"] .chapter-number,

html[lang="he"] .chapter-number {

    text-transform: none;

    letter-spacing: 0;

}



/* ─── Mobile: scale headings down gracefully ──────────────────────── */

@media (max-width: 600px) {

    .article-body { font-size: 16.5px; line-height: 1.75; }

    html[lang="ar"] .article-body { font-size: 18px; line-height: 1.95; }

    html[lang="he"] .article-body { font-size: 16.5px; line-height: 1.85; }

    .article-body h2 { font-size: 25px; margin-block: 40px 14px; padding-block-end: 8px; }

    html[lang="ar"] .article-body h2 { font-size: 26px; line-height: 1.4; }

    .article-body h3 { font-size: 19.5px; margin-block: 30px 10px; }

    html[lang="ar"] .article-body h3 { font-size: 21px; line-height: 1.45; }

    .article-body p { margin-block-end: 16px; }

    .article-body table { font-size: 14px; }

    html[lang="ar"] .article-body table { font-size: 15px; }

    .article-body th, .article-body td { padding: 10px 11px; }

    /* Bigger tap targets for mobile links */

    .article-body a { padding-block: 2px; }

}



/* ─── Reduced motion: respect user preference ─────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .article-body a,

    .article-body tbody tr {

        transition: none;

    }

}





/* === GUIDE FIXES JUN-2026: code-block wrap (RTL+LTR) + FAQ accordion === */
/* #101674: `pre` keeps direction:ltr + text-align:left on purpose. Code is LTR in every
   language; with direction:ltr on the element, `start` would resolve to left anyway. */

.article-body pre{

  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;

  overflow-x:auto;max-width:100%;

  direction:ltr;text-align:left;unicode-bidi:isolate;

  background:var(--bg-card,#1E2428);border:1px solid var(--border,#242B32);

  border-radius:10px;padding:14px 16px;font-size:13px;line-height:1.55;margin:16px 0;

}

.article-body pre code{white-space:inherit;background:none;border:none;padding:0;display:block}

[dir="rtl"] .article-body pre{direction:ltr;text-align:left}



/* FAQ accordion (guide-single .faq-q/.faq-a — JS initFAQ toggles .open) */

.faq-list{list-style:none;padding:0;margin:12px 0}

.faq-item{border:1px solid var(--border,#242B32);border-radius:10px;margin-bottom:8px;background:var(--bg-surface);overflow:hidden}

.faq-q{padding:13px 16px;font-weight:600;font-size:14.5px;cursor:pointer;position:relative;

  padding-inline-end:40px;transition:background .15s;user-select:none}

.faq-q:hover{background:var(--bg-hover)}

.faq-q::after{content:"+";position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);

  font-size:18px;font-weight:700;color:var(--text-secondary);transition:transform .18s}

.faq-item.open .faq-q::after{content:"\2212"}

.faq-a{display:none;padding:15px 16px 15px;color:var(--text-secondary);font-size:14px;line-height:1.65;border-top:1px solid var(--border)}

.faq-item.open .faq-a{display:block}





/* === BOT GUIDE FIXES JUN-2026: sibling FAQ (faq-section) + series nav === */

.faq-section{margin:12px 0}

.faq-section .faq-q{border:1px solid var(--border);border-radius:10px;background:var(--bg-surface);

  padding:13px 16px;padding-inline-end:40px;font-weight:600;font-size:14.5px;cursor:pointer;

  position:relative;user-select:none;margin-top:8px;transition:background .15s}

.faq-section .faq-q:hover{background:var(--bg-hover)}

.faq-section .faq-q::after{content:"+";position:absolute;inset-inline-end:14px;top:50%;

  transform:translateY(-50%);font-size:18px;font-weight:700;color:var(--text-secondary)}

.faq-section .faq-q.open::after{content:"\2212"}

.faq-section .faq-q.open{border-start-end-radius:10px;border-start-start-radius:10px;border-end-start-radius:0;border-end-end-radius:0}

.faq-section .faq-a{display:none;padding:12px 16px;border:1px solid var(--border);border-top:none;

  border-radius:0 0 10px 10px;background:var(--bg-surface);color:var(--text-secondary);

  font-size:14px;line-height:1.65}

.faq-section .faq-q.open + .faq-a{display:block}



/* series eyebrow (chapter line at top) */

.article-body .series-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.08em;

  text-transform:uppercase;color:var(--accent);margin:0 0 10px}



/* series nav (prev/next chapter, below FAQs) */

.series-nav{margin:28px 0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-surface)}

.series-nav p{margin:0 0 12px;font-size:12.5px;color:var(--text-secondary)}

.series-nav a{display:inline-flex;flex-direction:column;gap:2px;flex:1;min-width:220px;

  padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);

  text-decoration:none;color:var(--text);font-size:13.5px;font-weight:600;transition:var(--transition)}

.series-nav a:hover{border-color:var(--accent);color:var(--accent)}

.series-nav > div, .series-nav .sn-row{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:640px){.series-nav a{min-width:100%}}





/* === MAXHEIGHT RELEASE JUN-2026: style.css has legacy .faq-a{max-height:0;overflow:hidden}

   accordion; it clipped opened answers to a sliver. Release it for both structures. === */

.faq-item.open .faq-a{max-height:none}

.faq-section .faq-a{max-height:none;overflow:visible;transition:none}



/* === Recommended Reading / cornerstone-fanout block (was unstyled plain bullets) === */

.pm-recommended-reading{padding:20px 22px}

.pm-recommended-reading h3{margin:0 0 4px;font-size:17px}

.pm-recommended-reading > p{margin:0 0 14px;font-size:13.5px;color:var(--text-secondary)}

.pm-recommended-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}

.pm-recommended-list li{margin:0}

.pm-recommended-list a,.pm-recommended-list a:visited{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-surface,rgba(255,255,255,.03));color:var(--text);text-decoration:none;font-size:13.8px;font-weight:600;line-height:1.3;transition:border-color .15s,background .15s}

.pm-recommended-list a::after{content:"\2192";margin-inline-start:auto;color:var(--text-tertiary,#7a8694);font-size:15px;font-weight:700;transition:transform .15s,color .15s}

.pm-recommended-list a:hover{border-color:var(--accent);background:var(--bg-hover,rgba(91,183,255,.08))}

.pm-recommended-list a:hover::after{transform:translateX(3px);color:var(--accent)}

[dir="rtl"] .pm-recommended-list a::after{content:"\2190"}

[dir="rtl"] .pm-recommended-list a:hover::after{transform:translateX(-3px)}

@media(max-width:700px){.pm-recommended-list{grid-template-columns:1fr}}



/* === "Got it? Put it into practice" CTA: drop the box, center, use our buttons === */

.quiz-cta{background:none!important;border:none!important;padding:0!important;margin:38px 0!important;text-align:center}

.quiz-cta-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px}

.quiz-cta-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.article-body .quiz-cta-btn,.article-body .quiz-cta-btn:visited{text-decoration:none;border-radius:8px;padding:13px 26px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:9px;transition:filter .15s,background .15s,border-color .15s,color .15s;background-image:none}

.article-body .quiz-cta-train,.article-body .quiz-cta-train:visited{background:var(--accent,#4877FF);color:#fff;border:1px solid transparent}

.article-body .quiz-cta-train:hover{filter:brightness(1.09);color:#fff;background:var(--accent,#4877FF)}

.article-body .quiz-cta-pm,.article-body .quiz-cta-pm:visited{background:transparent;color:var(--text);border:1px solid var(--border)}

.article-body .quiz-cta-pm:hover{border-color:var(--accent,#4877FF);color:var(--accent,#4877FF);background:rgba(72,119,255,.09)}



/* End-of-guide CTA is SHOWN again (owner 2026-06-20: we were losing affiliate clicks).

   The earlier 'hide for now' display:none rule is removed. The CTA now uses the homepage hero

   buttons (.home-hero-btn green-train + blue-primary, 3D press) with NO container box, centered

   text, side-by-side on desktop, stacked on mobile. */

.guide-end-cta{text-align:center;margin:34px 0}

.guide-end-cta h3{font-size:20px;font-weight:700;margin:0 0 8px}

.guide-end-cta p{color:var(--text-secondary,#9aa7b4);font-size:14px;margin:0 0 18px}

.guide-cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

@media(max-width:768px){

  .guide-cta-row{flex-direction:column;align-items:stretch}

  .guide-cta-row .home-hero-btn{width:100%;flex:0 0 auto}

}



/* callout-box <strong> was display:block (style.css L2318) which broke mid-sentence

   emphasis onto its own line. Keep strong inline; box titles use <h3>. */

.article-body .info-box strong,

.article-body .warning-box strong,

.article-body .success-box strong,

.article-body .example-box strong{display:inline;font-size:inherit;margin-bottom:0;font-weight:700;color:var(--text)}





/* GUIDE FIX 2026-06-20b: sidebar sticky (was position:relative/static, scrolled away).

   Sticky only, NO internal overflow-scroll per request. align-self:start lets it stick in the grid. */

.article-layout .article-toc-wrap{ position:sticky; top:80px; align-self:start; max-height:none; overflow:visible; }


/* === GUIDE FIX 2026-06-21: label multi-language code blocks (<pre data-lang="Python|Rust|curl">) === */
/* The API reference stacks several <pre data-lang> blocks; without a label they look like one broken block. */
.article-body pre[data-lang]{position:relative;padding-top:34px}
.article-body pre[data-lang]::before{
  content:attr(data-lang);position:absolute;top:0;inset-inline-start:0;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent,#4db6ac);background:var(--bg-surface,#171C20);
  padding:5px 12px;border-bottom:1px solid var(--border,#242B32);border-inline-end:1px solid var(--border,#242B32);
  border-radius:10px 0 8px 0;
}

/* #236: the <pm-code-tabs> shortcode emits a <figure class="pm-code-tabs"> for
   multi-language code examples. The blanket .article-body figure{display:none}
   (which hides content images) was also hiding it - exempt code-tabs here. */
.article-body figure.pm-code-tabs{ display:block !important; }