/*
  PrintReady site stylesheet, tailored to the Gazette's public pages (from PrintReady's printready-site.css).
  Served with media="print"; the screen stylesheets are media="screen", so only these rules and the base file apply.
*/

/* 3.3.3: no navigation, search, filters, buttons or decorative elements on paper. */
#shell,
.site-banner,
.nav-breadcrumb,
.static-footer,
.static-search,
.static-list-intro,
.results-sort,
.static-pager,
.vd-drawer,
.vd-back,
.vd-actions,
.vd-copy,
.vd-countdown,
.vd-print,
.vd-map,
.link-read-more,
[class^="icon-"],
[class*=" icon-"] {
  display: none !important;
}

/* A vacancy open in the list's side panel prints alone, as its own page would: the list behind
   it and the panel's bar don't print, and the panel lies flat on the page. */
.vd-locked body > :not(.vd-drawer):not(.printready-agency):not(.printready-page-info) {
  display: none !important;
}
.vd-locked .vd-drawer {
  display: block !important;
  position: static;
}
.vd-locked .vd-scrim,
.vd-locked .vd-bar {
  display: none !important;
}
.vd-locked .vd-panel {
  position: static;
  width: auto;
  max-width: none;
  overflow: visible;
  transform: none;
  box-shadow: none;
}
.vd-locked .vd-content {
  padding: 0;
}

/* One sans-serif face and a small type scale, black on white. */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color: #000;
}
/* Bold inside bold stays bold; "bolder" would print in Arial Black. */
b,
strong {
  font-weight: bold;
}
h1, h2, h3, h4 {
  line-height: 1.2;
  break-after: avoid;
  page-break-after: avoid;
}
h1 {
  font-size: 20pt;
}
h2 {
  font-size: 14pt;
}
.vd-title {
  font-size: 20pt;
  margin: 0.15cm 0 0.2cm;
}
.vd-section h2,
#js-printready-link-urls h2 {
  font-size: 14pt;
  margin: 0 0 0.2cm;
}
.vd-subhead {
  font-size: 12pt;
  margin: 0.35cm 0 0.1cm;
}
.vd-employer {
  font-size: 11pt;
  margin: 0;
}
p,
ul,
ol {
  margin: 0 0 0.2cm;
}

/* The key dates and reference first, then the role, in one column. */
.vd-body {
  display: flex;
  flex-direction: column;
}
.vd-side {
  order: -1;
}
/* The closing box as label and value rows, aligned with Role details. */
.vd-card {
  border: 1px solid #000;
  padding: 0.2cm 0.35cm;
  margin: 0.2cm 0 0.1cm;
  display: grid;
  grid-template-columns: 30% 1fr;
  column-gap: 0.3cm;
  row-gap: 0.08cm;
  break-inside: avoid;
}
.vd-card p {
  margin: 0;
}
.vd-label {
  font-weight: bold;
}
/* "Reference" and its code fall into the two columns as separate grid items. */
.vd-ref {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  font-weight: bold;
}
.vd-note {
  grid-column: 1 / -1;
  font-size: 10pt;
}

/* The employer, regions and position as plain text lines. */
.vd-employer .tag {
  font-weight: bold;
}
.vd-badges {
  list-style: none;
  padding: 0;
  margin: 0.2cm 0;
}
.vd-badges li {
  display: inline;
}
.vd-badges li:not(:last-child):after {
  content: " · ";
}

/* Documents as "Title (file name)"; contact lines as "Phone: number". */
.vd-doc-type {
  display: none;
}
.vd-doc-text > span:before {
  content: " (";
}
.vd-doc-text > span:after {
  content: ")";
}
.vd-docs,
.vd-contact-lines {
  list-style: none;
  padding: 0;
}
.vd-contact-lines span:after {
  content: ": ";
}

/* Each section and each listed vacancy kept whole where it fits. */
.vd-section,
.vd-contact,
.vd-facts > div,
#list article {
  page-break-inside: avoid;
  break-inside: avoid;
}
.vd-section {
  margin-top: 0.45cm;
}

/* Role details as a two-column table: label, then value. */
dl.vd-facts {
  margin: 0;
}
dl.vd-facts > div {
  display: grid;
  grid-template-columns: 30% 1fr;
  column-gap: 0.3cm;
  padding: 0.08cm 0;
  border-bottom: 1px solid #bbb;
}
dl.vd-facts > div:first-child {
  border-top: 1px solid #bbb;
}
dl.vd-facts dt {
  margin: 0;
}

/* The vacancies list: one block per vacancy, separated by a rule. */
#list article {
  border-top: 1px solid #000;
  padding: 0.2cm 0;
}
#list article a {
  text-decoration: none;
}
#list .title {
  font-size: 12pt;
  font-weight: bold;
  margin: 0.08cm 0;
}
#list .meta,
#list .description,
#list .title-byline,
#list .vacancy-date {
  font-size: 10pt;
  margin: 0.04cm 0;
}
.vacancy-date > div {
  display: inline-block;
  margin-right: 0.5cm;
}
/* The card's dates as "Listed: 28 Oct 2026" and "Closes: 20 Nov 2026, 4pm". */
.vacancy-date .cal-icon {
  display: inline-flex;
}
.cal-icon .header:after {
  content: ":\00a0";
}
.cal-icon .day:after {
  content: "\00a0";
}
.cal-icon .time {
  order: 1;
}
.cal-icon .time:not(:empty):before {
  content: ",\00a0";
}

/* Layout and appearance of the "Agency" section printed with showAgency() */
.printready-agency {
  font-size: 12.5pt;
  font-weight: bold;
  padding-bottom: 0.25cm;
  padding-top: 0;
  padding-right: 1.25rem;
  border-bottom: 1px solid black;
  display: block;
}
.printready-agency p {
  margin: 0;
}

/* Layout and appearance of the "site details" section printed with showPageInformation() */
.printready-page-info {
  font-size: 10pt;
  padding-bottom: 0;
  padding-right: 1.25rem;
  margin-top: 0.4cm;
  border-top: 1px solid black;
  display: block;
}
.printready-page-info p {
  margin: 0.1cm 0;
}
.printready-page-info p:last-child {
  margin-bottom: 0;
}

/* Styling for formatted list of link URLs */
#js-printready-link-urls {
  font-size: 10pt;
  border-top: 1px solid #bbb;
  margin-top: 0.5cm;
  padding-top: 0.25cm;
}
ol.js-printready-links-list li:last-child {
  padding-bottom: 0;
}
#js-printready-link-urls h2 {
  margin: 0;
}
ol.js-printready-links-list {
  margin: 0;
  padding-left: 0.75cm;
  padding-top: 0.25cm;
}
ol.js-printready-links-list li {
  margin-top: 0;
  padding-top: 0.05cm;
  padding-bottom: 0.05cm;
  word-break: break-all;
}

/* Styling for the link reference (e.g., [Link: 1]) */
.js-printready-link-reference {
  font-weight: normal;
  text-decoration: none;
  display: inline-block;
  font-size: 7.5pt;
  padding-left: 0.05cm;
}

/* Definition list styles */
dl dt {
  font-weight: bold;
  margin-top: 0.1em;
}
dl dt:first-child {
  margin-top: 0;
}
dl dd {
  margin-left: 0;
}