:root {
  --nhs-blue: #005eb8;
  --nhs-white: #ffffff;
  --nhs-black: #212b32;
  --nhs-text-color: #212b32;
  --nhs-secondary-text-color: #4c6272;
  --nhs-reverse-text-color: #ffffff;
  --nhs-link-color: #005eb8;
  --nhs-link-hover-color: #7c2855;
  --nhs-link-visited-color: #330072;
  --nhs-link-active-color: #002f5c;
  --nhs-button-color: #007f3b;
  --nhs-error-color: #d5281b;
  --nhs-success-color: #007f3b;
  --nhs-border-color: #d8dde0;
  --nhs-focus-color: #ffeb3b;
  --nhs-focus-text-color: #212b32;
  --nhs-grey-1: #4c6272;
  --nhs-grey-2: #768692;
  --nhs-grey-3: #aeb7bd;
  --nhs-grey-4: #d8dde0;
  --nhs-grey-5: #f0f4f5;
  --nhs-dark-blue: #003087;
  --nhs-aqua-green: #00a499;
  --nhs-purple: #330072;
  --nhs-pink: #ae2573;
  --nhs-orange: #ed8b00;
  --nhs-warm-yellow: #ffb81c;
  --bs-body-bg: var(--nhs-grey-5);
}

/* Example usage:
body {
  color: var(--nhs-text-color);
  background-color: var(--nhs-white);
}

a {
  color: var(--nhs-link-color);
}

.nhs-button {
  background-color: var(--nhs-button-color);
  color: var(--nhs-white);
} */

/* This applies white text to buttons AND navbar links at the same time */

.nhsuk-button, .nav-link {
  color: var(--nhs-white) !important;
}

/* Ensure navbar links stay white when you hover over them */

.nav-link:hover {
  color: var(--nhs-white) !important;
  text-decoration: underline;
}

/* Change text color to black when the dropdown item has the yellow focus background */

.dropdown-item:focus, .dropdown-item:active {
  color: var(--nhs-black) !important;
  background-color: var(--nhs-focus-color) !important;
  outline: 3px solid var(--nhs-black);
  text-decoration: none;
}

/* If you are using the 'Active' state to show which page you are on */

.dropdown-item.active {
  background-color: var(--nhs-blue);
  color: var(--nhs-white) !important;
}

/* Force text to black when the background is the yellow NHS focus color */

.navbar-nav .dropdown-menu .dropdown-item:focus, .navbar-nav .dropdown-menu .dropdown-item:active, .dropdown-item.active, .dropdown-item:focus {
  color: #212b32 !important;
  background-color: #ffeb3b !important;
}

/* This specifically targets the link even if Bootstrap is trying to color it white */

.dropdown-menu > .active > a, .dropdown-menu > li > a:focus {
  color: #212b32 !important;
}

.nav-link:focus {
  color: #212b32 !important;
  /*background-color: #ffeb3b !important;*/
}

html {
  background-color: #d8dde0;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: Frutiger W01,arial,sans-serif;
}

/* ==================================================== */

/* 1. Global Reset: Strip all default NHS focus styles from nav links */

.navbar-nav .nav-link:focus {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--nhs-white, #ffffff) !important;
}

/* 2. The Active State: Triggered by our Javascript class */

.navbar-nav .nav-link.active-dropdown {
  background-color: var(--nhs-focus-color, #ffeb3b) !important;
  color: var(--nhs-black, #212b32) !important;
  box-shadow: 0 -2px #ffeb3b, 0 4px #212b32 !important;
}

/* 3. Accessibility: Restore yellow highlight ONLY for Tab key users */

.navbar-nav .nav-link:focus-visible {
  background-color: var(--nhs-focus-color, #ffeb3b) !important;
  color: var(--nhs-black, #212b32) !important;
  box-shadow: 0 -2px #ffeb3b, 0 4px #212b32 !important;
}