/* ---------- Brand variables ---------- */
:root{
  --primary-blue:#0A4D68;
  --bg-light-steel:#F5F7FA;
  --text-gray:#6C757D;
  --accent-orange:#FF6700;
  --accent-teal:#00A99D;
}

/* ---------- Navbar states ---------- */
#header{
  transition:background-color .2s ease,box-shadow .2s ease,backdrop-filter .2s ease;
  background-color:#fff;
}
#header.transparent{background-color:transparent;box-shadow:none;backdrop-filter:none;}
#header.scrolled{
  background-color:rgba(255,255,255,.95);
  box-shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
  backdrop-filter:blur(8px);
}

/* ------------------ Mobile Navbar Text Fix ------------------ */

/* 1️⃣  Desktop behavior (unchanged)
   Keep white nav links when header is transparent at top.
   This only applies to large screens and above (≥1024 px). */
@media (min-width: 1024px) {
  #header:not(.scrolled) .nav-link {
    color: #F5F7FA;
  }
  #header:not(.scrolled) .nav-link:hover,
  #header:not(.scrolled) .nav-link.active {
    color: var(--accent-orange);
  }
}

/* 2️⃣  Mobile behavior (new)
   Always show dark text on white background in the mobile menu. */
#mobile-menu .nav-link {
  color: var(--primary-blue) !important; /* force dark text */
}
#mobile-menu .nav-link:hover,
#mobile-menu .nav-link.active {
  color: var(--accent-orange) !important; /* highlight color */
}

/* Optional: make burger icon visible even before scrolling */
#header:not(.scrolled) #mobile-menu-button {
  color: var(--primary-blue);
}

/* Link coloring on header states */
.nav-link.active{color:var(--accent-orange)!important;font-weight:700;}
#header.scrolled .nav-link{color:var(--primary-blue);}
#header.scrolled .nav-link:hover,
#header.scrolled .nav-link.active{color:var(--accent-orange);}
#header:not(.scrolled) .nav-link{color:#F5F7FA;}
#header:not(.scrolled) .nav-link:hover,
#header:not(.scrolled) .nav-link.active{color:var(--accent-orange);}
#header:not(.scrolled) #mobile-menu-button{color:#fff;}

/* ---------- Hero tint layering (homepage) ---------- */
.hero--tinted{position:relative;isolation:isolate;}
.hero--tinted .hero-bg{position:absolute;inset:0;z-index:-2;}
.hero--tinted::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 60% 40%,
    rgba(10,77,104,.25) 0%,
    rgba(10,77,104,.45) 40%,
    rgba(10,77,104,.65) 100%);
}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 2rem;border-radius:.5rem;font-weight:700;
  background-color:var(--accent-orange);color:#fff!important;
  box-shadow:0 8px 18px rgba(255,103,0,.22);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
}
.btn-primary:hover{opacity:.95;transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 10px rgba(255,103,0,.18);}
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 2rem;border-radius:.5rem;font-weight:700;
  background-color:#fff;color:var(--primary-blue)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
}
.btn-secondary:hover{opacity:.95;transform:translateY(-1px);}
.btn-secondary:active{transform:translateY(0);box-shadow:0 4px 10px rgba(0,0,0,.10);}
#header:not(.scrolled) .btn-primary{color:#fff!important}

/* ---------- Footer always blue ---------- */
footer.site-footer, footer{background-color:var(--primary-blue);color:#fff;}
footer.site-footer a{color:#e5ecff;}
footer.site-footer a:hover{color:var(--accent-orange);}

/* ---------- About page background ---------- */
body.about-page{background-color:var(--primary-blue);color:#f2f6fb;}

/* --- Card container like screenshot --- */
.form-card{
  display:block;
  background:#fff;
  border-radius:12px;
  padding:24px;
  box-shadow:0 10px 30px rgba(10,77,104,.06);
  max-width: 860px;
  margin: 0 auto;
}

/* --- Groups & labels --- */
.form-group{ margin-bottom:18px; }
.form-label{
  display:block; font-weight:700; color:#1f2937; /* gray-800 */
  margin-bottom:8px;
}
.form-label.required::after{
  content:" *"; color:#ef4444; /* red-500 */
}

/* --- Inputs: light blue outline, bigger padding --- */
.form-control{
  width:100%;
  background:#fff;
  border:1.5px solid #dbeafe;        /* blue-100 */
  border-radius:8px;
  padding:12px 14px;
  font-size:16px; line-height:24px;
  color:#111827;                      /* gray-900 */
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder{ color:#9ca3af; } /* gray-400 */
.form-control:focus{
  outline:none;
  border-color:#3b82f6;               /* blue-500 */
  box-shadow:0 0 0 3px rgba(59,130,246,.2);
}
textarea.form-control{ min-height:120px; resize:vertical; }

/* --- Select normalization --- */
select.form-control{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:20px 20px;
  padding-right:40px;
}

/* --- Dropzone like screenshot (dashed, light blue bg) --- */
.dropzone{
  display:flex; align-items:center; justify-content:center;
  min-height:120px; border:2px dashed #60a5fa;    /* blue-400 */
  border-radius:8px; background:#f0f7ff;          /* very light blue */
  color:#1f2937; text-align:center; padding:18px;
  cursor:pointer; transition: background-color .15s ease, border-color .15s ease;
}
.dropzone .dz-link{ color:#0ea5e9; text-decoration:underline; } /* sky-500 */
.dropzone:hover{ background:#eaf3ff; border-color:#3b82f6; }
.dropzone.is-dragover{ background:#e0efff; border-color:#2563eb; } /* blue-600 */
.dropzone p{ margin:0; font-size:14px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --- Hints & actions --- */
.input-hint{ font-size:13px; color:#6b7280; margin-top:6px; }
.form-actions{
  display:flex; gap:12px;
  justify-content:flex-start; align-items:center;
  margin-top:10px;
}

/* Buttons already defined earlier; ensure sizes here */
.btn-primary, .btn-secondary{ min-width: 160px; height: 44px; }