/* =====================================================================
   Page styles for careers.php
   Loaded after style.css, only on this page.
   ===================================================================== */

/* careers: jobs */
.jobs{display:flex;flex-direction:column;gap:12px}
.job{border:1px solid var(--line);border-radius:20px;background:#fff;transition:border-color .25s,box-shadow .25s}
.job[open]{border-color:var(--accent);box-shadow:0 24px 44px -34px rgba(237,50,35,.6)}
.job summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px}
.job summary::-webkit-details-marker{display:none}
.job-main b{display:block;font-family:var(--display);font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.01em}
.job-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.job-meta span{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:99px;background:#F6F5F4;color:var(--muted)}
.job-meta span:first-child{background:var(--soft);color:var(--accent)}
.job-go{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;white-space:nowrap}
.job-go i{width:32px;height:32px;border-radius:50%;background:var(--soft);position:relative;flex-shrink:0;transition:background .25s,transform .3s}
.job-go i::before,.job-go i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--accent);border-radius:2px;transform:translate(-50%,-50%)}
.job-go i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.job[open] .job-go i{background:var(--accent)}
.job[open] .job-go i::before,.job[open] .job-go i::after{background:#fff}
.job[open] .job-go i::after{transform:translate(-50%,-50%) rotate(0)}
.job summary:hover .job-main b{color:var(--accent)}
.job-body{padding:0 24px 24px;border-top:1px dashed var(--line);margin:0 24px;padding-inline:0;padding-top:20px}
.job-body .lead{color:var(--muted);max-width:70ch}
.job-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;margin-top:18px}
.job-cols h4{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.job-cols .checks{margin-top:12px}
.job-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.job-foot .hs-btn{margin-top:0}
@media (max-width:700px){
  .job-cols{grid-template-columns:minmax(0,1fr)}
  .job summary{align-items:flex-start;padding:18px}
  .job-go{font-size:0;gap:0}
  .job-body{margin:0 18px}
}

/* careers: CV upload */
.file{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;border:1.5px dashed var(--line);border-radius:14px;background:#FBFAF9;cursor:pointer;transition:border-color .2s,background .2s}
.file:hover,.file:focus-within{border-color:var(--accent);background:#FEF8F7}
.file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-ico{width:40px;height:40px;border-radius:11px;background:var(--soft);color:var(--accent);display:grid;place-items:center}
.file-ico svg{width:20px;height:20px}
.file-txt{min-width:0}
.file-txt b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-txt small{display:block;font-size:12.5px;color:var(--muted)}
.file-btn{font-size:13px;font-weight:600;padding:8px 14px;border-radius:50px;border:1.5px solid var(--ink)}
.file.has-file{border-style:solid;border-color:#15803D;background:#F0FDF4}
.file.has-file .file-ico{background:#DCFCE7;color:#15803D}
.file.invalid{border-color:var(--accent);background:#FEF8F7}
@media (max-width:420px){
  .file{grid-template-columns:auto 1fr}
  .file-btn{display:none}
}