/* Website security page. Uses the site palette and type, standalone page. */

/* No hero image on this page, so the site's fixed header would float over the
   content. Pin it in the flow instead, as the tool pages do. */
.ws-page .page-header { position: relative; background: #003469; }
.ws-page .page-header__top { position: static; padding: 1.6rem 0; background: #003469; }
/* The main wrapper's own padding shows as a bare strip between sections that
   carry their own padding. */
.ws-page .page-main { padding: 0; }

.ws-intro h1 { max-width: 22ch; margin-bottom: 1.6rem; text-wrap: balance; }
/* The reading measure is capped on the children, not on the container, so
   every section keeps the same left edge as the table section. */
.ws-copy > * { max-width: 80rem; }
.ws-copy p:not(.cb__kicker) { margin: 0 0 1.4rem; color: #42536a; }
.ws-copy p:last-child { margin-bottom: 0; }
.ws-copy h3 { margin: 2.4rem 0 1rem; font-size: var(--font-size--s); }
.ws-copy code { padding: .1rem .5rem; border-radius: .4rem; background: #eef3f7; font-family: Consolas, "Courier New", monospace; font-size: .92em; }

/* On a phone the table scrolls inside its wrapper rather than wrapping header
   values letter by letter. */
.ws-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ws-table { width: 100%; min-width: 72rem; border-collapse: collapse; font-size: var(--font-size--s); }
.ws-table th, .ws-table td { padding: 1.2rem 1.4rem; border-top: 1px solid #dce5ed; text-align: left; vertical-align: top; }
.ws-table thead th { border-top: 0; color: #003469; }
.ws-table tbody th { color: #003469; font-weight: 700; white-space: nowrap; }
.ws-table td { color: #42536a; }
.ws-table code { padding: .2rem .5rem; border-radius: .4rem; background: #f3f6f9; font-family: Consolas, "Courier New", monospace; font-size: 1.4rem; white-space: nowrap; }

.ws-checks { margin: 0; padding: 0; list-style: none; }
.ws-checks li { margin-bottom: 1.8rem; }
.ws-checks p { margin: .6rem 0 0; color: #42536a; font-size: var(--font-size--s); }
.ws-checks .ws-code {
  display: block;
  overflow-x: auto;
  padding: 1.2rem 1.6rem;
  border-radius: .8rem;
  background: #0b2447;
  color: #fff;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.4rem;
  white-space: pre;
}

.ws-report { display: grid; gap: 3.2rem; }
.ws-report h2 { margin: 0 0 1.2rem; }
/* The generic paragraph rule above carries a :not(), so match its specificity. */
.ws-copy ul + p:not(.cb__kicker) { margin-top: 1.6rem; }
.ws-form-card form { display: grid; gap: 1.4rem; }
.ws-form-card textarea { min-height: 14rem; }
@media (min-width: 769px) {
  .ws-report { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4.8rem; align-items: start; }
}

/* ---------- Print ---------- */

/* The same reasoning as the Trust Centre sheet: this page is printed to be
   attached to a security questionnaire, so the nav, the menu, the report form
   and the footer come off and the page reverts to black on white. */
@media print {
  .page-header__top-inner__nav,
  .lang-switch,
  .page-footer,
  .ws-form-card { display: none !important; }

  /* The screen rules above pin the header and paint it navy at the same
     specificity, so the print rules have to match it selector for selector. */
  .ws-page .page-header,
  .ws-page .page-header__top { position: static; background: #fff !important; }
  .ws-page .page-header__top-inner { display: block; }
  /* Same reason as the Trust Centre sheet: the wordmark is a white SVG and
     there is no dark version, so it keeps its navy ground on paper. */
  .ws-page .page-header__top-inner__logo {
    display: inline-block;
    width: auto;
    padding: 1.2rem 1.6rem;
    background: #003469;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .ws-page .page-header__top-inner__logo img { width: 15rem; height: auto; }

  body { background: #fff; color: #000; }
  .ws-page .cb { padding: 1.6rem 0; background: #fff !important; }
  .ws-copy p:not(.cb__kicker),
  .ws-page .cb__kicker,
  .ws-table td,
  .ws-table th,
  .ws-table tbody th,
  .ws-table thead th,
  .ws-checks p,
  .ws-page h1,
  .ws-page h2,
  .ws-page h3,
  .ws-page li,
  .ws-page a { color: #000 !important; }

  /* On screen the commands scroll sideways inside their own box. Paper has no
     sideways, so they wrap instead; without this the longest command, the
     openssl handshake check, is cut at the right margin. */
  pre,
  .ws-checks .ws-code {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: visible;
  }
  .ws-table code { background: #fff; white-space: normal; }

  /* Neither a table row nor a check with its explanation should be split
     across two sheets. */
  table, tr, th,
  .ws-checks li { break-inside: avoid; }
  .ws-table-wrap { overflow-x: visible; }
  .ws-table { min-width: 0; }
  .ws-table th, .ws-table td { border-top: 1px solid #000; }

  .ws-page main a[href^="http"]::after,
  .ws-page main a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    font-weight: 400;
    word-break: break-all;
  }
  .ws-page main a[href^="#"]::after { content: none; }
}