/* kb.css - knowledge base styling for kb.tristate.digital.
   Mirrors the parent site's dark palette (#0a1622 bg, #3ccfca teal, #19a5f0
   blue). ASCII only. The parent header brings its own CSS via chrome-header. */

:root{
  --kb-bg:#0a1622;
  --kb-panel:#0d1e30;
  --kb-panel2:#0b1a2b;
  --kb-border:rgba(122,213,255,.18);
  --kb-border-soft:rgba(255,255,255,.10);
  --kb-text:#e6eef8;
  --kb-muted:#9fb6cc;
  --kb-teal:#3ccfca;
  --kb-blue:#19a5f0;
}

body{
  background:var(--kb-bg);
  color:var(--kb-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  margin:0;
  line-height:1.6;
}
a{color:var(--kb-blue);text-decoration:none;}
a:hover{color:var(--kb-teal);text-decoration:underline;}

.kb-shell{max-width:1080px;margin:0 auto;padding:0 20px 40px;}

.kb-ic{vertical-align:middle;}

/* Search band */
.kb-band{
  margin:28px 0 8px;
  background:linear-gradient(150deg,rgba(11,26,44,.95),rgba(4,11,20,.96));
  border:1px solid var(--kb-border);
  border-radius:16px;
  box-shadow:0 18px 46px rgba(0,0,0,.4);
}
.kb-band-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  padding:22px 24px;
}
.kb-band-title{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--kb-text);font-weight:800;font-size:1.15rem;letter-spacing:.01em;
  white-space:nowrap;
}
.kb-band-title:hover{color:#fff;text-decoration:none;}
.kb-band-title .kb-ic{color:var(--kb-teal);}
.kb-search{position:relative;flex:1 1 360px;display:flex;align-items:center;}
.kb-search-ic{position:absolute;left:14px;color:var(--kb-muted);pointer-events:none;}
#kb-q{
  width:100%;
  padding:13px 16px 13px 42px;
  background:rgba(4,12,22,.7);
  border:1px solid var(--kb-border-soft);
  border-radius:11px;
  color:var(--kb-text);
  font-size:1rem;
  outline:none;
}
#kb-q:focus{border-color:var(--kb-teal);box-shadow:0 0 0 3px rgba(60,207,202,.18);}
#kb-q::placeholder{color:var(--kb-muted);}

/* Breadcrumb */
.kb-crumbs{font-size:.85rem;color:var(--kb-muted);margin:14px 2px 0;}
.kb-crumbs a{color:var(--kb-muted);}
.kb-crumbs a:hover{color:var(--kb-teal);}
.kb-crumbs .kb-sep{opacity:.5;margin:0 2px;}
.kb-crumbs span[aria-current]{color:var(--kb-text);}

/* Search results overlay */
.kb-results{margin:16px 0 0;}
.kb-results[hidden]{display:none;}
.kb-result{
  display:block;padding:16px 18px;margin-bottom:10px;
  background:var(--kb-panel);
  border:1px solid var(--kb-border-soft);
  border-radius:12px;
}
.kb-result:hover{border-color:var(--kb-border);text-decoration:none;}
.kb-result .kb-r-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--kb-teal);font-weight:700;}
.kb-result .kb-r-title{display:block;color:var(--kb-text);font-weight:700;font-size:1.05rem;margin:3px 0;}
.kb-result .kb-r-sum{display:block;color:var(--kb-muted);font-size:.92rem;}
.kb-result mark{background:rgba(60,207,202,.28);color:#fff;border-radius:3px;padding:0 1px;}
.kb-noresults{color:var(--kb-muted);padding:18px 2px;}

/* Hero */
.kb-hero{padding:26px 2px 6px;}
.kb-hero h1{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0 0 8px;color:#fff;letter-spacing:-.02em;}
.kb-hero p{color:var(--kb-muted);max-width:62ch;margin:0;font-size:1.05rem;}

/* Category grid (home) */
.kb-cat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:20px;margin-top:24px;
}
.kb-cat-card{
  padding:22px 22px 14px;border-radius:14px;
  background:linear-gradient(150deg,rgba(11,26,44,.92),rgba(4,11,20,.95));
  border:1px solid var(--kb-border);
  box-shadow:0 14px 36px rgba(0,0,0,.34);
}
.kb-cat-card h2{margin:0 0 6px;font-size:1.2rem;}
.kb-cat-card h2 a{color:#fff;}
.kb-cat-card h2 a:hover{color:var(--kb-teal);text-decoration:none;}
.kb-cat-blurb{color:var(--kb-muted);font-size:.9rem;margin:0 0 12px;}
.kb-cat-list{list-style:none;margin:0;padding:0;}
.kb-cat-list li{margin:0 0 7px;padding-left:18px;position:relative;}
.kb-cat-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--kb-teal);opacity:.7;}

/* Category page index */
.kb-cat-head{padding:24px 2px 4px;}
.kb-cat-head h1{margin:0 0 6px;color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);}
.kb-cat-head p{color:var(--kb-muted);margin:0;max-width:62ch;}
.kb-article-index{list-style:none;margin:22px 0 0;padding:0;}
.kb-article-index li{margin:0 0 12px;}
.kb-article-index a{
  display:block;padding:16px 18px;border-radius:12px;
  background:var(--kb-panel);border:1px solid var(--kb-border-soft);
}
.kb-article-index a:hover{border-color:var(--kb-border);text-decoration:none;}
.kb-ai-title{display:block;color:var(--kb-text);font-weight:700;font-size:1.05rem;}
.kb-ai-sum{display:block;color:var(--kb-muted);font-size:.9rem;margin-top:3px;}

/* Article page */
.kb-article{max-width:760px;margin:8px 0 0;}
.kb-article-cat{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin:18px 0 4px;}
.kb-article-cat a{color:var(--kb-teal);}
.kb-article h1{font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 16px;color:#fff;letter-spacing:-.02em;}
.kb-article-body{color:#dbe6f3;font-size:1.04rem;}
.kb-article-body h2{color:#fff;font-size:1.3rem;margin:26px 0 10px;}
.kb-article-body p{margin:0 0 14px;}
.kb-article-body ul,.kb-article-body ol{margin:0 0 14px;padding-left:24px;}
.kb-article-body li{margin:0 0 7px;}
.kb-article-body code{background:rgba(4,12,22,.7);border:1px solid var(--kb-border-soft);border-radius:5px;padding:1px 6px;font-size:.92em;}
.kb-article-body strong{color:#fff;}
.kb-rule{border:0;border-top:1px solid var(--kb-border-soft);margin:30px 0 18px;}
.kb-article-foot{color:var(--kb-muted);font-size:.95rem;}

/* On-page table of contents + crawlable sibling nav */
html{scroll-behavior:smooth;}
:target{scroll-margin-top:90px;}
.kb-toc{
  background:linear-gradient(150deg,rgba(11,26,44,.92),rgba(4,11,20,.95));
  border:1px solid var(--kb-border);border-radius:12px;
  padding:14px 20px;margin:0 0 24px;max-width:760px;
}
.kb-toc-h{margin:0 0 8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--kb-teal);}
.kb-toc ul{list-style:none;margin:0;padding:0;}
.kb-toc li{margin:5px 0;padding-left:16px;position:relative;}
.kb-toc li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--kb-teal);opacity:.7;}
.kb-toc-h3{margin-left:16px;font-size:.95em;}
.kb-toc a{color:var(--kb-text);}
.kb-toc a:hover{color:var(--kb-teal);text-decoration:none;}

.kb-more{max-width:760px;margin:30px 0 0;border-top:1px solid var(--kb-border-soft);padding-top:18px;}
.kb-more-h{margin:0 0 10px;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--kb-teal);}
.kb-more ul{list-style:none;margin:0;padding:0;}
.kb-more li{margin:0 0 7px;padding-left:18px;position:relative;}
.kb-more li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--kb-teal);opacity:.6;}
.kb-more li.cur::before{background:var(--kb-muted);}
.kb-more li.cur span{color:var(--kb-muted);font-weight:700;}
.kb-more a{color:var(--kb-blue);}
.kb-more a:hover{color:var(--kb-teal);}

/* Fallback header */
.kb-fallback-header{padding:16px 24px;border-bottom:1px solid var(--kb-border-soft);}
.kb-fallback-brand{color:#fff;font-weight:800;font-size:1.2rem;}

@media (max-width:560px){
  .kb-band-inner{padding:18px;}
  .kb-band-title{font-size:1.05rem;}
}

/* ==========================================================================
   FLEET FIXES (2026-06-25) - appended last so they win the cascade over the
   parent site's stylesheet, which the chrome-header injects into <body> AFTER
   this file's <head> link and which otherwise (a) hides the hero behind the
   parent's position:fixed header and (b) recolors our links to a dark, near
   invisible shade (e.g. a{color:#2a368f}) on the dark cards.

   These rules are kept brand-neutral: they restore READABILITY (light text on
   the dark KB panels) and CLEARANCE without flattening each site's palette
   (the panel/accent colors still come from the variables above).
   ========================================================================== */

/* 1) HEADER CLEARANCE. kb.js measures a fixed/sticky parent header at runtime
   and sets --kb-head-h; the shell is offset by it so the search band + hero
   are never cut off. Default 0 = no offset when the header is not fixed
   (fallback-header sites), so nothing is pushed down needlessly. */
:root{--kb-head-h:0px;}
body{padding-top:var(--kb-head-h);}

/* 1b) BACKGROUND. The parent stylesheet sets body{background:#fff}; loaded after
   us it would turn the KB page white, leaving our light text invisible (seen on
   article + category pages). Force the KB dark canvas back, but only BELOW the
   embedded parent header (the header keeps its own brand background). The shell
   gets the dark bg so every text/card sits on the intended dark surface. */
html,body{background:var(--kb-bg) !important;color:var(--kb-text) !important;}
.kb-shell{background:var(--kb-bg);}

/* 2) READABLE TEXT - beat the injected parent stylesheet with higher
   specificity scoped to the KB shell. The category-card article links were the
   worst offender (dark-on-dark); force them to the light body color, with the
   brand blue/teal still used for hover and accents. */
.kb-shell a{color:var(--kb-blue);}
.kb-shell a:hover{color:var(--kb-teal);}
.kb-shell .kb-cat-card .kb-cat-list li a,
.kb-shell .kb-article-index a .kb-ai-title,
.kb-shell .kb-toc a,
.kb-shell .kb-more a{color:var(--kb-text) !important;}
.kb-shell .kb-cat-card .kb-cat-list li a:hover,
.kb-shell .kb-more a:hover,
.kb-shell .kb-toc a:hover{color:var(--kb-teal) !important;}
.kb-shell .kb-cat-card h2 a{color:#fff !important;}
.kb-shell .kb-cat-card h2 a:hover{color:var(--kb-teal) !important;}
.kb-shell .kb-cat-blurb,
.kb-shell .kb-ai-sum,
.kb-shell .kb-hero p,
.kb-shell .kb-cat-head p,
.kb-shell .kb-crumbs{color:var(--kb-muted) !important;}
.kb-shell .kb-hero h1,
.kb-shell .kb-cat-head h1,
.kb-shell .kb-article h1{color:#fff !important;}
.kb-shell .kb-article-body{color:#dbe6f3 !important;}
.kb-shell .kb-article-body h2,
.kb-shell .kb-article-body strong{color:#fff !important;}
.kb-shell .kb-ai-title,
.kb-shell .kb-r-title{color:var(--kb-text) !important;}
.kb-shell .kb-r-sum{color:var(--kb-muted) !important;}
/* search input text must stay light even if the parent themes inputs */
.kb-shell #kb-q{color:var(--kb-text) !important;}
.kb-shell #kb-q::placeholder{color:var(--kb-muted) !important;}

/* 3) HONEYPOT must never be visible. The parent email-signup widget ships a
   honeypot (label "Leave blank" + a text input) that the parent hides in its
   own CSS; that rule sometimes does not reach the KB, leaving "Leave blank"
   showing in the header. Hide it here (also re-arms the spam trap). */
.nav-mlsub-hp,.ml-hp,.mlsub-hp,input[name="website"][tabindex="-1"]{
  position:absolute !important;left:-9999px !important;width:1px !important;
  height:1px !important;overflow:hidden !important;opacity:0 !important;
  pointer-events:none !important;
}

/* ==========================================================================
   PARENT-MATCH THEME (codingwith.org, dark) - appended last to win the cascade. Tunes
   the KB dark canvas to this parent's exact page background so the KB and the
   parent site share one background. Carried by this single stylesheet (kb.css),
   linked on every KB page. ASCII only, NO TOFU.
   ========================================================================== */
:root{
  --kb-bg:#f0641e;
}
html,body{background:#f0641e !important;}
.kb-shell{background:transparent;}