/* Vacancies page, its application dialog and the legal page. Loaded only on those pages. */

/* ---- vacancies list ---- */
.vac-hero{padding-bottom:42px}
.vac-hero .eyebrow{color:var(--accent);margin-bottom:25px}
.vac-hero h1{font-size:clamp(2.5rem,4.1vw,4.8rem);line-height:1.1;letter-spacing:-.05em}
.vac-hero .detail-lead{margin:26px 0 30px}
.vac-list{padding:20px 4.5% 100px}
.vac-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:34px 0 30px;border-top:1px solid var(--line)}
.vac-heading h2{font-size:clamp(1.9rem,3vw,3rem);line-height:1.15;letter-spacing:-.04em}
.vac-heading p{color:var(--muted);font-size:1rem;text-align:right}
.vac-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.vac-card{display:flex;flex-direction:column;gap:18px;padding:30px 32px 28px;border:1px solid var(--line);border-radius:3px;background:#ffffff05;scroll-margin-top:12px;transition:border-color .25s,background .25s}
.vac-card:hover,.vac-card:target{border-color:#ffffff40;background:#ffffff09}
.vac-card:target{border-color:var(--accent)}
.vac-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#93a499}
.vac-meta span+span{position:relative;padding-left:18px}
.vac-meta span+span::before{content:'';position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--accent)}
.vac-card h3{font-size:clamp(1.3rem,1.7vw,1.7rem);font-weight:500;line-height:1.3;letter-spacing:-.03em}
.vac-card ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.vac-card li{position:relative;padding-left:22px;color:#b3beb7;font-size:.9375rem;line-height:1.6}
.vac-card li::before{content:'';position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--accent)}
.vac-apply{margin-top:auto;align-self:flex-start;min-height:48px;padding:12px 20px;gap:26px}

/* ---- application dialog (mirrors the inquiry dialog) ---- */
#vacancy-dialog{width:min(650px,calc(100% - 28px));padding:0;overflow-y:auto;border-radius:6px;border-color:#435149;box-shadow:0 30px 120px #0008}
#vacancy-dialog .dialog-close{position:static;margin:0 -9px 0 0;flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-size:1.8rem;color:#c3cec6;line-height:1}
#vacancy-dialog .dialog-close:hover{color:#fff;background:#ffffff12}
#vacancy-form-view,#vacancy-result{padding:26px 28px 30px}
#vacancy-dialog h2{font-size:clamp(1.9rem,4vw,2.65rem);line-height:1.15;letter-spacing:-.045em;margin:0 0 14px}
#vacancy-result-title:focus{outline:0}
#vacancy-result>.eyebrow{color:var(--accent);margin-bottom:18px}
#vacancy-result-text{font-size:1rem;line-height:1.7;color:#aebdb2;margin:0 0 24px}
#vacancy-form{display:grid;gap:16px}
#vacancy-form label{display:grid;gap:8px;font-size:.875rem;line-height:1.5;min-width:0}
#vacancy-form input:not([type=checkbox]):not([type=file]),#vacancy-form select{background-color:#202724;border-color:#46544b;color:#edf2ee;border-radius:3px;font-size:1rem;padding:11px 12px;min-height:46px;line-height:1.5;width:100%}
#vacancy-form input::placeholder{color:#94a79a}
#vacancy-form input:-webkit-autofill,#vacancy-form input:-webkit-autofill:hover,#vacancy-form input:-webkit-autofill:focus{-webkit-text-fill-color:#edf2ee;-webkit-box-shadow:0 0 0 1000px #202724 inset;caret-color:#edf2ee}
#vacancy-form input[type=file]{width:100%;padding:8px;background:#202724;border:1px dashed #5a6a5f;border-radius:3px;color:#c8d2ca;font-size:.875rem}
#vacancy-form input[type=file]::file-selector-button{margin-right:14px;padding:8px 14px;border:1px solid #66736b;border-radius:3px;background:#2a332f;color:#edf2ee;font:inherit;cursor:pointer}
#vacancy-form input[type=file]::file-selector-button:hover{border-color:var(--accent)}
#vacancy-form .field-error:empty,#vacancy-form .field-error:empty{display:none}
#vacancy-form .field-hint{font-size:.75rem;color:#8fa195}
#vacancy-submit{width:100%;min-height:52px;padding:14px 19px}
#vacancy-form .form-note{font-size:.75rem;line-height:1.6;color:#9daf9f;margin:0}

/* ---- dropdown that stays inside the dialog (select-listbox.js) ----
   The reusable trigger/list/option styles moved to refinements.css (loaded on every page, not just this one) so
   the header language switch can use the same dark, on-brand control instead of the browser's own <select> popup. */
.select-field{position:relative;display:grid;gap:8px;min-width:0}
.select-field>label{font-size:.875rem;line-height:1.5}
.select-field>select{position:absolute;left:0;bottom:0;width:100%;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
#vacancy-form .field-error:empty{display:none}

/* ---- legal page ---- */
.legal{padding:38px 4.5% 110px}
.legal .breadcrumbs{margin-bottom:34px}
.legal h1{font-size:clamp(2.1rem,3.6vw,3.8rem);line-height:1.12;letter-spacing:-.045em;max-width:920px;margin-bottom:46px}
.legal-body{max-width:820px}
.legal-body h2{font-size:clamp(1.3rem,1.8vw,1.75rem);font-weight:500;letter-spacing:-.03em;line-height:1.3;margin:44px 0 16px;color:var(--paper)}
.legal-body h2:first-child{margin-top:0}
.legal-body p{color:#b9c2bc;font-size:1rem;line-height:1.8;margin:0 0 14px}
.legal-body ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:8px}
.legal-body li{position:relative;padding-left:24px;color:#b9c2bc;line-height:1.7}
.legal-body li::before{content:'';position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--accent)}
.legal-body a{color:#ef9278;text-decoration:underline;text-underline-offset:3px}
.legal-body strong{color:var(--paper);font-weight:600}
.legal-source{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:.8125rem;color:#8fa195}

@media(max-width:1000px){
  .vac-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .vac-hero{padding-bottom:30px}
  .vac-hero .button{width:100%;max-width:420px}
  .vac-list{padding:10px 6% 70px}
  .vac-heading{flex-direction:column;align-items:flex-start;gap:8px;padding:26px 0 22px}
  .vac-heading p{text-align:left}
  .vac-card{padding:24px 22px}
  .vac-apply{width:100%}
  #vacancy-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
  #vacancy-form-view,#vacancy-result{padding:22px 20px 25px}
  #vacancy-dialog h2{font-size:2rem}
  .legal{padding:25px 6% 80px}
}
@media(forced-colors:active){.vac-card{border:1px solid CanvasText}#vacancy-form input[type=file]{border:1px solid CanvasText}}