/* ==========================================================================
   Vacancy Advertisement — page styles
   Own file (not a <style> block) because the site's Content-Security-Policy
   does not allow inline styles.
   ========================================================================== */

/* ==========================================================================
   HERO — the recruitment banner at the top of the page
   ========================================================================== */
.vac-hero {
    position: relative;
    /* The site's header is overlaid on the page, which is why its own
       #page-desc-wrapper carries margin-top:120px. This hero replaces that
       wrapper, so it needs the same clearance or the top of the banner hides
       behind the white navigation bar. */
    margin-top: 120px;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #10233a;   /* shows while the photo loads */
}
.vac-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}
/* Two layers: a dark wash for overall contrast, and a stronger gradient from
   the bottom-left so the headline always has something solid behind it. */
.vac-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(9,20,33,.88) 0%, rgba(9,20,33,.55) 30%, rgba(9,20,33,.12) 62%, rgba(9,20,33,.30) 100%),
        linear-gradient(100deg, rgba(9,20,33,.80) 0%, rgba(9,20,33,.46) 34%, rgba(9,20,33,.06) 62%, rgba(9,20,33,0) 80%);
}
.vac-hero-inner { position: relative; z-index: 2; padding: 46px 15px 52px; color: #fff; }

.vac-hero-crumbs { margin-bottom: 26px; }

.vac-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #8fe39a; margin-bottom: 16px;
}
.vac-hero-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #45AA27;
    box-shadow: 0 0 0 0 rgba(70,200,90,.75);
    animation: vacPulse 2.4s infinite;
}
@keyframes vacPulse {
    0%   { box-shadow: 0 0 0 0 rgba(70,200,90,.7); }
    70%  { box-shadow: 0 0 0 11px rgba(70,200,90,0); }
    100% { box-shadow: 0 0 0 0 rgba(70,200,90,0); }
}

.vac-hero-title {
    font-size: 44px; line-height: 1.14; font-weight: 700; color: #fff;
    margin: 0 0 18px; max-width: 15em;
    text-shadow: 0 2px 22px rgba(0,0,0,.45);
}
.vac-hero-title--slim { font-size: 36px; margin-bottom: 0; }

.vac-hero-lead {
    font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.86);
    max-width: 44em; margin: 0 0 30px;
    text-shadow: 0 1px 14px rgba(0,0,0,.45);
}

.vac-hero-stats { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 32px; }
.vac-stat { display: flex; flex-direction: column; }
.vac-stat strong {
    font-size: 32px; font-weight: 700; line-height: 1; color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.vac-stat span {
    font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.72); margin-top: 8px;
}

.vac-hero-cta {
    display: inline-flex; align-items: center; gap: 11px;
    background: #45AA27; color: #083310; text-decoration: none;
    font-size: 15px; font-weight: 700;
    padding: 15px 30px; border-radius: 6px;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.vac-hero-cta:hover {
    background: #3C7D29; color: #083310; text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,.36);
}
.vac-hero-arrow { transition: transform .2s ease; }
.vac-hero-cta:hover .vac-hero-arrow { transform: translateY(3px); }

/* slimmer band on a single vacancy and on the form */
.vac-hero--slim { min-height: 300px; }
.vac-hero--slim .vac-hero-inner { padding: 40px 15px 40px; }
.vac-hero--slim .vac-hero-crumbs { margin-bottom: 20px; }

/* The site already styles breadcrumbs globally (white pills, green for the
   current page) — let those rules through so this page matches every other
   one. Only the spacing below them is set here. */

@media (max-width: 991px) {
    .vac-hero { min-height: 400px; margin-top: 104px; }
    .vac-hero-title { font-size: 34px; }
    .vac-hero-title--slim { font-size: 28px; }
    .vac-hero-stats { gap: 28px; }
    .vac-stat strong { font-size: 26px; }
}
@media (max-width: 575px) {
    .vac-hero { min-height: 340px; margin-top: 96px; }
    .vac-hero--slim { min-height: 250px; }
    .vac-hero-inner { padding: 32px 15px 36px; }
    .vac-hero-title { font-size: 27px; }
    .vac-hero-title--slim { font-size: 23px; }
    .vac-hero-lead { font-size: 15px; margin-bottom: 24px; }
    .vac-hero-stats { gap: 22px 30px; margin-bottom: 26px; }
    .vac-stat strong { font-size: 23px; }
    .vac-stat span { font-size: 11px; }
    .vac-hero-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .vac-hero-dot { animation: none; }
    .vac-hero-cta:hover { transform: none; }
}

.vac-wrap { padding: 34px 0 70px; max-width: 900px; }
.vac-intro { margin: 0 0 30px; max-width: 720px; }
.vac-back { margin-bottom: 18px; }

/* ---- listing -------------------------------------------------------------- */
.vac-list { display: grid; gap: 16px; }

.vac-card {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    padding: 24px 26px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.vac-card:hover {
    text-decoration: none;
    color: inherit;
    border-color: rgba(0, 0, 0, .28);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
}
.vac-card-main { flex: 1; min-width: 0; }
.vac-card-main h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: #1d2a35; }
.vac-card-main p { margin: 0; color: #5c666f; font-size: 14px; line-height: 1.65; }

.vac-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.vac-card-tags span {
    font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
    color: #4a747f; background: #eef4f5; border-radius: 40px; padding: 4px 11px;
}

.vac-card-side { text-align: right; flex: 0 0 auto; padding-top: 4px; }
.vac-close { font-size: 12px; color: #8a949d; margin-bottom: 10px; white-space: nowrap; }
.vac-view { font-size: 14px; font-weight: 700; color: #3C7D29; white-space: nowrap; }

.vac-empty {
    text-align: center; padding: 66px 24px; color: #6b757e;
    border: 1px dashed rgba(0, 0, 0, .16); border-radius: 10px;
}
.vac-empty-title { font-weight: 700; margin-bottom: 8px; font-size: 17px; }

/* ---- single vacancy ------------------------------------------------------- */
.vac-title { font-size: 30px; line-height: 1.25; font-weight: 700; margin: 0 0 14px; }
.vac-title--form { font-size: 24px; }
.vac-sub { color: #5c666f; margin-bottom: 26px; }

.vac-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.vac-tag {
    font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
    color: #4a747f; background: #eef4f5; border-radius: 40px; padding: 6px 14px;
}

/* ---- single vacancy: two-column layout ------------------------------------
   The advert reads down the left; the facts a candidate scans for — where,
   what hours, how much, when it closes — sit in a panel on the right that
   stays with them as they scroll. On a phone the panel comes first, because
   there it is the summary rather than a sidebar.
   -------------------------------------------------------------------------- */
.vac-wrap--job { max-width: 1140px; }

.vac-layout { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 46px; align-items: start; }
.vac-main { min-width: 0; }

.vac-urgent {
    display: flex; align-items: center; gap: 10px;
    background: #fff6e8; border: 1px solid #f2d9ab; color: #8a5a10;
    border-radius: 8px; padding: 12px 16px; margin: 0 0 26px;
    font-size: 14px; font-weight: 600;
}
.vac-urgent .vac-ico { flex: 0 0 17px; width: 17px; height: 17px; }

/* the inline SVG icons */
.vac-ico { width: 17px; height: 17px; display: inline-block; vertical-align: middle; }

/* ---- the advert body ------------------------------------------------------ */
.vac-doc { display: grid; gap: 34px; }

.vac-sec-h {
    display: flex; align-items: center; gap: 11px;
    font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #3C7D29; margin: 0 0 16px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .09);
}
.vac-sec-h .vac-ico { flex: 0 0 17px; color: #6aa96e; }

.vac-rt { color: #3d474f; font-size: 15.5px; line-height: 1.78; }
.vac-rt p { margin: 0 0 14px; }
.vac-rt p:last-child { margin-bottom: 0; }

.vac-rt-h {
    font-size: 16.5px; font-weight: 700; color: #1d2a35;
    margin: 24px 0 12px; line-height: 1.4;
}
.vac-rt > .vac-rt-h:first-child { margin-top: 0; }

/* Bullets drawn with a marker rather than a disc, so a long line indents
   cleanly under the first word instead of under the bullet. */
.vac-rt-list { list-style: none; margin: 0 0 16px; padding: 0; }
.vac-rt-list:last-child { margin-bottom: 0; }
.vac-rt-list li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.vac-rt-list li:last-child { margin-bottom: 0; }
ul.vac-rt-list li::before {
    content: ""; position: absolute; left: 4px; top: .68em;
    width: 6px; height: 6px; border-radius: 50%; background: #6aa96e;
}
ol.vac-rt-list { counter-reset: vacol; }
ol.vac-rt-list li::before {
    counter-increment: vacol; content: counter(vacol) ".";
    position: absolute; left: 0; top: 0;
    font-weight: 700; color: #3C7D29; font-size: 14px; line-height: 1.78;
}

/* ---- closing call to action ----------------------------------------------- */
.vac-apply-band {
    margin-top: 42px; padding: 28px 30px;
    background: #f4f8f4; border: 1px solid #d9e6da; border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.vac-apply-band-t { min-width: 0; flex: 1 1 300px; }
.vac-apply-band h3 { font-size: 18px; font-weight: 700; color: #1d2a35; margin: 0 0 6px; }
.vac-apply-band p  { margin: 0; color: #5c666f; font-size: 14px; line-height: 1.65; max-width: 42em; }

/* ---- "At a glance" panel --------------------------------------------------- */
.vac-side { position: sticky; top: 118px; display: grid; gap: 16px; }

.vac-side-card {
    background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px;
    padding: 24px 24px 22px; box-shadow: 0 10px 28px rgba(0, 0, 0, .05);
}
.vac-side-h {
    font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: #8a949d; margin: 0 0 18px;
}

.vac-facts { margin: 0 0 22px; }
.vac-fact { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid rgba(0, 0, 0, .07); }
.vac-fact:first-child { border-top: 0; padding-top: 0; }
.vac-fact .vac-ico { flex: 0 0 17px; color: #6aa96e; margin-top: 2px; }
.vac-fact-t { min-width: 0; }
.vac-fact dt {
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #97a1a9; margin: 0 0 3px;
}
.vac-fact dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: #23303b; font-weight: 600; }

.vac-btn--block { display: block; width: 100%; text-align: center; }
.vac-side-card .vac-posted { display: block; text-align: center; margin: 12px 0 0; }

.vac-side-note {
    font-size: 13.5px; line-height: 1.65; color: #6b757e;
    padding: 18px 20px; background: #f6f8f9; border-radius: 10px;
}
.vac-side-note p { margin: 0 0 6px; }
.vac-side-note p:last-child { margin-bottom: 0; }
.vac-side-note strong { color: #3d474f; }

/* ---- phone apply bar ------------------------------------------------------- */
.vac-sticky { display: none; }

.vac-posted { color: #8a949d; font-size: 13px; }

.vac-btn {
    display: inline-block; background: #3C7D29; color: #fff; border: 0;
    border-radius: 6px; padding: 14px 30px; font-size: 15px; font-weight: 700;
    cursor: pointer; text-decoration: none; font-family: inherit;
    transition: background .2s ease;
}
.vac-btn:hover { background: #2A6419; color: #fff; text-decoration: none; }
.vac-btn:disabled { background: #9db3a0; cursor: default; }

/* ---- application form ----------------------------------------------------- */
.vac-form-wrap { max-width: 860px; }
.vac-fs { border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 22px 24px 26px; margin: 0 0 22px; background: #fff; }
.vac-fs legend {
    width: auto; padding: 0 10px; margin-left: -10px; font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #4a747f;
}
.vac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vac-f { display: block; font-size: 13.5px; font-weight: 600; color: #3d474f; }
.vac-f-wide { grid-column: 1 / -1; }
.req { color: #c0392b; }

.vac-f input[type=text], .vac-f input[type=email], .vac-f input[type=tel],
.vac-f input[type=date], .vac-f select, .vac-f textarea, .vac-f input[type=file] {
    margin-top: 7px; padding: 11px 13px; border: 1px solid #cfd6dd; border-radius: 6px;
    font-size: 15px; font-family: inherit; font-weight: 400; color: #1f2933; background: #fff;
    width: 100%;
}
.vac-f textarea { resize: vertical; line-height: 1.6; }
.vac-f input:focus, .vac-f select:focus, .vac-f textarea:focus {
    outline: 2px solid #3C7D29; outline-offset: -1px; border-color: #3C7D29;
}
.vac-hint { display: block; font-weight: 400; font-size: 12.5px; color: #8a949d; margin-top: 6px; }

.vac-consent {
    display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; margin-bottom: 24px;
    background: #f6f8f9; border: 1px solid rgba(0, 0, 0, .09); border-radius: 10px;
    font-size: 13.5px; line-height: 1.65; color: #3d474f;
}
.vac-consent input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; }

.vac-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vac-cancel { color: #6b757e; font-size: 14px; }
.vac-sending { display: none; color: #6b757e; font-size: 13.5px; }
.vac-sending.on { display: inline; }

.vac-errors {
    background: #fdf2f2; border: 1px solid #f0c6c4; color: #9c2620;
    padding: 16px 20px; border-radius: 9px; margin-bottom: 24px; font-size: 14px;
}
.vac-errors ul { margin: 9px 0 0; padding-left: 20px; }

/* the honeypot must be invisible to people but present for bots */
.vac-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- confirmation --------------------------------------------------------- */
.vac-done {
    text-align: center; max-width: 620px; margin: 0 auto; padding: 56px 30px;
    border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; background: #fff;
}
.vac-done-tick {
    width: 62px; height: 62px; border-radius: 50%; background: #e8f5e9; color: #3C7D29;
    font-size: 30px; line-height: 62px; margin: 0 auto 20px;
}
.vac-done h2 { font-size: 25px; font-weight: 700; margin-bottom: 12px; }
.vac-done p { color: #5c666f; line-height: 1.7; }
.vac-ref {
    display: block; margin: 26px auto; padding: 16px; background: #f6f8f9;
    border-radius: 9px; font-size: 13px; text-transform: uppercase;
    letter-spacing: .08em; color: #8a949d; font-weight: 700;
}
.vac-ref strong {
    display: block; margin-top: 7px; font-size: 22px; letter-spacing: .04em; color: #1d2a35;
}
.vac-done-note { font-size: 14px; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 991px) {
    /* One column. The facts panel moves above the advert, where it works as a
       summary, and stops being sticky. */
    .vac-layout { grid-template-columns: 1fr; gap: 26px; }
    /* display:contents lifts the panel and the note out of the sidebar so all
       three blocks become rows of the same grid and can be ordered: summary
       first, then the advert, then the note. Older browsers that ignore it
       simply keep the sidebar stacked above, which still reads correctly. */
    .vac-side { position: static; display: contents; }
    .vac-side-card { order: -1; padding: 20px; }
    .vac-side-note { order: 1; }
    .vac-side-card .vac-btn--block,
    .vac-side-card .vac-posted { display: none; }   /* the fixed bar does this job */
    /* the tag pills just repeat the panel above them on a narrow screen */
    .vac-main .vac-tags { display: none; }

    /* Fixed apply bar, so the button is never more than a thumb away. */
    .vac-wrap--job { padding-bottom: 96px; }
    .vac-sticky {
        display: flex; align-items: center; gap: 14px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        padding: 12px 15px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid rgba(0, 0, 0, .12);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    }
    .vac-sticky-t {
        flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #1d2a35;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .vac-sticky .vac-btn { flex: 0 0 auto; padding: 12px 26px; width: auto; }
}

@media (max-width: 767px) {
    .vac-sec-h { font-size: 12px; }
    .vac-rt { font-size: 15px; }
    .vac-rt-h { font-size: 15.5px; }
    .vac-apply-band { padding: 22px 20px; }
    .vac-apply-band .vac-btn { width: 100%; }

    .vac-wrap { padding: 24px 0 46px; }
    .vac-title { font-size: 23px; }
    .vac-grid { grid-template-columns: 1fr; gap: 15px; }
    .vac-card { flex-direction: column; gap: 14px; padding: 20px; }
    .vac-card-side { text-align: left; }
    .vac-fs { padding: 18px 16px 20px; }
    .vac-btn { width: 100%; text-align: center; }
    .vac-actions { gap: 12px; }
}

/* ==========================================================================
   Bridge to the 2026 design system
   --------------------------------------------------------------------------
   This page keeps its own layout, which was already close to where the rest
   of the site has now moved. These rules retire the handful of Bootstrap
   classes it borrowed, and pull its colours and type onto the shared tokens.
   ========================================================================== */
.vac-hero .container,
.vac-wrap.container,
.vac-hero-inner.container,
section.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumb-item {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
}
.breadcrumb-item + .breadcrumb-item::before { content: '/'; color: rgba(255,255,255,.24); }
.breadcrumb-item a { color: rgba(255,255,255,.62); transition: color .3s var(--ease); }
.breadcrumb-item a:hover { color: var(--green-lite); }
.breadcrumb-item.active a { color: var(--green-lite); }

.sec-more a, a.sec-more {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy);
  background-image: linear-gradient(var(--green), var(--green));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .4s var(--ease-out), color .3s var(--ease);
  padding-bottom: 2px;
}
.sec-more a:hover, a.sec-more:hover { background-size: 100% 2px; color: var(--green-deep); }
.sec-desc { color: var(--grey); }

/* the hero already clears the old fixed header; the new one is shorter */
.vac-hero { margin-top: 0; padding-top: 92px; background: var(--navy-900); }
.vac-hero-eyebrow { font-family: var(--f-mono); color: var(--green-lite); font-weight: 500; }
.vac-hero-dot { background: var(--green); }
.vac-hero-title, .vac-title, .vac-sec-h, .vac-card-title {
  font-family: var(--f-display); letter-spacing: -.025em;
}
.vac-hero-title { line-height: 1.02; }

/* buttons and accents pick up MYM green rather than the page's old one */
.vac-hero-cta, .vac-apply, .vac-submit, .vac-card:hover .vac-view {
  background: var(--green) !important; border-color: var(--green) !important;
}
.vac-hero-cta:hover, .vac-apply:hover, .vac-submit:hover {
  background: var(--navy) !important; border-color: var(--navy) !important;
}
.vac-form input:focus, .vac-form select:focus, .vac-form textarea:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 4px rgba(60,125,41,.13) !important;
}
.vac-card { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease); }
.vac-card:hover { transform: translateY(-6px); border-color: rgba(60,125,41,.4); }
.req { color: var(--green); }