/* ===== Western Resource Group – Navy & Steel Gray theme =====
   Keep existing class names so no HTML changes are required.
   Palette (tweak if needed):
   --navy:        #1E2342
   --navy-700:    #151A33
   --steel:       #6B7A8F
   --steel-400:   #A7B2C0
   --steel-300:   #B9C3CF
   --offwhite:    #F5F6FA
   --ink:         #0F1224
==============================================================*/

:root{
  --navy: #1E2342;
  --navy-700:#151A33;
  --steel:#6B7A8F;
  --steel-400:#A7B2C0;
  --steel-300:#B9C3CF;
  --offwhite:#F5F6FA;
  --ink:#0F1224;

  --shadow-sm: 0 2px 6px rgba(0,0,0,.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,.25);
  --radius: 12px;
}

/* Base / Utilities -------------------------------------------------------- */
.bg-dark-custom{ background-color: var(--navy); color:#fff; }
.text-gold, .text-golden{ color: var(--navy-700) !important; } /* repurpose as steel accent */
.text-steel{ color: var(--steel) !important; }
.text-off{ color: var(--offwhite) !important; }
.bg-steel{ background-color: var(--steel) !important; }
.bg-off{ background-color: var(--offwhite) !important; }

/* Hero / Parallax --------------------------------------------------------- */
.parallax{
  background-image:url('../img/header.jpg');
  min-height:600px;
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  position:relative;
  isolation:isolate;
}
.bg-overlay{
  background:linear-gradient(
    to bottom,
    rgba(30,35,66,.78),
    rgba(30,35,66,.78)
  );
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  position:absolute; inset:0;
}

/* Buttons ----------------------------------------------------------------- */
.btn{
  font-size:1rem;
  padding:.6rem 1rem;
  border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:active{ transform:translateY(1px); }

/* Keep existing .btn-custom class but switch to Navy/Steel system */
.btn-custom {
    background-color: #b9c3cf;
    border: #b9c3cf;
    color: #1e2342;
    box-shadow: var(--shadow-sm);
}
.btn-custom:hover{
  background-color:var(--steel-400);
  color:#fff;
  box-shadow:var(--shadow-md);
}
.btn-custom:focus-visible{
  outline:3px solid var(--steel-400);
  outline-offset:2px;
}

/* Optional secondary look using steel */
.btn-steel{
  background-color:var(--steel);
  border:1px solid rgba(0,0,0,.2);
  color:#fff;
}
.btn-steel:hover{ background-color:#5E6C7F; }

/* Sections ---------------------------------------------------------------- */
.service-section{
  background-color:var(--offwhite);
  padding:80px 0;
}
.service-section h2{
  font-size:36px;
  font-weight:700;
  margin-bottom:40px;
  color:var(--navy);
}
.service-section p{
  font-size:18px;
  line-height:1.8;
  margin-bottom:30px;
  color:#2B3146; /* readable on off-white */
}
.service-section img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  box-shadow:0 0 20px rgba(0,0,0,.08);
}

/* Header / Navbar --------------------------------------------------------- */
header{ margin-top:0; padding-top:0; }

.navbar{
  padding-top:0;
  padding-bottom:.5rem;
  margin-bottom:-1px;
  background-color:var(--navy);
  box-shadow: var(--shadow-sm);
}
.navbar .navbar-brand,
.navbar .nav-link{ color:#fff; }

.navbar-nav .nav-link{
  transition:all .3s ease-in-out;
  font-size:1rem;
  padding:.4rem .8rem;
  border-radius:8px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  background-color:rgba(255,255,255,.06);
  color:#fff;
}
.navbar-brand{ font-size:1.5rem; }
.navbar-toggler{ font-size:1.2rem; }

/* Dropdowns / Mega menu --------------------------------------------------- */
.dropdown-menu-dark{
  background-color:var(--navy-700);
  color:#fff;
  border:1px solid rgba(255,255,255,.06);
}
.dropdown-menu-dark .dropdown-item{ color:#E8ECF4; }
.dropdown-menu-dark .dropdown-item:hover{
  background-color:rgba(255,255,255,.08);
  color:#fff;
}

.mega-menu{
  width:100%;
  left:0; right:0;
  padding:1rem;
  background-color:var(--navy-700);
  border-top:1px solid rgba(255,255,255,.08);
}
.mega-menu .dropdown-header{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:.5rem;
  color:var(--steel-300);
}
.mega-menu .dropdown-item{
  padding:.5rem 1rem;
  transition:background-color .3s ease-in-out;
  border-radius:8px;
}
.mega-menu .dropdown-item:hover{
  background-color:rgba(255,255,255,.06);
}

/* Links ------------------------------------------------------------------- */
a{ color:var(--steel-400); text-decoration:none; }
a:hover{ color:#C8D1DC; }

/* Media & Motion preferences ---------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  .navbar-nav .nav-link:hover{ transform:none; }
}

/* Optional helpers --------------------------------------------------------- */
.card-dark{
  background-color:var(--navy-700);
  color:#fff;
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
}
.hr-accent{
  height:2px;
  background:linear-gradient(90deg, transparent, var(--steel-400), transparent);
  border:0; margin:2rem 0;
}
