/* Writeup typography for dboudreau.dev single posts (cvio theme + Elementor).
   Scoped to the article body. Neutral silver on the theme's #101010, with the
   site's yellow (#f7c82c) as the only accent. Loaded by dbd-writeup-style.php. */

.single-post .single-post-text { --w-accent:#f7c82c; --w-line:rgba(255,255,255,.09); --w-panel:#0b0b0d; }

/* rhythm */
.single-post .single-post-text p { line-height:1.78; margin:0 0 1.15em; }
.single-post .single-post-text h2 { font-size:27px; line-height:1.3; margin:2.1em 0 .7em; padding-bottom:.35em;
  border-bottom:1px solid var(--w-line); letter-spacing:.005em; }
.single-post .single-post-text h3 { font-size:20px; line-height:1.35; margin:1.7em 0 .55em; color:#fff; }
.single-post .single-post-text h4 { font-size:16px; margin:1.4em 0 .45em; color:#fff; text-transform:uppercase; letter-spacing:.08em; }
.single-post .single-post-text ul, .single-post .single-post-text ol { margin:0 0 1.2em 1.3em; padding:0; }
.single-post .single-post-text li { margin:.3em 0; line-height:1.7; font-size:inherit; }   /* theme forces ol > li to 14px */
.single-post .single-post-text a { color:var(--w-accent); text-decoration:underline; text-decoration-color:rgba(247,200,44,.35);
  text-underline-offset:3px; overflow-wrap:anywhere; }
.single-post .single-post-text a:hover { text-decoration-color:var(--w-accent); }
.single-post .single-post-text hr { border:0; border-top:1px solid var(--w-line); margin:2.2em 0; }
/* a divider directly above a section heading already separates it: drop the heading's own rule */
.single-post .single-post-text hr + h2 { border-bottom:0; padding-bottom:0; margin-top:.2em; }
.single-post .single-post-text .dbd-lead { font-size:18px; line-height:1.7; color:#ececf0; }
.single-post .single-post-text ol.dbd-refs { margin-left:1.7em; font-size:14px; color:#a9a9b1; }
.single-post .single-post-text ol.dbd-refs li { margin:.4em 0; line-height:1.6; font-size:14px; }
.single-post .single-post-text strong { color:#fff; }

/* code: panels for blocks, chips for inline */
.single-post .single-post-text pre {
  background:var(--w-panel); border:1px solid var(--w-line); border-left:2px solid rgba(247,200,44,.55);
  border-radius:6px; padding:15px 18px; margin:1.4em 0 1.6em; overflow-x:auto; max-width:100%;
  font:13.5px/1.62 ui-monospace,"Cascadia Code","JetBrains Mono","Fira Code",Consolas,monospace;
  color:#e7e7ea; tab-size:4; white-space:pre; -webkit-overflow-scrolling:touch; }
/* the theme styles every <code> as an inline-block, nowrap, italic mint scroller: undo that inside blocks
   so the <pre> is the one thing that scrolls */
.single-post .single-post-text pre code { background:none; padding:0; border:0; font:inherit; color:inherit; white-space:inherit;
  display:block; overflow:visible; max-width:none; }
/* Cascadia Code (first in the stack on Windows) fuses <= and >= into single glyphs: wrong for code */
.single-post .single-post-text pre, .single-post .single-post-text code { font-variant-ligatures:none; }
.single-post .single-post-text pre[data-lang]::before { content:attr(data-lang); display:block; margin:-4px 0 10px;
  font:600 10px/1 ui-monospace,Consolas,monospace; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,200,44,.75); }
.single-post .single-post-text :not(pre) > code {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.06); border-radius:4px;
  padding:.08em .38em; font:.88em ui-monospace,"Cascadia Code",Consolas,monospace; color:#f1f1f3; overflow-wrap:anywhere;
  display:inline; white-space:normal; overflow:visible; max-width:none; vertical-align:baseline;   /* long names wrap, never clip */
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* Pygments token colours: the classes already present in pasted code blocks */
.single-post .single-post-text .highlight { background:var(--w-panel); }
.single-post .single-post-text .k, .single-post .single-post-text .kn, .single-post .single-post-text .kd,
.single-post .single-post-text .kr, .single-post .single-post-text .ow { color:#f7c82c; }
.single-post .single-post-text .s, .single-post .single-post-text .s1, .single-post .single-post-text .s2,
.single-post .single-post-text .sa, .single-post .single-post-text .si, .single-post .single-post-text .se,
.single-post .single-post-text .sd { color:#a8d8b0; }
.single-post .single-post-text .c, .single-post .single-post-text .c1, .single-post .single-post-text .cm,
.single-post .single-post-text .cp { color:#7f8791; font-style:italic; }
.single-post .single-post-text .mi, .single-post .single-post-text .mh, .single-post .single-post-text .mf,
.single-post .single-post-text .m { color:#d4b3ff; }
.single-post .single-post-text .nf, .single-post .single-post-text .fm { color:#9cc4ff; }
.single-post .single-post-text .nb, .single-post .single-post-text .bp { color:#ffb86b; }
.single-post .single-post-text .nv, .single-post .single-post-text .vg { color:#f0c3c3; }
.single-post .single-post-text .o, .single-post .single-post-text .p { color:#b9bcc4; }
.single-post .single-post-text .err { color:inherit; background:none; }

/* figures and screenshots */
.single-post .single-post-text img { max-width:100%; height:auto; border-radius:6px; }
.single-post .single-post-text figure.dbd-fig { margin:1.6em 0; }
.single-post .single-post-text figure.dbd-fig img { display:block; margin:0 auto; border:1px solid var(--w-line); background:#0b0b0d; }
.single-post .single-post-text figure.dbd-fig figcaption { margin-top:.6em; text-align:center; font-size:13px; line-height:1.5; color:#9a9aa2; }

/* tables: the theme stripes every odd row #333 site-wide; calm that down here */
.single-post .single-post-text table { width:100%; border-collapse:collapse; margin:1.4em 0 1.8em; font-size:14.5px; display:table; border:0; }
.single-post .single-post-text th, .single-post .single-post-text td { padding:9px 12px; border:1px solid var(--w-line);
  text-align:left; vertical-align:top; line-height:1.55; }
.single-post .single-post-text th { background:rgba(255,255,255,.05); color:#fff; font-weight:600; }
.single-post .single-post-text tr:nth-child(odd) { background:transparent; }
.single-post .single-post-text tbody tr:nth-child(even) { background:rgba(255,255,255,.025); }

/* author footnotes: a small linked marker in the text, notes listed before References */
.single-post .single-post-text sup.dbd-fn { line-height:0; }
.single-post .single-post-text sup.dbd-fn a { text-decoration:none; font-weight:700; padding:0 .12em; }
.single-post .single-post-text ol.dbd-fn-list { margin-left:1.6em; font-size:14.5px; color:#c2c2c8; }
.single-post .single-post-text ol.dbd-fn-list li { font-size:14.5px; }
.single-post .single-post-text .dbd-fn-back { text-decoration:none; margin-left:.3em; }
.single-post .single-post-text [id^="fn"] { scroll-margin-top:120px; }    /* clear the fixed header on jump */

/* downloadable research artefacts (e.g. the BitRAT source inventory) */
.single-post .single-post-text .dbd-downloads { margin:1.6em 0 1.8em; padding:14px 18px 4px; border:1px solid var(--w-line);
  border-radius:8px; background:rgba(255,255,255,.025); }
.single-post .single-post-text .dbd-downloads .dbd-downloads-label { margin:0 0 .45em; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--w-accent); }
.single-post .single-post-text .dbd-downloads a { font-weight:600; }
.single-post .single-post-text .dbd-downloads a::before { content:"\2193\00a0"; }
.single-post .single-post-text .dbd-downloads span { display:block; font-size:13px; line-height:1.5; color:#9a9aa2; }

/* co-author credit line, the closing line of the article */
.single-post .single-post-text .dbd-credit { margin:2.4em 0 0; padding-top:1em; border-top:1px solid var(--w-line);
  font-size:14px; line-height:1.6; color:#a4a4ac; letter-spacing:.01em; }
.single-post .single-post-text .dbd-credit a { color:#e4e4e8; text-decoration-color:rgba(255,255,255,.3); }

/* context notes: explanations of concepts, kept visually apart from the analysis */
.single-post .single-post-text .dbd-note { margin:1.5em 0 1.7em; padding:14px 18px 4px; border-left:3px solid rgba(247,200,44,.7);
  background:linear-gradient(90deg,rgba(247,200,44,.06),rgba(247,200,44,.015)); border-radius:0 6px 6px 0; }
.single-post .single-post-text .dbd-note .dbd-note-label { margin:0 0 .45em; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--w-accent); }
.single-post .single-post-text .dbd-note p { color:#cfcfd4; font-size:15px; line-height:1.7; }
.single-post .single-post-text blockquote { margin:1.5em 0; padding:4px 0 4px 18px; border-left:2px solid rgba(255,255,255,.25);
  color:#c9c9ce; font-style:italic; }

/* Writeups listing (JetElements "Posts" widget): the Read More buttons.
   The widget's own CSS had no padding, a 2px border and a hover that turned the
   label near-black on a transparent box (invisible); visited links also drifted
   white. !important is needed only because Elementor's per-widget CSS carries
   much higher specificity than a stylesheet can reasonably match. */
.jet-posts .jet-more-wrap { margin-top:20px; }
.jet-posts a.jet-more, .jet-posts a.jet-more:visited {
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px; white-space:nowrap !important;
  width:auto !important; height:auto !important; min-height:40px; padding:0 18px 0 20px !important;
  font:600 12px/1 Roboto,"Helvetica Neue",Arial,sans-serif !important; letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#f7c82c !important; background:rgba(247,200,44,.05) !important;
  border:1px solid rgba(247,200,44,.5) !important; border-radius:999px !important; box-shadow:none !important;
  transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease !important; }
.jet-posts a.jet-more .btn__text { color:inherit !important; line-height:1 !important; }
.jet-posts a.jet-more::after { content:"\2192"; font-size:14px; letter-spacing:0; transition:transform .25s ease; }
.jet-posts a.jet-more:hover, .jet-posts a.jet-more:focus-visible {
  color:#101010 !important; background:#f7c82c !important; border-color:#f7c82c !important;
  box-shadow:0 6px 22px rgba(247,200,44,.2) !important; outline:none; }
.jet-posts a.jet-more:hover::after, .jet-posts a.jet-more:focus-visible::after { transform:translateX(3px); }
/* the widget kept three columns even on a 390px phone: one column there, two on tablets */
@media (max-width:1024px){ .jet-posts.col-row > .jet-posts__item { flex:0 0 50% !important; max-width:50% !important; } }
@media (max-width:767px){ .jet-posts.col-row > .jet-posts__item { flex:0 0 100% !important; max-width:100% !important; } }

@media (max-width:767px){
  /* only on phones does a wide table need to scroll inside itself (as a block it would leave a gap on desktop) */
  .single-post .single-post-text table { display:block; overflow-x:auto; }
  /* the theme stacks 30px + 25px + 10px of side padding, leaving 259px of text on a 390px phone */
  .single-post .section.blog { padding-left:14px; padding-right:14px; }
  .single-post .section.blog .content-box { padding-left:10px; padding-right:10px; }
  .single-post .single-post-text h2 { font-size:23px; }
  .single-post .single-post-text pre { font-size:12.5px; padding:13px 14px; }
}