/*
 * WE DO — Careers ([bitmaco_careers]).
 * Vendor: BITMACO Inc.
 *
 * Styles the Bitmaco Careers plugin's output from the theme. The plugin's own
 * stylesheet ships light-mode defaults on seven custom properties; remapping
 * those to theme tokens is what carries dark and light mode, so most of this
 * file is layout and state rather than colour.
 *
 * Everything is scoped under .bitmaco-careers. No plugin file is modified.
 */

.bitmaco-careers.bitmaco-careers{
  /* Plugin contract — these seven drive its own rules. */
  --bitmaco-careers-text:var(--wd-text-hi);
  --bitmaco-careers-muted:var(--wd-text-mid);
  --bitmaco-careers-surface:var(--wd-card-a);
  --bitmaco-careers-border:var(--wd-hair);
  --bitmaco-careers-accent:var(--wd-accent);
  --bitmaco-careers-danger:#fca5a5;

  /* Local additions. Notice colours are stated per theme further down rather
     than derived, because a tint that passes AA on the dark canvas does not
     pass on the light one. */
  --bc-radius:var(--r-lg);
  --bc-radius-control:var(--r-sm);
  --bc-gap:clamp(16px,2vw,24px);
  --bc-success:#86efac;
  --bc-success-bg:rgba(34,197,94,.12);
  --bc-warn:#fcd34d;
  --bc-warn-bg:rgba(245,158,11,.12);
  --bc-danger-bg:rgba(248,113,113,.12);
  --bc-info:var(--wd-accent-soft);
  --bc-info-bg:rgba(206,121,103,.12);

  color:var(--wd-text-mid);
  font-size:clamp(15px,1.3vw,16.5px);
  line-height:1.7;
}

/* The honeypot stays off-screen. Re-asserted here so no layout rule below can
   bring it back into view; it must never become visible or focusable. */
.bitmaco-careers .bitmaco-careers__hp{
  position:absolute !important;
  left:-10000px !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

/* ---------- Vacancy list ---------- */
.bitmaco-careers .bitmaco-careers__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--bc-gap);
  margin:0;
  padding:0;
  list-style:none;
}
.bitmaco-careers .bitmaco-careers__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:clamp(20px,2vw,28px);
  border:1px solid var(--wd-hair);
  border-radius:var(--bc-radius);
  background:var(--wd-card-a);
  transition:border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .bitmaco-careers .bitmaco-careers__card:hover{
    border-color:var(--wd-hair-2);
    transform:translateY(-2px);
    box-shadow:0 18px 40px -28px rgba(0,0,0,.6);
  }
}
.bitmaco-careers .bitmaco-careers__title{
  margin:0;
  font-size:clamp(19px,1.9vw,23px);
  line-height:1.25;
  color:var(--wd-text-hi);
}
.bitmaco-careers .bitmaco-careers__title a{color:inherit; text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .bitmaco-careers .bitmaco-careers__title a:hover{color:var(--wd-accent)}
}
.bitmaco-careers .bitmaco-careers__department{
  margin:0;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wd-accent-soft);
}
.bitmaco-careers .bitmaco-careers__excerpt{color:var(--wd-text-mid)}
.bitmaco-careers .bitmaco-careers__excerpt p{margin:0}
.bitmaco-careers .bitmaco-careers__excerpt p + p{margin-top:8px}

/* ---------- Detail ---------- */
.bitmaco-careers .bitmaco-careers__detail{max-width:72ch}
.bitmaco-careers .bitmaco-careers__back{
  display:inline-block;
  margin-bottom:var(--sp-4);
  color:var(--wd-text-mid);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}
.bitmaco-careers .bitmaco-careers__back::before{content:"\2190"; margin-right:8px}
@media (hover:hover) and (pointer:fine){
  .bitmaco-careers .bitmaco-careers__back:hover{color:var(--wd-accent)}
}
.bitmaco-careers .bitmaco-careers__detail-title{
  margin:0 0 6px;
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.12;
  color:var(--wd-text-hi);
}
.bitmaco-careers .bitmaco-careers__description{margin-top:var(--sp-4); color:var(--wd-text-mid)}
.bitmaco-careers .bitmaco-careers__description p{margin:0}
.bitmaco-careers .bitmaco-careers__description p + p{margin-top:12px}
.bitmaco-careers .bitmaco-careers__description ul,
.bitmaco-careers .bitmaco-careers__description ol{margin:12px 0 0; padding-left:1.25em; list-style:disc}
.bitmaco-careers .bitmaco-careers__description li{margin-bottom:6px}

/* ---------- Form ---------- */
.bitmaco-careers .bitmaco-careers__form{
  margin-top:var(--sp-8);
  padding:clamp(20px,2.4vw,32px);
  border:1px solid var(--wd-hair);
  border-radius:var(--bc-radius);
  background:var(--wd-card-a);
}
.bitmaco-careers .bitmaco-careers__field{display:flex; flex-direction:column; gap:7px; margin:0 0 var(--sp-4)}
.bitmaco-careers .bitmaco-careers__field > label{
  color:var(--wd-text-hi);
  font-size:14px;
  font-weight:600;
}
.bitmaco-careers .bitmaco-careers__field > label span[aria-hidden]{color:var(--wd-accent)}
.bitmaco-careers .bitmaco-careers__field input[type="text"],
.bitmaco-careers .bitmaco-careers__field input[type="email"],
.bitmaco-careers .bitmaco-careers__field input[type="tel"],
.bitmaco-careers .bitmaco-careers__field input[type="file"],
.bitmaco-careers .bitmaco-careers__field textarea,
.bitmaco-careers .bitmaco-careers__field select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--wd-hair-2);
  border-radius:var(--bc-radius-control);
  background:var(--wd-bg-1);
  color:var(--wd-text-hi);
  font-family:inherit;
  font-size:15px;
  line-height:1.5;
  transition:border-color var(--dur-base) var(--ease-out);
}
.bitmaco-careers .bitmaco-careers__field textarea{min-height:140px; resize:vertical}
.bitmaco-careers .bitmaco-careers__field input::placeholder,
.bitmaco-careers .bitmaco-careers__field textarea::placeholder{color:var(--wd-text-dim)}
.bitmaco-careers .bitmaco-careers__field input:focus,
.bitmaco-careers .bitmaco-careers__field textarea:focus,
.bitmaco-careers .bitmaco-careers__field select:focus{border-color:var(--wd-accent)}
.bitmaco-careers .bitmaco-careers__field input[type="file"]{padding:10px 12px; cursor:pointer}

/* The native picker button is the one control the browser draws itself, and it
   reads as a grey system widget against everything else here. */
.bitmaco-careers .bitmaco-careers__field input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:8px 14px;
  border:1px solid var(--wd-hair-2);
  border-radius:var(--bc-radius-control);
  background:var(--wd-surface-2);
  color:var(--wd-text-hi);
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .bitmaco-careers .bitmaco-careers__field input[type="file"]::file-selector-button:hover{
    border-color:var(--wd-accent);
    color:var(--wd-accent);
  }
}
[data-theme="light"] .bitmaco-careers .bitmaco-careers__field input[type="file"]::file-selector-button{
  background:var(--wd-surface-2);
  color:var(--wd-text-hi);
}

/* Invalid fields. The plugin sets aria-invalid on them, so the visual state
   follows the accessible one rather than needing a new class. */
/* Element selectors, not a bare [aria-invalid]: the base control rule above is
   (0,3,1) because of its [type] attribute, so an attribute-only selector at
   (0,3,0) loses to it and the field never turns red. */
.bitmaco-careers .bitmaco-careers__field input[aria-invalid="true"],
.bitmaco-careers .bitmaco-careers__field textarea[aria-invalid="true"],
.bitmaco-careers .bitmaco-careers__field select[aria-invalid="true"]{
  border-color:var(--bitmaco-careers-danger);
  background:var(--bc-danger-bg);
}
.bitmaco-careers .bitmaco-careers__help{color:var(--wd-text-dim); font-size:13px}
.bitmaco-careers .bitmaco-careers__error{
  color:var(--bitmaco-careers-danger);
  font-size:13.5px;
  font-weight:600;
}

/* Consent checkbox sits inline with its label, unlike the stacked fields. */
.bitmaco-careers .bitmaco-careers__field--checkbox > label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:400;
  color:var(--wd-text-mid);
  line-height:1.6;
}
.bitmaco-careers .bitmaco-careers__field--checkbox input[type="checkbox"]{
  flex:none;
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:var(--wd-accent);
}
.bitmaco-careers .bitmaco-careers__field--checkbox a{color:var(--wd-accent); text-decoration:underline}

/* ---------- Buttons ---------- */
.bitmaco-careers .bitmaco-careers__submit,
.bitmaco-careers .bitmaco-careers__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border:1px solid transparent;
  border-radius:var(--bc-radius-control);
  background:var(--wd-accent);
  color:#1c100c;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .bitmaco-careers .bitmaco-careers__submit:hover,
  .bitmaco-careers .bitmaco-careers__button:hover{background:var(--wd-accent-deep); transform:translateY(-2px)}
}
.bitmaco-careers .bitmaco-careers__submit:active,
.bitmaco-careers .bitmaco-careers__button:active{transform:scale(.98)}
/* The list CTA is secondary to the card title, so it reads as an outline. */
.bitmaco-careers .bitmaco-careers__button{
  padding:10px 16px;
  border-color:var(--wd-hair-2);
  background:transparent;
  color:var(--wd-text-hi);
  font-size:13.5px;
  margin-top:auto;
}
@media (hover:hover) and (pointer:fine){
  .bitmaco-careers .bitmaco-careers__button:hover{
    border-color:var(--wd-accent);
    background:transparent;
    color:var(--wd-accent);
  }
}

/* ---------- Errors and notices ---------- */
.bitmaco-careers .bitmaco-careers__error-summary{
  margin-bottom:var(--sp-6);
  padding:clamp(16px,1.8vw,22px);
  border:1px solid var(--bitmaco-careers-danger);
  border-left-width:3px;
  border-radius:var(--bc-radius-control);
  background:var(--bc-danger-bg);
  color:var(--bitmaco-careers-danger);
}
.bitmaco-careers .bitmaco-careers__error-summary h3{
  margin:0 0 8px;
  font-size:16px;
  color:var(--bitmaco-careers-danger);
}
.bitmaco-careers .bitmaco-careers__error-summary ul{margin:0; padding-left:1.2em; list-style:disc}
.bitmaco-careers .bitmaco-careers__error-summary li{margin-bottom:4px}

.bitmaco-careers .bitmaco-careers__notice{
  margin:0 0 var(--sp-6);
  padding:clamp(14px,1.6vw,18px) clamp(16px,1.8vw,20px);
  border:1px solid var(--wd-hair-2);
  border-left:3px solid var(--wd-text-dim);
  border-radius:var(--bc-radius-control);
  background:var(--wd-surface-2);
  color:var(--wd-text-hi);
  font-size:15px;
}
.bitmaco-careers .bitmaco-careers__notice--success{
  border-color:rgba(34,197,94,.45);
  border-left-color:var(--bc-success);
  background:var(--bc-success-bg);
  color:var(--bc-success);
}
.bitmaco-careers .bitmaco-careers__notice--stale,
.bitmaco-careers .bitmaco-careers__notice--retry{
  border-color:rgba(245,158,11,.45);
  border-left-color:var(--bc-warn);
  background:var(--bc-warn-bg);
  color:var(--bc-warn);
}
/* "Temporarily unavailable" was near-invisible on the dark canvas: it inherited
   muted body colour on a transparent background. It is a surface of its own now. */
.bitmaco-careers .bitmaco-careers__notice--unavailable,
.bitmaco-careers .bitmaco-careers__notice--validation{
  border-color:rgba(206,121,103,.45);
  border-left-color:var(--wd-accent);
  background:var(--bc-info-bg);
  color:var(--bc-info);
}

/* ---------- Focus ---------- */
.bitmaco-careers.bitmaco-careers :focus-visible{
  outline:2px solid var(--wd-accent);
  outline-offset:3px;
  border-radius:4px;
}
.bitmaco-careers .bitmaco-careers__error-summary:focus-visible{outline-offset:4px}

/* ---------- Light theme ---------- */
[data-theme="light"] .bitmaco-careers.bitmaco-careers{
  --bitmaco-careers-danger:#b42318;
  --bc-success:#166534;
  --bc-success-bg:rgba(34,197,94,.10);
  --bc-warn:#92400e;
  --bc-warn-bg:rgba(245,158,11,.14);
  --bc-danger-bg:rgba(180,35,24,.08);
  --bc-info:#9a4b39;
  --bc-info-bg:rgba(206,121,103,.10);
}
[data-theme="light"] .bitmaco-careers .bitmaco-careers__field input[type="text"],
[data-theme="light"] .bitmaco-careers .bitmaco-careers__field input[type="email"],
[data-theme="light"] .bitmaco-careers .bitmaco-careers__field input[type="tel"],
[data-theme="light"] .bitmaco-careers .bitmaco-careers__field input[type="file"],
[data-theme="light"] .bitmaco-careers .bitmaco-careers__field textarea,
[data-theme="light"] .bitmaco-careers .bitmaco-careers__field select{background:#fff}
[data-theme="light"] .bitmaco-careers .bitmaco-careers__department{color:#9a4b39}
@media (hover:hover) and (pointer:fine){
  [data-theme="light"] .bitmaco-careers .bitmaco-careers__card:hover{box-shadow:0 18px 40px -28px rgba(15,23,42,.35)}
}

/* ---------- Mobile ---------- */
@media (max-width:620px){
  .bitmaco-careers .bitmaco-careers__list{grid-template-columns:1fr}
  .bitmaco-careers .bitmaco-careers__form{padding:18px}
  .bitmaco-careers .bitmaco-careers__submit,
  .bitmaco-careers .bitmaco-careers__button{width:100%}
  .bitmaco-careers .bitmaco-careers__field input[type="text"],
  .bitmaco-careers .bitmaco-careers__field input[type="email"],
  .bitmaco-careers .bitmaco-careers__field input[type="tel"],
  .bitmaco-careers .bitmaco-careers__field textarea,
  .bitmaco-careers .bitmaco-careers__field select{font-size:16px} /* stops iOS zooming on focus */
}

@media (prefers-reduced-motion:reduce){
  .bitmaco-careers .bitmaco-careers__card,
  .bitmaco-careers .bitmaco-careers__submit,
  .bitmaco-careers .bitmaco-careers__button{transition:none}
  .bitmaco-careers .bitmaco-careers__card:hover,
  .bitmaco-careers .bitmaco-careers__submit:hover,
  .bitmaco-careers .bitmaco-careers__button:hover{transform:none}
}