/* iCT4 page styles, based on the look of ict4.co.uk */

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/rubik-latin-italic.woff2') format('woff2');
}

:root {
  --ict4-teal: #034750;
  --ict4-teal-deep: #02343b;
  --ict4-green: #26c474;
  --ict4-green-text: #12804a;
  --ict4-green-tint: #e8f7ef;
  --ict4-blue: #0971aa;
  --ict4-cream: #f8faf1;
  --ict4-panel: #f1f3f2;

  --text: #333333;
  --muted: #5b676c;
  --rule: #dfe5e3;

  --font: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;

  --container: 1140px;
  --gutter: 24px;
  --header-h: 90px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ict4-green);
  color: var(--ict4-teal);
  padding: 10px 16px;
  font-weight: 500;
}
.skip-link:focus { left: 16px; top: 16px; }

:focus-visible { outline: 3px solid var(--ict4-green); outline-offset: 2px; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  background: rgba(3, 71, 80, 0.97);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.brand { display: block; align-self: flex-start; line-height: 0; }
.brand img { width: var(--header-h); height: var(--header-h); display: block; }

.header-link {
  color: #ffffff;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.header-link:hover { border-bottom-color: var(--ict4-green); }

/* ------------------------------------------------------------------ banner */

.banner {
  background-color: var(--ict4-green);
  background-image: url('../images/banner-swoosh.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  color: #ffffff;
  min-height: 240px;
  display: flex;
  align-items: center;
  padding: 56px 0;
}
.banner h1 {
  margin: 0 0 14px;
  max-width: 880px;
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(3, 71, 80, 0.35);
}
.banner .meta {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  background: rgba(3, 71, 80, 0.88);
  font-size: 14px;
  line-height: 1.4;
}
.banner .meta:empty { display: none; }

/* -------------------------------------------------------------------- page */

.page { padding: 64px 0 96px; }
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 72px;
  align-items: start;
}
.page-grid.no-toc { grid-template-columns: minmax(0, 1fr); }

/* Contents box, like the sidebar on ict4.co.uk blog posts */
.toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--ict4-panel);
  padding: 24px 24px 20px;
  font-size: 15px;
}
.toc[hidden] { display: none; }
.toc h2 {
  margin: 0 0 14px;
  color: var(--ict4-teal);
  font-size: 15px;
  font-weight: 500;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 10px; padding-left: 18px; position: relative; line-height: 1.4; }
.toc li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--ict4-green);
}
.toc a { color: var(--ict4-teal); text-decoration: none; }
.toc a:hover { text-decoration: underline; text-decoration-color: var(--ict4-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.toc a.active { font-weight: 500; }
.toc .toc-back {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}
.toc .toc-back strong { color: var(--ict4-teal); font-weight: 500; }

/* --------------------------------------------------------- markdown body */

.md-body { max-width: 760px; min-width: 0; }
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child { margin-bottom: 0; }

/* The opening paragraph reads like the lead line on ict4.co.uk articles */
.md-body > p:first-child {
  color: var(--ict4-teal);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
}

.md-body p,
.md-body ul,
.md-body ol,
.md-body pre,
.md-body blockquote,
.md-body .table-wrap,
.md-body .callout { margin: 0 0 24px; }

.md-body h1,
.md-body h2,
.md-body h3,
.md-body h4,
.md-body h5,
.md-body h6 {
  color: var(--ict4-teal);
  font-weight: 500;
  line-height: 1.25;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.md-body h1 { font-size: 34px; margin: 56px 0 20px; }
.md-body h2 {
  font-size: 28px;
  margin: 56px 0 20px;
  padding-bottom: 18px;
  background: url('../images/title-line.png') no-repeat left bottom / 150px auto;
}
.md-body h3 { font-size: 21px; margin: 36px 0 12px; }
.md-body h4 { font-size: 18px; margin: 28px 0 10px; color: var(--text); }
.md-body h5,
.md-body h6 { font-size: 16px; margin: 24px 0 8px; color: var(--muted); }

.md-body strong { font-weight: 600; }

.md-body a {
  color: var(--ict4-teal);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--ict4-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.md-body a:hover { background: var(--ict4-green-tint); }

.md-body ul,
.md-body ol { padding-left: 24px; }
.md-body li { margin: 0 0 8px; padding-left: 4px; }
.md-body li > ul,
.md-body li > ol { margin: 8px 0 0; }
.md-body ul > li::marker { color: var(--ict4-green); font-size: 1.1em; }
.md-body ol > li::marker { color: var(--ict4-teal); font-weight: 600; }

.md-body ul.task-list { list-style: none; padding-left: 0; }
.md-body li.task { padding-left: 0; }
.md-body li.task input {
  margin: 0 10px 0 0;
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  accent-color: var(--ict4-green);
}
.md-body li.task.done { color: var(--muted); }

.md-body img { max-width: 100%; height: auto; }

.md-body hr {
  border: 0;
  height: 2px;
  background: var(--rule);
  margin: 48px 0;
}

.md-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--ict4-green-tint);
  color: var(--ict4-teal-deep);
  padding: 0.12em 0.4em;
  border-radius: 3px;
}
.md-body pre {
  background: var(--ict4-teal);
  color: #e6f6ee;
  padding: 18px 22px;
  border-left: 4px solid var(--ict4-green);
  overflow-x: auto;
  line-height: 1.55;
}
.md-body pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: 14px;
  border-radius: 0;
}

.md-body blockquote {
  padding: 16px 22px;
  border-left: 4px solid var(--ict4-green);
  background: var(--ict4-cream);
  color: #3c494d;
}
.md-body blockquote > :last-child { margin-bottom: 0; }

/* Callouts: > [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION] */
.callout {
  --accent: var(--ict4-blue);
  --tint: #edf5fa;
  padding: 16px 22px;
  border-left: 4px solid var(--accent);
  background: var(--tint);
}
.callout > :last-child { margin-bottom: 0; }
.callout .callout-title {
  margin: 0 0 6px;
  color: var(--accent);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.callout .callout-title::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--accent);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.callout-note {
  --accent: var(--ict4-blue);
  --tint: #edf5fa;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}
.callout-tip {
  --accent: var(--ict4-green-text);
  --tint: var(--ict4-green-tint);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1.5H9V21zm3-19a7 7 0 0 0-4 12.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}
.callout-important {
  --accent: var(--ict4-teal);
  --tint: #e9f1f2;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H8l-5 4V4a1 1 0 0 1 1-1zm7 3v6h2V6h-2zm0 8v2h2v-2h-2z'/%3E%3C/svg%3E");
}
.callout-warning {
  --accent: #9a5b00;
  --tint: #fdf4e3;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 16h-2v-2h2v2zm0-4h-2V9h2v5z'/%3E%3C/svg%3E");
}
.callout-caution {
  --accent: #b3261e;
  --tint: #fcecea;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2zM11 7v6h2V7h-2zm0 8v2h2v-2h-2z'/%3E%3C/svg%3E");
}
.callout-warning { border-left-color: #e0a100; }

/* Tables */
.md-body .table-wrap { overflow-x: auto; }
.md-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}
.md-body th {
  background: var(--ict4-teal);
  color: #ffffff;
  font-weight: 500;
  text-align: left;
  padding: 11px 14px;
  white-space: nowrap;
}
.md-body td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.md-body tbody tr:nth-child(even) td { background: #f7f9f8; }

/* ------------------------------------------------------- loading + errors */

.notice {
  max-width: 760px;
  padding: 28px 30px;
  background: var(--ict4-panel);
  border-left: 4px solid var(--ict4-green);
}
.notice h2 { margin: 0 0 10px; color: var(--ict4-teal); font-size: 22px; font-weight: 500; }
.notice p { margin: 0 0 14px; }
.notice code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: #ffffff;
  padding: 0.12em 0.4em;
  border-radius: 3px;
}
.loading { color: var(--muted); }

.button {
  display: inline-block;
  background: var(--ict4-teal);
  color: #ffffff;
  font: inherit;
  font-weight: 500;
  padding: 12px 22px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.button:hover { background: var(--ict4-teal-deep); box-shadow: inset 0 -3px 0 var(--ict4-green); }
.button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ footer */

.site-footer {
  background-color: var(--ict4-teal);
  background-image: url('../images/footer-brush.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 360px auto;
  color: #ffffff;
  padding: 64px 0 88px;
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 44px;
}
.site-footer h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.site-footer p { margin: 0 0 8px; }
.site-footer a { color: #ffffff; text-decoration: none; }
.site-footer a:hover { color: var(--ict4-green); }
.site-footer .accent-link { color: var(--ict4-green); }
.site-footer .accent-link:hover { text-decoration: underline; }
.accreditations { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 0 32px; }
.legal { color: rgba(255, 255, 255, 0.82); font-size: 14px; max-width: 720px; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 960px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .toc { position: static; order: -1; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  :root { --gutter: 16px; --header-h: 64px; }
  .banner { min-height: 0; padding: 40px 0; }
  .page { padding: 40px 0 64px; }
  .md-body > p:first-child { font-size: 17px; }
  .md-body h2 { font-size: 24px; margin-top: 44px; }
  .md-body h3 { font-size: 19px; }
  .md-body pre { padding: 14px 16px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .site-footer { background-size: 220px auto; }
}

/* ------------------------------------------------------------------- print */

@media print {
  .site-header { position: static; }
  .toc, .skip-link, .header-link { display: none; }
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .banner { min-height: 0; padding: 24px 0; }
  .md-body { max-width: none; }
  .md-body a { color: inherit; }
  .site-footer { padding: 24px 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}