/* =============================================================================
   TectSoft — careers.css
   -----------------------------------------------------------------------------
   careers.html only. Structure (.sec, .wrap, .btn, form rows) comes from
   style.css and pages.css; this file carries what a careers page needs and the
   marketing pages do not.

   The reference career pages (Devsinc, Tkxel, Manatal-hosted boards) all share
   the same shape: a hero that states scale, a benefits block, a visible hiring
   process, and then a flat list of scannable role rows with filters and a count
   above them. The brand palette stays; the page furniture changes.
   ========================================================================== */

/* Visible to screen readers only. The search and filter controls carry their
   own visible placeholders and default options, so their <label>s would be
   redundant on screen but are still needed for assistive tech. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- hero stats ----------------------------------------------------------- */
/* A band of numbers under the hero copy. Candidates size up a company before
   they read a role, so this is the first thing after the headline. */
/* width is explicit because .hero-in is a column flex with align-items:center,
   which sizes its children to fit-content. The browser's intrinsic width for a
   wrapping flex container does not account for the cards' max-width, so it
   settles on a width that fits one card too few and the last one drops to a
   row of its own. */
.cr-stats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  width:100%;max-width:760px;margin-top:40px;
}
.cr-stat{
  flex:1 1 180px;max-width:230px;
  background:rgba(2,8,20,.42);border:1px solid var(--line);border-radius:16px;
  padding:20px 18px;text-align:center;
}
.cr-stat b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.4vw,34px);line-height:1;color:var(--cyan);
  letter-spacing:-.02em;
}
.cr-stat span{
  display:block;margin-top:9px;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}

/* --- benefits ------------------------------------------------------------- */
.cr-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cr-ben{
  background:rgba(2,8,20,.42);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px;
}
.cr-ben h3{font-size:18px;margin:0 0 16px}
.cr-ben ul{list-style:none;margin:0;padding:0}
.cr-ben li{
  position:relative;padding-left:28px;margin-bottom:12px;
  font-size:15px;line-height:1.7;color:var(--muted);
}
/* Tick drawn as a pseudo-element so the list needs no inline SVG per item. */
.cr-ben li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:16px;
  border-radius:50%;background:color-mix(in srgb,var(--cyan) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 55%,transparent);
}
.cr-ben li::after{
  content:"";position:absolute;left:5px;top:11px;width:6px;height:3px;
  border-left:1.6px solid var(--cyan);border-bottom:1.6px solid var(--cyan);
  transform:rotate(-45deg);
}

/* --- hiring process ------------------------------------------------------- */
.cr-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cr-step{
  position:relative;padding:26px 22px;
  background:rgba(2,8,20,.42);border:1px solid var(--line);border-radius:18px;
}
.cr-step b{
  display:block;font-family:var(--display);font-weight:200;font-size:34px;
  line-height:1;color:var(--cyan);margin-bottom:14px;
}
.cr-step h3{font-size:17px;margin:0 0 9px}
.cr-step p{font-size:14px;line-height:1.75;color:var(--muted);margin:0}

/* --- role search and filters ---------------------------------------------- */
.cr-tools{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-bottom:18px;
}
.cr-search{
  flex:1 1 280px;position:relative;
}
.cr-search input{
  width:100%;background:var(--chip);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px 14px 44px;color:#fff;font:inherit;
  font-size:15px;
}
.cr-search input::placeholder{color:var(--muted)}
.cr-search input:focus{outline:none;border-color:var(--cyan)}
.cr-search svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted);pointer-events:none;
}
.cr-select{
  background:var(--chip);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;color:#fff;font:inherit;font-size:15px;min-width:168px;
}
.cr-select:focus{outline:none;border-color:var(--cyan)}

.cr-count{
  margin:0 0 20px;font-size:14px;color:var(--muted);
}
.cr-count b{color:#fff;font-weight:700}

/* --- role rows ------------------------------------------------------------ */
.job-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.job[hidden]{display:none}

.job-card{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(2,8,20,.42);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.job-card:hover,
.job.is-open .job-card{
  border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));
  background:rgba(4,14,32,.6);
}

.job-head{
  width:100%;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:24px 26px;background:none;border:0;color:inherit;
  text-align:left;cursor:pointer;font:inherit;
}
.job-title{flex:1 1 280px;min-width:0}
.job-title h3{font-size:21px;margin:0 0 8px;line-height:1.3}

/* Inline facts under the title: location, type, experience. Kept as text
   rather than pills so the pills below can carry the department alone and the
   row does not turn into a wall of chips. */
.job-facts{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  font-size:13px;color:var(--muted);
}
.job-facts span{display:inline-flex;align-items:center;gap:7px}
.job-facts svg{width:14px;height:14px;color:var(--cyan);flex:0 0 auto}

.job-dept{
  flex:0 0 auto;
  background:color-mix(in srgb,var(--cyan) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);
  border-radius:20px;padding:6px 14px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cyan);
}

.job-chev{
  flex:0 0 auto;width:22px;height:22px;color:var(--cyan);
  transition:transform .3s var(--ease);
}
.job.is-open .job-chev{transform:rotate(180deg)}

/* grid-template-rows animates to the panel's real height with no JS measuring */
.job-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.job.is-open .job-body{grid-template-rows:1fr}
.job-body-in{overflow:hidden}
.job-body-pad{padding:4px 26px 26px;border-top:1px solid var(--line);margin-top:4px}

.job-body-pad h4{
  font-family:var(--display);font-weight:700;font-size:15px;
  margin:22px 0 10px;color:#fff;
}
.job-body-pad p{color:var(--muted);font-size:15px;line-height:1.85;margin:0}
.job-body-pad ul{margin:0;padding-left:20px;color:var(--muted);font-size:15px;line-height:1.85}
.job-body-pad li{margin-bottom:6px}
.job-apply-row{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.job-apply-row .form-note{margin:0}

/* Shown when a search or filter matches nothing. */
.cr-empty{
  text-align:center;padding:48px 20px;color:var(--muted);
  border:1px dashed var(--line);border-radius:16px;
}

/* --- talent pool panel ---------------------------------------------------- */
.cr-pool{
  background:rgba(2,8,20,.42);border:1px solid var(--line);border-radius:20px;
  padding:38px 34px;text-align:center;
}
.cr-pool h2{font-size:clamp(24px,3vw,32px);margin:0 0 12px}
.cr-pool .sub{margin:0 auto 24px}

/* --- apply dialog --------------------------------------------------------- */
/* inset:0 + margin:auto centres on both axes without depending on the UA's
   modal centring, which does not apply if the dialog falls back to a plain
   open attribute on an engine without showModal. */
.apply-dialog{
  position:fixed;inset:0;margin:auto;
  width:min(640px,calc(100vw - 32px));max-height:88vh;height:fit-content;
  padding:0;border:1px solid var(--line);border-radius:18px;
  background:#060E1E;color:#fff;overflow:auto;
}
.apply-dialog::backdrop{background:rgba(2,8,20,.8)}
.apply-head{display:flex;align-items:flex-start;gap:16px;padding:24px 26px 0}
.apply-head h2{font-size:22px;margin:0;flex:1}
.apply-head .sub{margin:6px 0 0;font-size:14px;line-height:1.7}
.apply-close{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--chip);border:1px solid var(--line);color:var(--muted);
  cursor:pointer;font-size:18px;line-height:1;
}
.apply-close:hover{color:#fff;border-color:var(--cyan)}
.apply-dialog form{padding:20px 26px 26px}

/* The native file input cannot be styled, so it is visually hidden behind a
   label carrying the button look. It stays in the tab order, and the label
   shows the focus ring via the input's :focus-visible. */
.file-row input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-pick{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--chip);border:1px dashed var(--line);border-radius:12px;
  padding:13px 18px;font-size:14px;font-weight:600;color:var(--muted);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.file-pick:hover,
.file-row input[type="file"]:focus-visible + .file-pick{border-color:var(--cyan);color:#fff}
.file-name{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.file-name.is-err{color:#FF8A8A}

/* The "one of these two" message for the CV pair. role="alert" on the element
   means a screen reader announces it when it is unhidden, so there is nothing
   to move focus to. */
.cv-error{
  margin:12px 0 0;font-size:13px;line-height:1.6;color:#FF8A8A;
}
#cvGroup.is-err input,
#cvFileRow.is-err .file-pick{border-color:#FF8A8A}

/* .form-row is a column flex container, so the consent row has to turn the
   direction back to row or the box stacks above its label. The label also
   sheds the uppercase .form-row label applies to field names: this one is a
   sentence, not a field name. */
.form-row.consent-row{flex-direction:row;gap:10px;align-items:flex-start;margin-top:4px}
.form-row.consent-row input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--cyan)}
.form-row.consent-row label{
  font-size:13px;font-weight:400;line-height:1.7;letter-spacing:normal;
  text-transform:none;color:var(--muted);
}
.form-row.consent-row label a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:980px){
  .cr-benefits{grid-template-columns:1fr}
  .cr-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .cr-steps{grid-template-columns:1fr}
  .cr-stat{flex:1 1 140px}
  .job-head{padding:20px 18px;gap:14px}
  .job-title h3{font-size:18px}
  .job-body-pad{padding:4px 18px 22px}
  .cr-pool{padding:28px 20px}
  .cr-select{min-width:0;width:100%}
  .apply-dialog form{padding:18px 18px 22px}
  .apply-head{padding:20px 18px 0}
}