/*
Theme Name: California Criminal Guide
Theme URI: https://calcriminalguide.com/
Description: Child theme for calcriminalguide.com. Holds template overrides and CSS that must not live in the Kadence parent. The parent is never edited.
Author: California Criminal Guide
Template: kadence
Version: 1.1.0
*/

/* ============================================================
   Phase 2. Added 2026-07-29.

   Cascade note. This file loads before #wp-custom-css and before the
   anonymous head <style> that carries the guide CSS, so anything here that
   overrides an existing rule uses a two-class or descendant selector to win
   on specificity rather than order. Brand new component classes need no
   such help.

   Markup note. Guides exist in two generations. The seven older guides wrap
   their body in .ccg-article. The three newest (arrested-last-night,
   missed-court-date, arraignment) use native Gutenberg blocks with no
   wrapper. Every selector below covers both.

   Palette is taken from the existing design, not invented:
   navy #1c5d99, deep navy #0f2a43, gold #8a6d1f, paper #fffdf8,
   rule #c9c2b4, body #3f3a33, muted #8a8072.
   ============================================================ */

:root{
  --ccg-navy:#1c5d99;
  --ccg-navy-deep:#0f2a43;
  --ccg-gold:#8a6d1f;
  --ccg-paper:#fffdf8;
  --ccg-rule:#c9c2b4;
  --ccg-body:#3f3a33;
  --ccg-muted:#8a8072;
  --ccg-danger:#a3231b;
  --ccg-danger-bg:#fdecea;
  --ccg-deadline:#7a5c12;
  --ccg-deadline-bg:#fdf5e2;
  --ccg-measure:68ch;
}

/* ------------------------------------------------------------
   2.1 Reading comfort.

   Body copy measured 18px / 1.75 on 2026-07-29, which is already inside the
   brief's 18-19px and 1.65-1.7 targets, so the size and leading are left
   alone. The real defect was the measure: 87 characters in a 720px column.
   Capping the prose (not the container) keeps tables, callouts and the
   diagrams free to use the full width.
   ------------------------------------------------------------ */
.single-post .ccg-article > p,
.single-post .ccg-article > ul,
.single-post .ccg-article > ol,
.single-post .ccg-article > h3,
.single-post .single-content > p,
.single-post .single-content > ul,
.single-post .single-content > ol,
.single-post .single-content > h3{
  max-width:var(--ccg-measure);
}

/* Slightly more air between paragraphs and above h2, per 2.1. */
.single-post .ccg-article > p,
.single-post .single-content > p.wp-block-paragraph{
  margin-bottom:1.35em;
}
.single-post .entry-content .ccg-article > h2,
.single-post .single-content > h2.wp-block-heading{
  margin-top:2.4em;
}

@media(max-width:600px){
  :root{ --ccg-measure:100%; }
}

/* ------------------------------------------------------------
   2.3 Callout components.

   The site had one .ccg-callout doing every job: 911 blocks, hard
   deadlines, summaries and practitioner asides all rendered as the same
   blue box. These modifiers differentiate them. The base class is
   untouched, so any callout without a modifier looks exactly as it did.

   Each variant is distinguished by three things at once, never colour
   alone: background, left rule, and a text label. Someone with forced
   colours on, or who cannot distinguish red from amber, still gets it.
   ------------------------------------------------------------ */
.ccg-callout.ccg-danger,
.ccg-callout.ccg-deadline,
.ccg-callout.ccg-summary,
.ccg-callout.ccg-practitioner{
  border-width:1px 1px 1px 5px;
  border-style:solid;
  border-radius:3px;
  padding:16px 20px;
  margin:1.9em 0;
}
.ccg-callout.ccg-danger::before,
.ccg-callout.ccg-deadline::before,
.ccg-callout.ccg-summary::before,
.ccg-callout.ccg-practitioner::before{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:7px;
}

/* Danger. The 911, hotline and quick-exit block. Unmistakable. */
.ccg-callout.ccg-danger{
  background:var(--ccg-danger-bg);
  border-color:#f3c9c4 #f3c9c4 #f3c9c4 var(--ccg-danger);
}
.ccg-callout.ccg-danger::before{
  content:"Get help now";
  color:var(--ccg-danger);
}

/* Deadline. The highest-stakes facts on the site. Hard to skim past. */
.ccg-callout.ccg-deadline{
  background:var(--ccg-deadline-bg);
  border-color:#e6d4a1 #e6d4a1 #e6d4a1 var(--ccg-gold);
  box-shadow:inset 0 0 0 1px #fff;
}
.ccg-callout.ccg-deadline::before{
  content:"There is a clock on this";
  color:var(--ccg-deadline);
}

/* Summary. The short-version opener. Quiet, not shouty. */
.ccg-callout.ccg-summary{
  background:#f7f5ef;
  border-color:var(--ccg-rule) var(--ccg-rule) var(--ccg-rule) var(--ccg-muted);
}
.ccg-callout.ccg-summary::before{
  content:"The short version";
  color:#6b6355;
}

/* Practitioner. The site's differentiator, so it gets its own look:
   parchment, a serif label, and a double rule. Labelled "From practice"
   rather than "What we see in real cases", because most guides already
   carry an H2 with that exact name and two of them would read as a mistake.
   parchment, a serif label, and a double rule. A returning reader should
   recognise it before reading a word. */
.ccg-callout.ccg-practitioner{
  background:#fbf7ee;
  border-color:#e4dcc8 #e4dcc8 #e4dcc8 var(--ccg-gold);
  border-left-style:double;
  border-left-width:7px;
}
.ccg-callout.ccg-practitioner::before{
  content:"From practice";
  font-family:'Lora',Georgia,serif;
  font-style:italic;
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  font-size:.95rem;
  color:var(--ccg-gold);
}

/* Form chip. Inline monospace pill for Judicial Council form numbers. */
.ccg-form{
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;
  line-height:1.35;
  padding:1px 7px;
  border:1px solid var(--ccg-rule);
  border-radius:3px;
  background:var(--ccg-paper);
  color:var(--ccg-navy-deep);
  text-decoration:none;
  white-space:nowrap;
}
a.ccg-form:hover,a.ccg-form:focus{
  border-color:var(--ccg-gold);
  background:#f7f2e4;
  text-decoration:none;
}
a.ccg-form:focus-visible{outline:2px solid var(--ccg-gold);outline-offset:2px;}
a.ccg-form::after{content:" \2197";font-size:.85em;opacity:.6;}

/* ------------------------------------------------------------
   2.2 Sticky table of contents and scroll progress.

   The inline .ccg-toc stays exactly as it is on small screens. From 1100px
   up, where the article sits centred with roughly 200px of dead gutter on
   each side, it moves into the left gutter and sticks.
   ------------------------------------------------------------ */
.ccg-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:var(--ccg-gold);z-index:9999;
  transition:width .08s linear;
}
@media(prefers-reduced-motion:reduce){
  .ccg-progress{transition:none;}
}

@media(min-width:1100px){
  .single-post .ccg-toc{
    position:sticky;
    top:90px;
    float:left;
    width:210px;
    margin-left:-250px;
    margin-bottom:2em;
    padding:0 14px 0 0;
    border-right:1px solid var(--ccg-rule);
    border-left:0;
    background:transparent;
    font-size:.86rem;
    max-height:calc(100vh - 140px);
    overflow-y:auto;
  }
  .single-post .ccg-toc .ccg-toc-title{
    font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ccg-muted);margin:0 0 10px;
  }
  .single-post .ccg-toc ol,
  .single-post .ccg-toc ul{margin:0;padding:0;list-style:none;}
  .single-post .ccg-toc li{margin:0 0 8px;line-height:1.35;}
  .single-post .ccg-toc a{
    text-decoration:none;color:#5c5346;
    border-left:2px solid transparent;padding-left:9px;display:block;
  }
  .single-post .ccg-toc a:hover{color:var(--ccg-navy);}
  .single-post .ccg-toc a.ccg-toc-active{
    color:var(--ccg-navy-deep);font-weight:600;
    border-left-color:var(--ccg-gold);
  }
  .single-post .ccg-toc a:focus-visible{outline:2px solid var(--ccg-gold);outline-offset:1px;}
}

/* ------------------------------------------------------------
   2.6 Byline block.
   ------------------------------------------------------------ */
.ccg-byline{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  margin:0 0 26px;padding:12px 0;
  border-top:1px solid var(--ccg-rule);
  border-bottom:1px solid var(--ccg-rule);
  font-size:.88rem;line-height:1.45;color:#5c5346;
}
.ccg-byline-main{font-weight:600;color:var(--ccg-navy-deep);}
.ccg-byline-sep{color:var(--ccg-rule);}
.ccg-byline a{color:#5c5346;text-decoration:underline;text-underline-offset:2px;}
.ccg-byline a:hover,.ccg-byline a:focus{color:var(--ccg-navy);}
.ccg-byline a:focus-visible{outline:2px solid var(--ccg-gold);outline-offset:2px;}
@media(max-width:600px){
  .ccg-byline{font-size:.83rem;gap:4px 12px;}
}

/* ------------------------------------------------------------
   2.5 Footer, four real columns.
   ------------------------------------------------------------ */
.ccg-footer{
  display:grid;gap:30px 34px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0 auto;padding:8px 0 4px;
  font-size:.9rem;line-height:1.55;text-align:left;
}
.ccg-footer h2{
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  margin:0 0 12px;color:var(--ccg-muted);font-weight:700;
}
.ccg-footer ul{list-style:none;margin:0;padding:0;}
.ccg-footer li{margin:0 0 7px;}
.ccg-footer a{text-decoration:none;}
.ccg-footer a:hover,.ccg-footer a:focus{text-decoration:underline;}
.ccg-footer a:focus-visible{outline:2px solid var(--ccg-gold);outline-offset:2px;}
.ccg-footer .ccg-footer-sub{
  display:block;font-size:.76rem;color:var(--ccg-muted);margin-top:1px;
}
.ccg-footer-help strong{display:block;font-size:.95rem;}
.ccg-footer-attorney{margin-top:14px;padding-top:12px;border-top:1px solid var(--ccg-rule);}
@media(max-width:900px){
  .ccg-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px;}
}
@media(max-width:520px){
  .ccg-footer{grid-template-columns:1fr;gap:22px;}
}