/* Additions for the interim vacancy service; everything else comes from the site's own style.css. */

/* Short pages show the page background below the footer; match it to the footer. */
html { background-color: #1b1b1b; }

/* The new logo ships reversed (white); the existing header is light, so it is drawn dark. */
/* Sized by height at style.scss's own breakpoints (600px, 800px), like .home-logo there. */
.static-logo { display: inline-block; margin: 14px 0 14px 12px; }
.static-logo img { display: block; height: 55px; width: auto; filter: brightness(0); }
@media only screen and (min-width: 600px) {
  .static-logo { margin: 16px 0 16px 27px; }
  .static-logo img { height: 53px; }
}
@media only screen and (min-width: 800px) {
  .static-logo { margin: 20px 0 20px 0; }
  .static-logo img { height: 86px; }
}
.static-logo:focus-visible { outline: 3px solid #2b6cb0; outline-offset: 4px; }

.nav-breadcrumb ul { list-style: none; margin: 0; padding: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.nav-breadcrumb li:first-child { margin-right: 16px; }
.nav-breadcrumb li:last-child span { color: #555; }
/* style.scss spaces its ">" separator on the left only; match it on the right. */
.nav-breadcrumb li a:after { margin-right: 5px; }


.static-search .field { display: inline-block; vertical-align: top; margin: 0 16px 12px 0; min-width: 220px; }
.static-search label { display: block; font-weight: 600; margin-bottom: 4px; }
.static-search .field.checkbox label { display: inline; }
.static-search select, .static-search input[type="search"] { width: 100%; padding: 8px; font-size: 16px; }
.static-search .field.text { min-width: 360px; }
.static-search option:disabled { color: #999; }
.static-search select:focus-visible, .static-search input:focus-visible { outline: 3px solid #2b6cb0; outline-offset: 1px; }

.static-empty { padding: 24px; background: #f6f6f2; border-left: 4px solid #ffb81c; margin: 16px 0; }
.static-pager { margin: 24px 0; }
.static-pager a, .static-pager span { display: inline-block; min-width: 40px; text-align: center; padding: 8px 12px; margin: 0 4px 4px 0; border: 1px solid #ccc; text-decoration: none; }
.static-pager a.current { background: #333; color: #fff; border-color: #333; }
.results-sort label { margin-right: 6px; }
.vacancy-description p { margin-bottom: 1em; }
.static-footer { background: #1b1b1b; color: #fff; font-size: 16px; margin-top: 48px; }
.static-footer .page-wrapper { padding: 32px 20px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.static-footer img { display: block; width: 228px; height: auto; }
.static-footer a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

@media (max-width: 760px) {
  .static-search .field, .static-search .field.text { display: block; min-width: 0; margin-right: 0; }
  .nav-breadcrumb li:last-child { display: none; }
  .search-results-intro p { font-size: 16px; line-height: 1.5; }
}

/* ---- Vacancy detail: shared by the full page and the drawer. Colours from the site palette. ---- */
.vd { color: #333; font-size: 17px; line-height: 1.55; }
.vd-head { padding-bottom: 20px; border-bottom: 1px solid #e1e2d3; margin-bottom: 28px; }
.vd-employer { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; color: #555; }
.vd-employer .tag { margin-right: 6px; }
.vd .vd-title { color: #143468; font-size: 34px; line-height: 1.15; margin: 0 0 14px; padding: 0; }
.vd-title:focus { outline: none; }
.vd-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vd-badges li { background: #edede2; color: #26263a; border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 600; }
.vd-badges .vd-badge-good { background: #e7ee9b; color: #033333; }
.vd-badges .vd-badge-good::before { content: "✓ "; }

.vd-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.vd-section { margin-bottom: 32px; }
.vd .vd-section h2 { font-size: 22px; color: #143468; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #feb61e; display: inline-block; }
.vd-subhead { font-size: 17px; margin: 22px 0 10px; color: #26263a; }
.vd-description p { margin: 0 0 1em; }

.vd-contact-name { font-weight: 700; margin: 0 0 8px; }
.vd-contact-lines { list-style: none; margin: 0; padding: 0; }
.vd-contact-lines li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; overflow-wrap: anywhere; }
.vd-contact-lines span { color: #666; font-size: 15px; }

.vd-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vd-doc { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #dcdcdc; border-radius: 6px; text-decoration: none; color: #26263a; background: #fff; }
.vd-doc:hover, .vd-doc:focus-visible { border-color: #0066ff; background: #e2eefa; }
.vd-doc-type { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 4px; background: #143468; color: #fff; font-size: 12px; font-weight: 700; }
.vd-doc-text { display: flex; flex-direction: column; min-width: 0; }
.vd-doc-text span { color: #666; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vd-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 28px; }
.vd-facts dt { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin-bottom: 2px; }
.vd-facts dd { margin: 0; }
.vd-institute { font-weight: 700; margin: 0 0 4px; }

.vd-side { position: sticky; top: 16px; }
.vd-card { background: #fafaf6; border: 1px solid #e1e2d3; border-top: 4px solid #feb61e; border-radius: 6px; padding: 20px; }
.vd-label { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #666; }
.vd-closes { margin: 4px 0 6px; font-size: 19px; font-weight: 700; color: #143468; }
.vd-countdown { display: inline-block; margin: 0 0 16px; padding: 3px 10px; border-radius: 999px; background: #e2eefa; color: #1c4e76; font-size: 14px; font-weight: 600; }
.vd-countdown.vd-soon { background: #f9e1af; color: #7a4a00; }
.vd-actions { display: grid; gap: 10px; margin: 0 0 16px; }
.vd-btn { display: block; text-align: center; padding: 12px 14px; border-radius: 6px; border: 2px solid #143468; color: #143468; font-weight: 700; text-decoration: none; background: #fff; }
.vd-btn:hover, .vd-btn:focus-visible { background: #e2eefa; }
.vd-btn-primary { background: #143468; color: #fff; }
.vd-btn-primary:hover, .vd-btn-primary:focus-visible { background: #1c4e76; color: #fff; }
.vd-ref { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vd-copy { border: 1px solid #ccc; background: #fff; border-radius: 4px; padding: 2px 10px; font-size: 14px; cursor: pointer; }
.vd-copy:hover, .vd-copy:focus-visible { border-color: #0066ff; }
.vd-note { margin: 0; color: #666; font-size: 14px; }
.vd a:focus-visible, .vd button:focus-visible { outline: 3px solid #2b6cb0; outline-offset: 2px; }

.vd-page { padding: 32px 0 8px; }
.vd-page .page-wrapper { padding: 0 20px; }
.vd-back { margin: 8px 0 0; }

@media (max-width: 900px) {
  .vd-body { grid-template-columns: 1fr; gap: 8px; }
  .vd-side { position: static; order: -1; margin-bottom: 24px; }
  .vd .vd-title { font-size: 28px; }
}

/* ---- Drawer: 80% of the width from the right; the whole screen on a phone. ---- */
.vd-locked, .vd-locked body { overflow: hidden; }
.vd-drawer { position: fixed; inset: 0; z-index: 1000; }
.vd-scrim { position: absolute; inset: 0; background: rgba(20, 52, 104, .45); opacity: 0; transition: opacity .25s ease; }
.vd-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 80%; max-width: 1280px; background: #fff; box-shadow: -8px 0 32px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; outline: none; }
.vd-open .vd-scrim { opacity: 1; }
.vd-open .vd-panel { transform: none; }
.vd-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 24px; background: #fff; border-bottom: 1px solid #e1e2d3; }
.vd-open-page { font-size: 15px; }
.vd-close { display: inline-flex; align-items: center; gap: 8px; border: 2px solid #143468; background: #fff; color: #143468; border-radius: 6px;
  padding: 8px 14px; font-size: 16px; font-weight: 700; cursor: pointer; }
.vd-close:hover, .vd-close:focus-visible { background: #e2eefa; outline: none; }
.vd-close span { font-size: 18px; line-height: 1; }
.vd-content { padding: 28px 32px 40px; }
.vd-loading { padding: 40px 0; color: #555; font-size: 17px; }
.vd-panel .vd-side { top: 70px; }
@media (max-width: 760px) {
  .vd-panel { width: 100%; }
  .vd-content { padding: 20px 16px 32px; }
  .vd-bar { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-scrim, .vd-panel { transition: none; }
}

/* style.scss sets html to 10px with em-sized paragraphs, and styles every button blue and
   uppercase; the detail and drawer state their own sizes and button looks instead. */
.vd p, .vd li, .vd dd, .vd dt, .vd a, .vd time, .vd-loading p { font-size: inherit; }
.vd p, .vd li, .vd dd { font-size: 17px; line-height: 1.55; }
.vd .vd-employer { font-size: 14px; }
.vd .vd-badges li, .vd .vd-countdown, .vd .vd-note, .vd .vd-doc-text span, .vd .vd-contact-lines span { font-size: 14px; }
.vd .vd-label, .vd .vd-facts dt { font-size: 13px; }
.vd .vd-closes { font-size: 19px; }
.vd .vd-btn { font-size: 16px; }
.vd .vd-copy, .vd-bar .vd-close { text-transform: none; outline: none; }
.vd .vd-copy { color: #143468; background: #fff; border: 1px solid #ccc; font-size: 14px; padding: 3px 10px; }
.vd .vd-copy:hover, .vd .vd-copy:focus-visible { background: #e2eefa; border-color: #0066ff; }
.vd-bar .vd-close { color: #143468; background: #fff; padding: 8px 14px; }
.vd-bar .vd-close:hover, .vd-bar .vd-close:focus-visible { background: #e2eefa; }
.vd-loading { font-size: 17px; }
.vd-page .vd-back, .vd-page .vd-back a { font-size: 16px; }