:root{
  --jx-primary:#C49B3E;
  --jx-accent:#0D1B2A;
  --jx-secondary:#F5EFE6;
  --jx-highlight:#E85D04;
  --jx-text:#1B1B1B;
}
.btn-primary{
  --bs-btn-bg: var(--jx-accent);
  --bs-btn-border-color: var(--jx-accent);
  --bs-btn-hover-bg: #0a1520;
  --bs-btn-hover-border-color:#0a1520;
}
.btn-outline-primary{
  --bs-btn-color: var(--jx-accent);
  --bs-btn-border-color: var(--jx-accent);
  --bs-btn-hover-bg: var(--jx-accent);
  --bs-btn-hover-border-color: var(--jx-accent);
  --bs-btn-hover-color: #fff;
}
.text-primary{ color: var(--jx-accent)!important; }
.bg-primary{ background-color: var(--jx-accent)!important; }
.bg-secondary{ background-color: var(--jx-secondary)!important; }
.link-primary{ color: var(--jx-accent)!important; }

/* === Footer Styling === */
footer {
  background-color: var(--jx-primary); /* the goldish color from the logo */
  color: #111;
}

footer .jx-muted {
  color: rgba(0, 0, 0, 0.7) !important;
}

footer a {
  color: #111 !important;
  font-weight: 500;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

.navbar-brand svg { margin-right:.4rem }
.card{ border-radius: .75rem }
.form-control, .form-select{ border-radius:.6rem }
.section-pad{ padding: 4rem 0 }
@media (min-width:992px){ .hero-col{ padding-right:3rem } }

/* === JobAxis Hero Section === */
.jx-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 65vh;
  color: #fff;
  background: #0D1B2A url('/assets/img/hero-bg.jpg') center center / cover no-repeat;
  overflow: hidden;
}

@media (min-width: 992px) {
  .jx-hero {
    min-height: 75vh;
  }
}

/* Overlay gradient for readability */
.jx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(13, 27, 42, 0.85) 0%,
    rgba(13, 27, 42, 0.6) 40%,
    rgba(196, 155, 62, 0.25) 100%
  );
  z-index: 0;
}

.jx-hero .container {
  position: relative;
  z-index: 1;
}

.jx-hero .lead {
  color: #f0f3f6;
}

.jx-hero .btn-outline-light {
  border-color: #fff;
  color: #fff;
}

.jx-hero .btn-outline-light:hover {
  background-color: #fff;
  color: #0D1B2A;
}
/* Highlighted Hire Talent button */
.jx-hero .btn-primary {
  border: 2px solid var(--jx-primary) !important;
  background-color: var(--jx-accent);
  color: #fff;
  transition: all 0.3s ease;
}

.jx-hero .btn-primary:hover {
  background-color: var(--jx-primary);
  color: #0D1B2A;
  border-color: var(--jx-primary);
  box-shadow: 0 0 12px rgba(196,155,62,0.5);
}
/* subtle confirmation glow after saving */
form[action="/seeker/profile"].saved-okay {
  box-shadow: 0 0 0 .35rem rgba(40, 167, 69, .35);
  border-radius: .75rem;
}

/* more obvious: glow the whole card that contains the form */
.card.jx-saved-glow {
  box-shadow: 0 0 0 .35rem rgba(40, 167, 69, .35), 0 .25rem 1rem rgba(0,0,0,.06) !important;
  transition: box-shadow .3s ease;
}

/* Prevent any rare horizontal overflow from nested flex/rows */
.row > [class*="col-"] { min-width: 0; }

/* Make sure form controls never overflow */
.form-control, .form-select, textarea { max-width: 100%; }

/* Extra breathing room on small screens */
@media (max-width: 575.98px) {
  .section-pad { padding: 2.5rem 0; }
  .card.p-4 { padding: 1.25rem !important; }
}

/* Ensure flex children can actually truncate */
.min-w-0 { min-width: 0; }

/* Apply LTR only to certain inputs even in RTL pages */
[dir="rtl"] input[ name="email"],
[dir="rtl"] input[ name="phone_e164"],
[dir="rtl"] input[ name="whatsapp"] { direction: ltr; text-align: left; }