/* Custom styles for the website */

:root {
  --bs-primary: #0772b8ff;
  --bs-primary-dark: #112746;
  --bs-primary-surface: #04568d;
  --bs-secondary: #8ad6ff;
  --bs-accent: #fff;
  --bs-primary-rgb: 7, 114, 184;
  --bs-primary-dark-rgb: 17, 39, 70;
  --bs-primary-surface-rgb: 4, 86, 141;
  --bs-secondary-rgb: 144, 224, 239;
  --bs-link-color: #ffffff;
  --bs-link-hover-color: #8ad6ff;
}

/*==========================
Main Navigation Custom Styles
========================= */

#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;

  /* Firefox fix */
  will-change: transform;
  transform: translateY(0);
}

/* Keep Bootstrap container normal */
#mainNav .container {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Push everything right by default */
}

/* Center logo absolutely */
#mainNav .navbar-brand {
  flex: 1 1 auto; /* Take remaining space */
  text-align: left;
  margin: 0;
}
/* Keep toggler on right */
#mainNav .navbar-toggler {
  flex: 0 0 auto;
}

/* Logo scaling (perfect proportions) */
.navbar-logo {
  height: clamp(48px, 6vw, 60px);
  width: auto;
  display: inline-block;
}

/* Nav links color */
#mainNav .nav-link {
  color: var(--bs-link-color) !important;
}

#mainNav .nav-link:hover {
  color: var(--bs-link-hover-color) !important;
}

section {
  scroll-margin-top: -20px;
}

/* Reduce navbar padding on small screens */
@media (max-width: 992px) {
  section {
    scroll-margin-top: -100px;
  }

  #mainNav {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
  }
  #mainNav .container {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
  }
}

/* firefox fix   */
@supports (-moz-appearance: none) {
  #mainNav {
    transform: translateZ(0);
  }
}

html {
  scroll-behavior: auto; /* Firefox smoother */
}

body {
  overflow-x: hidden;
}

/* Full Page Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 2000;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: all; /* Blocks clicks */
  user-select: none; /* Prevent text selection */
}

/* Thicker custom spinner */
.spinner-border {
  border-width: 0.6em; /* Default is 0.25em */
}

/* Disable scroll when loading */
.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* =========================================
Quote Form Custom Styles
========================================= */

/* Remove green success styling from optional fields */
#quote-form .form-control:valid,
#quote-form .form-select:valid {
  border-color: #ced4da;
  background-image: none;
  box-shadow: none;
}

/* Align validation messages to the left */
.invalid-feedback {
  text-align: left;
}

/* Force consistent focus style for all fields */
#quote-form .form-control {
  border-color: rgb(var(--bs-primary-rgb), 0.8) !important;
  border-width: 1.5px !important;
}

/* Force consistent focus style for all fields */
#quote-form .form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.4) !important;
}

#quote-form .form-floating > label {
  color: var(--bs-primary-dark) !important;
}

#quote-form input[type="file"] {
  color: var(--bs-primary-dark) !important;
}

#quote-form input[type="file"]::file-selector-button {
  color: var(--bs-primary-dark) !important;
}

/* Force consistent invalid style for all fields */
#quote-form.was-validated .form-control:invalid {
  border-color: var(--bs-danger) !important;
}

#quote-form.was-validated .form-control:invalid:focus {
  border-color: var(--bs-danger) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25) !important;
}

/* Phone link styles */
.phone-link {
  color: #212529; /* normal color (Bootstrap dark) */
  transition: color 0.2s ease-in-out;
}

.phone-link:hover {
  color: #0d6efd; /* blue hover color */
}

.phone-link-dark {
  color: var(--bs-primary-dark); /* normal color (Bootstrap dark) */
  transition: color 0.2s ease-in-out;
}

.phone-link-dark:hover {
  color: #0d6efd; /* blue hover color */
}