/* ================================================================
   JFAssociates, Inc. — Custom Styles
   Extends Bootstrap 5.3.3 · Icons 1.11.3 · Inter font
   ================================================================ */

/* ── Theme Overrides ─────────────────────────────────────────── */
body { font-family: 'Inter', sans-serif; }
:root {
  --bs-primary: #99332f;
  --bs-primary-rgb: 153, 51, 47;
  --bs-link-color: #99332f;
  --bs-link-color-rgb: 153, 51, 47;
}
.btn-primary {
  --bs-btn-bg: #99332f;
  --bs-btn-border-color: #99332f;
  --bs-btn-hover-bg: #7a2622;
  --bs-btn-hover-border-color: #7a2622;
  --bs-btn-active-bg: #6a1f1c;
  --bs-btn-focus-shadow-rgb: 153, 51, 47;
}
.btn-outline-primary {
  --bs-btn-color: #99332f;
  --bs-btn-border-color: #99332f;
  --bs-btn-hover-bg: #99332f;
  --bs-btn-hover-border-color: #99332f;
  --bs-btn-active-bg: #99332f;
  --bs-btn-active-border-color: #99332f;
}
.btn-outline-light:hover { background-color: rgba(255,255,255,.1); }

/* ── Sizes ───────────────────────────────────────────────────── */
.icon-dot { width:  8px; height:  8px; }
.icon-36  { width: 36px; height: 36px; }
.icon-38  { width: 38px; height: 38px; }
.icon-40  { width: 40px; height: 40px; }
.icon-46  { width: 46px; height: 46px; }
.icon-52  { width: 52px; height: 52px; }
.icon-54  { width: 54px; height: 54px; }
.icon-56  { width: 56px; height: 56px; }

/* ── Fixed heights ───────────────────────────────────────────── */
.h-accent      { height:  5px; }
.h-logo        { height: 44px; width: auto; }
.h-img         { height: 420px; }
.h-img-lg      { height: 480px; }

/* ── Typography ─────────────────────────────────────────────── */
.text-xxs  { font-size: 9px;  letter-spacing: 2px;   }
.text-xs-ic{ font-size: 10px; }
.text-11   { font-size: 11px; }
.lbl-tight { font-size: 11px; letter-spacing:  .5px; }
.lbl-med   { font-size: 11px; letter-spacing: 1px;   }
.lbl-wide  { font-size: 11px; letter-spacing: 1.5px; }
.lbl-xwide { font-size: 11px; letter-spacing: 2px;   }
.stat-lbl  { font-size: 12px; letter-spacing: 1px;   }
.text-13   { font-size: 13px; }
.text-15   { font-size: 15px; }

/* ── Layout ─────────────────────────────────────────────────── */
.lead-max  { max-width: 560px; }
.intro-max { max-width: 520px; line-height: 1.8; }
.chip-md   { min-width: 120px; }
.chip-lg   { min-width: 110px; }

/* ── Section backgrounds ────────────────────────────────────── */
.section-subtle { background: #f0f4f8; }
.card-glass     { background: rgba(255,255,255,.08); }
.badge-bg       { background: rgba(153,51,47,.15); }
.badge-bg-green { background: rgba(25,135,84,.15); }

/* ── Hero overlays ──────────────────────────────────────────── */
.overlay-maroon { background: linear-gradient(120deg,rgba(10,20,40,.93) 50%,rgba(153,51,47,.30) 100%); }
.overlay-home   { background: linear-gradient(120deg,rgba(10,20,40,.92) 55%,rgba(153,51,47,.35) 100%); }
.overlay-green  { background: linear-gradient(120deg,rgba(5,25,10,.93)  50%,rgba(25,135,84,.35) 100%); }

/* ── CTA gradients ──────────────────────────────────────────── */
.cta-maroon { background: linear-gradient(135deg,#0d1b2a 60%,#7a2622 100%); }
.cta-green  { background: linear-gradient(135deg,#051e0f 60%,#146c43 100%); }

/* ── Hero section backgrounds (one per service page) ────────── */
.hero-bg-home {
  min-height: 100vh;
  background-color: #0a1428;
  background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1800&q=80');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-bg-ergonomics {
  min-height: 480px;
  background-color: #0a1428;
  background-image: url('https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=1600&q=80');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-bg-safety {
  min-height: 480px;
  background-color: #0a1428;
  background-image: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1600&q=80');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-bg-job-analysis {
  min-height: 480px;
  background-color: #0a1428;
  background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1600&q=80');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-bg-time-study {
  min-height: 480px;
  background-color: #0a1428;
  background-image: url('https://images.unsplash.com/photo-1495364141860-b0d03eccd065?w=1600&q=80');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-bg-process {
  min-height: 480px;
  background-color: #0a1428;
  background-image: url('https://images.unsplash.com/photo-1611532736597-de2d4265fba3?w=1600&q=80');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-bg-test-eval {
  min-height: 480px;
  background-color: #0a1428;
  background-image: url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1600&q=80');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-bg-experience {
  min-height: 480px;
  background-color: #0a1428;
  background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1600&q=80');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ── Clients hero ───────────────────────────────────────────── */
.hero-bg-clients {
  min-height: 480px;
  background-color: #0a1428;
  background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600&q=80');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ── Testimonials carousel ──────────────────────────────────── */
#testimonialsCarousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.35;
  border: none;
}
#testimonialsCarousel .carousel-indicators .active {
  opacity: 1;
}
#testimonialsCarousel .carousel-control-prev,
#testimonialsCarousel .carousel-control-next {
  width: auto;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
}

/* ── Logo ticker carousel ───────────────────────────────────── */
.logo-ticker {
  overflow: hidden;
  padding: 12px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logo-ticker-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: ticker-left 35s linear infinite;
}
.logo-ticker-track.logo-ticker-reverse {
  animation-name: ticker-right;
  animation-duration: 40s;
}
.logo-ticker-track:hover {
  animation-play-state: paused;
}
.logo-ticker-item {
  flex-shrink: 0;
}
.logo-ticker-item img {
  height: 52px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.logo-ticker-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
}
@keyframes ticker-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes ticker-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ── Client logo grid cards ─────────────────────────────────── */
.logo-card {
  transition: box-shadow .25s ease, transform .25s ease;
  border: 1px solid #f0f0f0;
}
.logo-card:hover {
  box-shadow: 0 8px 28px rgba(153,51,47,.12) !important;
  transform: translateY(-3px);
}
.logo-card-img-wrap {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-card-img {
  max-height: 60px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  filter: grayscale(30%);
  transition: filter .3s ease, transform .3s ease;
}
.logo-card:hover .logo-card-img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* ── Missing icon size ───────────────────────────────────────── */
.icon-48  { width: 48px; height: 48px; }

/* ── Ergonomics tab navigation ───────────────────────────────── */
.ergo-tab-nav {
  background: #f1f3f5;
  border-radius: 1rem;
  padding: 5px;
  border: none;
  flex-wrap: wrap;
  gap: 3px;
}
.ergo-tab-nav .nav-item { flex-shrink: 0; }
.ergo-tab-nav .nav-link {
  border: none;
  border-radius: .75rem;
  color: #495057;
  font-weight: 500;
  font-size: .85rem;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  padding: .5rem .9rem;
  white-space: nowrap;
}
.ergo-tab-nav .nav-link:hover {
  background: rgba(153,51,47,.10);
  color: #99332f;
}
.ergo-tab-nav .nav-link.active {
  background: #99332f;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(153,51,47,.35);
}
.ergo-tab-nav-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ergo-tab-nav-scroll::-webkit-scrollbar { display: none; }
.ergo-tab-pane-wrap {
  background: #f8f9fa;
  border-radius: 1.25rem;
  padding: 2.25rem;
  margin-top: 1rem;
}
@media (max-width: 767.98px) {
  .ergo-tab-pane-wrap { padding: 1.25rem; }
}

/* ── Stats bar separator ─────────────────────────────────────── */
.stats-sep {
  width: 1px;
  background: rgba(255,255,255,.2);
  height: 48px;
  align-self: center;
}

/* ── Hover-lift cards ────────────────────────────────────────── */
.card-lift {
  transition: box-shadow .25s ease, transform .25s ease;
}
.card-lift:hover {
  box-shadow: 0 8px 28px rgba(153,51,47,.14) !important;
  transform: translateY(-3px);
}

/* ── Case type cards ─────────────────────────────────────────── */
.case-type-card {
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
  cursor: default;
}
.case-type-card:hover {
  background: rgba(153,51,47,.06) !important;
  box-shadow: 0 4px 14px rgba(153,51,47,.12) !important;
  transform: translateY(-2px);
}

/* ── Process step connector ──────────────────────────────────── */
.process-step-num {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #99332f;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Achievement result item ─────────────────────────────────── */
.result-item {
  background: #fff;
  border-left: 4px solid #99332f;
  border-radius: .5rem;
  padding: .75rem 1rem;
  transition: box-shadow .2s ease;
}
.result-item:hover {
  box-shadow: 0 4px 14px rgba(153,51,47,.12);
}

/* ── CTA banner ──────────────────────────────────────────────── */
.cta-ergo {
  background: linear-gradient(135deg, #0d1b2a 55%, #7a2622 100%);
}

/* ── Navbar dropdown ────────────────────────────────────────── */
.dropdown-menu { border-radius: .75rem !important; }
.dropdown-item { font-weight: 500; font-size: .9rem; border-radius: .5rem; margin: 1px 6px; width: calc(100% - 12px); }
.dropdown-item:hover,
.dropdown-item:focus  { background-color: rgba(153,51,47,.08); color: #99332f; }
.dropdown-item.active,
.dropdown-item:active { background-color: #99332f; color: #fff; }
