/* Core hire HR • Mobile-first, responsive, optimized
   - Fluid type & spacing
   - Crisp cards & gradients
   - Mobile navbar: full-width slide panel w/ blur, large tap targets
*/

/* ===== CSS Variables & Base ===== */
:root{
  --brand-primary:#1E4DFF;
  --brand-accent:#19C6A2;
  --brand-ink:#0c1220;
  --brand-bg:#F6F9FF;

  --radius-lg: 18px;
  --shadow-sm: 0 8px 24px rgba(2,6,23,.06);
  --shadow-md: 0 12px 32px rgba(2,6,23,.10);

  /* Fluid typography (clamp) */
  --step--1: clamp(0.85rem, 0.78rem + 0.3vw, 1rem);
  --step-0:  clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.05rem + 0.6vw, 1.25rem);
  --step-2:  clamp(1.25rem, 1.1rem + 1vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.3rem + 1.5vw, 1.875rem);
  --step-4:  clamp(1.875rem, 1.6rem + 2vw, 2.5rem);
  --step-5:  clamp(2.25rem, 1.8rem + 3vw, 3rem);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

html{ scroll-behavior:smooth; }
body{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  color: var(--brand-ink);
  background: var(--brand-bg);
  font-size: var(--step-0);
  line-height: 1.6;
}

/* ===== Buttons & Utilities ===== */
.btn-brand{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--brand-primary);
  --bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-bg:#1842de;
  --bs-btn-hover-border-color:#1842de;
  --bs-btn-focus-shadow-rgb:30,77,255;
}
.text-accent{ color:var(--brand-accent)!important; }
.badge-soft{ background: rgba(25,198,162,.12); color:var(--brand-accent); }
.rounded-xl{ border-radius: 24px; }

/* ===== Hero & Backgrounds ===== */
.bg-soft{
  background:
    radial-gradient(60rem 30rem at 10% 0%, rgba(30,77,255,.10), transparent 40%),
    radial-gradient(50rem 25rem at 90% 20%, rgba(25,198,162,.12), transparent 50%),
    var(--brand-bg);
}

.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(40rem 20rem at 30% -10%, rgba(30,77,255,.12), transparent 40%),
    radial-gradient(30rem 15rem at 80% 10%, rgba(25,198,162,.16), transparent 45%);
}
.hero .blob{
  position:absolute; inset:auto; z-index:0; filter: blur(80px);
  width: 420px; height: 320px; border-radius:50%;
  background: radial-gradient(circle, rgba(30,77,255,.25), rgba(25,198,162,.15));
  bottom: -80px; right: -60px; opacity:.55;
}

.section{ padding: clamp(48px, 5vw, 72px) 0; }

/* ===== Cards & Feature blocks ===== */
.card-feature{
  border:1px solid rgba(17,25,40,.08);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  border-radius: var(--radius-lg);
  background:#fff;
}
.card-feature:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }

.icon-circle{
  width:56px; height:56px; display:inline-grid; place-items:center;
  border-radius:14px; background: rgba(30,77,255,.08);
  color: var(--brand-primary); font-size: 24px;
}

/* ===== Footer ===== */
.footer{
  background:#0b0f1a; color:#b6c2e0;
}
.footer a{ color:#e6eeff; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

/* ===================================================================
   NAVBAR — Mobile-first enhancement (keeps Bootstrap collapse markup)
   =================================================================== */
.navbar{
  --nav-height: 64px;
  min-height: var(--nav-height);
  transition: box-shadow .2s ease, background-color .2s ease;
  background: #fff;
}
.navbar-brand img{ height: 40px; }
.navbar .btn-brand{ padding: .55rem .9rem; border-radius: 12px; }

/* Toggler: bigger tap target */
.navbar-toggler{
  padding:.6rem .8rem; border-radius:12px;
  border:1px solid rgba(12,18,32,.12);
}
.navbar-toggler:focus{ box-shadow: 0 0 0 .15rem rgba(30,77,255,.25); }

/* Collapse panel styles (mobile) */
@media (max-width: 991.98px){
  .navbar .navbar-collapse{
    position: fixed;
    inset: var(--nav-height) 0 auto 0;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(12,18,32,.08);
    padding: 12px 16px 24px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .navbar .navbar-collapse.show{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Lock body scroll when menu open (pure CSS trick) */
  body:has(.navbar .navbar-collapse.show){
    overflow: hidden;
    touch-action: none;
  }

  .navbar .nav-link{
    padding: 14px 6px;
    font-size: var(--step-1);
    border-bottom: 1px solid rgba(12,18,32,.06);
  }
  .navbar .nav-item:last-child .nav-link{ border-bottom:none; }

  .navbar .btn.btn-brand{
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    font-weight: 600;
    border-radius: 14px;
  }
}

/* Desktop nav spacing */
@media (min-width: 992px){
  .navbar .nav-link{
    padding: .5rem .25rem;
    margin: 0 .35rem;
    font-size: var(--step-0);
  }
  .navbar .nav-link.active,
  .navbar .nav-link:hover{
    color: var(--brand-primary);
  }
}

/* Optional: subtle shadow when page is scrolled (class toggled by JS) */
.navbar.is-scrolled{ box-shadow: 0 8px 24px rgba(2,6,23,.06); }

/* ===== Images & Media ===== */
img, svg, picture, video{ max-width:100%; height:auto; }
.ratio > iframe{ border:0; }

/* ===== Responsive tweaks for sections ===== */
@media (max-width: 991.98px){
  .display-5{ font-size: var(--step-4) !important; }
  h1{ font-size: var(--step-4); }
  h2{ font-size: var(--step-3); }
  .section .lead{ font-size: var(--step-1); }
  .card-feature{ border-radius: 16px; }
}

/* Tighten gutters on very small screens */
@media (max-width: 575.98px){
  .container{ padding-left: 1rem; padding-right: 1rem; }
  .navbar-brand img{ height: 36px; }
}

/* ===== Focus styles (accessibility) ===== */
:focus-visible{
  outline: 3px solid rgba(30,77,255,.35);
  outline-offset: 2px;
}

/* ===== Dark scheme hint (helps mobile browsers choose UI) ===== */
:root{ color-scheme: light; }



/* ===== MOBILE NAVBAR FIX (keep toggler visible, no wrapping) ===== */

/* Keep header single-row, shrink gaps */
.navbar .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:.4rem; flex-wrap:nowrap;
}

/* Brand: allow ellipsis + hide tagline on xs */
.navbar-brand{ display:flex; align-items:center; gap:.45rem; min-width:0; }
.navbar-brand img{ height:36px; }
.navbar-brand > div{ min-width:0; line-height:1; }
.navbar-brand > div strong{
  font-size: clamp(.98rem, 2.4vw, 1.12rem);
  max-width: 52vw;                 /* keep room for the X */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 575.98px){
  .navbar-brand > div small{ display:none; } /* hide tagline on phones */
}

/* Toggler: always on top + compact */
.navbar-toggler{
  position:relative; z-index:1042; /* sits above the sliding panel */
  padding:.55rem .7rem; border-radius:12px;
  border:1px solid rgba(12,18,32,.12);
  background:#fff;
}
.navbar .navbar-collapse{ z-index:1040; }  /* panel below toggler */

/* When menu is open on mobile: hide brand text to free space (logo stays) */
@media (max-width: 991.98px){
  .navbar:has(.navbar-collapse.show) .navbar-brand > div strong,
  .navbar:has(.navbar-collapse.show) .navbar-brand > div small{
    display:none;
  }

  /* Slide panel stays under sticky bar */
  .navbar .navbar-collapse{
    position: fixed;
    inset: var(--nav-height,64px) 0 auto 0;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(12,18,32,.08);
    padding: 12px 16px 24px;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .navbar .navbar-collapse.show{
    transform: translateY(0);
    opacity: 1; visibility: visible;
  }

  /* Menu items: single line, big tap area */
  .navbar .nav-link{
    padding: 14px 6px;
    font-size: clamp(1rem, 0.9rem + 1.2vw, 1.15rem);
    white-space: nowrap;
    border-bottom: 1px solid rgba(12,18,32,.06);
  }
  .navbar .nav-item:last-child .nav-link{ border-bottom:none; }

  /* CTA inside panel: full width but compact */
  .navbar .btn.btn-brand{
    display:block; width:100%; margin-top:8px;
    padding: 12px 14px; border-radius:14px; white-space:nowrap;
  }
}

/* Optional: show a clear X when expanded, hamburger when collapsed */
.navbar-toggler .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%230c1220' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 4a.75.75 0 011.06 0L8 8.44l4.44-4.44a.75.75 0 111.06 1.06L9.06 9.5l4.44 4.44a.75.75 0 11-1.06 1.06L8 10.56l-4.44 4.44a.75.75 0 01-1.06-1.06L6.94 9.5 2.5 5.06A.75.75 0 012.5 4z'/%3E%3C/svg%3E");
}
.navbar-toggler.collapsed .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%230c1220' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3.75a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H2.25a.75.75 0 01-.75-.75zm0 4.25a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H2.25a.75.75 0 01-.75-.75zm0 4.25a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H2.25a.75.75 0 01-.75-.75z'/%3E%3C/svg%3E");
}



/* ===== Fix: hamburger by default, X only when open ===== */

/* HAMBURGER (default) */
.navbar .navbar-toggler .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%230c1220' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3.75a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H2.25a.75.75 0 01-.75-.75zm0 4.25a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H2.25a.75.75 0 01-.75-.75zm0 4.25a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H2.25a.75.75 0 01-.75-.75z'/%3E%3C/svg%3E") !important;
}

/* X only when the button is expanded (Bootstrap toggles aria-expanded) */
.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%230c1220' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 4a.75.75 0 011.06 0L8 8.44l4.44-4.44a.75.75 0 111.06 1.06L9.06 9.5l4.44 4.44a.75.75 0 11-1.06 1.06L8 10.56l-4.44 4.44a.75.75 0 01-1.06-1.06L6.94 9.5 2.5 5.06A.75.75 0 012.5 4z'/%3E%3C/svg%3E") !important;
}