/* Capital Toolkit — shared site chrome for the standalone Toolbox tools.
 *
 * The Toolbox tools (Articles / CRA / PREC) are self-contained static apps
 * served from /toolbox/* without the Next.js marketing shell. This stylesheet
 * (paired with site-chrome.js) gives them the same Capital Toolkit header and
 * footer as the rest of capitaltoolkit.com so a tool page reads as part of the
 * site rather than a bare document.
 *
 * Everything is namespaced under .ctk-sc so it can never collide with a tool's
 * own classes. Palette + type mirror brand system v1.0 (globals.css): cream
 * canvas, espresso ink, gold accent, Playfair-class serif wordmark (Newsreader
 * is the serif already self-hosted for these tools), IBM Plex Sans body.
 */

/* Playfair Display — the brand wordmark face (brand system §3), self-hosted so
   the header/footer logo matches the rest of the site. Variable weight file
   (Latin subset) copied from the app's next/font build. */
@font-face{
  font-family:"CTK Playfair";
  src:url("/toolbox/assets/playfair-display-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

.ctk-sc{
  --sc-cream:#f5ede0; --sc-cream-dark:#ede4d3;
  --sc-espresso:#2b1f15; --sc-espresso-soft:#4a3828;
  --sc-gold:#b8924e; --sc-gold-light:#d4b87a;
  --sc-rule:#cfc2a8; --sc-ink:#1f1812; --sc-mute:#6b5d4f;
  --sc-serif:"CTK Playfair","Newsreader",Georgia,serif;
  --sc-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  box-sizing:border-box;
}
.ctk-sc *,.ctk-sc *::before,.ctk-sc *::after{box-sizing:border-box}
.ctk-sc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Warm the tool canvas to the brand cream so header, body, and footer share
   one surface instead of the tool's cool paper reading as a different site. */
body.ctk-sc-on{background:var(--ctk-sc-cream,#f5ede0)}

/* The checklist tools pin their right-hand rail with position:sticky;top:16px.
   With the site header now sticky above it (~117px tall), that offset would
   slide the rail under the header on scroll — push it clear of the header. */
body.ctk-sc-on .rail{top:128px}
@media(max-width:900px){body.ctk-sc-on .rail{top:auto}}

/* ---- header ---------------------------------------------------------- */
header.ctk-sc-header{
  position:sticky;top:0;z-index:40;width:100%;
  background:rgba(245,237,224,.92);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--sc-rule);
  font-family:var(--sc-sans);
}
.ctk-sc-inner{max-width:1600px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.ctk-sc-inner{padding:0 24px}}
@media(min-width:1024px){.ctk-sc-inner{padding:0 32px}}

.ctk-sc-row1{display:flex;height:72px;align-items:center;justify-content:space-between;gap:16px}
.ctk-sc-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.ctk-sc-coin{display:block;width:36px;height:36px;flex-shrink:0}
.ctk-sc-wordmark{
  font-family:var(--sc-serif);font-weight:600;font-size:24px;line-height:1;
  color:var(--sc-espresso);white-space:nowrap;letter-spacing:-.01em;
}

.ctk-sc-auth{display:flex;align-items:center;gap:12px}
.ctk-sc-pill{
  display:none;align-items:center;border-radius:999px;
  background:var(--sc-espresso);color:var(--sc-cream);
  padding:8px 20px;font-size:14px;font-weight:500;white-space:nowrap;
  text-decoration:none;transition:background-color .15s;
}
.ctk-sc-pill:hover{background:var(--sc-espresso-soft)}
@media(min-width:1024px){.ctk-sc-pill{display:inline-flex}}

/* primary nav row */
nav.ctk-sc-nav{
  display:none;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 40px;border-top:1px solid rgba(207,194,168,.6);padding:10px 0;
}
@media(min-width:1024px){nav.ctk-sc-nav{display:flex}}
.ctk-sc-link{
  position:relative;white-space:nowrap;font-size:14px;font-weight:500;
  color:var(--sc-espresso-soft);text-decoration:none;
  background:none;border:0;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:4px;transition:color .15s;
}
.ctk-sc-link:hover{color:var(--sc-espresso)}
.ctk-sc-link[aria-current=page],.ctk-sc-link.is-active{color:var(--sc-espresso)}
.ctk-sc-link[aria-current=page]::after,.ctk-sc-link.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;background:var(--sc-gold);
}
.ctk-sc-caret{width:14px;height:14px;transition:transform .15s}
.ctk-sc-dd[data-open=true] .ctk-sc-caret{transform:rotate(180deg)}

/* dropdown */
.ctk-sc-dd{position:relative}
.ctk-sc-menu{
  position:absolute;left:0;top:100%;margin-top:8px;min-width:11rem;z-index:50;
  background:var(--sc-cream);border:1px solid var(--sc-rule);border-radius:6px;
  box-shadow:0 8px 24px rgba(43,31,21,.14);padding:4px 0;
}
.ctk-sc-menu[hidden]{display:none}
.ctk-sc-menu a{
  display:flex;align-items:center;gap:6px;padding:8px 16px;
  font-size:14px;color:var(--sc-espresso-soft);text-decoration:none;
}
.ctk-sc-menu a:hover{color:var(--sc-espresso);background:rgba(237,228,211,.6)}
.ctk-sc-menu a[aria-current=page]{color:var(--sc-espresso);font-weight:600}

/* burger + mobile panel */
.ctk-sc-burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid var(--sc-rule);border-radius:8px;
  background:none;color:var(--sc-espresso);cursor:pointer;
}
@media(min-width:1024px){.ctk-sc-burger{display:none}}
.ctk-sc-burger svg{width:22px;height:22px}
.ctk-sc-mobile{border-top:1px solid var(--sc-rule);padding:10px 16px 18px}
.ctk-sc-mobile[hidden]{display:none}
@media(min-width:1024px){.ctk-sc-mobile{display:none!important}}
.ctk-sc-mobile a,.ctk-sc-mobile .ctk-sc-mlabel{
  display:block;padding:10px 4px;font-size:15px;color:var(--sc-espresso-soft);
  text-decoration:none;border-bottom:1px solid rgba(207,194,168,.4);
}
.ctk-sc-mobile a[aria-current=page]{color:var(--sc-espresso);font-weight:600}
.ctk-sc-mobile .ctk-sc-mlabel{color:var(--sc-mute);font-size:12px;text-transform:uppercase;letter-spacing:.08em;border:0;padding-bottom:2px}
.ctk-sc-mobile .ctk-sc-msub a{padding-left:14px}
.ctk-sc-mobile .ctk-sc-mauth{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ctk-sc-mobile .ctk-sc-mauth a{
  flex:1 1 auto;text-align:center;border:0;border-radius:999px;
  background:var(--sc-espresso);color:var(--sc-cream);padding:11px 16px;font-weight:500;
}

/* Focus ring. Default espresso — high contrast (~13:1) on the cream header,
   dropdown, and mobile panel; gold on cream is only ~2.5:1 and fails the
   WCAG 1.4.11 3:1 minimum for a UI-component indicator. On the espresso
   footer, switch to gold-light (~8:1) so the ring stays visible there. */
.ctk-sc a:focus-visible,.ctk-sc button:focus-visible{
  outline:2px solid var(--sc-espresso);outline-offset:2px;border-radius:3px;
}
.ctk-sc-footer a:focus-visible{outline-color:var(--sc-gold-light)}

@media(prefers-reduced-motion:reduce){
  .ctk-sc *,.ctk-sc *::before,.ctk-sc *::after{transition:none!important;animation:none!important}
}

/* ---- footer ---------------------------------------------------------- */
footer.ctk-sc-footer{
  background:var(--sc-espresso);color:var(--sc-cream-dark);
  border-top:1px solid var(--sc-espresso-soft);font-family:var(--sc-sans);
  margin-top:8px;
}
.ctk-sc-finner{max-width:1120px;margin:0 auto;padding:56px 24px}
@media(min-width:768px){.ctk-sc-finner{padding:64px 48px}}
.ctk-sc-fgrid{display:grid;gap:40px}
@media(min-width:1024px){.ctk-sc-fgrid{grid-template-columns:2fr 3fr}}

.ctk-sc-fbrandlink{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.ctk-sc-fcoinbadge{display:inline-flex;align-items:center;justify-content:center;background:var(--sc-cream);border-radius:999px;padding:6px}
.ctk-sc-fcoinbadge img{display:block;width:32px;height:32px}
.ctk-sc-fwordmark{font-family:var(--sc-serif);font-weight:600;font-size:22px;line-height:1;color:var(--sc-cream);white-space:nowrap}
.ctk-sc-fop{margin:16px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(237,228,211,.85)}
.ctk-sc-ffr{margin:8px 0 0;font-size:12px;font-style:italic;color:rgba(237,228,211,.85)}
.ctk-sc-yt{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  border:1px solid rgba(237,228,211,.3);border-radius:999px;padding:8px 16px;
  font-size:14px;color:var(--sc-cream);text-decoration:none;transition:color .15s,border-color .15s;
}
.ctk-sc-yt:hover{color:var(--sc-gold-light);border-color:var(--sc-gold)}
.ctk-sc-yt svg{width:16px;height:16px}

.ctk-sc-fcols{display:grid;gap:32px}
@media(min-width:640px){.ctk-sc-fcols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ctk-sc-fcols{grid-template-columns:repeat(4,1fr)}}
.ctk-sc-fcol h3{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--sc-gold)}
.ctk-sc-fcol ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ctk-sc-fcol a{font-size:14px;color:rgba(237,228,211,.9);text-decoration:none;transition:color .15s}
.ctk-sc-fcol a:hover{color:var(--sc-gold-light)}

.ctk-sc-fbottom{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  margin-top:48px;border-top:1px solid var(--sc-espresso-soft);padding-top:24px;
}
@media(min-width:640px){.ctk-sc-fbottom{flex-direction:row;justify-content:space-between}}
.ctk-sc-copy{margin:0;font-size:12px;color:var(--sc-gold)}
.ctk-sc-unsub{font-size:12px;color:rgba(237,228,211,.85);text-decoration:none}
.ctk-sc-unsub:hover{color:var(--sc-gold-light)}


@media print{header.ctk-sc-header,footer.ctk-sc-footer{display:none!important}}