/* =============================================
   BAGEL BAGEL - /jobs page styles
   Shared by /jobs and the per-role posting pages
   (jobs-operations-manager.html, jobs-service-staff.html).
   Loaded AFTER styles.css so it can override it.
   ============================================= */

/* ---------- home-island (matches the home page) ---------- */
.home-island{ position:fixed; line-height:normal; left:50%; bottom:20px; transform:translateX(-50%) translateY(14px); z-index:60;
  will-change:transform; opacity:0; visibility:hidden;
  transition:opacity .3s ease, transform .3s ease; font-family:'Special Elite','Courier New',monospace; }
.home-island.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.home-island .hi-links{ position:absolute; left:0; right:0; bottom:100%; margin-bottom:8px;
  background:#fffdf7; border:1.5px solid #0A0A79; border-radius:11px;
  box-shadow:0 12px 30px rgba(10,10,121,.22); padding:16px 22px 14px;
  text-align:center; font-weight:bold; font-size:18px;
  opacity:0; visibility:hidden; transform:translateY(8px); transform-origin:bottom center;
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.7,.3,1), visibility 0s linear .24s; }
.home-island.open .hi-links{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
.home-island .hi-links-inner{ display:flex; flex-direction:column; align-items:center; gap:11px; }
.home-island .hi-links a{ color:#0A0A79; text-decoration:none; }
.home-island .hi-links a:hover{ opacity:.6; }
.home-island .hi-links a[href="/rewards"]{ color:#bd932a; }
.home-island .hi-ig{ display:inline-flex; align-items:center; justify-content:center; }
.home-island .hi-ig svg{ width:22px; height:22px; }
.home-island .hi-bar{ display:flex; align-items:center; gap:14px; padding:8px 10px 8px 13px;
  background:#fffdf7; border:1.5px solid #0A0A79; border-radius:11px; box-shadow:0 12px 30px rgba(10,10,121,.22); }
.home-island .hi-logo{ display:flex; }
.home-island .hi-logo img{ height:30px; width:auto; display:block; background:transparent; }
.home-island .hi-menu{ background:none; border:0; display:flex; flex-direction:column; gap:4px; cursor:pointer; padding:6px 4px; }
.home-island .hi-menu span{ width:20px; height:2px; background:#0A0A79; display:block; transition:transform .22s ease, opacity .22s ease; }
.home-island.open .hi-menu span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.home-island.open .hi-menu span:nth-child(2){ opacity:0; }
.home-island.open .hi-menu span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.home-island .hi-order{ background:#0A0A79; color:#F6EEE0; font-weight:bold; font-size:15px; padding:9px 18px; border-radius:8px; white-space:nowrap; text-decoration:none; }
.home-island .hi-lang{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:2px; font-family:'Special Elite',monospace; font-size:15px; color:#0A0A79; }
.home-island .hi-lang .lang-opt{ background:none; border:0; font:inherit; color:#0A0A79; cursor:pointer; text-transform:lowercase; padding:0; line-height:1; }
.home-island .hi-lang .lang-opt:hover{ opacity:.65; }
.home-island .hi-lang .lang-opt.active{ text-decoration:underline; text-underline-offset:4px; }
.home-island .hi-lang .lang-sep{ opacity:.4; }
@media (max-width:600px){ .home-island{ bottom:14px; } .home-island .hi-logo img{ height:26px; } }

/* ---------- jobs page (scoped) ---------- */
.job-hero{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  background:var(--blue-main,#0A0A79); color:var(--white,#F6EEE0); overflow:hidden;
}
.job-hero-inner{ max-width:960px; margin:0 auto; padding:clamp(48px,8vw,88px) 24px clamp(44px,7vw,76px); }
.job-hero .eyebrow{
  font-size:13px; letter-spacing:3px; text-transform:uppercase; opacity:.72;
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.job-hero .eyebrow::before{ content:""; width:34px; height:1.5px; background:currentColor; opacity:.6; }
.job-hero h1{
  font-family:'Special Elite',monospace; text-transform:lowercase;
  font-size:clamp(40px,7vw,68px); line-height:1.0; margin:0 0 20px;
}
.job-hero .lead{ font-size:clamp(16px,1.6vw,19px); line-height:1.6; max-width:44ch; opacity:.92; margin:0 0 26px; }
.job-hero .promise{
  border-left:3px solid rgba(246,238,224,.5); padding:8px 0 8px 14px;
  font-size:14.5px; line-height:1.55; max-width:46ch; opacity:.86;
}

/* listing cards */
.job-list{ max-width:900px; margin:0 auto; padding:clamp(38px,6vw,60px) 22px 8px; display:flex; flex-direction:column; gap:22px; }
/* display:flex above beats the UA [hidden] rule, so the "everything is closed"
   branch in jobs.js could not actually hide the list without this. */
.job-list[hidden]{ display:none; }
.job-card{
  background:#fffdf7; border:1.5px solid var(--blue-main,#0A0A79); border-radius:14px;
  padding:clamp(22px,3.4vw,32px); box-shadow:0 10px 28px rgba(10,10,121,.10);
}
.job-card[hidden]{ display:none; }
.job-card h2{
  font-family:'Special Elite',monospace; text-transform:lowercase;
  font-size:clamp(24px,3.4vw,32px); margin:0 0 12px; line-height:1.08;
}
.job-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.job-tag{
  font-size:12.5px; border:1px solid rgba(10,10,121,.35); border-radius:100px;
  padding:4px 12px; white-space:nowrap;
}
/* the pay chip carries a whole clause, so it wraps where the short ones must not.
   Without this it overflows the card on a 320px screen. */
.job-tag-wide{ white-space:normal; }
.job-card .intro{ font-size:15.5px; line-height:1.65; margin:0 0 18px; opacity:.9; max-width:56ch; }
.job-block{ margin-bottom:18px; }
.job-block h3{
  font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:.6;
  margin:0 0 9px; font-weight:normal;
}
.job-ul{ margin:0; padding:0; list-style:none; font-size:14.5px; line-height:1.6; }
.job-ul li{ position:relative; padding-left:18px; margin-bottom:7px; }
.job-ul li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--blue-main,#0A0A79); border-radius:50%; }
.job-close{
  font-size:14.5px; line-height:1.65; opacity:.85; border-top:1px solid rgba(10,10,121,.15);
  padding-top:16px; margin:0 0 20px; max-width:56ch;
}
/* prose inside a .job-block (the "where this goes" section), same weight as
   .job-close but without the rule above it. */
.job-growth{ font-size:14.5px; line-height:1.65; opacity:.85; margin:0; max-width:56ch; }
.job-apply{
  display:inline-block; background:var(--blue-main,#0A0A79); color:#F6EEE0; font-weight:bold;
  font-size:16px; padding:13px 28px; border-radius:9px; text-decoration:none; border:0;
  font-family:inherit; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;
}
.job-apply:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(10,10,121,.28); }
.job-since{ display:flex; align-items:center; gap:8px; font-size:12.5px; opacity:.65; margin-top:14px; }
.job-dot{ width:8px; height:8px; border-radius:50%; background:#1B7A4B; flex:0 0 auto; }

.job-none{
  max-width:900px; margin:0 auto; padding:60px 22px; text-align:center;
  font-size:16px; line-height:1.7; opacity:.8;
}
.job-none[hidden]{ display:none; }

/* form */
.job-form-section{ max-width:720px; margin:0 auto; padding:clamp(44px,6vw,72px) 22px 40px; }
.job-form-head{ text-align:center; margin-bottom:30px; }
.job-form-head h2{ font-family:'Special Elite',monospace; text-transform:lowercase; font-size:clamp(28px,3.6vw,38px); margin:0 0 10px; }
.job-form-head p{ opacity:.72; line-height:1.6; margin:0; font-size:14.5px; }
.job-req{ color:var(--red,#CD0000); }

.job-roleseg{ display:flex; border:1.5px solid var(--blue-main,#0A0A79); border-radius:9px; overflow:hidden; }
.job-roleseg button{
  flex:1; border:0; background:transparent; font-family:inherit; font-size:14px;
  color:var(--blue-main,#0A0A79); padding:12px 8px; cursor:pointer; text-transform:lowercase;
  transition:background .16s ease, color .16s ease;
}
.job-roleseg button + button{ border-left:1.5px solid var(--blue-main,#0A0A79); }
.job-roleseg button[aria-pressed="true"]{ background:var(--blue-main,#0A0A79); color:#F6EEE0; font-weight:bold; }
.job-roleseg button[hidden]{ display:none; }

.job-drop{
  border:1.5px dashed var(--blue-main,#0A0A79); border-radius:10px;
  background:rgba(10,10,121,.04); padding:20px 14px; text-align:center; cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.job-drop:hover, .job-drop.dragover{ background:rgba(10,10,121,.09); }
.job-drop .big{ display:block; font-size:15px; font-weight:bold; margin-bottom:5px; }
.job-drop .sm{ display:block; font-size:12px; opacity:.65; }
.job-file{
  display:none; align-items:center; gap:10px; border:1.5px solid var(--blue-main,#0A0A79);
  border-radius:10px; background:#fffdf7; padding:11px 12px; font-size:13.5px;
}
.job-file.show{ display:flex; }
.job-file .ico{
  width:28px; height:34px; border:1.5px solid var(--blue-main,#0A0A79); border-radius:3px;
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:9px; text-transform:uppercase;
}
.job-file .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.job-file .sz{ display:block; font-size:11.5px; opacity:.6; }
.job-file .rm{ margin-left:auto; background:none; border:0; font-family:inherit; font-size:20px; line-height:1; color:var(--blue-main,#0A0A79); cursor:pointer; opacity:.6; padding:0 4px; }
.job-file .rm:hover{ opacity:1; }

.job-count{ font-size:12px; opacity:.6; margin-top:5px; }
.job-count.short{ color:var(--red,#CD0000); opacity:1; }

.job-consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; opacity:.85; margin:6px 0 22px; line-height:1.5; }
.job-consent input{ margin-top:3px; width:16px; height:16px; flex:0 0 auto; accent-color:var(--blue-main,#0A0A79); }
.job-consent a{ color:var(--blue-main,#0A0A79); }

/* honeypot: off-screen, not display:none, so bots still fill it in */
.job-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.job-done{ text-align:center; padding:56px 20px; display:none; }
.job-done.show{ display:block; }
.job-done .stamp{
  width:112px; height:112px; margin:0 auto 24px; border:3px solid var(--red,#CD0000); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--red,#CD0000);
  font-size:16px; font-weight:bold; line-height:1.15; transform:rotate(-8deg); text-align:center; padding:10px;
}
.job-done h2{ font-family:'Special Elite',monospace; text-transform:lowercase; font-size:28px; margin:0 0 12px; }
.job-done p{ font-size:15px; line-height:1.65; opacity:.85; margin:0 auto 10px; max-width:44ch; }

@media (max-width:860px){
  .job-hero-inner{ padding:44px 22px 46px; }
  .job-roleseg{ flex-direction:column; }
  .job-roleseg button + button{ border-left:0; border-top:1.5px solid var(--blue-main,#0A0A79); }
}
@media (prefers-reduced-motion:reduce){
  .job-apply:hover{ transform:none; }
}

/* card footer: the apply button next to the link to that role's own posting page */
.job-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.job-more{
  font-size:14px; color:var(--blue-main,#0A0A79);
  text-decoration:underline; text-underline-offset:4px;
}
.job-more:hover{ opacity:.6; }

/* per-role posting pages: the way back to the full list */
.job-back{ max-width:900px; margin:0 auto; padding:clamp(26px,4vw,38px) 22px 0; font-size:14px; }
.job-back a{ color:var(--blue-main,#0A0A79); text-decoration:underline; text-underline-offset:4px; }
.job-back a:hover{ opacity:.6; }