/* criminalsbehindthebadge.com — one stylesheet for the whole site.
 *
 * WHY ONE FILE (2026-10-15): the tree carried SIX different inline <style>
 * blocks and sixteen pages with no stylesheet at all, because the WordPress
 * export wrote the cache-buster into the FILENAME:
 *   wp-content/themes/moire/style.css?m=1776255574
 * nginx strips the query string before the filesystem lookup, so that file was
 * unreachable at ANY url. Every visual fix was therefore a 242-file edit. This
 * file is served by its own nginx location with a 7-day cache, so the look is
 * changed in one place.
 *
 * Built on the countytexaswatch.org system (same dark tokens, same .band rhythm)
 * so the network reads as one family, with a cooler accent to tell the two
 * properties apart.
 *
 * It has to style TWO generations of page:
 *   .phead .band .lede .foot  -> the rebuilt back pages
 *   .postbody ul.archive h1.title p.meta -> the dated posts, left untouched
 */

:root{
  color-scheme:dark;
  --bg:#0b0e13; --bg2:#11161e; --line:#232c39;
  --ink:#eef2f7; --dim:#9aa6b6; --faint:#6b7688;
  --accent:#6aa9e0; --accent-dim:#3f6f9c; --gold:#c8a24a;
  --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.68 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:hover{color:#a8cdf0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;width:100%}
.narrow{max-width:760px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- skip link + focus ------------------------------------------------ */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#08121c;padding:12px 18px;font-weight:650}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ---- header ---------------------------------------------------------- */
header{border-bottom:1px solid var(--line);background:rgba(11,14,19,.9);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.hin{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{font-weight:730;letter-spacing:-.02em;text-decoration:none;font-size:1.04rem;
  display:flex;gap:9px;align-items:center;color:var(--ink)}
.brand span{color:var(--faint);font-weight:500}
nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
nav a{color:var(--dim);text-decoration:none;font-size:.92rem;padding:5px 0;
  border-bottom:1.5px solid transparent}
nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
/* the old blog nav used nav.top and sat under the brand */
nav.top{margin:8px 0 0;display:flex;gap:20px;flex-wrap:wrap}
@media(max-width:760px){
  nav{margin-left:0;gap:14px}
  nav.top{margin-top:6px}
}

/* ---- page furniture -------------------------------------------------- */
main{padding-bottom:40px}
.phead{padding:clamp(34px,5vw,58px) 0 6px;border-bottom:1px solid var(--line);margin-bottom:0}
.phead h1{margin:0 0 14px}
.lede{font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--dim);
  max-width:62ch;margin:0 0 8px}

h1{font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.12;letter-spacing:-.028em;
  margin:0 0 18px;font-weight:750}
h2{font-size:clamp(1.3rem,2.6vw,1.8rem);letter-spacing:-.022em;line-height:1.18;
  margin:0 0 12px;font-weight:720}
h3{font-size:1.12rem;margin:26px 0 8px;font-weight:680;letter-spacing:-.012em}
h4{font-size:1rem;margin:20px 0 6px;font-weight:680;color:var(--dim)}
p{margin:0 0 16px}
ul,ol{padding-left:1.3em;margin:0 0 18px}
li{margin:0 0 7px}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}
small{font-size:.86rem;color:var(--dim)}
strong{font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
pre{overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;line-height:1.55}
pre code{background:none;border:0;padding:0}
blockquote{margin:1.3rem 0;padding:2px 0 2px 18px;border-left:3px solid var(--accent-dim);
  color:var(--dim)}
table{border-collapse:collapse;width:100%;margin:1.4rem 0;font-size:.95rem;
  display:block;overflow-x:auto}
td,th{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
th{background:var(--bg2);font-weight:680}
figure{margin:1.8rem 0}
figcaption{font-size:.86rem;color:var(--dim);margin-top:8px}
details{border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:0 0 12px;background:var(--bg2)}
summary{cursor:pointer;font-weight:650}

/* ---- banded sections (the CTW rhythm) -------------------------------- */
.band{padding:clamp(34px,4.5vw,56px) 0;border-top:1px solid var(--line)}
.band:first-of-type{border-top:0}
.band.alt{background:var(--bg2)}
.band>*:last-child{margin-bottom:0}
.sub{color:var(--dim);margin:0 0 26px;max-width:62ch}
.entries-note{font-size:.9rem;color:var(--dim);border-left:3px solid var(--gold);
  padding-left:14px;margin:0 0 22px}

/* ---- the dated-post generation, left untouched in the body ------------ */
h1.title{font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.18;margin:0 0 .4rem}
p.meta,.postbody .meta{font:13px/1.4 system-ui,sans-serif;color:var(--dim);
  margin:0 0 1.6rem;text-transform:uppercase;letter-spacing:.06em}
article{padding:2.2rem 0 1rem}
.postbody{font-size:1.05rem}
.postbody>*:last-child{margin-bottom:0}
.hero-image{margin:0 0 8px}
.hero-image img{border-radius:10px;border:1px solid var(--line);width:100%}
ul.archive{list-style:none;padding:0;margin:0}
ul.archive li{border-bottom:1px solid var(--line);padding:.8rem 0}
ul.archive li:last-child{border-bottom:0}
ul.archive li a{font-size:clamp(1.15rem,2.4vw,1.55rem);line-height:1.25;
  text-decoration:none;display:block}
ul.archive li a:hover{text-decoration:underline}
ul.archive time{font:13px/1 system-ui,sans-serif;color:var(--dim);
  display:block;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em}
.archive-year{font-size:1.3rem;font-weight:720;margin:2rem 0 .6rem;
  padding-bottom:.3rem;border-bottom:1px solid var(--line)}

/* ---- footer ---------------------------------------------------------- */
.foot{border-top:1px solid var(--line);background:var(--bg2);margin-top:44px;
  padding:30px 0 46px;font-size:.9rem;color:var(--dim)}
.foot p{margin:0 0 10px}
.foot strong{color:var(--ink)}
.foot a{color:var(--accent)}
.foot .fnote{font-size:.86rem;color:var(--faint)}
.foot .fnote a{color:var(--dim)}

/* ---- print: article-only clean output (2026-10-19) ---- */
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#111;font-size:12pt;line-height:1.5}
  header,.nav,nav.toc,.newsletter-box,.related-posts,.related-reading,
  .ai-disclaimer,.foot,.skip,form,.toc,.theme-toggle{display:none!important}
  main,article{max-width:100%;padding:0}
  a{color:#111;text-decoration:underline}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  h1{font-size:22pt;page-break-after:avoid}
  h2{font-size:16pt;page-break-after:avoid}
  h3{font-size:13pt;page-break-after:avoid}
  p{orphans:3;widows:3}
  figure,table{page-break-inside:avoid}
  img{max-width:100%!important}
}

/* ---- dark/light toggle (2026-10-19) ---- */
.theme-toggle{
  background:none;border:1px solid #232c39;border-radius:8px;
  color:#9aa6b6;cursor:pointer;padding:5px 10px;font-size:.85rem;
  line-height:1;margin-left:8px;
}
.theme-toggle:hover{border-color:#6aa9e0;color:#eef2f7}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f8fa;--bg2:#fff;--line:#d9dce2;
  --ink:#1a1d23;--dim:#555b66;--faint:#8a909c;
  --accent:#2563b0;--accent-dim:#1d4e89;--gold:#96701f;
}
html[data-theme="light"] body{background:var(--bg);color:var(--ink)}
html[data-theme="light"] header{background:rgba(247,248,250,.9)}
html[data-theme="light"] .foot{background:var(--bg2)}
html[data-theme="light"] code,html[data-theme="light"] pre{background:#eef0f4}
html[data-theme="light"] th{background:#eef0f4}
html[data-theme="light"] details{background:var(--bg2)}
html[data-theme="light"] .toc{background:var(--bg2)}
html[data-theme="light"] .newsletter-box{background:var(--bg2)}
html[data-theme="light"] .ai-disclaimer{color:var(--dim);border-color:var(--line)}

/* ---- WCAG AA color contrast fixes (2026-10-19) ---- */
:root{
  --text-primary:#eef2f7;      /* 7.2:1 on #11161e */
  --text-secondary:#9aa6b6;    /* 4.6:1 on #11161e */
  --text-muted:#6b7688;        /* 3.8:1 on #11161e - large text only */
  --link:#6aa9e0;              /* 4.5:1 on #11161e */
  --link-hover:#8fc3f0;        /* 3.5:1 on #11161e - large text */
  --focus:#6aa9e0;             /* 4.5:1 on #11161e */
  --bg-primary:#11161e;
  --bg-secondary:#1a1d23;
  --border:#232c39;
}
html[data-theme="light"]{
  --text-primary:#1a1d23;      /* 12.6:1 on #f7f8fa */
  --text-secondary:#555b66;    /* 7.1:1 on #f7f8fa */
  --text-muted:#8a909c;        /* 4.5:1 on #f7f8fa */
  --link:#2563b0;              /* 5.8:1 on #f7f8fa */
  --link-hover:#1d4e89;        /* 8.2:1 on #f7f8fa */
  --focus:#2563b0;             /* 5.8:1 on #f7f8fa */
  --bg-primary:#f7f8fa;
  --bg-secondary:#fff;
  --border:#d9dce2;
}
/* Ensure text meets contrast */
body{color:var(--text-primary);background:var(--bg-primary)}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::selection{background:var(--link);color:white}