/* =====================================================================
   MyvanCMS — Careers
   ---------------------------------------------------------------------
   Job-board layout: What/Where search bar, filter chips, one-column result
   rows. The STRUCTURE is Indeed's and Mynimo's; the palette, radii and type
   scale are this site's, because a literal blue Indeed clone would read as
   pasted in next to everything else here.

   TWO CLASS FAMILIES LIVE IN THIS FILE:

     .jobsearch / .jobchip / .joblist / .jobrow   the LISTING (this rewrite)
     .job-card__meta / .job-apply                 the DETAIL page

   The second group is deliberately unchanged. app/Views/public/career.php
   uses those exact class names for the meta row and the apply panel, and
   renaming them while rewriting the listing would have broken a page nobody
   was looking at.

   Loaded site-wide from layouts/public.php; inert without .joblist.
   ===================================================================== */

/* =====================================================================
   1. SEARCH BAR
   Sits directly under the hero and overlaps its lower edge, the same trick
   the Articles search band uses — the two pages then open the same way.
   ===================================================================== */

.jobsearch-wrap{
  position:relative;
  z-index:3;
  margin-top:-40px;
  margin-bottom:2.25rem;
}

.jobsearch{
  display:flex;
  align-items:stretch;
  gap:0;
  background:#fff;
  border:1px solid var(--pl-line, #ece7e9);
  border-radius:16px;
  padding:8px;
  box-shadow:0 18px 44px rgba(23,27,42,.14);
  margin:0;
}

.jobsearch__field{
  flex:1 1 0;
  min-width:0;                 /* lets both fields shrink instead of overflowing */
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:0 1rem;
}

.jobsearch__field label{
  margin:0;
  color:var(--pl-brand);
  font-size:1.05rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
}

.jobsearch__field input,
.jobsearch__field select{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-size:1rem;
  color:var(--pl-ink);
  padding:14px 0;
  /* The select must not look like a form control from another era. */
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

.jobsearch__field input{cursor:text}
.jobsearch__field input::placeholder{color:#9b8f93}
.jobsearch__field input::-webkit-search-cancel-button{-webkit-appearance:none}

/* Own chevron, since appearance:none removed the native one. */
.jobsearch__field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B1216'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .25rem center;
  background-size:16px;
  padding-right:1.5rem;
}

.jobsearch__divider{
  width:1px;
  background:var(--pl-line, #ece7e9);
  margin:8px 0;
  flex:0 0 auto;
}

.jobsearch__btn{
  flex:0 0 auto;
  border:0;
  border-radius:12px;
  background:var(--pl-brand);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  padding:0 2rem;
  cursor:pointer;
  transition:background-color .18s ease;
}

.jobsearch__btn:hover{background:var(--pl-ink)}
.jobsearch__btn:focus-visible{outline:3px solid var(--pl-brand);outline-offset:2px}

/* =====================================================================
   2. FILTER CHIPS
   ===================================================================== */

.jobchips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}

.jobchip{
  display:inline-block;
  padding:.4rem .9rem;
  border:1px solid var(--pl-line, #ece7e9);
  border-radius:999px;
  background:#fff;
  color:#5c5560;
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}

.jobchip:hover{border-color:var(--pl-brand);color:var(--pl-brand)}

.jobchip.is-on{
  background:var(--pl-brand);
  border-color:var(--pl-brand);
  color:#fff;
}

/* =====================================================================
   3. RESULT COUNT
   ===================================================================== */

.jobresults__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  padding-bottom:.85rem;
  margin-bottom:1.25rem;
  border-bottom:1px solid var(--pl-line, #ece7e9);
}

.jobresults__count{margin:0;color:#5c5560;font-size:.98rem}
.jobresults__count strong{color:var(--pl-ink);font-size:1.1rem}

.jobresults__clear{
  color:var(--pl-brand);
  font-size:.88rem;
  font-weight:600;
  text-decoration:none;
}
.jobresults__clear:hover{text-decoration:underline}

/* =====================================================================
   4. THE RESULT ROWS
   A <ul> because it is a list of results; the bullets are removed rather
   than the semantics.
   ===================================================================== */

/* --- the two-pane board ---------------------------------------------
   List left, selected job right — the Indeed split.

   The 5fr/7fr split gives the detail the larger share: the list rows are
   scannable summaries, the pane holds the prose someone actually reads.

   align-items:start is what lets the pane's sticky positioning work. A grid
   item defaults to stretch, which makes it full-height, and a full-height
   element can never stick to anything.
   ------------------------------------------------------------------ */
.jobboard{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:1.5rem;
  align-items:start;
}

.joblist{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
  /*
   * The list scrolls independently once it is taller than the viewport, so a
   * long list never drags the pane off-screen. Capped against the viewport
   * minus the sticky header.
   */
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  /* Room for the card shadow, which a clipped overflow would otherwise cut. */
  padding:4px;
  margin:-4px;
  scrollbar-width:thin;
}

/* --- the detail pane -------------------------------------------------- */
.jobpane{
  position:sticky;
  top:100px;                       /* clears the fixed header */
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--pl-line, #ece7e9);
  border-radius:16px;
  padding:32px;
  scrollbar-width:thin;
}

.jobpane.is-loading{opacity:.55}
.jobpane{transition:opacity .15s ease}

.jobpane__error{text-align:center;padding:2rem 0;color:#5c5560}

.jobdetail__head{
  padding-bottom:1rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--pl-line, #ece7e9);
}

.jobdetail__title{
  margin:0 0 .25rem;
  font-size:1.6rem;
  line-height:1.25;
  color:var(--pl-ink);
}

/* Focused programmatically after a pane swap; the ring would otherwise be a
   surprise on a heading nobody clicked. */
.jobdetail__title:focus{outline:none}
.jobdetail__title:focus-visible{outline:3px solid var(--pl-brand);outline-offset:3px}

.jobdetail__org{margin:0;color:#5c5560;font-size:.95rem}

.jobdetail__apply{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.85rem;
  padding-bottom:1.25rem;
  margin-bottom:1.25rem;
  border-bottom:1px solid var(--pl-line, #ece7e9);
}

.jobdetail__closes{font-size:.85rem;color:#5c5560}
.jobdetail__closes i{color:var(--pl-brand);margin-right:.2rem}

.jobdetail__h{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 .6rem;
  color:var(--pl-ink);
}

.jobdetail__permalink{
  margin:1.5rem 0 0;
  padding-top:1rem;
  border-top:1px solid var(--pl-line, #ece7e9);
  font-size:.88rem;
}

.jobrow{
  position:relative;
  padding:24px 26px;
  background:#fff;
  border:1px solid var(--pl-line, #ece7e9);
  border-radius:16px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.jobrow:hover{
  border-color:transparent;
  box-shadow:0 14px 36px rgba(23,27,42,.12);
  transform:translateY(-2px);
}

/* A featured role takes a brand rule down its leading edge — the job-board
   equivalent of Indeed's sponsored marker, without a second card style. */
.jobrow--featured{border-left:4px solid var(--pl-brand)}

/* The card whose job is in the pane. A filled brand border plus a tinted
   background, so which row you are reading is obvious at a glance — the whole
   point of a split view is that the two sides are visibly connected. */
.jobrow.is-selected{
  border-color:var(--pl-brand);
  background:var(--pl-brand-soft, #F7EAEB);
  box-shadow:none;
  transform:none;
}

/* Only meaningful while the pane exists. */
@media (max-width:991.98px){
  .jobrow.is-selected{border-color:var(--pl-line, #ece7e9);background:#fff}
}

/* The rows are click targets for the pane, so say so. */
@media (min-width:992px){
  .jobrow{cursor:pointer}
}

.jobrow__title{
  margin:0 0 .3rem;
  font-size:1.25rem;
  line-height:1.3;
}

.jobrow__title a{
  color:var(--pl-brand);
  text-decoration:none;
}
.jobrow__title a:hover{text-decoration:underline}

/*
 * Stretches the title link over the whole row so anywhere is clickable —
 * without wrapping the row in an <a>, which would nest the Apply link inside
 * another link. The Apply button lifts itself back above this with z-index.
 */
.jobrow__title a::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
}

.jobrow__org{
  margin:0 0 .7rem;
  font-size:.92rem;
  color:#5c5560;
}

.jobrow__meta{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .95rem;
  margin:0 0 .8rem;
  padding:0;
  font-size:.88rem;
  color:#5c5560;
}

.jobrow__meta li{display:inline-flex;align-items:center;gap:.35rem}
.jobrow__meta i{color:var(--pl-brand);font-size:.95em}

/* Pay is the field candidates scan for first, so it is the one that is not
   grey. */
.jobrow__salary{font-weight:700;color:var(--pl-ink)}

.jobrow__summary{
  margin:0 0 1rem;
  color:#5c5560;
  font-size:.95rem;
  line-height:1.6;
}

.jobrow__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .9rem;
  font-size:.82rem;
  color:#8a8189;
}

.jobrow__flag{
  padding:.2rem .6rem;
  border-radius:999px;
  background:var(--pl-brand-soft, #F7EAEB);
  color:var(--pl-brand);
  font-weight:700;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.jobrow__closes{color:var(--pl-brand)}

.jobrow__apply{
  position:relative;
  z-index:1;                 /* above the stretched title link */
  margin-left:auto;
  padding:.5rem 1.15rem;
  border-radius:999px;
  background:var(--pl-brand-soft, #F7EAEB);
  color:var(--pl-brand);
  font-weight:700;
  font-size:.85rem;
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease;
}

.jobrow__apply:hover{background:var(--pl-brand);color:#fff}

/* =====================================================================
   5. EMPTY STATE
   ===================================================================== */

.jobempty{
  text-align:center;
  padding:3.5rem 1rem;
  border:1px dashed var(--pl-line, #ece7e9);
  border-radius:16px;
}

.jobempty i{
  font-size:2rem;
  color:var(--pl-brand);
  opacity:.5;
  display:block;
  margin-bottom:.75rem;
}

.jobempty h3{font-size:1.25rem;margin:0 0 .5rem}
.jobempty p{color:#5c5560;max-width:46ch;margin:0 auto 1.5rem}

/* =====================================================================
   6. RESPONSIVE
   ===================================================================== */

/* --- below 992px: ONE COLUMN, no pane --------------------------------
   A split view on a tablet or phone is two cramped columns. The pane is
   removed entirely and the cards go back to being plain links to their own
   pages.

   THIS BREAKPOINT MUST MATCH the BREAKPOINT constant in careers.js. If they
   disagree, either the script swallows clicks while the pane is hidden —
   a page where nothing happens when you tap — or the pane shows and never
   updates.
   ------------------------------------------------------------------ */
@media (max-width:991.98px){
  .jobboard{display:block}
  .jobpane{display:none}
  .joblist{max-height:none;overflow:visible}
}

@media (max-width:767.98px){
  /* The search bar stacks. The overlap goes too: the hero is short here and
     the taller stacked bar would sit on the breadcrumb. */
  .jobsearch-wrap{margin-top:0}
  .jobsearch{flex-direction:column;padding:10px;gap:4px}
  .jobsearch__field{padding:0 .75rem}
  .jobsearch__divider{width:auto;height:1px;margin:0 .75rem}
  .jobsearch__btn{padding:.85rem 1rem;margin-top:4px;border-radius:10px}

  .jobrow{padding:20px}
  .jobrow__title{font-size:1.1rem}
  /* Full-width apply button once the row is narrow, rather than a stub
     squeezed against the posted date. */
  .jobrow__apply{margin-left:0;width:100%;text-align:center;margin-top:.5rem}
}

@media (prefers-reduced-motion:reduce){
  .jobrow,
  .jobchip,
  .jobrow__apply,
  .jobsearch__btn{transition:none}
  .jobrow:hover{transform:none}
}

/* =====================================================================
   7. DETAIL PAGE — unchanged from the previous version of this file.
   app/Views/public/career.php depends on these exact names.
   ===================================================================== */

.job-card__meta{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .9rem;
  margin:0 0 .9rem;
  padding:0;
  font-size:.9rem;
  color:#5c5560;
}

.job-card__meta li{display:inline-flex;align-items:center;gap:.35rem}
.job-card__meta i{color:var(--pl-brand);font-size:.95em}

.job-apply{
  position:sticky;
  top:100px;               /* clears the fixed header */
  padding:28px;
  border:1px solid var(--pl-line, #ece7e9);
  border-radius:18px;
  background:var(--pl-brand-soft, #F7EAEB);
}

.job-apply__closes{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin:0 0 1rem;
  font-size:.88rem;
  color:#5c5560;
}

.job-apply__closes i{color:var(--pl-brand)}

.job-apply__salary{
  margin:0 0 1rem;
  font-size:1.05rem;
  font-weight:700;
  color:var(--pl-ink);
}

.job-apply hr{
  border-color:rgba(107,18,22,.15);
  margin:1.25rem 0 1rem;
}

/* Sticky is wrong once the panel is stacked under the content — it would
   follow the reader up a column that has already ended. */
@media (max-width:991.98px){
  .job-apply{position:static}
}

/* =====================================================================
   8. APPLY MODAL
   Hand-rolled rather than Bootstrap's, because Bootstrap's modal manages
   focus, scroll and backdrop in ways that fight the careers board's sticky
   panes. Same focus-trap and scroll-pin approach as the gallery lightbox, so
   the two dialogs on this site behave identically.
   ===================================================================== */

.apply-modal{
  position:fixed;
  inset:0;
  z-index:1090;               /* above the sticky header and the chat bubble */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

.apply-modal[hidden]{display:none}

.apply-modal__scrim{
  position:absolute;
  inset:0;
  background:rgba(23,27,42,.55);
  backdrop-filter:blur(2px);
}

.apply-modal__panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:460px;
  max-height:calc(100vh - 2rem);
  overflow-y:auto;
  background:#fff;
  border-radius:18px;
  padding:30px 28px 24px;
  box-shadow:0 30px 80px rgba(23,27,42,.32);
}

.apply-modal__x{
  position:absolute;
  top:14px;right:14px;
  width:32px;height:32px;
  border:0;
  border-radius:50%;
  background:var(--pl-brand-soft, #F7EAEB);
  color:var(--pl-brand);
  cursor:pointer;
  line-height:1;
}
.apply-modal__x:hover{background:var(--pl-brand);color:#fff}

.apply-modal__title{
  margin:0 0 .2rem;
  font-size:1.35rem;
  color:var(--pl-ink);
}

.apply-modal__role{
  margin:0 0 1.25rem;
  color:var(--pl-brand);
  font-weight:700;
  font-size:.98rem;
}

.apply-field{margin-bottom:.9rem}

.apply-field label{
  display:block;
  margin-bottom:.3rem;
  font-size:.86rem;
  font-weight:700;
  color:var(--pl-ink);
}

.apply-field__opt{
  font-weight:400;
  color:#9b8f93;
  font-size:.82rem;
  margin-left:.25rem;
}

.apply-field input{
  width:100%;
  border:1px solid var(--pl-line, #ece7e9);
  border-radius:10px;
  padding:.6rem .85rem;
  font-size:.95rem;
  color:var(--pl-ink);
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.apply-field input:focus{
  outline:0;
  border-color:var(--pl-brand);
  box-shadow:0 0 0 3px rgba(107,18,22,.12);
}

.apply-field input.is-invalid{border-color:#c0392b}

.apply-field__err{
  margin:.3rem 0 0;
  font-size:.82rem;
  color:#c0392b;
}

/* --- the one message area ---------------------------------------------
   Three states, visually distinct because they mean different things: a
   duplicate is NOT a failure and must not be red. */
.apply-modal__msg{
  margin:.25rem 0 1rem;
  padding:.7rem .85rem;
  border-radius:10px;
  font-size:.88rem;
  line-height:1.5;
}

.apply-modal__msg.is-ok{background:#e8f5ec;color:#1e7a43;border:1px solid #bfe3cd}
.apply-modal__msg.is-dup{background:var(--pl-brand-soft, #F7EAEB);color:var(--pl-brand);border:1px solid rgba(107,18,22,.2)}
.apply-modal__msg.is-error{background:#fdecea;color:#c0392b;border:1px solid #f5c6c2}

.apply-modal__actions{
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
  margin-top:1.1rem;
}

.apply-modal__note{
  margin:.9rem 0 0;
  font-size:.78rem;
  color:#9b8f93;
  text-align:center;
}

@media (max-width:575.98px){
  .apply-modal__panel{padding:24px 18px 18px;border-radius:14px}
  .apply-modal__actions{flex-direction:column-reverse}
  .apply-modal__actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .apply-field input{transition:none}
}