/* GENERATED by scripts/sync-topbar.mjs from the shared theme 1.1.0 (shared_theme/theme): do not edit by hand.
   The top bar and the "See our other projects" menu, as in the theme's base.css, with only the tokens they read.
   The theme's Open Sans is declared as "CT Open Sans" so this site's own Open Sans files are not affected. */

@font-face {
  font-family: "CT Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/open-sans-latin-wght-normal-CWNzRldh.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ct-accent: #12aaeb;
  --ct-container: 1200px;
  --ct-font-sans: "CT Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ct-fs-sm: 14px;
  --ct-fw-bold: 700;
  --ct-fw-semibold: 600;
  --ct-gutter: clamp(16px, 8px + 2vw, 32px);
  --ct-radius-lg: 10px;
  --ct-radius-md: 6px;
  --ct-radius-pill: 999px;
  --ct-radius-sm: 3px;
  --ct-space-1: 4px;
  --ct-space-2: 8px;
  --ct-space-3: 12px;
  --ct-space-4: 16px;
  --ct-space-5: 24px;
  --ct-topbar-bg: #ffffff;
  --ct-topbar-edge: #6c879d;
  --ct-topbar-focus: #0d78a6;
  --ct-topbar-height: 72px;
  --ct-topbar-hover: #f1f5f8;
  --ct-topbar-logo: 40px;
  --ct-topbar-partner: 36px;
  --ct-topbar-rule: #d3dde6;
  --ct-topbar-text: #13334f;
  --ct-transition: 0.2s ease;
}

.ct-container {
  width: 100%;
  max-width: var(--ct-container);
  margin-inline: auto;
  padding-inline: var(--ct-gutter);
}

/* ---------------------------------------------------------------------------------------------------------------- */
/* Top bar (1.1.0): the one header every data website uses. White, hairline rule below; left to right: the site's  */
/* own logo or name, its own page links (optional), collaborators' logos (optional), the "See our other projects"  */
/* menu, the Coon logo. Markup: snippets/topbar.html. Below 960px wide: the logo and the Coon logo on the first row,  */
/* the rest below. Flex order places the parts, so the markup order never changes: the ::before spacer pushes the   */
/* right-hand group to the right; below 960px the ::after rule breaks the row.                                     */
/* ---------------------------------------------------------------------------------------------------------------- */
.ct-topbar {
  position: relative;
  z-index: 30;
  background: var(--ct-topbar-bg);
  color: var(--ct-topbar-text);
  border-bottom: 1px solid var(--ct-topbar-rule);
}
.ct-topbar__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-2) var(--ct-space-5);
  min-height: var(--ct-topbar-height);
  padding-block: var(--ct-space-2);
}
.ct-topbar__inner::before { content: ""; order: 2; flex: 1 1 0; }
.ct-topbar__brand, .ct-topbar__nav { order: 1; }
.ct-topbar__partners, .ct-projects, .ct-topbar__coon { order: 3; }
.ct-topbar a { color: var(--ct-topbar-text); text-decoration: none; }
.ct-topbar :focus-visible { outline: 2px solid var(--ct-topbar-focus); outline-offset: 3px; border-radius: var(--ct-radius-sm); }

.ct-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--ct-space-3);
  flex: 0 1 auto;
  min-width: 0;
  font-size: 20px;
  font-weight: var(--ct-fw-bold);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.ct-topbar__brand img { display: block; flex: none; height: var(--ct-topbar-logo); width: auto; max-width: none; }

.ct-topbar__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--ct-space-1); margin: 0; padding: 0; list-style: none; }
.ct-topbar__nav li { margin: 0; }
.ct-topbar__nav a {
  display: inline-block;
  padding: var(--ct-space-2) var(--ct-space-3);
  font-size: var(--ct-fs-sm);
  font-weight: var(--ct-fw-bold);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.ct-topbar__nav a:hover { border-bottom-color: var(--ct-topbar-rule); }
.ct-topbar__nav a[aria-current="page"] { border-bottom-color: var(--ct-accent); }

.ct-topbar__partners { display: flex; align-items: center; gap: var(--ct-space-5); }
.ct-topbar__partner, .ct-topbar__coon { display: block; flex: none; }
.ct-topbar__partner img { display: block; height: var(--ct-topbar-partner); width: auto; }
.ct-topbar__coon img { display: block; height: var(--ct-topbar-logo); width: auto; }

/* The "See our other projects" menu: a disclosure button and a list of links (theme/projects-menu.js fills it). */
.ct-projects { position: relative; flex: none; }
.ct-projects__button {
  display: inline-flex;
  align-items: center;
  gap: 9.6px;
  min-height: 40px;
  margin: 0;
  padding: 7.2px 16px 7.2px 17.6px;
  border: 1px solid var(--ct-topbar-edge);
  border-radius: var(--ct-radius-pill);
  background: var(--ct-topbar-bg);
  color: var(--ct-topbar-text);
  font-family: var(--ct-font-sans);
  font-size: var(--ct-fs-sm);
  font-weight: var(--ct-fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ct-transition), border-color var(--ct-transition);
}
.ct-projects__button::after {
  content: "";
  flex: none;
  width: 7.2px;
  height: 7.2px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--ct-transition), margin var(--ct-transition);
}
.ct-projects__button:hover { background: var(--ct-topbar-hover); }
.ct-projects__button[aria-expanded="true"] { background: var(--ct-topbar-hover); border-color: var(--ct-topbar-text); }
.ct-projects__button[aria-expanded="true"]::after { margin-top: 3.2px; transform: rotate(-135deg); }
.ct-projects__button[hidden], .ct-projects__list[hidden] { display: none; }

.ct-projects__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: max-content;
  min-width: 100%;
  max-width: min(384px, calc(100vw - 32px));
  max-height: min(70vh, 544px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--ct-topbar-bg);
  border: 1px solid var(--ct-topbar-rule);
  border-radius: var(--ct-radius-lg);
  box-shadow: 0 2px 6px rgba(19, 51, 79, 0.10), 0 12px 32px rgba(19, 51, 79, 0.16);
  animation: ct-projects-in 0.14s ease-out;
}
.ct-projects__list li { margin: 0; }
.ct-projects__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-4);
  padding: 8px 12px;
  border-radius: var(--ct-radius-md);
  color: var(--ct-topbar-text);
  font-size: 15px;
  line-height: 1.35;
}
/* A small "opens in a new tab" mark after each name (an image, so no words are added). */
.ct-projects__list a::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: url("/assets/new-tab-yacRc19w.svg") center / contain no-repeat;
  opacity: 0.45;
  transition: opacity var(--ct-transition);
}
.ct-projects__list a:hover, .ct-projects__list a:focus-visible { background: var(--ct-topbar-hover); }
.ct-projects__list a:hover::after, .ct-projects__list a:focus-visible::after { opacity: 1; }
.ct-projects__list a:focus-visible { outline-offset: -2px; }
.ct-projects__list .ct-projects__all { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--ct-topbar-rule); }
.ct-projects__all a { font-weight: var(--ct-fw-semibold); }
@keyframes ct-projects-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 60rem) {
  .ct-topbar { --ct-topbar-logo: 34px; --ct-topbar-partner: 24px; }
  .ct-topbar__inner { gap: 0 var(--ct-space-4); padding-block: var(--ct-space-3); }
  /* room for the Coon logo (600 x 180) beside the site's name, so a long name wraps instead of pushing it down */
  .ct-topbar__brand { order: 1; font-size: 17px; max-width: calc(100% - var(--ct-topbar-logo) * 3.34 - 2 * var(--ct-space-4)); }
  .ct-topbar__coon { order: 3; }
  .ct-topbar__inner::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .ct-topbar__partners { order: 5; gap: var(--ct-space-4); margin-top: var(--ct-space-3); }
  .ct-projects { order: 6; position: static; margin-top: var(--ct-space-3); margin-left: auto; }
  .ct-topbar__nav { order: 7; flex-basis: 100%; margin-top: var(--ct-space-2); margin-inline: calc(-1 * var(--ct-space-3)); }
  .ct-projects__button { min-height: 38px; padding: 6.4px 13.6px 6.4px 15.2px; font-size: 13px; gap: 8px; }
  /* On a phone the open list spans the bar's width, just below it. */
  .ct-projects__list { top: calc(100% - 4px); left: var(--ct-gutter); right: var(--ct-gutter); width: auto; min-width: 0; max-width: none; }
}
/* IPSA's own additions to the shared top bar (topbar/topbar.css is generated from the theme and not edited).
   The pages' Bootstrap 3 and old stylesheet set things on whole elements that the bar must not take: a root font size of
   10px (handled in the generated file, which is written in px), body text of 14px, the old `img` rule (50px high, padded,
   meant for the old navbar's logo) and the old `a:link`, `a:visited` and `a:hover` colours. */
.ct-topbar {
  font-family: var(--ct-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  text-align: left;
}
.ct-topbar { margin-bottom: 20px; } /* the old navbar's gap above the page's panels (Bootstrap's .navbar margin) */
.ct-topbar img { max-height: none; padding: 0; }
.ct-topbar a:link, .ct-topbar a:visited, .ct-topbar a:hover, .ct-topbar a:focus { color: var(--ct-topbar-text); text-decoration: none; }
.ct-topbar a:focus { outline: 0; }
.ct-topbar a:focus-visible { outline: 2px solid var(--ct-topbar-focus); outline-offset: 3px; }
.ct-projects__list a:focus-visible { outline-offset: -2px; }

/* The pages use the whole window width, so the bar does too. */
.ct-topbar .ct-container { max-width: none; }

/* IPSA's four page links are long: measured, the name, the links, the menu and the Coon logo need about 1,425 px. Under 1,440 px
   (90rem) the links move to a row below the bar, as the theme does on a phone (the theme's own rule starts at 60rem). */
@media (min-width: 60.0625rem) and (max-width: 90rem) {
  .ct-topbar__inner::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .ct-topbar__nav { order: 5; flex-basis: 100%; margin-inline: -12px; }
}