/*───────────────────────────────────────────────────────────────────────────────
  Brand & base colors
───────────────────────────────────────────────────────────────────────────────*/
:root {
  --jp-footer-bg: rgb(0, 13, 74);
  --jp-primary: #2028CD;           /* default link/button/checkbox color */
  --jp-primary-hover: #1C23B2;     /* hover/focus color */
  --jp-link-visited: #4148E5;
  --jp-link-active: #141A92;
}

/*───────────────────────────────────────────────────────────────────────────────
  Footer
───────────────────────────────────────────────────────────────────────────────*/
footer {
  background-color: var(--jp-footer-bg);
}

/*───────────────────────────────────────────────────────────────────────────────
  Accordion headings
───────────────────────────────────────────────────────────────────────────────*/
.accordion-button .fw-bold {
  color: #000 !important;
}

/*───────────────────────────────────────────────────────────────────────────────
  Global link styles
───────────────────────────────────────────────────────────────────────────────*/
a {
  color: var(--jp-primary);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover,
a:focus {
  color: var(--jp-primary-hover);
  text-decoration: underline;
}

a:visited {
  color: var(--jp-link-visited);
}

a:active {
  color: var(--jp-link-active);
}

/*───────────────────────────────────────────────────────────────────────────────
  Override link colors inside .pj-box
───────────────────────────────────────────────────────────────────────────────*/
.pj-box a {
  color: var(--jp-primary) !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
}

.pj-box a:hover,
.pj-box a:focus {
  color: var(--jp-primary-hover) !important;
  text-decoration: underline !important;
}

/*───────────────────────────────────────────────────────────────────────────────
  Change all checkboxes’ tick & box color
───────────────────────────────────────────────────────────────────────────────*/
.form-check-input {
  /* Use the brand primary color for both box and checkmark */
  accent-color: var(--jp-primary);
}

/* Explicitly style the checked state (in case of Bootstrap overrides) */
.form-check-input:checked {
  background-color: var(--jp-primary) !important;
  border-color: var(--jp-primary) !important;
}

/*───────────────────────────────────────────────────────────────────────────────
  Navbar links
───────────────────────────────────────────────────────────────────────────────*/
.navbar .nav-link {
  color: #000 !important;
}

.navbar .nav-link:hover {
  color: #5B5B5B !important;
}

/*───────────────────────────────────────────────────────────────────────────────
  PJ primary button
───────────────────────────────────────────────────────────────────────────────*/
.btn.pj-btn-one {
  background-color: var(--jp-primary);
  border-color: var(--jp-primary);
  color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
}

.btn.pj-btn-one:hover,
.btn.pj-btn-one:focus,
.btn.pj-btn-one:active {
  background-color: #161C99;
  border-color: #161C99;
  color: #fff;
}

/*───────────────────────────────────────────────────────────────────────────────
  Mobile (offcanvas) menu
───────────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767.98px) {
  .offcanvas-body {
    background-color: #000D4A;
  }

  .offcanvas-body .nav-link {
    color: #fff !important;
  }

  .offcanvas-body .nav-link:hover {
    color: var(--jp-primary-hover) !important;
  }
}