/* =========================================================
   Strivenix Job Manager — styling
   Same token system used across the rest of the site:
   DM Serif Text headings / DM Sans body, ink #182121,
   body/link #535757, accent mint #EAF5F0 / sage #CDE4D9,
   2px/4px radii, sage-tinted elevation shadow.
   ========================================================= */
.svx-jobs{
  --svxj-ink:#182121;
  --svxj-body:#535757;
  --svxj-accent-1:#EAF5F0;
  --svxj-accent-2:#CDE4D9;
  --svxj-accent-deep:#3F6B57;
  --svxj-line:#E2E7E4;
  --svxj-r-sm:2px;
  --svxj-r-md:4px;
  --svxj-shadow-sage: 0px 16px 40px -12px rgba(66,127,97,0.24);
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:500;
  color:var(--svxj-body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
.svx-jobs *{box-sizing:border-box;}
.svx-jobs h1,.svx-jobs h2,.svx-jobs h3,.svx-jobs h4,.svx-jobs h6{
  font-family:'DM Serif Text',Georgia,serif; font-weight:400; margin:0; color:var(--svxj-ink); line-height:1.15;
}
.svx-jobs h1{font-size:42px;}
.svx-jobs h2{font-size:30px;}
.svx-jobs h4{font-size:22px;}
.svx-jobs p{margin:0; color:var(--svxj-body); line-height:1.7; font-size:16px;}
.svx-jobs a{color:inherit; text-decoration:none;}
.svx-jobs ul{margin:0; padding:0; list-style:none;}
.svx-jobs :focus-visible{outline:2px solid var(--svxj-accent-deep); outline-offset:3px;}

.svxj-wrap{max-width:1100px; margin:0 auto; padding:0 32px;}
.svxj-narrow{max-width:760px;}
.svxj-section{padding:52px 0;}
.svxj-alt{background:#FAFCFB;}

.svxj-eyebrow{
  display:flex; align-items:center; gap:9px;
  font-family:'DM Sans',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:13px; letter-spacing:0.14em; color:var(--svxj-accent-deep); margin-bottom:14px;
}
.svxj-eyebrow::before{content:""; width:20px; height:2px; background:var(--svxj-accent-2); border-radius:2px; flex-shrink:0;}

.svxj-breadcrumb{max-width:1100px; margin:0 auto; padding:26px 32px 0; font-size:13.5px; color:var(--svxj-body); font-weight:500;}
.svxj-breadcrumb a:hover{color:var(--svxj-ink);}
.svxj-breadcrumb .sep{margin:0 8px; color:#B9C4C1;}
.svxj-breadcrumb .here{color:var(--svxj-ink); font-weight:700;}

/* ---------- Hero ---------- */
.svxj-hero{
  padding:24px 0 44px;
  background:radial-gradient(760px 340px at 84% -10%, rgba(205,228,217,0.45), transparent 60%), #fff;
  border-bottom:1px solid var(--svxj-line);
}
.svxj-hero h1{margin-bottom:18px; max-width:760px;}
.svxj-lead{font-size:17px; max-width:600px;}
.svxj-pill-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
.svxj-pill{
  font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  padding:7px 13px; border-radius:var(--svxj-r-sm); border:1px solid var(--svxj-line); color:var(--svxj-ink); background:#fff;
}
.svxj-pill-accent{background:var(--svxj-accent-1); border-color:var(--svxj-accent-2); color:var(--svxj-accent-deep);}
.svxj-hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Buttons — same mechanics as the main site ---------- */
.svxj-btn{
  font-family:'DM Sans',sans-serif; display:inline-flex; align-items:center;
  font-weight:700; text-transform:uppercase; letter-spacing:0.1em; font-size:14px; color:var(--svxj-ink);
  padding:14px 20px; border:1px solid var(--svxj-accent-2); border-radius:var(--svxj-r-sm);
  background:var(--svxj-accent-2); cursor:pointer;
  transition:background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease, transform .18s ease;
}
.svxj-btn:hover{background-color:var(--svxj-ink); border-color:var(--svxj-ink); color:#fff; box-shadow:var(--svxj-shadow-sage); transform:translateY(-2px);}
.svxj-arrow{display:inline-flex; margin-left:8px;}
.svxj-arrow svg{width:14px; height:14px;}
.svxj-btn-dark{background:var(--svxj-ink); color:#fff; border-color:var(--svxj-ink);}
.svxj-btn-dark:hover{background:var(--svxj-accent-2); border-color:var(--svxj-accent-2); color:var(--svxj-ink);}
.svxj-btn-mint{background:var(--svxj-accent-2); border-color:var(--svxj-accent-2); color:var(--svxj-ink);}
.svxj-btn-mint:hover{background:#fff; border-color:#fff; color:var(--svxj-ink);}
.svxj-btn-outline{background:transparent; border:2px solid var(--svxj-ink); color:var(--svxj-ink); border-radius:0; font-size:15px; letter-spacing:.02em;}
.svxj-btn-outline:hover{background:var(--svxj-accent-1); border-color:var(--svxj-accent-deep); color:var(--svxj-ink); box-shadow:none; transform:none;}
.svxj-btn-disabled{background:#EDEDED; border-color:#EDEDED; color:#9AA0A0; cursor:not-allowed;}
.svxj-btn-disabled:hover{transform:none; box-shadow:none;}

/* ---------- Info panel ---------- */
.svxj-info-panel{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--svxj-line); border:1px solid var(--svxj-line);
}
.svxj-info-item{background:#fff; padding:18px 20px; display:flex; flex-direction:column; gap:6px;}
.svxj-info-label{font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--svxj-accent-deep);}
.svxj-info-value{font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600; color:var(--svxj-ink);}

/* ---------- Prose (About the Role content) ---------- */
.svxj-prose{font-size:16px; line-height:1.75;}
.svxj-prose p{margin-bottom:1em;}
.svxj-prose ul, .svxj-prose ol{margin:0 0 1em 1.2em; padding:0;}

/* ---------- Checklist sections ---------- */
.svxj-section h2{margin-bottom:22px;}
.svxj-check-list{display:flex; flex-direction:column; gap:16px;}
.svxj-check-list li{display:flex; align-items:flex-start; gap:16px; font-size:15.5px; color:var(--svxj-body);}
.svxj-check{
  flex-shrink:0; width:28px; height:28px; border:1px solid var(--svxj-ink); border-radius:var(--svxj-r-sm);
  background:var(--svxj-accent-1); display:flex; align-items:center; justify-content:center; color:var(--svxj-ink);
}
.svxj-check svg{width:14px; height:14px;}

/* ---------- Apply / CTA band ---------- */
.svxj-cta-band{background:var(--svxj-ink); position:relative; overflow:hidden; padding:56px 0;}
.svxj-cta-band::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(205,228,217,0.22), transparent 70%); top:-200px; left:50%; transform:translateX(-50%);
}
.svxj-sub{color:#C7D3CE; font-size:15.5px; margin-bottom:28px; position:relative;}

.svxj-banner{border-radius:var(--svxj-r-sm); padding:16px 18px; margin-bottom:24px; font-size:14.5px; position:relative;}
.svxj-banner-success{background:var(--svxj-accent-2); color:var(--svxj-ink);}
.svxj-banner-error{background:#F6DCDC; color:#7A2222;}

.svxj-apply-form{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; background:#fff; border-radius:var(--svxj-r-md); padding:30px 28px;}
.svxj-field{display:flex; flex-direction:column; gap:7px;}
.svxj-field.svxj-full{grid-column:1 / -1;}
.svxj-field label{font-family:'DM Sans',sans-serif; font-weight:600; font-size:13.5px; color:var(--svxj-ink);}
.svxj-req{color:var(--svxj-accent-deep); margin-left:2px;}
.svxj-opt{color:var(--svxj-body); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; margin-left:4px;}
.svxj-field input[type="text"], .svxj-field input[type="email"], .svxj-field input[type="tel"], .svxj-field input[type="url"], .svxj-field textarea{
  font-family:'DM Sans',sans-serif; font-size:15px; color:var(--svxj-ink); background:#fff;
  border:1px solid var(--svxj-line); border-radius:var(--svxj-r-sm); padding:12px 14px; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.svxj-field textarea{resize:vertical; min-height:100px;}
.svxj-field input:focus, .svxj-field textarea:focus{outline:none; border-color:var(--svxj-accent-deep); box-shadow:0 0 0 3px rgba(63,107,87,0.14);}
.svxj-honeypot{position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; overflow:hidden;}

.svxj-file-drop{
  border:1.5px dashed var(--svxj-line); border-radius:var(--svxj-r-sm); padding:20px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; position:relative;
  transition:border-color .2s ease, background-color .2s ease;
}
.svxj-file-drop:hover{border-color:var(--svxj-accent-deep); background:var(--svxj-accent-1);}
.svxj-file-drop input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.svxj-file-drop svg{width:20px; height:20px; color:var(--svxj-accent-deep);}
.svxj-file-label{font-family:'DM Sans',sans-serif; font-weight:600; font-size:14px; color:var(--svxj-ink);}
.svxj-file-hint{font-size:12px; color:var(--svxj-body);}
.svxj-submit-row{grid-column:1 / -1; margin-top:4px;}

/* ---------- Archive: filter bar + job cards ---------- */
.svxj-filter-bar{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--svxj-line);}
.svxj-filter-field{display:flex; flex-direction:column; gap:7px;}
.svxj-filter-field label{font-family:'DM Sans',sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--svxj-accent-deep);}
.svxj-filter-field select{
  font-family:'DM Sans',sans-serif; font-size:14.5px; font-weight:600; color:var(--svxj-ink);
  border:1px solid var(--svxj-line); border-radius:var(--svxj-r-sm); padding:10px 34px 10px 14px; min-width:220px;
  appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23535757' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
.svxj-filter-count{font-size:13.5px; color:var(--svxj-body); margin-left:auto;}

.svxj-jobs-grid{display:grid !important; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) !important; gap:1px; background:var(--svxj-line); border:1px solid var(--svxj-line);}
.svxj-job-card{
  background:#fff; padding:26px 24px; display:flex; flex-direction:column; gap:14px; min-height:190px; min-width:0;
  transition:transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.svxj-job-card:hover{transform:translateY(-6px); background:var(--svxj-accent-1); box-shadow:var(--svxj-shadow-sage); z-index:1;}
.svxj-job-card-top{display:flex; gap:8px; flex-wrap:wrap;}
.svxj-tag{font-family:'DM Sans',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--svxj-accent-deep); background:var(--svxj-accent-1); border:1px solid var(--svxj-accent-2); padding:4px 10px; border-radius:99px;}
.svxj-tag-closed{color:#7A2222; background:#F6DCDC; border-color:#EFC5C5;}
.svxj-job-card h4{font-size:19px; line-height:1.3;}
.svxj-job-card-meta{display:flex; flex-wrap:wrap; gap:8px; font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:600; color:var(--svxj-body);}
.svxj-job-card-meta span:not(:last-child)::after{content:"·"; margin-left:8px; color:#B9C4C1;}
.svxj-job-card-arrow{margin-top:auto; display:flex; align-items:center; gap:8px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--svxj-accent-deep);}
.svxj-job-card-arrow svg{width:14px; height:14px; transition:transform .25s ease;}
.svxj-job-card:hover .svxj-job-card-arrow svg{transform:translateX(4px);}

.svxj-empty-state{text-align:center; padding:50px 20px; background:var(--svxj-alt); border:1px dashed var(--svxj-line); border-radius:var(--svxj-r-md);}
.svxj-empty-state p{margin-bottom:18px;}

.svxj-pagination{margin-top:36px; display:flex; justify-content:center; gap:10px;}
.svxj-pagination .page-numbers{
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:14px; color:var(--svxj-ink);
  border:1px solid var(--svxj-line); border-radius:var(--svxj-r-sm); padding:9px 14px;
}
.svxj-pagination .page-numbers.current{background:var(--svxj-ink); color:#fff; border-color:var(--svxj-ink);}
.svxj-pagination .page-numbers:hover:not(.current){border-color:var(--svxj-accent-deep); color:var(--svxj-accent-deep);}

@media (max-width:1000px){
  .svx-jobs h1{font-size:32px;}
  .svxj-info-panel{grid-template-columns:repeat(2,1fr);}
  .svxj-apply-form{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .svxj-wrap{padding:0 20px;}
  .svxj-info-panel{grid-template-columns:1fr;}
  .svxj-filter-count{margin-left:0;}
}
@media (prefers-reduced-motion: reduce){
  .svx-jobs *{transition:none !important;}
}