.welcome-page .logo {
  width: 64px;
}

.icon-banner {
  width: 32px;
}

.body-container {
  margin-top: 8px; /* reduced from 60px to bring content closer to navbar */
  padding-bottom: 40px;
}

/* Full-viewport background image (covers navbar and content) - only for login page */
body.login-bg {
  /* keep body itself transparent so the pseudo element shows through */
  background: transparent;
  color: inherit; /* keep default text color; individual elements can override for contrast */
}

body.login-bg::before {
  content: '';
  position: fixed;
  /* fill the viewport explicitly to avoid gaps on some UAs */
  inset: 0;
  z-index: 0; /* sit behind the page content but above the root background */
  background-image: url('../motorsuite.png');
  /* make the background 110% of the viewport to give a subtle overflow around edges */
  background-size: 110% 110%;
  /* anchor image to the bottom so the focal area remains visible when viewport height changes */
  background-position: center bottom;
  background-repeat: no-repeat;
  /* Use scroll attachment to avoid mobile quirks; element is fixed so behaviour is stable */
  background-attachment: scroll;

  /* Ensure the element is at least the viewport height and includes any device safe-area (home indicator) */
  height: auto;
  /* Prefer the runtime-updated pixel value (set by page JS). Add 10dvh so the background extends beyond the viewport to hide small gaps. */
  min-height: calc(var(--bg-height, 110dvh) + 10dvh);

  /* No transform scaling required since background-size does the work */
  transform: none;
  transform-origin: center bottom;

  /* keep the element non-interactive and force GPU compositing on some devices */
  pointer-events: none;
  will-change: transform;
}

/* On very large viewports you may optionally prefer the desktop fixed behaviour; enable if desired */
@media (min-width: 1200px) {
  body.login-bg::before {
    /* For wide desktop screens keep the background visually anchored to the viewport */
    background-attachment: fixed;
  }
}

/* Make html/body fill the viewport so measurements and 100vh fallbacks behave predictably */
:root {
  /* default fallback so CSS analysis tools are satisfied and browsers without JS have a reasonable height */
  --bg-height: 110dvh;
}
html, body {
  height: 100%;
  margin: 0; /* remove default browser body margin to avoid small gaps */
  background: transparent; /* ensure no white background shows through behind the pseudo-element */
  overflow-x: hidden; /* avoid horizontal scroll that can expose page background */
}

/* Keep the outer container transparent on the login page; use an inner panel for the overlay */
.login-bg .container.body-container {
  background: transparent; /* no white overlay here */
  padding: 0 !important; /* panel will provide padding; use !important to ensure override */
  margin-bottom: 0 !important; /* ensure no bottom gap */
}

/* Ensure any body-container elements on the login page have no bottom spacing */
body.login-bg .body-container,
body.login-bg .container.body-container {
  /* padding is already zeroed on the container selector above; avoid duplicating padding-bottom */
  margin-bottom: 0 !important;
}

/* Inner panel used by the login page — show the exact same background image as the body */
.login-bg .login-panel {
  /* Use the body's pseudo background; keep the panel transparent to avoid double-images and mobile misalignment */
  background: transparent !important;

  padding: 0.5rem 1.5rem; /* reduce top/bottom padding to bring content closer to navbar */
  border-radius: 8px;
  box-shadow: none;
  border: none;
  max-width: 720px;
  margin: 0.5rem auto; /* reduce top margin to minimise gap */
  background-clip: padding-box;
}

/* Mobile: show the body background through the panel for an exact match (better on mobile where fixed backgrounds are flaky) */
@media (max-width: 767px) {
  .login-bg .login-panel {
    background: transparent !important;
  }
}

/* keep inputs readable by giving them solid backgrounds */
.login-bg .login-panel .form-control {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #222;
}
.login-bg .login-panel .btn-secondary {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.08);
  color: #fff;
}

/* Force any login-page wrappers and bootstrap cards inside the login background to be transparent */
.login-bg .login-page,
.login-bg .login-page > div,
.login-bg .card,
.login-bg .card .card-body {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.welcome-page li {
  list-style: none;
  padding: 4px;
}

.logged-out-page iframe {
  display: none;
  width: 0;
  height: 0;
}

.grants-page .card {
  margin-top: 20px;
  border-bottom: 1px solid lightgray;
}
.grants-page .card .card-title {
  font-size: 120%;
  font-weight: bold;
}
.grants-page .card .card-title img {
  width: 100px;
  height: 100px;
}
.grants-page .card label {
  font-weight: bold;
}

/* Make the navbar transparent so the background shows through, but only on login page */
.login-bg .nav-page .navbar, .login-bg nav.navbar {
  background-color: transparent !important;
  border-bottom: none !important;
}

/* Ensure brand and nav links remain readable over the image (login page only) */
.login-bg .nav-page .navbar .navbar-brand, .login-bg nav.navbar .navbar-brand,
.login-bg .nav-page .navbar .nav-link, .login-bg nav.navbar .nav-link {
  color: #fff !important;
}

/* Small helper for the brand subtitle so it can sit closer to the title */
.brand-subtitle {
  margin-top: -0.25rem;
  margin-bottom: 0;
  display: block;
}

/* Ensure the direct children of body (nav, container, etc.) render above the pseudo background */
body.login-bg > * {
  position: relative !important;
  z-index: 2 !important;
}
#js-login-bg {
  z-index: -1 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
}

/* Strong fallback overrides to ensure no visible whitespace on login page */
/* This block is intentionally specific and uses !important to override any older/competing assets that may still be loaded. */
html, body { margin: 0 !important; padding: 0 !important; }
body.login-bg {
  min-height: var(--bg-height, 110dvh) !important;
  height: var(--bg-height, 110dvh) !important;
}
body.login-bg::before {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: var(--bg-height, 110dvh) !important;
  height: var(--bg-height, 110dvh) !important;
  /* match the intended 110% fill */
  background-size: 110% 110% !important;
  background-position: center bottom !important;
}
body.login-bg .body-container,
body.login-bg .container.body-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.custom-button{

    /* display and spacing so it behaves like a button */
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: .5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none; /* remove link underline */
    border-radius: 999px; /* pill */
    color: white !important;
    background-color: maroon !important;
    border: 1px solid maroon !important;
}

/* Make the login page sign-up button styling even more specific so it overrides other rules */
.login-page .login-panel a.custom-button,
.login-bg .login-page .login-panel a.custom-button {
    display: block; /* existing markup uses col-12 to make it full width; ensure block-level */
    width: 100%;
}