/* The "Montra" theme of the public site, from docs/design/client/b-montra.html.
   Loaded after Bootstrap and site.css. It retunes Bootstrap through its own CSS variables, so every view
   that uses a Bootstrap button, form or card takes the theme without being touched, and adds the few pieces
   Bootstrap has no name for: the page width, the header, the footer and Lenis. */
:root {
  --ysi-ink: #0b1b24;
  --ysi-ink-2: #4f616b;
  --ysi-ink-3: #8597a0;
  --ysi-line: #e2e8eb;
  --ysi-soft: #f2f5f7;
  --ysi-sky: #eaf6fb;
  --ysi-cyan: #009CD0;
  --ysi-cyan-hover: #0089b8;
  --ysi-cyan-active: #007aa5;
  /* The cyan is too light for small text on white; links and labels use this darker step of it. */
  --ysi-cyan-text: #00759e;
  --ysi-wrap: 1520px;
  --ysi-gutter: clamp(16px, 3.5vw, 56px);

  --bs-body-font-family: Inter, Helvetica, Arial, sans-serif;
  --bs-body-color: var(--ysi-ink);
  --bs-body-color-rgb: 11, 27, 36;
  --bs-emphasis-color: var(--ysi-ink);
  --bs-secondary-color: var(--ysi-ink-2);
  --bs-tertiary-bg: var(--ysi-soft);
  --bs-border-color: var(--ysi-line);
  --bs-primary: var(--ysi-cyan);
  --bs-primary-rgb: 0, 156, 208;
  --bs-primary-text-emphasis: var(--ysi-cyan-text);
  --bs-primary-bg-subtle: var(--ysi-sky);
  --bs-primary-border-subtle: #cde7f1;
  --bs-link-color: var(--ysi-cyan-text);
  --bs-link-color-rgb: 0, 117, 158;
  --bs-link-hover-color: #005b7b;
  --bs-link-hover-color-rgb: 0, 91, 123;
  --bs-link-decoration: none;
  --bs-border-radius: .625rem;
  --bs-border-radius-lg: .875rem;
  --bs-focus-ring-color: rgba(0, 156, 208, .25);
}

body {
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -.025em; font-weight: 700; }

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-border-radius: 999px;
  --bs-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.btn:hover { text-decoration: none; }

.btn-primary {
  --bs-btn-bg: var(--ysi-cyan);
  --bs-btn-border-color: var(--ysi-cyan);
  --bs-btn-hover-bg: var(--ysi-cyan-hover);
  --bs-btn-hover-border-color: var(--ysi-cyan-hover);
  --bs-btn-active-bg: var(--ysi-cyan-active);
  --bs-btn-active-border-color: var(--ysi-cyan-active);
  --bs-btn-disabled-bg: var(--ysi-cyan);
  --bs-btn-disabled-border-color: var(--ysi-cyan);
}

.btn-outline-primary {
  --bs-btn-color: var(--ysi-ink);
  --bs-btn-border-color: var(--ysi-ink);
  --bs-btn-hover-bg: var(--ysi-ink);
  --bs-btn-hover-border-color: var(--ysi-ink);
  --bs-btn-active-bg: var(--ysi-ink);
  --bs-btn-active-border-color: var(--ysi-ink);
  --bs-btn-disabled-color: var(--ysi-ink-3);
  --bs-btn-disabled-border-color: var(--ysi-line);
  border-width: 1.5px;
}

.form-control, .form-select {
  --bs-border-radius: .625rem;
  border-color: #d3dce0;
}

.form-control:focus, .form-select:focus {
  border-color: var(--ysi-cyan);
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
  background-color: var(--ysi-cyan);
  border-color: var(--ysi-cyan);
}

.card {
  --bs-card-border-color: var(--ysi-line);
  --bs-card-border-radius: .75rem;
  --bs-card-inner-border-radius: calc(.75rem - 1px);
}

.table {
  --bs-table-border-color: var(--ysi-line);
}

.table > thead th {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ysi-ink-3);
  background: var(--ysi-soft);
  white-space: nowrap;
}

.pagination {
  --bs-pagination-color: var(--ysi-ink);
  --bs-pagination-active-bg: var(--ysi-cyan);
  --bs-pagination-active-border-color: var(--ysi-cyan);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* The page: wider than Bootstrap's .container, which stops at 1320px. The 1520px includes the gutters, as the
   design's page box does. */
.site-wrap {
  width: 100%;
  max-width: var(--ysi-wrap);
  margin-inline: auto;
  padding-inline: var(--ysi-gutter);
}

/* Header: white, a cyan rule on top, the wordmark on the left. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-top: 3px solid var(--ysi-cyan);
  border-bottom: 1px solid var(--ysi-line);
}

.site-header .navbar {
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: var(--ysi-ink);
  --bs-navbar-hover-color: var(--ysi-ink);
  --bs-navbar-active-color: var(--ysi-ink);
  --bs-navbar-nav-link-padding-x: 0;
  min-height: 68px;
}

/* What Bootstrap does for `.navbar > .container`, for the wider page box. */
.site-header .navbar > .site-wrap {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

.site-header .navbar-brand img {
  height: 22px;
}

.site-header .navbar-nav {
  gap: .25rem 1.625rem;
  font-size: .9375rem;
  font-weight: 600;
}

.site-header .nav-link {
  border-bottom: 2px solid transparent;
}

.site-header .nav-link:hover {
  text-decoration: none;
  border-bottom-color: var(--ysi-line);
}

.site-header .nav-link[aria-current="page"] {
  border-bottom-color: var(--ysi-cyan);
}

.site-header .navbar-nav .dropdown-menu {
  --bs-dropdown-border-color: var(--ysi-line);
  --bs-dropdown-border-radius: .75rem;
  --bs-dropdown-link-active-bg: var(--ysi-cyan);
  box-shadow: 0 12px 32px rgba(6, 18, 25, .12);
}

.site-header .form-control {
  border-radius: 999px;
  min-width: 12rem;
}

.site-header .nav-link.site-signup {
  border: 1.5px solid var(--ysi-ink);
  border-radius: 999px;
  padding: .45rem 1.1rem;
}

.site-header .nav-link.site-signup:hover {
  background: var(--ysi-ink);
  color: #fff;
}

.site-header .navbar-toggler {
  border-color: var(--ysi-line);
  border-radius: 999px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--ysi-line);
  padding: 2rem 0;
  font-size: .875rem;
  color: var(--ysi-ink-2);
}

.site-footer a, .site-footer .btn-link {
  color: var(--ysi-ink-2);
}

/* The cookie-preferences button sits among links, so it wears their type rather than a button's. */
.site-footer .btn-link {
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  vertical-align: baseline;
}

.site-footer a:hover, .site-footer .btn-link:hover {
  color: var(--ysi-ink);
}

/* Lenis, set up by js/site.js. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Phones and tablets. The base type stays at 16px rather than site.css's 14px: the theme is set in rem, and a
   form field under 16px makes iOS zoom the page when it takes focus. */
html { font-size: 16px; }

@media (max-width: 991.98px) {
  .site-header .navbar { min-height: 60px; }
  .site-header .navbar-brand img { height: 20px; }

  .site-header .navbar-collapse { padding: .5rem 0 1.25rem; }
  .site-header .navbar-nav { gap: 0; font-size: 1rem; }
  .site-header .navbar-nav + .navbar-nav { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--ysi-line); }

  .site-header .nav-link {
    padding: .625rem 0;
    border-bottom: 0;
  }

  .site-header .nav-link[aria-current="page"] { color: var(--ysi-cyan-text); }

  .site-header form[role="search"] { margin: .25rem 0 .5rem; }
  .site-header .form-control { width: 100%; min-width: 0; }

  .site-header .nav-link.site-signup {
    display: inline-block;
    margin-top: .25rem;
    padding: .5rem 1.25rem;
  }

  .site-header .navbar-nav .dropdown-menu { box-shadow: none; border: 0; padding-left: .75rem; }
}

@media (max-width: 575.98px) {
  main.site-wrap { padding-top: 1rem !important; }
  .site-footer { padding: 1.5rem 0; }
}