/* Everpeak Visuals Careers - Workday-style corporate careers site */

:root{
  --wd-blue:#0875e1;
  --wd-blue-dark:#005cb9;
  --wd-navy:#1a2233;
  --wd-text:#21242c;
  --wd-gray:#5c6570;
  --wd-border:#d3d7dc;
  --wd-bg:#f4f6f8;
  --wd-bg-panel:#eef3fa;
  --wd-white:#ffffff;
  --wd-red:#c9202f;
  --radius:4px;
}

*{ box-sizing:border-box; }

html{ height:100%; }

body{
  margin:0;
  background:var(--wd-bg);
  color:var(--wd-text);
  font-family:"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:14px;
  line-height:1.55;
  min-height:100%;
  display:flex;
  flex-direction:column;
}

a{ color:var(--wd-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------------- Top bar ---------------- */
.topbar{
  background:var(--wd-navy);
  color:#cfd6e2;
  font-size:12px;
}
.topbar .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:34px;
}
.topbar a{ color:#cfd6e2; margin-left:18px; }
.topbar a:hover{ color:#ffffff; }

/* ---------------- Header ---------------- */
header.site-header{
  background:var(--wd-white);
  border-bottom:1px solid var(--wd-border);
}
header.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
}
.logo{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.logo .company{
  font-size:19px;
  font-weight:700;
  color:var(--wd-navy);
}
.logo .divider{
  color:var(--wd-border);
}
.logo .site-label{
  font-size:14px;
  color:var(--wd-gray);
}
nav.main-nav a{
  margin-left:26px;
  font-size:13px;
  font-weight:600;
  color:var(--wd-text);
}
nav.main-nav a.active{
  color:var(--wd-blue);
  border-bottom:2px solid var(--wd-blue);
  padding-bottom:20px;
}
.accent-bar{
  height:3px;
  background:var(--wd-blue);
}

/* ---------------- Breadcrumb ---------------- */
.breadcrumb{
  font-size:12px;
  color:var(--wd-gray);
  padding:14px 0;
}
.breadcrumb a{ color:var(--wd-gray); }
.breadcrumb a:hover{ color:var(--wd-blue); }
.breadcrumb .sep{ margin:0 6px; color:#aeb4bc; }
.breadcrumb .current{ color:var(--wd-text); font-weight:600; }

/* ---------------- Search hero ---------------- */
.search-hero{
  background:var(--wd-bg-panel);
  border-bottom:1px solid var(--wd-border);
  padding:34px 0;
}
.search-hero h2{
  margin:0 0 6px;
  font-size:24px;
  color:var(--wd-navy);
}
.search-hero p{
  margin:0 0 20px;
  color:var(--wd-gray);
  font-size:14px;
}
.search-bar{
  display:flex;
  gap:10px;
  background:var(--wd-white);
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  padding:6px;
  max-width:760px;
}
.search-bar input{
  flex:1;
  border:none;
  padding:11px 12px;
  font-size:14px;
  font-family:inherit;
  outline:none;
}
.search-bar .divider-v{
  width:1px;
  background:var(--wd-border);
  margin:6px 0;
}
.search-bar button{
  background:var(--wd-blue);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  padding:0 26px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.search-bar button:hover{ background:var(--wd-blue-dark); }

/* ---------------- Main layout: sidebar + results ---------------- */
.job-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:28px;
  padding:28px 0 60px;
}

.filters{
  background:var(--wd-white);
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  padding:20px;
  align-self:start;
}
.filters h3{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--wd-navy);
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--wd-border);
}
.filter-group{ margin-bottom:22px; }
.filter-group h4{
  font-size:12.5px;
  font-weight:700;
  color:var(--wd-text);
  margin:0 0 10px;
}
.filter-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--wd-gray);
  margin-bottom:8px;
}
.filter-option input{ accent-color:var(--wd-blue); }
.filter-option .count{ color:#a2a9b0; margin-left:auto; font-size:12px; }

.results{ min-width:0; }
.results-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--wd-border);
}
.results-header .count{
  font-size:16px;
  font-weight:700;
  color:var(--wd-navy);
}
.results-header .sort{
  font-size:12.5px;
  color:var(--wd-gray);
}

.job-row{
  display:block;
  background:var(--wd-white);
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:12px;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.job-row:hover{
  box-shadow:0 1px 6px rgba(0,0,0,0.08);
  border-color:#b9c2cc;
}
.job-row .job-title{
  font-size:16px;
  font-weight:700;
  color:var(--wd-blue);
  margin-bottom:6px;
  display:block;
}
.job-row .job-title:hover{ text-decoration:underline; }
.job-row .job-meta{
  font-size:12.5px;
  color:var(--wd-gray);
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
}
.job-row .job-meta span{ display:inline-flex; align-items:center; gap:5px; }
.job-row .job-tags{ margin-top:10px; display:flex; gap:8px; }
.pill{
  display:inline-block;
  font-size:11.5px;
  font-weight:600;
  color:var(--wd-blue-dark);
  background:#e6f0fd;
  border:1px solid #c7ddf9;
  border-radius:20px;
  padding:3px 11px;
}

.empty-note{
  font-size:13px;
  color:var(--wd-gray);
  background:var(--wd-white);
  border:1px dashed var(--wd-border);
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
}

/* ---------------- Job detail page ---------------- */
.job-detail-header{
  background:var(--wd-white);
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  padding:26px 28px;
  margin:24px 0 24px;
}
.job-detail-header .top-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}
.job-detail-header h1{
  font-size:26px;
  margin:0 0 10px;
  color:var(--wd-navy);
}
.job-detail-header .job-meta{
  font-size:13px;
  color:var(--wd-gray);
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  margin-bottom:14px;
}
.job-detail-header .job-tags{ display:flex; gap:8px; }

.btn{
  display:inline-block;
  background:var(--wd-blue);
  color:#fff !important;
  border:none;
  border-radius:var(--radius);
  padding:12px 28px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none !important;
  text-align:center;
}
.btn:hover{ background:var(--wd-blue-dark); }
.btn-outline{
  background:#fff;
  color:var(--wd-blue) !important;
  border:1px solid var(--wd-blue);
}
.btn-outline:hover{ background:#eef5ff; }

.job-detail-body{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:28px;
  padding-bottom:60px;
}
.job-detail-body .content{
  background:var(--wd-white);
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  padding:28px;
}
.job-detail-body h3{
  font-size:15px;
  color:var(--wd-navy);
  margin:26px 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--wd-border);
}
.job-detail-body h3:first-child{ margin-top:0; }
.job-detail-body ul{ margin:0 0 6px; padding-left:20px; }
.job-detail-body li{ margin-bottom:8px; color:var(--wd-text); }

.detail-side{
  background:var(--wd-white);
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  padding:22px;
  align-self:start;
}
.detail-side h4{
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--wd-navy);
  margin:0 0 14px;
}
.detail-side .row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #eceff2;
  font-size:12.5px;
}
.detail-side .row dt{ color:var(--wd-gray); }
.detail-side .row dd{ margin:0; color:var(--wd-text); text-align:right; font-weight:600; }
.detail-side .btn{ width:100%; margin-top:16px; }

/* ---------------- Apply flow ---------------- */
.apply-shell{
  background:var(--wd-white);
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  margin:24px 0 60px;
}
.apply-steps{
  display:flex;
  border-bottom:1px solid var(--wd-border);
  background:var(--wd-bg-panel);
  padding:0 28px;
}
.apply-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 24px 18px 0;
  margin-right:24px;
  font-size:13px;
  font-weight:600;
  color:var(--wd-gray);
  border-bottom:3px solid transparent;
}
.apply-step .num{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--wd-border);
  color:#fff;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.apply-step.active{
  color:var(--wd-navy);
  border-bottom-color:var(--wd-blue);
}
.apply-step.active .num{ background:var(--wd-blue); }

.apply-body{ padding:30px 28px; }
.apply-body .job-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--wd-bg-panel);
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  padding:14px 18px;
  margin-bottom:28px;
  font-size:13px;
}
.apply-body .job-strip strong{ color:var(--wd-navy); }

fieldset{
  border:none;
  padding:0;
  margin:0 0 8px;
}
.section-title{
  font-size:15px;
  font-weight:700;
  color:var(--wd-navy);
  margin:30px 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--wd-border);
}
.section-title:first-of-type{ margin-top:0; }

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.field-group{ margin-bottom:20px; }

label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--wd-text);
  margin-bottom:6px;
}
label .req{ color:var(--wd-red); margin-left:2px; }

input[type=text],
input[type=email],
input[type=tel],
select,
textarea{
  width:100%;
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  padding:10px 12px;
  font-size:14px;
  font-family:inherit;
  color:var(--wd-text);
  background:#fff;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--wd-blue);
  box-shadow:0 0 0 3px rgba(8,117,225,0.15);
}
textarea{ min-height:100px; resize:vertical; }
select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c6570' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}

.hint{ font-size:12px; color:var(--wd-gray); margin-top:6px; }

.radio-block{
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:20px;
  background:#fbfcfd;
}
.radio-block > label{ margin-bottom:12px; }
.radio-row{ display:flex; gap:26px; flex-wrap:wrap; }
.radio-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:400;
  color:var(--wd-text);
  cursor:pointer;
}
.radio-option input{ accent-color:var(--wd-blue); width:16px; height:16px; }

.conditional{
  display:none;
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--wd-border);
}
.conditional.show{ display:block; }
.note-box{
  font-size:12.5px;
  color:#8a2b1f;
  background:#fdecea;
  border:1px solid #f3c6c0;
  border-radius:var(--radius);
  padding:10px 12px;
}

.checkbox-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  font-weight:400;
  color:var(--wd-gray);
  margin-top:10px;
}
.checkbox-line input{ margin-top:3px; accent-color:var(--wd-blue); }

.review-list{
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  overflow:hidden;
  margin:0 0 10px;
}
.review-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
  padding:12px 18px;
  border-bottom:1px solid var(--wd-border);
  background:#fff;
}
.review-row:nth-child(even){ background:#fafbfc; }
.review-row:last-child{ border-bottom:none; }
.review-row dt{
  font-size:12.5px;
  font-weight:700;
  color:var(--wd-gray);
  margin:0;
}
.review-row dd{
  font-size:13.5px;
  color:var(--wd-text);
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
}

.apply-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid var(--wd-border);
}
.form-status{ font-size:13px; color:var(--wd-gray); }
.form-status.is-error{ color:var(--wd-red); font-weight:600; }

/* ---------------- Thank you ---------------- */
.confirm-panel{
  background:var(--wd-white);
  border:1px solid var(--wd-border);
  border-radius:var(--radius);
  max-width:640px;
  margin:50px auto 80px;
  padding:48px 40px;
  text-align:center;
}
.confirm-icon{
  width:56px; height:56px;
  border-radius:50%;
  background:#e6f4ea;
  border:1px solid #b9e0c4;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
}
.confirm-panel h1{
  font-size:22px;
  color:var(--wd-navy);
  margin:0 0 12px;
}
.confirm-panel p{ color:var(--wd-gray); }
.confirm-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:26px;
}
.confirm-ref{
  margin-top:30px;
  font-size:12px;
  color:#a2a9b0;
}

/* ---------------- Footer ---------------- */
footer.site-footer{
  background:var(--wd-navy);
  color:#aab2c0;
  padding:26px 0;
  font-size:12.5px;
  margin-top:auto;
}
footer.site-footer .wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
footer.site-footer a{ color:#aab2c0; margin-left:16px; }
footer.site-footer a:hover{ color:#fff; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px){
  nav.main-nav{ display:none; }
  .job-layout{ grid-template-columns:1fr; }
  .job-detail-body{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .apply-steps{ overflow-x:auto; }
  .search-bar{ flex-direction:column; }
  .search-bar .divider-v{ display:none; }
  .review-row{ grid-template-columns:1fr; gap:4px; }
}