/* Open Sans, self-hosted (#11): the variable font's Latin subset covers every weight the
   site uses (300-700). SIL OFL 1.1, see /lib/open-sans/OFL.txt. The root font size stays
   the browser's 16px at every width, as on the old site, so the rem sizes below match it. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../lib/open-sans/open-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("../lib/open-sans/open-sans-latin-wght-normal.woff2") format("woff2");
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Contact form honeypot (#10): off-screen rather than display:none, which some bots skip. */
.contact-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bootstrap 4's grid, which the old site was built on (#11): containers stop at 1140px
   (Bootstrap 5 adds a 1320px step at 1400px) and gutters are 30px, 15px a side, rather
   than 1.5rem. .container-xxl is left alone (it is fluid below 1400px). */
@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl,
.container-xxl, .row {
  --bs-gutter-x: 30px;
}

/* Bootstrap's gutter utilities set the same variable on a .row and must still win, so the
   plain ones are restated after the rule above. The responsive ones (g-md-3, gx-lg-0 etc.)
   are NOT restated, so the .row rule above silently beats them: do not use them in views,
   or restate them here first. A test (ViewConventionsTests) fails if a view uses one. */
.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-1, .gx-1 { --bs-gutter-x: 0.25rem; }
.g-2, .gx-2 { --bs-gutter-x: 0.5rem; }
.g-3, .gx-3 { --bs-gutter-x: 1rem; }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem; }
.g-5, .gx-5 { --bs-gutter-x: 3rem; }

/* Ported from the old React site's app.css (#11): typography, colours, the nav, the blue
   title bar with its right-aligned breadcrumb, tag badges, the footer. Rules for markup
   the site no longer has (the old Explore list/detail/buttons, the map caption) were not
   ported; hiding Mapbox's attribution was dropped (Mapbox requires it). */
body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.4;
  font-weight: 300;
  margin-top: 0;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 0;
}

h2 {
  font-weight: 500;
  font-size: 1.2rem;
}

h3 {
  font-weight: 500;
  font-size: 1rem;
}

/* Link and nav colours through Bootstrap's variables rather than `color`, so its :hover,
   .active and open-dropdown (.show) states still change them. */
:root {
  --bs-link-color: #0077c0;
  --bs-link-color-rgb: 0, 119, 192;
  --bs-link-hover-color: #005a92;
  --bs-link-hover-color-rgb: 0, 90, 146;
}

/* Bootstrap 4's link look where the old site had it: no underline until hover or keyboard
   focus. Elsewhere links keep Bootstrap 5's underline. */
.breadcrumb a, .awards h2 a, .not-found a, .footer a {
  text-decoration: none;
}

.breadcrumb a:hover, .breadcrumb a:focus-visible,
.awards h2 a:hover, .awards h2 a:focus-visible,
.not-found a:hover, .not-found a:focus-visible,
.footer a:hover, .footer a:focus-visible {
  text-decoration: underline;
}

/* The old site's nav: grey links, darker on hover, near-black for the current section and
   the open menu. */
.navbar {
  --bs-navbar-color: #555555;
  --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
  --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
}

/* Hovered/focused items take the site blue (4.53:1 on the hover grey); the current
   category is white on the site blue (4.77:1). */
.dropdown-menu {
  --bs-dropdown-link-hover-color: #0077c0;
  --bs-dropdown-link-active-bg: #0077c0;
}

/* Primary buttons in the site blue rather than Bootstrap's: white text is 4.77:1 on
   #0077c0, 7.3:1 on the hover #005a92 and 8.9:1 on the pressed #004d7d. */
:root {
  --bs-primary: #0077c0;
  --bs-primary-rgb: 0, 119, 192;
}

.btn-primary {
  --bs-btn-bg: #0077c0;
  --bs-btn-border-color: #0077c0;
  --bs-btn-hover-bg: #005a92;
  --bs-btn-hover-border-color: #005a92;
  --bs-btn-focus-shadow-rgb: 0, 119, 192;
  --bs-btn-active-bg: #004d7d;
  --bs-btn-active-border-color: #004d7d;
  --bs-btn-disabled-bg: #0077c0;
  --bs-btn-disabled-border-color: #0077c0;
}

.badge {
  background-color: #0077c0;
  color: white;
}

.small {
  font-size: 0.7rem;
}

/* Inline SVG icons (<icon name="..." />, IconTagHelper): sized and aligned like the old
   site's Font Awesome icons, one text line high, in the text's colour. */
.icon {
  display: inline-block;
  height: 1em;
  width: auto;
  overflow: visible;
  vertical-align: -0.125em;
}

/* Fixed width (the old site's 14px), centring the glyph, so the text after a column of
   icons lines up. */
.icon-fw {
  width: 14px;
}

.navbar-nav .nav-link {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
}

/* The current section is underlined as well as near-black: the colour alone is only
   2.4:1 against the other links' #555, and close to the hover colour (WCAG 1.4.1). Not on
   hover. */
.navbar-nav .nav-link.active {
  text-decoration: underline 2px;
  text-underline-offset: 0.4em;
}

.dropdown-item {
  font-size: 0.9rem;
}

/* Full-bleed like the old site, whose bar sat in a fluid container: the background runs
   to the window edges, painted in one piece by a filled border image outset sideways
   (outsets add no scrollable overflow, and one paint leaves no seam at the container
   edge), while the bar loses its own side padding so its inner .container lines the
   title and breadcrumb up with the page's content. */
.titleBar {
  background-color: #0077c0;
  padding-left: 0;
  padding-right: 0;
  border-image: linear-gradient(#0077c0 0 0) fill 0 / / 0 100vmax;
}

/* No side padding: the breadcrumb ends at the content edge, as the title starts at it. */
.breadcrumb {
  justify-content: flex-end;
  padding: 0.5rem 0;
  margin-top: 0;
  margin-bottom: 0;
  background-color: transparent;
}

.breadcrumb-item a {
  color: white;
}

/* The old #82cfff is 2.8:1 on the bar; this pale blue is 4.57:1 (WCAG AA 4.5:1). */
.breadcrumb-item.active {
  color: #f5fbff;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: white;
}

/* The old site's footer: small grey text and links, headings in bold capitals. Two
   columns from 576px, four from 992px (the grid classes in _Layout). #6c757d rather than
   the old #777, which is 4.48:1 on white, just under WCAG AA; this is 4.69:1. */
.footer, .footer a {
  font-size: 0.85rem;
  color: #6c757d;
}

.footer-head {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  text-transform: uppercase;
}

/* ---- Photo frame ---------------------------------------------------------------------
   The old site's ShadowImage (`img-fluid shadow p-3 bg-white rounded`): the photo inset in
   a white, rounded frame with a soft drop shadow, on gallery tiles, the image detail, home
   tiles, awards, the About portrait and the Explore detail. Values are the old site's
   computed ones (Bootstrap's p-3, .shadow and .rounded). On an <img> the padding sits
   inside its border-box width, so an img-fluid photo never overflows its column. */
.photo-frame {
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* ---- End photo frame ---------------------------------------------------------------- */