/* =======================================================================
   Theme: deep-purple corporate palette, clean grotesk type, flat minimal
   shapes. Colours/typography/spacing only — no third-party branding,
   logos, wordmarks or copy are used anywhere in this file.
   ======================================================================= */

:root {
  /* ---- brand palette ---- */
  --brand-primary: #6b1668;       /* deep purple — primary brand colour */
  --brand-primary-dark: #4a1049;  /* darker shade for hover/active/headers */
  --brand-primary-darker: #370c36;
  --brand-accent: #a4239f;        /* brighter magenta accent for highlights/links */

  --brand-ink: #201f24;           /* near-black body text */
  --brand-body: #38393c;          /* standard body text */
  --brand-muted: #6c6b6f;         /* muted/secondary text (AA on white) */
  --brand-border: #dcdde0;        /* hairline borders/dividers */
  --brand-surface: #f1eff3;       /* light panel/header surface */
  --brand-page-bg: #f7f6f8;       /* page background */
  --brand-white: #ffffff;

  /* keep the legacy variable name working in case anything else reads it */
  --ofcom-navy: var(--brand-primary);

  /* ---- typography ---- */
  --brand-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- shape ---- */
  --brand-radius: 4px;
  --brand-radius-sm: 3px;

  /* ---- retune Bootstrap's own variables so components (buttons, forms,
     cards, nav, focus rings) pick up the new palette automatically ---- */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 107, 22, 104;
  --bs-body-font-family: var(--brand-font);
  --bs-body-color: var(--brand-body);
  --bs-border-color: var(--brand-border);
  --bs-border-radius: var(--brand-radius);
  --bs-border-radius-sm: var(--brand-radius-sm);
  --bs-border-radius-lg: 6px;
  --bs-link-color: var(--brand-accent);
  --bs-link-color-rgb: 164, 35, 159;
  --bs-link-hover-color: var(--brand-primary-dark);
}

body {
  font-family: var(--brand-font);
  color: var(--brand-body);
  background-color: var(--brand-page-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-font);
  color: var(--brand-ink);
  font-weight: 600;
}

a {
  color: var(--bs-link-color);
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* ---------------- Header ---------------- */

.navbar-custom {
  background-color: var(--brand-primary);
}

.navbar-custom .navbar-brand {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.navbar-custom .badge {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.5em 0.85em;
}

/* ---------------- Navigation pills ---------------- */

.nav-pills {
  --bs-nav-pills-border-radius: var(--brand-radius);
  gap: 0.375rem;
}

.nav-pills .nav-link {
  color: var(--brand-primary);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-pills .nav-link:hover {
  background-color: var(--brand-surface);
  border-color: var(--brand-border);
}

.nav-pills .nav-link.active {
  background-color: var(--brand-primary);
  color: #fff;
}

/* ---------------- Cards ---------------- */

.card {
  border-color: var(--brand-border);
}

.card-header {
  font-weight: 600;
  color: var(--brand-ink);
  background-color: var(--brand-surface);
  border-bottom-color: var(--brand-border);
}

.result-card .card-header {
  background-color: var(--brand-primary);
  color: #fff;
  border-bottom-color: var(--brand-primary);
}

.shadow-sm {
  box-shadow: 0 1px 3px rgba(32, 31, 36, 0.08) !important;
}

/* ---------------- Forms ---------------- */

.form-label {
  font-weight: 600;
  color: var(--brand-ink);
  font-size: 0.92rem;
}

.form-text {
  color: var(--brand-muted);
}

.form-control,
.form-select {
  border-color: var(--brand-border);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 0.2rem rgba(164, 35, 159, 0.2);
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-check-input:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 0.2rem rgba(164, 35, 159, 0.2);
}

/* ---------------- Buttons ---------------- */

.btn {
  font-weight: 500;
  border-radius: var(--brand-radius-sm);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-darker);
  --bs-btn-active-border-color: var(--brand-primary-darker);
  --bs-btn-focus-shadow-rgb: 107, 22, 104;
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-dark);
  --bs-btn-active-border-color: var(--brand-primary-dark);
  --bs-btn-focus-shadow-rgb: 107, 22, 104;
  --bs-btn-disabled-color: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

/* ---------------- Tables ---------------- */

.table > :not(caption) > * > * {
  border-bottom-color: var(--brand-border);
}

.table-warning {
  --bs-table-bg: #fbf1d9;
}

.table-danger {
  --bs-table-bg: #f8dede;
}

/* ---------------- Footer ---------------- */

footer {
  color: var(--brand-muted);
  border-top: 1px solid var(--brand-border);
}