/* Custom site styles - minimal overrides for Bootstrap */

:root {
  --bs-border-color:#777777;
}
body {
  font-family: "Open Sans", sans-serif;
  --brand-blue:#0070F0;
}
.navbar {
  --bs-navbar-nav-link-padding-x:1.5rem;
  --bs-navbar-active-color:var(--brand-blue);

}
.navbar-nav {
  --bs-nav-link-color:#111111;
}
.nav-link {
  padding:15px 0px 0px 40px;
}











/* Special styling for verification code input */
.code-input-field {
  text-align: center;
  letter-spacing: 8px;
  font-size: 24px;
  font-weight: 600;
}

/* Role option cards styling */
.role-option-card {
  cursor: pointer;
  transition: all 0.2s;
}

.role-option-card:hover {
  border-color: #4A90E2 !important;
  background-color: #f8f9fa;
}

.role-option-card.selected {
  border-color: #4A90E2 !important;
  background-color: #e3f2fd;
}

.role-option-card .form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 0.125rem;
}

/* Communication options layout */
.communication-option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.communication-option .form-check {
  margin-bottom: 0;
}

.communication-option .form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 0;
}

.communication-option .form-check-label {
  min-width: 80px;
  margin-bottom: 0;
}

.communication-option .form-control {
  flex: 1;
}



/* Loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.75);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

.loading-overlay:not(.d-none) {
  opacity: 1;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.loading-spinner img {
  width: 80px;
  height: 80px;
}

footer .nav-item { font-size:.90rem; }
footer .nav-item a {color:#ddd;}
footer .nav-item a:hover{color:#fff;}
footer { background-color:#223355; color:#DDD;}


.hero-section {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%), url('../img/hero_background2.png');
  background-size: cover;
  background-position: center;
  min-height: 500px;
}

@media (min-width: 992px) {
  .hero-section {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 1) 100%), url('../img/hero_background2.png');
    background-position: top;
  }
}