/* SOTA shared styles: colors, type scale, the top bar with the site switcher, buttons and footer.
   The same file is in all three repositories, in main-website/public/assets/sota.css,
   guide-website/src/assets/sota.css and checklist-website/src/assets/sota.css. Change all three
   together. Each site's own stylesheet loads after this one and adds what only that site needs.
   Light only, like a printed page. */

:root {
  --paper: #FFFFFF;
  --ink: #16161D;
  --graphite: #5F6070;
  --hairline: #DCDCE3;
  --plate: #F5F5F8;
  --red: #B31B1B;   /* the current place, and boxed buttons */
  --blue: #1F48C7;  /* links */

  --serif: "STIX Two Text", "STIX Two", Cambria, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale. Use these instead of new sizes, so the three sites stay alike. */
  --text-hero: 40px;    /* the headline of a home page */
  --text-title: 36px;   /* page titles */
  --text-h2: 24px;      /* section headings */
  --text-h3: 19px;      /* subsection headings */
  --text-body: 18px;    /* running text */
  --text-ui: 16px;      /* top bar, buttons, tables, captions */
  --text-small: 14.5px; /* meta lines, footer */
  --text-label: 14px;   /* small-caps labels */
  --leading: 1.6;

  --topbar-h: 58px;
  --gutter: 20px;
  --control-h: 32px; /* buttons, the search box and the menu toggle in the top bar */

  color-scheme: light;
}

@media (max-width: 760px) {
  :root {
    --text-body: 17px;
    --topbar-h: 95px; /* the site switcher moves to a second row */
    --gutter: 16px;
  }
}

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text-body);
  line-height: var(--leading);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, table { margin: 0; }

img { display: block; max-width: 100%; height: auto; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

::selection { background: color-mix(in srgb, var(--red) 20%, transparent); }

.num { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 6px 10px;
}
.skip:focus { left: 8px; }

/* Small-caps label, like "Contents" or "On this page" */
.label {
  font-size: var(--text-label);
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--graphite);
}

/* Boxed link, like hyperref's red link borders */
.box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  /* STIX Two draws its letters about 1.5px above the middle of the line, so a little extra
     padding on top centres them by eye (measured with 4x screenshots). */
  padding: 3px 12px 0;
  border: 1px solid var(--red);
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.box:hover {
  background: var(--red);
  color: var(--paper);
  text-decoration: none;
}

/* ---------- top bar ---------- */
/* The logo, then the site switcher (SOTA · IOAI Guide · Checklist), then each site's own tools. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0 28px;
  height: var(--topbar-h);
  padding-inline: var(--gutter);
  font-size: var(--text-ui);
  line-height: 1.35;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding-block: 6px;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
/* The pixel mark: a 6×3 grid, sized in whole pixels per cell so edges stay crisp */
.brand-mark {
  display: block;
  width: 36px;
  height: 18px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.sites {
  display: flex;
  flex: none;
  align-items: center;
  gap: 24px;
}
/* Top-bar text links use the same line height and 3px nudge as the buttons, so every word in the
   bar sits on one line, centred (STIX Two draws a little high otherwise). */
.sites a,
.topbar-tools a:not(.box) {
  padding-top: 3px;
  line-height: 1;
}

.sites a {
  position: relative;
  color: var(--graphite);
  white-space: nowrap;
}
.sites a:hover { color: var(--ink); text-decoration: none; }
.sites a[aria-current] { color: var(--ink); }
/* The current site is underlined in red, like the current place elsewhere */
.sites a[aria-current]::after {
  content: "";
  position: absolute;
  inset: auto 0 -9px; /* about 7px below the letters; on phones, at the bottom of the switcher row */
  height: 2px;
  background: var(--red);
}

.topbar-tools {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  min-width: 0;
}
.topbar-tools a:not(.box) {
  color: var(--ink);
  white-space: nowrap;
}
.topbar-tools a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0 12px;
  }
  .brand { min-height: 56px; }
  .brand-mark { width: 30px; height: 15px; }
  /* Start from zero width, so a wide search box shrinks instead of pushing the tools onto a new row */
  .topbar-tools { flex: 1 1 0; gap: 14px; }
  .topbar-tools .opt { display: none; }
  .sites {
    order: 5;
    flex: 1 0 100%;
    gap: 22px;
    height: 38px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    font-size: 15px;
    border-top: 1px solid var(--hairline);
  }
}

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

.footer {
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--graphite);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 28px var(--gutter) 36px;
}
.footer-note { flex: 1 0 100%; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.footer-links a { color: var(--ink); }

@media print {
  .topbar, .footer, .skip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}