/*
 * Shared site header + footer + dark theme for every content page.
 * Stamped onto pages by website/tools-site-chrome.js — edit the markup there, the styles here.
 * Class names are prefixed cpc- and the elements are divs with ARIA roles (not <header>/<nav>/<footer>),
 * so the pages' own `header{}`, `nav a{}` and `footer{}` rules never reach them.
 */

/* ---------- dark theme: the page templates all read these variables ---------- */
html[data-theme="dark"] {
  --bg: #0b1220;
  --card: #111a2b;
  --border: #22304a;
  --text: #e6edf6;
  --dim: #a8b6ca;
  --muted: #8b9bb0;
  --navy: #e6edf6;
  --green-text: #34d399;
  --blue: #60a5fa;
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text); }

/* ---------- header ---------- */
.cpc-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(247, 249, 252, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid #d8e2ee;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.2;
}
html[data-theme="dark"] .cpc-header { background: rgba(11, 18, 32, 0.9); border-bottom-color: #22304a; }
.cpc-bar { max-width: 1180px; margin: 0 auto; height: 64px; padding: 0 20px; display: flex; align-items: center; gap: 14px; box-sizing: border-box; }
.cpc-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: #0f172a !important; font-weight: 800; font-size: 17px; letter-spacing: -0.2px; white-space: nowrap; flex-shrink: 0; }
html[data-theme="dark"] .cpc-logo { color: #e6edf6 !important; }
.cpc-logo svg { width: 32px; height: 32px; flex-shrink: 0; display: block; }
.cpc-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.cpc-nav a { color: #475569 !important; text-decoration: none !important; font-size: 14.5px; font-weight: 500; padding: 8px 12px; border-radius: 9px; background: transparent; }
.cpc-nav a:hover, .cpc-nav a[aria-current="page"] { color: #0f172a !important; background: rgba(37, 99, 235, 0.07); }
html[data-theme="dark"] .cpc-nav a { color: #a8b6ca !important; }
html[data-theme="dark"] .cpc-nav a:hover, html[data-theme="dark"] .cpc-nav a[aria-current="page"] { color: #ffffff !important; background: rgba(148, 163, 184, 0.12); }
.cpc-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cpc-theme, .cpc-burger {
  width: 38px; height: 38px; padding: 0; margin: 0; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d8e2ee; background: #ffffff; color: #334155; box-shadow: none; font: inherit;
}
.cpc-theme:hover, .cpc-burger:hover { border-color: #0f9f78; color: #0f9f78; }
html[data-theme="dark"] .cpc-theme, html[data-theme="dark"] .cpc-burger { background: #111a2b; border-color: #2b3a55; color: #cbd5e1; }
.cpc-theme svg, .cpc-burger svg { width: 18px; height: 18px; display: block; }
.cpc-theme .cpc-sun { display: none; }
html[data-theme="dark"] .cpc-theme .cpc-sun { display: block; }
html[data-theme="dark"] .cpc-theme .cpc-moon { display: none; }
html[data-cpc-light] .cpc-theme { display: none; }
.cpc-cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px;
  background: #0f9f78; color: #ffffff !important; font-weight: 700; font-size: 13.5px; line-height: 1.2;
  text-decoration: none !important; white-space: nowrap; box-shadow: 0 2px 10px rgba(5, 150, 105, 0.22); border: 0;
}
.cpc-cta:hover { background: #0c8a68; }
.cpc-cta svg { width: 14px; height: 14px; display: block; }
.cpc-burger { display: none; }
.cpc-burger .cpc-x { display: none; }
.cpc-header.cpc-open .cpc-burger .cpc-x { display: block; }
.cpc-header.cpc-open .cpc-burger .cpc-lines { display: none; }

@media (max-width: 900px) {
  .cpc-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 16px 16px;
    background: #ffffff; border-bottom: 1px solid #d8e2ee; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  }
  html[data-theme="dark"] .cpc-nav { background: #0e1626; border-bottom-color: #22304a; }
  .cpc-header.cpc-open .cpc-nav { display: flex; }
  .cpc-nav a { padding: 12px; font-size: 16px; }
  .cpc-burger { display: inline-flex; }
  .cpc-actions { margin-left: auto; }
}
@media (max-width: 420px) {
  .cpc-bar { padding: 0 12px; gap: 8px; }
  .cpc-logo { font-size: 15px; gap: 8px; }
  .cpc-logo svg { width: 28px; height: 28px; }
  .cpc-cta { padding: 8px 11px; font-size: 12.5px; }
  .cpc-cta svg { display: none; }
  .cpc-theme, .cpc-burger { width: 36px; height: 36px; }
}
@media (max-width: 350px) { .cpc-logo span { display: none; } }

/* ---------- footer ---------- */
.cpc-footer {
  margin-top: 56px; background: #ffffff; border-top: 1px solid #d8e2ee; color: #475569;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.6; text-align: left;
}
html[data-theme="dark"] .cpc-footer { background: #0e1626; border-top-color: #22304a; color: #a8b6ca; }
.cpc-fwrap { max-width: 1180px; margin: 0 auto; padding: 44px 20px 28px; display: grid; grid-template-columns: 1.25fr 3fr; gap: 40px; box-sizing: border-box; }
.cpc-fbrand p { margin: 12px 0 16px; color: inherit; font-size: 14px; max-width: 300px; }
.cpc-fcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cpc-fcol .cpc-fhead { display: block; margin: 0 0 10px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #0f172a; font-weight: 700; }
html[data-theme="dark"] .cpc-fcol .cpc-fhead { color: #e6edf6; }
.cpc-fcol a { display: block; color: #475569 !important; text-decoration: none !important; padding: 3px 0; font-size: 14px; background: transparent; }
.cpc-fcol a:hover { color: #0f9f78 !important; }
html[data-theme="dark"] .cpc-fcol a { color: #a8b6ca !important; }
html[data-theme="dark"] .cpc-fcol a:hover { color: #34d399 !important; }
.cpc-fbottom { max-width: 1180px; margin: 0 auto; padding: 16px 20px 28px; border-top: 1px solid #e5edf5; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; font-size: 13px; box-sizing: border-box; }
html[data-theme="dark"] .cpc-fbottom { border-top-color: #1c2840; }
.cpc-fbottom a { color: inherit !important; text-decoration: none !important; margin-right: 14px; white-space: nowrap; display: inline-block; }
.cpc-fbottom a:hover { color: #0f9f78 !important; }
@media (max-width: 860px) {
  .cpc-fwrap { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; }
  .cpc-fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}