/* =========================
   Zetta Careers — page CSS
   ========================= */

/* Brand */
:root {
  --brand: #ff0033;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e6e7ea;
  --pill: #f8f9fa;
  --line-strong: #d6dbe5;
  --line-stronger: #cbd2df;
}

/* Reset bits */
body { background:#ffffff; color:var(--ink); }
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* =========================
   Hero Section
   ========================= */
.hero-with-bg{
  position:relative;
  background-image:url('/assets/zetta_recruit/images/businessman-using-digital-tablet.jpg');
  background-attachment: fixed;
  background-size:cover;            /* fill width */
  background-position:center 0;     /* similar framing to reference */
  background-repeat:no-repeat;
  min-height:80vh;                  /* tall, cinematic */
  display:flex;
  flex-direction:column;
  justify-content:space-between;    /* nav on top, content centered */
}
.hero-overlay{
  position:absolute; inset:0;
  background:#171b27; opacity:.60;
  pointer-events:none;
}
.ztr-hero *{z-index:1; }

/* Top nav inside hero */
.hero-nav{ padding-top:14px; }
.hero-nav-inner{
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand .logo{ height:60px; display:block; }

.hero-nav-inner ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:28px;
}
.hero-nav-inner a{
  color:#fff; font-weight:600; letter-spacing:.02em;
}
.hero-nav-inner a.muted{ color:rgba(255,255,255,.85); font-weight:500; }
.hero-nav-inner .sep{ color:rgba(255,255,255,.65); }
.menu-left a{ opacity:.95; }
.menu-left a.active,
.menu-left a:hover{ opacity:1; text-decoration:underline; text-underline-offset:6px; }

@media (max-width: 992px){
  .menu-left{ display:none; }
  .menu-right{ gap:16px; }
}

/* Centered hero copy */
.hero-center{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 auto; text-align:center; padding:20px 0 60px;
}
.hero-copy{ max-width:960px; margin:0 auto; padding:0 24px; color:#fff; }
.eyebrow{
margin-bottom: 16px;
    font-size: 1.125rem;
    line-height: 1.5;
}
.headline{
  font-size: 3rem;
    padding: 0;
    letter-spacing: .01em;
    line-height: 1.1;
    margin-bottom: 16px;
    position: relative;
    font-weight: 400;
}
.lede{
  font-size: 1.125rem;
    line-height: 1.5rem;
    margin-bottom: 0;
    padding: 0 3rem;
    font-weight: 400;
}

/* CTA button (red + hover lift) */
.btn-cta{
  background-color: #ff0033;
    border: 1px solid #ff0033;
    color: var(--white-color);
    border-radius: 4px;
    display: inline-block;
    margin-top: 40px;
    letter-spacing: .5px;
    padding: 12px 24px;
    opacity: 1;
    font-weight: 500;
    font-size: 1rem;
}
.btn-cta:hover{
  background-color: #ee0937;
  border: 1px solid #ee0937;
}

/* Bottom white fade (soft edge like reference) */
.hero-with-bg::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:26px;
  z-index:0;
}

/* =========================
   FILTERS (left column)
   ========================= */
.card .form-label { margin-bottom:.25rem; }
#clear-filters { width:100%; }
.form-select { border-color: var(--line); }

/* Checkbox groups */
.filter-group { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.filter-group:last-child { border-bottom: 0; padding-bottom: 0; }
.filter-list { max-height: 240px; overflow:auto; padding-right:6px; padding-left: 6px;}
.form-check { margin-bottom: .35rem; }
.form-check-input { cursor:pointer; }
.form-check-label { cursor:pointer; }

/* Filters panel box appearance */
aside .card { border:1px solid var(--line-strong) !important; box-shadow:none !important; border-radius:10px; }

/* =========================
   JOB LIST & CARDS (right)
   ========================= */
.text-muted{
  color: #171B27!important;
}

.job-card.card { border:1px solid var(--line-strong); transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease; cursor: pointer; border-radius:10px; background:#fff; }
.job-card.card:hover { background:#f5f6fa; border-color: var(--line-stronger); }
.job-title a { color:#ff0033 !important; font-weight: 600; }
.job-title a:hover { color:#d6002b !important; }
.job-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-work-experience{
  font-size: 13px;
}

.job-meta { display:flex; flex-wrap:wrap; gap:8px; }
.job-meta .badge{
  background:var(--pill); color:#111827;
  border:1px solid var(--line) !important;
  font-weight:500;
}

/* Layout helpers */
.badge.text-bg-light { background:#f4f5f7 !important; color:#111 !important; }

/* Search input with icon — clearer borders */
.ztr-search .input-group-text { background:#fff; border-color: var(--line-strong) !important; color:#5c6575; border-width:1.5px; }
.ztr-search .form-control { border-left:0; border-color: var(--line-strong) !important; border-width:1.5px; }
.ztr-search .form-control:focus { box-shadow:none; border-color: var(--line-stronger) !important; }

/* Responsive tweaks for cards grid if you later switch to multi-column */
@media (max-width: 576px){
  .job-meta { gap:6px; }
}

/* =========================
   Footer polish
   ========================= */
footer { background:#f5f6fa !important; color:#5c6575 !important; }
footer .text-muted { color:#5c6575 !important; }
footer a { color:#5c6575 !important; }
footer a:hover { text-decoration: underline; color:#5c6575 !important; }
footer .nav-link { color:#5c6575 !important; }

/* =========================
   App Font Awesome (minimal)
   ========================= */
@font-face {
  font-family: 'FontAwesome';
  src: url('/assets/zetta_recruit/fonts/fontawesome-webfont.eot');
  src: url('/assets/zetta_recruit/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
       url('/assets/zetta_recruit/fonts/fontawesome-webfont.woff') format('woff'),
       url('/assets/zetta_recruit/fonts/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.fa { display:inline-block; font: normal normal normal 25px/1 FontAwesome; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.fa-search:before { content: "\f002"; }
.fa-arrow-up:before { content: "\f062"; }

/* Back to top button */
.ztr-back-to-top{
  position: fixed; right: 24px; bottom: 24px; z-index: 1030;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgb(255, 0, 51); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  opacity:0; pointer-events:none; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
}
.ztr-back-to-top:hover{ background:#ff0033; color:#fff; opacity: 1.8 !important; }
.ztr-back-to-top.visible{ opacity:.8; pointer-events:auto; transform: translateY(0); }