/* ─────────────────────────────────────────────────────────────
   RankingBite — WordPress long-form content stylesheet
   For the raw elements WordPress emits inside /blog/ posts.
   Load AFTER tokens.css. No framework, no build step required.
   ───────────────────────────────────────────────────────────── */

.rb-prose{max-width:70ch;font-size:var(--t-body);line-height:var(--lh-loose);color:var(--ink-700);font-family:var(--font-sans)}

/* Headings — semantic hierarchy, never decorative (§4) */
.rb-prose h2{margin:var(--s-9) 0 var(--s-4);font-size:var(--t-h2);font-weight:var(--w-semibold);letter-spacing:var(--tr-head);line-height:var(--lh-snug);color:var(--ink-900);text-wrap:balance}
.rb-prose h3{margin:var(--s-7) 0 var(--s-3);font-size:var(--t-h3);font-weight:var(--w-semibold);letter-spacing:var(--tr-head);color:var(--ink-900)}
.rb-prose h4{margin:var(--s-6) 0 var(--s-3);font-size:var(--t-h4);font-weight:var(--w-semibold);color:var(--ink-900)}
.rb-prose > *:first-child{margin-top:0}

.rb-prose p{margin:0 0 var(--s-5);text-wrap:pretty}
.rb-prose > p:first-of-type{font-size:var(--t-lead);line-height:1.55;color:var(--ink-800)}
.rb-prose strong{font-weight:var(--w-semibold);color:var(--ink-900)}
.rb-prose em{font-style:italic}
.rb-prose a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.rb-prose a:hover{color:var(--link-hover)}

.rb-prose ul,.rb-prose ol{margin:0 0 var(--s-5);padding-left:1.5rem}
.rb-prose li{margin-bottom:var(--s-3)}
.rb-prose li::marker{color:var(--ink-400)}
.rb-prose ul ul,.rb-prose ol ol{margin:var(--s-3) 0 0}

/* Blockquote — serif, matching the citation apparatus */
.rb-prose blockquote{margin:var(--s-7) 0;padding:var(--s-5) var(--s-6);border-left:3px solid var(--cite-400);background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0;font-family:var(--font-serif);font-size:var(--t-quote);line-height:1.36;color:var(--ink-900)}
.rb-prose blockquote p{margin:0}
.rb-prose blockquote cite{display:block;margin-top:var(--s-4);font-family:var(--font-mono);font-size:var(--t-meta);font-style:normal;letter-spacing:.04em;color:var(--ink-500)}

/* Code */
.rb-prose code{font-family:var(--font-mono);font-size:.875em;background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--r-sm);padding:.1em .4em;color:var(--ink-900)}
.rb-prose pre{margin:0 0 var(--s-5);padding:var(--s-5);background:var(--ink-900);border-radius:var(--r-md);overflow-x:auto;font-family:var(--font-mono);font-size:var(--t-small);line-height:1.6;color:#E6EAF0}
.rb-prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}

/* Tables — WordPress emits bare <table> */
.rb-prose table{width:100%;border-collapse:collapse;margin:0 0 var(--s-6);font-size:var(--t-small);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.rb-prose th,.rb-prose td{text-align:left;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule);vertical-align:top}
.rb-prose thead th{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:var(--w-medium);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-500);background:var(--paper)}
.rb-prose tbody tr:last-child td,.rb-prose tbody tr:last-child th{border-bottom:0}

/* Images + captions */
.rb-prose img{border-radius:var(--r-md);margin:0 auto}
.rb-prose figure{margin:var(--s-7) 0}
.rb-prose figcaption{margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--t-meta);color:var(--ink-500);text-align:center}
.rb-prose hr{border:0;border-top:1px solid var(--rule);margin:var(--s-8) 0}

/* WordPress core alignment classes */
.rb-prose .alignwide{max-width:min(92vw,1000px);margin-left:calc(50% - min(46vw,500px))}
.rb-prose .alignfull{max-width:100vw;margin-left:calc(50% - 50vw)}
.rb-prose .aligncenter{margin-left:auto;margin-right:auto;display:block}
.rb-prose .alignleft{float:left;margin:0 var(--s-5) var(--s-4) 0;max-width:45%}
.rb-prose .alignright{float:right;margin:0 0 var(--s-4) var(--s-5);max-width:45%}
.rb-prose .wp-caption-text{margin-top:var(--s-2);font-family:var(--font-mono);font-size:var(--t-meta);color:var(--ink-500)}

@media (max-width:640px){
  .rb-prose .alignleft,.rb-prose .alignright{float:none;margin:var(--s-5) 0;max-width:100%}
  .rb-prose table{display:block;overflow-x:auto}
}