/**
 * BNS Data Tools — thin layer over stock Bootstrap 5.
 *
 * Deliberately small. Bootstrap's own components and spacing do the work; this
 * file only sets the BNS Data palette on Bootstrap's variables and styles the
 * handful of elements Bootstrap has no component for (the tool shell, the ad
 * slots, the card grids). Standard system fonts throughout — no webfont is
 * loaded, which keeps a utility page fast on a phone.
 */

:root {
  /* BNS Data palette, applied through Bootstrap's own custom properties. */
  --bns-navy: #0b2241;
  --bns-navy-mid: #1a3a5c;
  --bns-gold: #b8944a;
  --bns-cream: #faf9f6;
  --bns-cream-mid: #f2f0eb;
  --bns-border: #ddd9cf;

  --bs-primary: #0b2241;
  --bs-primary-rgb: 11, 34, 65;
  --bs-link-color: #1a3a5c;
  --bs-link-color-rgb: 26, 58, 92;
  --bs-link-hover-color: #b8944a;
  --bs-link-hover-color-rgb: 184, 148, 74;
  --bs-body-bg: #ffffff;
  --bs-body-color: #1c1c1c;
  --bs-border-color: #ddd9cf;
  --bs-border-radius: 0.375rem;
}

body {
  background: var(--bs-body-bg);
}

/* Bootstrap's .btn-primary and .btn-outline-primary follow --bs-primary only
   for some properties, so the two used here are set explicitly. */
.btn-primary {
  --bs-btn-bg: var(--bns-navy);
  --bs-btn-border-color: var(--bns-navy);
  --bs-btn-hover-bg: var(--bns-navy-mid);
  --bs-btn-hover-border-color: var(--bns-navy-mid);
  --bs-btn-active-bg: var(--bns-navy-mid);
  --bs-btn-active-border-color: var(--bns-navy-mid);
}
.btn-outline-primary {
  --bs-btn-color: var(--bns-navy);
  --bs-btn-border-color: var(--bns-navy);
  --bs-btn-hover-bg: var(--bns-navy);
  --bs-btn-hover-border-color: var(--bns-navy);
  --bs-btn-active-bg: var(--bns-navy);
}

/* ── navbar and footer ───────────────────────────────────── */

.bns-navbar {
  background: var(--bns-navy);
  --bs-navbar-color: rgba(255, 255, 255, 0.82);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.3);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.bns-navbar .navbar-brand {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.bns-navbar .bns-parent-link {
  color: var(--bns-gold) !important;
}

.bns-footer {
  background: var(--bns-cream-mid);
  border-top: 1px solid var(--bns-border);
  padding: 2.5rem 0 1.5rem;
  margin-top: 4rem;
  font-size: 0.9375rem;
}
.bns-footer-brand {
  font-weight: 600;
  color: var(--bns-navy);
}
.bns-footer-heading {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4a4a4a;
  margin-bottom: 0.5rem;
}
.bns-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
}
.bns-footer-links a {
  color: #4a4a4a;
  text-decoration: none;
  line-height: 1.9;
}
.bns-footer-links a:hover {
  color: var(--bns-navy);
  text-decoration: underline;
}
.bns-footer-legal {
  border-top: 1px solid var(--bns-border);
  margin-top: 1.75rem;
  padding-top: 1rem;
  font-size: 0.8125rem;
  color: #737373;
}

/* ── page structure ──────────────────────────────────────── */

.bns-main {
  padding: 1.5rem 0 0;
}
.bns-breadcrumb {
  --bs-breadcrumb-font-size: 0.875rem;
  --bs-breadcrumb-divider: '/';
  margin-bottom: 1rem;
}
.bns-page-head {
  margin-bottom: 1.75rem;
}
.bns-eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}
.bns-eyebrow a {
  color: var(--bns-gold);
  text-decoration: none;
}
.bns-page-head h1,
.bns-hero h1 {
  color: var(--bns-navy);
  font-weight: 600;
  font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.35rem);
  margin-bottom: 0.5rem;
}
.bns-lead {
  font-size: 1.0625rem;
  color: #4a4a4a;
  max-width: 62ch;
  margin-bottom: 0;
}
.bns-section {
  margin: 2.75rem 0;
}
.bns-section h2 {
  color: var(--bns-navy);
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 0.85rem;
}
.bns-section p,
.bns-prose p {
  max-width: 72ch;
  line-height: 1.7;
}
.bns-section-lead {
  color: #4a4a4a;
}
.bns-steps {
  max-width: 72ch;
  line-height: 1.8;
}
.bns-prose {
  max-width: 46rem;
  padding-bottom: 2rem;
}
.bns-prose h1 {
  color: var(--bns-navy);
  font-weight: 600;
}
.bns-prose h2 {
  color: var(--bns-navy);
  font-weight: 600;
  font-size: 1.3rem;
  margin-top: 2rem;
}
.bns-hero {
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid var(--bns-border);
  margin-bottom: 2rem;
}

/* ── the tool itself ─────────────────────────────────────── */

.bns-tool-shell {
  background: var(--bns-cream);
  border: 1px solid var(--bns-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}
.bns-in {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  background: #fff;
}
.bns-output {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  padding: 0.75rem;
  min-height: 12rem;
  max-height: 32rem;
  overflow: auto;
}
.bns-out {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.bns-result-table {
  font-size: 0.8125rem;
}
.bns-result-table th {
  white-space: nowrap;
}
.bns-result-list .bns-ok {
  border-left: 3px solid #198754;
}
.bns-result-list .bns-warn {
  border-left: 3px solid #ffc107;
}
.bns-status {
  min-height: 1.4rem;
  margin-top: 0.75rem;
}
.bns-actions {
  margin-top: 0.25rem;
}
.form-label-sm {
  font-size: 0.8125rem;
  color: #4a4a4a;
}

/* ── privacy notice (spec §3 wording) ────────────────────── */

.bns-privacy {
  border-left: 3px solid var(--bns-gold);
  background: var(--bns-cream-mid);
  padding: 0.85rem 1rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: #4a4a4a;
  border-radius: 0 0.375rem 0.375rem 0;
}

/* ── card grids ──────────────────────────────────────────── */

.bns-tool-card,
.bns-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bns-border);
  border-radius: 0.5rem;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bns-tool-card:hover,
.bns-related-card:hover {
  border-color: var(--bns-navy);
  box-shadow: 0 2px 10px rgba(11, 34, 65, 0.08);
}
.bns-tool-name,
.bns-related-name {
  font-weight: 600;
  color: var(--bns-navy);
}
.bns-tool-summary,
.bns-related-summary {
  font-size: 0.875rem;
  color: #4a4a4a;
  line-height: 1.5;
}
.bns-cat-group {
  margin-bottom: 2.5rem;
}
.bns-cat-head h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.bns-cat-head h2 a {
  color: var(--bns-navy);
  text-decoration: none;
}
.bns-cat-head p {
  color: #737373;
  font-size: 0.9375rem;
  margin-bottom: 0.9rem;
}
.bns-search-row {
  max-width: 34rem;
  margin-bottom: 1.5rem;
}
.bns-search-hero {
  margin-top: 1.25rem;
  margin-bottom: 0;
}
.bns-link-list {
  padding-left: 1.1rem;
  line-height: 1.9;
}
.bns-clear-row {
  margin: 2rem 0 3rem;
}

/* ── product continuation cards ──────────────────────────── */

.bns-product-card {
  height: 100%;
  border: 1px solid var(--bns-border);
  border-left: 3px solid var(--bns-gold);
  border-radius: 0.5rem;
  background: var(--bns-cream);
  padding: 1rem 1.1rem;
}
.bns-product-name {
  font-weight: 600;
  color: var(--bns-navy);
  margin-bottom: 0.1rem;
}
.bns-product-cap {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #737373;
  margin-bottom: 0.5rem;
}
.bns-product-copy {
  font-size: 0.9375rem;
  color: #4a4a4a;
  line-height: 1.6;
}

/* ── FAQ ─────────────────────────────────────────────────── */

.bns-faq {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(11, 34, 65, 0.15);
  --bs-accordion-active-bg: var(--bns-cream-mid);
  --bs-accordion-active-color: var(--bns-navy);
  max-width: 56rem;
}
.bns-faq .accordion-body {
  color: #4a4a4a;
  line-height: 1.7;
}

/* ── ad slots (spec §6: space reserved so nothing shifts) ── */

.bns-ad {
  min-height: var(--ad-h, 90px);
  margin: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bns-ad:empty {
  border: 1px dashed var(--bns-border);
  border-radius: 0.375rem;
  background: var(--bns-cream);
}
@media (max-width: 767.98px) {
  .bns-ad {
    min-height: var(--ad-h-sm, 100px);
  }
  .bns-footer-links {
    columns: 1;
  }
}