@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../vendor/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../vendor/montserrat-700.woff2') format('woff2');
}
.montserrat, #title-line { font-family: 'Montserrat', sans-serif; }
/* same look as the production site title */
#title-line { font-size: 1.75rem; font-weight: 600; letter-spacing: 2px; color: #212529; }
@media (max-width: 575.98px) { #title-line { font-size: 1.25rem; letter-spacing: 1px; } }
.site-nav { background-color: #8ed1fc50; }

/* ---- goal colors ---- */
.bg-strongpartnerships { background-color: #ed7a23; }
.bg-resilientcommunities { background-color: #1f9f8a; }
.bg-cleanwaters { background-color: #2e77b0; }
.bg-healthyecosystem { background-color: #7dbf72; }

.txt-strongpartnerships { color: #ed7a23 !important; }
.txt-resilientcommunities { color: #1f9f8a !important; }
.txt-cleanwaters { color: #2e77b0 !important; }
.txt-healthyecosystem { color: #7dbf72 !important; }

.bd-strongpartnerships { border-color: #ed7a23 !important; }
.bd-resilientcommunities { border-color: #1f9f8a !important; }
.bd-cleanwaters { border-color: #2e77b0 !important; }
.bd-healthyecosystem { border-color: #7dbf72 !important; }

/* darker/lighter border marks the goal being viewed */
.bd-strongpartnerships-chosen { border-color: #bd5a0f; }
.bd-resilientcommunities-chosen { border-color: #27caaf; }
.bd-cleanwaters-chosen { border-color: #5a9fd4; }
.bd-healthyecosystem-chosen { border-color: #4d9142; }

.box-strongpartnerships, .box-resilientcommunities, .box-cleanwaters, .box-healthyecosystem {
  border: 2px solid; text-align: center; display: block; width: 100%;
}
.box-strongpartnerships { border-color: #ed7a23; }
.box-resilientcommunities { border-color: #1f9f8a; }
.box-cleanwaters { border-color: #2e77b0; }
.box-healthyecosystem { border-color: #7dbf72; }

/* ---- status colors ---- */
.unexecuted { background-color: #dc3545; }
.inprogress { background-color: #ffc107; }
.complete { background-color: #198754; }
.ongoing { background-color: #d4edbc; }
.nostatus { background-color: #adb5bd; }

.small-square { height: 15px; width: 15px; display: inline-block; border-radius: 5px; }
.dot { height: 25px; width: 25px; border-radius: 50%; display: inline-block; }
.tiny-dot { height: 10px; width: 10px; border-radius: 50%; display: inline-block; }

/* ---- home page tiles ---- */
.goal-link {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 1.25rem 0; text-decoration: none;
}
/* The tile images are ~215px wide, so never scale them past their own size (that is what made them soft). */
.goal-img { display: block; width: 70%; max-width: 216px; height: auto; }
.info-div {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif;
}
.goal-link:hover .goal-img, .goal-link:focus-visible .goal-img { visibility: hidden; }
.goal-link:hover .info-div, .goal-link:focus-visible .info-div { display: flex; }
.goal-text { color: #fff; font-size: clamp(.8rem, 1.75vh, 1.1rem); }
.goal-gap { margin-top: .75rem; }

/* ---- goal / objective pages ---- */
.goal-chip { padding: 0; margin: 0 3px; border-style: solid; border-width: 5px; }
.goal-chip a { display: block; padding: 5px 0; }
.goal-chip img { width: 70%; height: auto; }
.zoom { transition: transform .5s; }
.zoom:hover { transform: scale(1.1); }
.num { font-size: 48px; }
.indent { padding-left: 20px; }
.chart-wrap { position: relative; width: 100%; max-width: 220px; aspect-ratio: 1; margin: 0 auto; }
.resource-frame { width: 100%; border: 0; }

/* ---- home carousel ----
   The stage keeps a fixed aspect ratio (set from carousel.json via app.js) and crops any
   replacement image to fill it, so photos of different sizes never stretch or leave gaps. */
.home-carousel { --carousel-ratio: 1280 / 500; max-width: 1280px; margin-inline: auto; position: relative; }
.carousel-img { aspect-ratio: var(--carousel-ratio); object-fit: cover; height: auto; background: #dfe9f1; }
.home-carousel .carousel-item { margin-bottom: 0; } /* <figure> default margin; keep Bootstrap's margin-right:-100% so slides overlap */
.carousel-link { display: block; color: inherit; text-decoration: none; }
/* Photo credits are printed in the bottom-right of the images, so the centered caption is kept
   to the middle 64% of the width (18%-82%). */
.carousel-title {
  position: absolute; left: 18%; right: 18%; bottom: 0; text-align: center;
  margin: 0; padding: 2.5rem 0 1.25rem; color: #fff;
  font-size: clamp(1.1rem, 2.6vw, 2.2rem); line-height: 1.2; text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
.carousel-title::before { /* soft scrim so white text stays readable on any photo */
  content: ''; position: absolute; inset: 0 -18% 0; z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
/* dots sit under the picture so they never cover a caption or a credit */
.carousel-dots { display: flex; justify-content: center; align-items: center; gap: .5rem; padding: .6rem 0 0; }
.carousel-dots button[data-bs-target] {
  width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #2e77b0; opacity: .35;
}
.carousel-dots button[data-bs-target].active { opacity: 1; }
.carousel-pause { margin-left: .75rem; border: 0; background: none; color: #2e77b0; font-size: 1.25rem; line-height: 1; }
.home-carousel .carousel-control-prev, .home-carousel .carousel-control-next { bottom: 2.5rem; width: 8%; }

/* phones: don't overlay the caption on a small picture; put it in a bar underneath */
@media (max-width: 767.98px) {
  .carousel-title {
    position: static; padding: .75rem 1rem; text-shadow: none; background: #1b3a57; font-size: 1.1rem;
  }
  .carousel-title::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .carousel-fade .carousel-item { transition: none; } }

/* Same padding as .accordion-button, so the status dots line up with the expandable measures above/below. */
.measure-row { display: flex; align-items: center; padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); }
.status-pie:not(.ready) { visibility: hidden; }

/* The selected tab (Performance Measures / Related Resources ...) gets the same background and text color as an opened Action. */
.nav-tabs {
  --bs-nav-tabs-link-active-bg: var(--bs-primary-bg-subtle);
  --bs-nav-tabs-link-active-color: var(--bs-primary-text-emphasis);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-primary-bg-subtle);
}