:root {
  --princess-pearl: #F9F8F3;
  --princess-blue: #001844;
  --princess-blue-dark: #001233;
}

/* Optional: load Gotham fonts if you host them under wwwroot/fonts
   Place font files (woff2/woff) in wwwroot/fonts and adjust filenames if needed.
   The file names below are common export names; update to match the exact filenames you have. */
@font-face {
  font-family: "Gotham";
  src: local("Gotham Light"), local("Gotham-Light"),
       url("/fonts/gotham-light-webfont.woff2") format("woff2"),
       url("/fonts/gotham-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: local("Gotham Book"), local("Gotham-Book"),
       url("/fonts/gothambook-webfont.woff2") format("woff2"),
       url("/fonts/gothambook-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: local("Gotham Book Italic"), local("Gotham-BookItalic"),
       url("/fonts/gothambookitalic-webfont.woff2") format("woff2"),
       url("/fonts/gothambookitalic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: local("Gotham Medium"), local("Gotham-Medium"),
       url("/fonts/gothammedium-webfont.woff2") format("woff2"),
       url("/fonts/gothammedium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: local("Gotham Medium Italic"), local("Gotham-MediumItalic"),
       url("/fonts/gothammediumitalic-webfont.woff2") format("woff2"),
       url("/fonts/gothammediumitalic-webfont.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: local("Gotham Bold"), local("Gotham-Bold"),
       url("/fonts/gothambold-webfont.woff2") format("woff2"),
       url("/fonts/gothambold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: local("Gotham Bold Italic"), local("Gotham-BoldItalic"),
       url("/fonts/gothambolditalic-webfont.woff2") format("woff2"),
       url("/fonts/gothambolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: local("Gotham Black"), local("Gotham-Black"),
       url("/fonts/gothamblack-webfont.woff2") format("woff2"),
       url("/fonts/gothamblack-webfont.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Base page styling (brand colors + font stack) */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Page background and default text color / body font */
body {
  margin-bottom: 60px;
  background-color: var(--princess-pearl);
  color: var(--princess-blue);
  font-family: "Gotham", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings / titles use Gotham Medium */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
  font-family: "Gotham", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--princess-blue);
  font-weight: 600;
}

/* Links and buttons — keep accessible contrast */
a, .btn, .nav-link {
  color: var(--princess-blue);
}

/* Override Bootstrap primary to use Princess Blue */
.btn-primary {
  background-color: var(--princess-blue) !important;
  border-color: var(--princess-blue) !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--princess-blue-dark) !important;
  border-color: var(--princess-blue-dark) !important;
  color: #ffffff !important;
}
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 24, 68, 0.25) !important;
}

/* Preserve existing focus styles but keep contrast with new background */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* --- Navbar adjustments to match page background and center logo when no nav items --- */

/* Make navbar match page background (override Bootstrap .bg-* if present) */
.navbar {
  background-color: var(--princess-pearl) !important;
  color: var(--princess-blue);
  border-color: transparent; /* remove visible border that contrasts with the page */
}

/* Ensure brand and nav links use the princess-blue color and maintain contrast */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-toggler {
  color: var(--princess-blue) !important;
}

/* If the navbar has no nav items (logged-out pages), center the brand/logo */
.navbar.no-nav-items > .container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* When centered, hide the (unused) navbar toggler to avoid odd layout on small screens */
.navbar.no-nav-items .navbar-toggler {
  display: none;
}

/* If you still want the navbar to keep spacing on larger screens, ensure collapse doesn't push things */
.navbar.no-nav-items .navbar-collapse {
  display: block !important;
}

/* Small visual tweak to footer border to match tone */
.footer {
  border-top-color: rgba(0, 24, 68, 0.08);
}

/* ------------------------------------------------------------------
   Accordion title styling: use Princess Blue background and white text
   Scoped to the option groups accordion (#optionGroupsAccordion) so
   other accordions are unaffected.
   ------------------------------------------------------------------ */
#optionGroupsAccordion .accordion-button {
  background-color: var(--princess-blue);
  color: #ffffff;
  border: none;
  /* Keep the default accordion chevron but ensure contrast */
  position: relative;
}
#optionGroupsAccordion .accordion-button.collapsed {
  /* Keep same colour when collapsed for consistent look */
  background-color: var(--princess-blue);
  color: #ffffff;
  opacity: 0.95;
}
#optionGroupsAccordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(0,24,68,0.25);
  color: #ffffff;
}
/* Make the caret / chevron visible (invert the default SVG) */
#optionGroupsAccordion .accordion-button::after {
  filter: invert(1) hue-rotate(180deg);
  opacity: 1;
}
/* Slight visual divider between header and content */
#optionGroupsAccordion .accordion-item + .accordion-item {
  margin-top: 0.25rem;
}
/* Ensure body has readable text against the blue header */
#optionGroupsAccordion .accordion-body {
  color: var(--princess-blue);
  background: white;
}

/* Small tweak to header padding to align with our design */
#optionGroupsAccordion .accordion-header .accordion-button {
  padding: 0.75rem 1rem;
  font-weight: 600;
}