/* Casperlogic — static review package.
   Single light theme. Every value the markup references through var() is
   defined once here, which is what will become theme.json in the block theme. */

:root {
  --ground: #FFFFFF;
  --alt: #F4F7FB;
  --tint: #EEF4FA;
  --band: #0B132B;
  --footer: #060B18;
  --card: #FFFFFF;
  --cardline: rgba(11,19,43,.11);
  --cardline2: rgba(11,19,43,.20);
  --hairline: rgba(11,19,43,.08);
  --shadow: 0 1px 2px rgba(11,19,43,.04), 0 10px 30px rgba(11,19,43,.07);
  --text: #0B132B;
  --text2: #475569;
  --text3: #5D6B7E;
  --accent: #15803D;
  --accent2: #B45309;
  --accentsoft: rgba(21,128,61,.09);
  --accent2soft: rgba(180,83,9,.09);
  --ghostline: rgba(11,19,43,.22);
  --ghosttext: #0B132B;
  --heroground: #F4F7FB;
  --herolines: rgba(11,19,43,.07);
  --heroglow: rgba(21,128,61,.10);
  --heropanel: #FFFFFF;
  --meter: rgba(11,19,43,.09);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--footer);
  color: var(--text);
  font-family: Inter, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); }
mark { background: var(--accent2soft); color: inherit; padding: 1px 3px; border-radius: 3px; }
code, pre { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }
img, svg { max-width: 100%; }

/* Grid and flex children default to min-width:auto, which lets wide content
   (a code block, a fixed-column table) push the whole page sideways. */
div[style*="display: grid"] > *, div[style*="display: flex"] > * { min-width: 0; }
pre { max-width: 100%; overflow-x: auto; }
.cl-marquee-track > * { min-width: auto; }
/* Keyword marquee.
   The track carries the terms twice and slides by exactly half its width, so
   the second copy lands where the first started. Without this the strip was
   static and its items were squashed by flex until the text overlapped. */
.cl-marquee { position: relative; }

/* ---------------------------------------------------------------- post body
   single.php wraps the_content() in .cl-prose. Without these rules a published
   article renders at browser defaults — this is the only styling a WordPress
   post body gets, since the theme ships no block styles. */
.cl-prose { font-size: 17px; line-height: 1.75; color: var(--text2); }
.cl-prose > * + * { margin-top: 1.25em; }
.cl-prose p { margin: 0; }
.cl-prose h2 {
  margin: 2.2em 0 0; font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800; font-size: 27px; line-height: 1.22; letter-spacing: -.032em;
  color: var(--text);
}
.cl-prose h3 {
  margin: 1.8em 0 0; font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -.02em;
  color: var(--text);
}
.cl-prose h2 + *, .cl-prose h3 + * { margin-top: .7em; }
.cl-prose strong { color: var(--text); font-weight: 600; }
.cl-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cl-prose ul, .cl-prose ol { margin: 0; padding-left: 1.35em; }
.cl-prose li + li { margin-top: .5em; }
.cl-prose li::marker { color: var(--accent); }
.cl-prose blockquote {
  margin: 2em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent2);
  font-size: 19px; line-height: 1.6; color: var(--text);
}
.cl-prose blockquote p { margin: 0; }
.cl-prose pre {
  margin: 0; padding: 20px 22px; border: 1px solid var(--cardline);
  border-radius: 12px; background: var(--alt); overflow-x: auto;
  font-size: 13.5px; line-height: 1.65;
}
.cl-prose pre code { background: none; padding: 0; font-size: inherit; }
.cl-prose :not(pre) > code {
  background: var(--alt); border: 1px solid var(--cardline); border-radius: 5px;
  padding: 2px 6px; font-size: .88em;
}
.cl-prose img, .cl-prose figure { border-radius: 12px; }
.cl-prose figcaption {
  margin-top: 10px; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px; letter-spacing: .06em; color: var(--text3);
}
.cl-prose hr { border: 0; border-top: 1px solid var(--cardline); margin: 2.6em 0; }
.cl-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cl-prose th, .cl-prose td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--cardline);
}
.cl-prose th { color: var(--text); font-weight: 600; }

/* pagination — the_posts_pagination() output, unstyled until now */
.navigation.pagination { width: 100%; }
.navigation.pagination .nav-links { display: flex; gap: 8px; justify-content: center; }
.navigation.pagination .page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--cardline); border-radius: 10px; background: var(--card);
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px; color: var(--text2); text-decoration: none;
}
.navigation.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.navigation.pagination .page-numbers.current {
  background: var(--fill); border-color: var(--fill); color: var(--onfill); font-weight: 700;
}
.navigation.pagination .page-numbers.dots { border-color: transparent; background: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* comments */
.cl-comments ol, .cl-comments ul { list-style: none; margin: 0; padding: 0; }
.cl-comments .comment-body {
  border: 1px solid var(--cardline); border-radius: 14px; background: var(--card);
  padding: 22px 24px; margin-bottom: 16px;
}
.cl-comments .children { padding-left: 28px; }
.cl-comments .comment-author { font-weight: 600; color: var(--text); }
.cl-comments .comment-metadata,
.cl-comments .comment-metadata a {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: .08em; color: var(--text3); text-decoration: none;
}
.cl-comments input[type="text"], .cl-comments input[type="email"],
.cl-comments input[type="url"], .cl-comments textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--cardline);
  border-radius: 10px; background: var(--card); color: var(--text);
  font-family: inherit; font-size: 15px;
}
.cl-comments .submit {
  border: 0; border-radius: 999px; background: var(--fill); color: var(--onfill);
  padding: 14px 28px; font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
}
.cl-marquee-track {
  animation: cl-marquee-scroll 46s linear infinite;
  will-change: transform;
}
.cl-marquee:hover .cl-marquee-track,
.cl-marquee:focus-within .cl-marquee-track { animation-play-state: paused; }

@keyframes cl-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* No motion: show the list once and let it scroll by hand instead of clipping. */
  .cl-marquee { overflow-x: auto; }
  .cl-marquee-track { animation: none; }
  .cl-marquee-dup { display: none !important; }
}

.cl-audit { overflow-x: auto; }
.cl-audit .cl-audit-row { min-width: 600px; }

/* interaction the mockups don't need */
.cl-btn { transition: transform .12s ease, filter .12s ease; }
.cl-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cl-btn-ghost:hover { filter: none; border-color: var(--accent) !important; }
.cl-more { transition: gap .12s ease; }
.cl-more:hover { gap: 12px !important; }
.cl-navlink { transition: color .12s ease; }
.cl-navlink:hover { color: var(--accent) !important; }
.cl-toggle { cursor: pointer; background: none; font: inherit; }
.cl-toggle:hover { border-color: var(--accent) !important; }
.cl-burger { display: none; cursor: pointer; background: none; }

/* mobile menu */
.cl-menu {
  display: none; position: fixed; inset: 0; z-index: 60;
  background: var(--ground); padding: 22px 20px; overflow-y: auto;
}
.cl-menu[data-open="1"] { display: block; }
.cl-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 0; border-bottom: 1px solid var(--cardline);
  color: var(--text); font-size: 17px; font-weight: 500; min-height: 44px;
}

/* skip link */
.cl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent2); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.cl-skip:focus { left: 0; color: #fff; }

@media (max-width: 1180px) {
  [style*="max-width: 1240px"] { padding-left: 28px !important; padding-right: 28px !important; }
  [style*="repeat(8, minmax(0, 1fr))"] { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  .cl-creds { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  [style*="repeat(6, minmax(0, 1fr))"] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

@media (max-width: 1020px) {
  /* two-column page shells collapse; sidebars stop sticking */
  [style*="display: grid"][style*="fr 350px"],
  [style*="display: grid"][style*="fr 340px"],
  [style*="display: grid"][style*="fr 330px"],
  [style*="display: grid"][style*="fr 320px"],
  [style*="display: grid"][style*="fr 280px"] { grid-template-columns: minmax(0,1fr) !important; }
  .cl-side { position: static !important; }
  [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .cl-eras { flex-wrap: wrap !important; gap: 30px 20px !important; }
  .cl-eras > div { flex: 0 0 calc(50% - 10px) !important; }
  .cl-matrix-row { grid-template-columns: 1.4fr repeat(6, minmax(0,1fr)) !important; gap: 6px !important; }
}

@media (max-width: 900px) {
  .cl-nav, .cl-hdr-search, .cl-hdr-cta { display: none !important; }
  .cl-burger { display: flex !important; }
  .cl-utility { display: none !important; }
  [style*="max-width: 1240px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* every multi-column grid goes single-column */
  div[style*="display: grid"][style*="fr"] { grid-template-columns: minmax(0,1fr) !important; }
  .cl-matrix-row { grid-template-columns: 1.2fr repeat(6, minmax(0,1fr)) !important; }
  .cl-counters { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 26px 12px; }
  .cl-counters > div { border-right: 0 !important; padding-left: 0 !important; padding-right: 12px !important; }
  .cl-creds { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .cl-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 34px !important; }
  .cl-cta-inner { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; }

  /* headline scale */
  h1[style] { font-size: 38px !important; line-height: 1.08 !important; }
  h2[style] { font-size: 27px !important; }
  h3[style] { font-size: 19px !important; }

  /* sections breathe less */
  div[style*="padding: 100px 0"], div[style*="padding: 104px 0"],
  div[style*="padding: 92px 0"], div[style*="padding: 96px 0"] { padding: 56px 0 !important; }

  /* Stretched decor: a 1440-wide viewBox squeezes ~4x at phone widths, turning
     the decorative nodes into bars. Keep the diagonals, drop the dots. */
  .cl-decor circle { display: none; }

  /* stacked buttons go full width and stay tappable */
  .cl-btn { min-height: 48px; justify-content: center; }
}

@media (max-width: 620px) {
  [style*="max-width: 1240px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .cl-matrix-row { grid-template-columns: 1fr repeat(6, 22px) !important; gap: 4px !important; font-size: 12px; }
  .cl-creds { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .cl-footer-grid { grid-template-columns: minmax(0,1fr) !important; }
  h1[style] { font-size: 31px !important; }
  h2[style] { font-size: 23px !important; }
  .cl-marquee-half { gap: 14px !important; padding-right: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cl-btn, .cl-more, .cl-navlink { transition: none; }
}

@media print {
  .cl-utility, .cl-burger, .cl-toggle, .cl-menu, .cl-skip { display: none !important; }
  body { background: #fff; }
}