/* =====================================================================
   Chrome only — header and footer.

   Tool pages load this instead of site.css. Each tool ships its own
   complete stylesheet inside the page, and site.css is nearly a thousand
   lines of rules on generic selectors (.card, .row, .panel, .container,
   img, input) that were overriding the tool's own layout. Keeping the two
   apart is what makes a tool render exactly as authored.
   ===================================================================== */

:root {
  --c-ink: #0f172a;
  --c-ink-soft: #334155;
  --c-mute: #6b7280;
  --c-line: #e5e7eb;
  --c-line-soft: #f1f5f9;
  --c-surface: #fff;
  --c-brand: #2563eb;
}

body {
  background: #f8fafc;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- header */
.nav-pill-group {
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: .2rem;
  background: var(--c-surface);
  gap: .15rem;
}
.nav-pill {
  border-radius: 999px;
  padding: .35rem .85rem !important;
  font-size: .88rem;
  color: var(--c-ink-soft) !important;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-pill:hover { background: var(--c-line-soft); color: var(--c-ink) !important; }

.nav-search { max-width: 240px; }
.nav-search .form-control { border-radius: 999px 0 0 999px; }
.nav-search .btn { border-radius: 0 999px 999px 0; }

@media (max-width: 991.98px) {
  .nav-pill-group { border: 0; padding: 0; margin: .5rem 0; flex-direction: column; }
  .nav-pill { padding: .5rem .25rem !important; }
  .nav-search { max-width: 100%; }
}

/* ------------------------------------------------------------- footer */
.site-footer { padding: 2.5rem 0 1.5rem; margin-top: 3rem; }
.footer-heading {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .7px; color: #9ca3af; margin-bottom: .75rem;
}
.footer-link {
  font-size: .82rem; color: var(--c-mute); text-decoration: none;
  display: inline-flex; align-items: center; transition: color .15s;
}
.footer-link:hover { color: #111827; }

/* ------------------------------------------------ ad slots and safety */
.jc-ad { max-width: 100%; }
.jc-ad img, .jc-ad iframe { max-width: 100%; }

/* a tool must never be able to push the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }