/**
 * Guidelines:
 * 1) Customize Bootstrap first (assets/scss/bootstrap-custom-variables.scss).
 * 2) Do further customization and overrides here (assets/css/site.css).
 */

/*
SpareBank 1 fonts (optional)
@import url("../fonts/sb1-fonts.css");
  font-family: "SpareBank1";
  font-weights: 300, 400, 500, 700, 900;
  font-style: normal, italic;

  font-family: "SpareBank1 Title";
  font-weights: 300, 400, 500;
  font-style: normal;
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* ==========================================================================
   Design tokens / CSS variables
   ========================================================================== */

:root {
  /* Typography */
  --bs-body-font-family: "Poppins", sans-serif; /* Handy override; can also be set in Bootstrap. */
  --cm-heading-font-family: var(--bs-body-font-family);
  --cm-display-font-family: var(--bs-body-font-family);
  --cm-heading-font-weight: 600;
  --cm-display-font-weight: var(--cm-heading-font-weight);
  --cm-heading-color: var(--bs-secondary);
  --cm-display-color: var(--bs-secondary);
  --cm-lead-font-weight: 400;

  /* Theme swapping on backgrounds */
  --cm-content-color-rgb: var(--bs-body-color-rgb);
  --cm-invert-color-rgb: var(--bs-white-rgb);

  /* Layout */
  --cm-header-height: 90px; /* Placeholder; set via JS based on #header height */
  --cm-narrow: none;

  /* Height presets */
  --cm-height-1: 25vh;
  --cm-height-2: 50vh;
  --cm-height-3: 75vh;

  /* Spacing tokens */
  --cm-spacer-1: 0.25rem;
  --cm-spacer-2: 0.5rem;
  --cm-spacer-3: 1rem;
  --cm-spacer-4: 1.5rem;
  --cm-spacer-5: 3rem;
  --cm-spacer-6: 3.5rem;
  --cm-spacer-7: 4rem;

  /* Media */
  --cm-play-button-color: var(--bs-success);

  /* Motion
     NOTE: elsewhere you used --cm-default-transistion (typo).
     Consider aligning on one spelling project-wide. */
  --cm-default-transition: all 500ms ease 0s;

  /* Highcharts palette */
  --highcharts-color-0: var(--bs-primary);
  --highcharts-color-1: var(--bs-secondary);
  --highcharts-color-2: var(--bs-success);
  --highcharts-color-3: var(--bs-danger);
  --highcharts-color-4: var(--bs-warning);
  --highcharts-color-5: var(--bs-info);
  --highcharts-color-6: var(--bs-orange);
  --highcharts-color-7: var(--bs-pink);
  --highcharts-color-8: var(--bs-teal);
  --highcharts-color-9: var(--bs-cyan);
}

/* ==========================================================================
   Base / Global overrides
   ========================================================================== */

body {
  background-color: var(--bs-light);
}

/* Rounded pills as default for form controls + buttons */
.form-control,
.form-select,
.btn-group .btn,
.btn {
  --bs-btn-border-radius: var(--bs-border-radius-pill);
  --bs-border-radius: var(--bs-border-radius-pill);
}
textarea.form-control {
  --bs-border-radius: var(--bs-border-radius-lg);
}


/* Default rounding for media/cards etc. */
#tinymce img,
#tinymce video,
#tinymce picture,
#tinymce iframe,
.cb-header-section > .container > [class*="bg-"],
.cb-layout-section > .container > [class*="bg-"],
.cb-field-image-picture,
.cb-field-video-figure,
.cb-field-gallery picture,
.cb-field-feature-card,
.gallery-slides-item-figure picture,
.list-item-wrapper,
.container .layout-container,
.rte-wrapper img,
.rte-wrapper iframe,
.resource-slides-item-picture {
  border-radius: var(--bs-border-radius-xl);
  overflow: hidden;
}

/* Set default “content” colors on dark / colored backgrounds */
.text-bg-primary,
.text-bg-secondary,
.text-bg-success,
.text-bg-dark {
  --cm-heading-color: #fff;
  --cm-display-color: #fff;
  --cm-content-color-rgb: 255, 255, 255;
  --cm-invert-color-rgb: var(--bs-dark-rgb);
}

/* Buttons */
.btn-lg,
.btn-group-lg > .btn {
  --bs-btn-padding-x: 1.75rem;
}

/* This site: inherit-button should be green while preserving text color logic */
.btn-inherit {
  --cm-content-color-rgb: var(--bs-success-rgb);
  --cm-invert-color-rgb: var(--bs-white-rgb);
}

/* ==========================================================================
   Header
   ========================================================================== */

#header > .container {
  padding-top: calc(var(--bs-gutter-x) * 0.5);
  padding-bottom: calc(var(--bs-gutter-x) * 0.5);
}

#header.position-absolute {
  z-index: 1030;
}

#header::before {
  content: "";
  display: block;
  width: 100vw;
  height: 0;
  position: fixed;
  inset: 0 auto auto 0;
  background-color: rgba(var(--bs-dark-rgb), 0);
  backdrop-filter: blur(1rem);
  transition: background-color 500ms ease;
}

#header.navbar-collapse-open::before {
  height: 100vh;
  background-color: rgba(var(--bs-dark-rgb), 0.8);
}

#header .navbar {
  max-height: calc(100vh - 1.5rem);
  overflow: hidden;
}

.scrolled #header:not(.navbar-collapse-open) .navbar {
  backdrop-filter: blur(1rem);
  --bs-bg-opacity: 0.8;
}

#header.navbar-collapse-collapsing .navbar,
#header.navbar-collapse-open .navbar {
  border-radius: var(--bs-border-radius-lg) !important;
}

#header.navbar-collapse-open .navbar {
  overflow-y: auto;
}

#header .navbar-brand img {
  height: 2.75rem;
  width: auto;
}

#header .navbar .header-links {
  font-family: var(--cm-heading-font-family);
  font-weight: var(--cm-heading-font-weight);
  font-size: 1.25rem;
}

#header .navbar .header-links a:not(:hover) {
  text-decoration: none;
}

#header .navbar .navbar-toggler {
  font-family: var(--cm-heading-font-family);
  font-weight: var(--cm-heading-font-weight);
  font-size: 1.25rem;
  color: var(--bs-primary);
  text-transform: uppercase;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
  border: none;

  display: inline-grid;
  justify-items: end;
}

#header .navbar-toggler .navbar-toggler-content-closed,
#header .navbar-toggler .navbar-toggler-content {
  grid-area: 1 / 1;
}

#header .navbar-toggler.collapsed .navbar-toggler-content-closed,
#header .navbar-toggler:not(.collapsed) .navbar-toggler-content {
  opacity: 0;
}

#header.navbar-collapse-collapsing .header-links,
#header.navbar-collapse-collapsing .header-cta,
#header.navbar-collapse-open .header-links,
#header.navbar-collapse-open .header-cta {
  opacity: 0;
}

#header .nav-primary a,
#header .nav-secondary a {
  font-family: var(--cm-heading-font-family);
  font-weight: var(--cm-heading-font-weight);
  color: var(--bs-secondary);
  text-decoration: none;
  display: inline-block;
}

#header .nav-primary a { font-size: 2rem; }

#header .nav-secondary a {
  font-size: 1.25rem;
  padding-bottom: 0.1em;
}

#header .nav-primary a:hover,
#header .nav-secondary a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer .brand-symbol {
  height: 3rem;
  width: auto;
}

.footer-brand-img {
  width: 20rem;
  height: auto;
}

.footer-sub {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  container-type: inline-size;
  container-name: footer-sub;
}

.footer-sub-copyright { display: none; }

.footer-sub-links ul.inline-list { gap: 1rem; }

@container footer-sub (min-width: 600px) {
  .footer-sub {
    display: inline-flex;
    gap: 3rem;
    justify-content: center;
    width: 100%;
  }

  .footer-sub-links ul.inline-list { gap: 3rem; }
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal.modal-untitled {
  --bs-modal-padding: 0;
}

.modal.modal-untitled .modal-header { padding: 0; }

.modal.modal-untitled .btn-close {
  background: none;
  font-size: 2rem;
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
  --bs-btn-close-color: var(--bs-primary);
  --bs-btn-close-opacity: 1;
  position: absolute;
  top: calc(0.5 * var(--bs-modal-header-padding-y));
  right: calc(0.5 * var(--bs-modal-header-padding-x));
  z-index: 1;
}
.modal.modal-untitled .btn-close::after {
  content: "";
  --fa-style: 900;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  font-family: var(--_fa-family);
}

.modal.modal-untitled .modal-header .btn-close {

}

/* ==========================================================================
   Article
   ========================================================================== */

.article-hero-media { position: relative; }

.article-hero-media::before {
  content: "";
  display: block;
  background: var(--bs-white);
  width: 200vw;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: -50vw;
  z-index: -1;
}

/* ==========================================================================
   Listings / Resource cards
   ========================================================================== */

.list-item-wrapper {
    box-shadow: var(--bs-box-shadow);
}

.resource-list-item .list-item-wrapper {
  box-shadow: var(--bs-box-shadow-sm);
}

.resource-story-item .list-item-picture img { height: 100%; }

.resource-story-item a:hover .hover-zoom img { opacity: 0.25; }

.resource-story-item .list-item-title {
  font-size: 1.25rem;
  opacity: 0;
}

.resource-story-item a:hover .list-item-title { opacity: 1; }

.resource-story-item .btn.btn-inherit { color: #fff; }

/* Preview cards */
.cb-field-resource-preview.flex-fill > article,
.cb-field-resource-preview.flex-fill .resource-story-item .list-item-picture,
.cb-field-resource-preview.flex-fill .resource-story-item .list-item-picture img {
  height: 100%;
}

.cb-field-resource-preview.flex-fill .resource-story-item .list-item-picture img {
  object-fit: cover;
}

/* ==========================================================================
   Events
   ========================================================================== */


/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion {
  --bs-accordion-btn-icon: none;
  --bs-accordion-btn-active-icon: none;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 1.75rem;
  --bs-accordion-btn-focus-box-shadow: none;
}

/* ==========================================================================
   Scrolly
   ========================================================================== */

.scrolly-content-text.text-light,
.scrolly-content-boxed.text-bg-dark {
  --cm-heading-color: var(--bs-white);
  --cm-display-color: var(--bs-white);
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

/* ==========================================================================
   Special layout tweaks
   ========================================================================== */

.cb-layout-header.w-100 > .header-compensation {
  padding-top: calc(var(--cm-header-height) + 1rem) !important;
}

table { background-color: var(--bs-white); }

table td.cell-highlighted {
  background-color: rgba(var(--bs-light-rgb), 0.5);
}

.apply-campaign .cb-field-feature-card-content {
  max-width: 600px;
  min-height: 75vh;
  padding-top: 5rem;
  padding-bottom: 5rem;
  margin: 0 auto;
}

/* Stretch helpers */
*:has(+ .stretch-above) { z-index: 1; }

.stretch-above,
.stretch-below {
  --stretch-amount: 10rem;
}

.stretch-above { margin-top: calc(-1 * var(--stretch-amount)); }
.stretch-above .layout-container { padding-top: var(--stretch-amount); }

.stretch-below { margin-bottom: calc(-1 * var(--stretch-amount)); }
.stretch-below .layout-container { padding-bottom: var(--stretch-amount); }

.bottom-bg-primary::before {
  content: "";
  background-color: var(--bs-primary);
  display: block;
  width: 100vw;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 20rem;
}

/* ==========================================================================
   Lyfti awards (project-specific)
   ========================================================================== */

/* Sustainability goals chart */
#lyfti-sustainability-goals-chart {
  width: 100%;
  height: auto;
}

#lyfti-sustainability-goals-chart .highcharts-grid,
#lyfti-sustainability-goals-chart .highcharts-axis,
.highcharts-axis {
  display: none;
}

#lyfti-sustainability-goals-chart .highcharts-tooltip-box { fill: none; }

/* Map */
#lyfti-map {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Awards list */
#mix-container-lyfti-awards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mix-controls-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mix-controls-wrapper > * { flex: 1 1 auto; }

.award-item {
  background-color: var(--bs-white);
  padding: 0.75rem;
  border-radius: var(--bs-border-radius);
  height: 100%;
}

.award-item-icon,
.award-item-image img {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--bs-border-radius);
}

.lyfti-awards-listing .modal-body img {
  width: 100%;
}

.award-item-applicant,
.award-item-category-label {
  font-size: 0.8rem;
}

.award-item-name { font-size: 1.1rem; }

.award-item-image img {
  aspect-ratio: 1;
  object-fit: cover;
}

/* Key stats (pills) */
.cb-field-keystat {
  container-type: inline-size;
  container-name: keystat-container;
}

.keystat-1 { --keystat-color-rgb: var(--bs-danger-rgb); }
.keystat-2 { --keystat-color-rgb: var(--bs-success-rgb); }
.keystat-3 { --keystat-color-rgb: var(--bs-info-rgb); }
.keystat-4 { --keystat-color-rgb: var(--bs-warning-rgb); }

.keystat-wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.keystat-item {
  flex: 1 1 auto;
  padding: 1rem;
  background-color: #fff;
  gap: 1rem;
  box-shadow: var(--bs-box-shadow-sm);
  border-radius: var(--bs-border-radius-xxl);
  display: flex;
  align-items: center;
  text-decoration: none;
}

a.keystat-item:hover { background-color: rgba(var(--keystat-color-rgb), 0.1); }

.keystat-icon {
  aspect-ratio: 1;
  height: 100%;
  font-size: 2rem;
  color: rgb(var(--keystat-color-rgb));
  background-color: rgba(var(--keystat-color-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.keystat-number {
  color: var(--bs-secondary);
  font-weight: 600;
}

@container keystat-container (min-width: 360px) {
  .keystat-wrapper {
    flex-wrap: nowrap;
    flex-direction: column;
  }
}

@container keystat-container (min-width: 400px) {
  .keystat-wrapper {
    flex-wrap: wrap;
    flex-direction: initial;
  }

  .keystat-text { padding-right: 1rem; }
}

@media (min-width: 992px) {
  .keystat-number { font-size: 1.5rem; }
}

/* Google Maps infowindow + overlays */
.gm-style-iw {
  max-width: 215px !important;
  background-color: var(--bs-syrin) !important;
}

.gm-style-iw-d {
  background-color: var(--bs-syrin) !important;
  overflow: hidden !important;
  font-size: 16px !important;
  color: var(--bs-fjell) !important;
  padding-right: 10px !important;
}

.gm-style-iw-chr button {
  height: 25px !important;
  display: flex !important;
  justify-content: center !important;
}

.gm-style-iw-chr button > span {
  width: 16px !important;
  height: 16px !important;
  margin-right: 0 !important;
}

.gm-style-iw-tc::after {
  background-color: var(--bs-syrin) !important;
}

.fw-sparebank1 * {
  font-family: var(--bs-body-font-family) !important;
}

.city-label-overlay {
  position: absolute;
  color: var(--bs-white);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.city-label-overlay .label-dot {
  width: 8px;
  height: 8px;
  background-color: #dc8000;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Gifts Custom Layout */

.lyfti-metrics-swiper .highcharts-container {
    aspect-ratio: 2/3;
}
@media (min-width: 1200px) {
  .lyfti-metrics-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
    transform: none !important;
  }
  .lyfti-metrics-swiper .swiper-slide {
    width: auto !important;
    margin: 0 !important;
  }
  .lyfti-metrics-swiper .swiper-slide:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .lyfti-metrics-swiper .swiper-slide:nth-child(2) { grid-column: 2; grid-row: 1; }
  .lyfti-metrics-swiper .swiper-slide:nth-child(3) { grid-column: 2; grid-row: 2; }
  .lyfti-metrics-swiper .highcharts-container {
    aspect-ratio: 2/1;
  }
}


/* ==========================================================================
   Stepguide (project-specific)
   ========================================================================== */

.stepguide-form .stepguide-form-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.stepguide-form .stepguide-postcode-input {
  width: auto;
  min-width: 140px;
  margin-bottom: 1rem;
}

.stepguide-form .stepguide-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stepguide-form .stepguide-nav-list { margin-top: 1rem; }

.stepguide-form .stepguide-form-content .form-label { font-weight: bold; }

.stepguide-form .stepguide-form-btn-prev,
.stepguide-form .stepguide-form-btn-next:disabled {
  display: none;
}

.stepguide-nav {
  padding: 1.5rem;
  border-radius: var(--bs-border-radius-xl);
  box-shadow: var(--bs-box-shadow);
  background-color: #fff;
}

.stepguide-nav .step-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  --stepper-color: var(--bs-body-color);
  --stepper-text-emphasis: var(--bs-body-color);
  --stepper-bg-subtle: var(--bs-light);
}

.stepguide-nav .step-item.yes {
  --stepper-color: var(--bs-success);
  --stepper-text-emphasis: var(--bs-success-text-emphasis);
  --stepper-bg-subtle: var(--bs-success-bg-subtle);
}

.stepguide-nav .step-item.no {
  --stepper-color: var(--bs-danger);
  --stepper-text-emphasis: var(--bs-danger-text-emphasis);
  --stepper-bg-subtle: var(--bs-danger-bg-subtle);
}

.stepguide-nav .step-item.maybe {
  --stepper-color: var(--bs-warning);
  --stepper-text-emphasis: var(--bs-warning-text-emphasis);
  --stepper-bg-subtle: var(--bs-warning-bg-subtle);
}

.stepguide-nav .step-item .step-badge {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex: 0 0 auto;
  color: var(--stepper-text-emphasis);
  background-color: var(--stepper-bg-subtle);
}

.stepguide-nav .step-item .step-validation {
  margin-left: auto;
  color: var(--stepper-color);
}

.stepguide-nav .step-item.active { font-weight: bold; }

.stepguide-nav .stepguide-feedback-wrapper .alert { margin-bottom: 0; }

/* ==========================================================================
   Bubble report (project-specific)
   ========================================================================== */

#report-bubble-container {
  --report-heading-font-family: var(--cm-heading-font-family);
  --report-heading-font-weight: var(--cm-heading-font-weight);
  --report-title-font-size: 0.5em;
  --report-value-font-size: 1.5em;
  --report-description-font-size: 0.75em;
  --report-content-font-size: 0.5em;

  height: 100%;
  font-size: 2rem;
}

.report-bubble,
.report-bubble-intro,
.report-bubble-container,
.report-bubble-bg {
  transition: all 500ms ease 0s;
}

.report-bubbles-path {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  z-index: 1;
}

.report-bubbles-path .line {
  stroke: var(--bs-secondary);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
}

.report-bubble .report-bubbles-path { display: none; }

.report-bubble-container .report-bubble-container {
  position: relative;
  opacity: 0;
}

.report-bubble {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  animation: bubble-float 5s ease-in-out infinite;
}

.report-bubble:hover {
  z-index: 3;
  scale: 1.2;
}

.report-bubble-intro {
  position: relative;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.report-bubble-title {
  font-family: var(--report-heading-font-family);
  font-weight: var(--report-heading-font-weight);
  font-size: var(--report-title-font-size);
}

.report-bubble-value {
  font-family: var(--report-heading-font-family);
  font-weight: var(--report-heading-font-weight);
  font-size: var(--report-value-font-size);
}

.report-bubble-description { font-size: var(--report-description-font-size); }
.report-bubble-content { font-size: var(--report-content-font-size); }

.report-bubble-bg {
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: 0.25;
}

.report-bubble-xs:not(.open) > .report-bubble-intro .report-bubble-value-type,
.report-bubble-xs:not(.open) > .report-bubble-intro .report-bubble-description,
.report-bubble-s:not(.open) > .report-bubble-intro .report-bubble-value-type,
.report-bubble-s:not(.open) > .report-bubble-intro .report-bubble-description,
.report-bubble-m:not(.open) > .report-bubble-intro .report-bubble-value-type,
.report-bubble-m:not(.open) > .report-bubble-intro .report-bubble-description,
.report-bubble-lg:not(.open) > .report-bubble-intro .report-bubble-description {
  display: none;
}

.report-bubble-s::before {
  content: "";
  display: block;
  width: 250%;
  height: 250%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.report-bubble.open::before { display: none; }

.report-bubble:not(.open) { color: #fff !important; }

.report-bubble-xs:not(.open) > .report-bubble-intro,
.report-bubble-s:not(.open) > .report-bubble-intro {
  font-size: 1.5rem;
  line-height: 1;
}

.report-bubble-content {
  margin-top: 0.5rem;
  display: none;
}

.report-bubble-content a { color: #fff; }

.report-bubble-back {
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.report-bubble.open {
  top: 0% !important;
  left: 0vw !important;
  z-index: 4;
  animation: none;
  cursor: default;

  width: 100vw !important;
  height: 100% !important;

  border-radius: 0;
  justify-content: left;
  padding: 0;
}

.report-bubble.open:hover { scale: 1; }
.report-bubble.open > .report-bubble-bg { border-radius: 0; }

.report-bubble.open > .report-bubble-intro {
  width: 40%;
  padding-left: 10vw;
  text-align: left;
  text-shadow: none;
}

.report-bubble.open > .report-bubble-intro .report-bubble-content {
  display: block;
}

.report-bubble.open > .report-bubble-container {
  height: calc(100% - 120px);
  margin-top: 120px;
  flex: 1;
  opacity: 0;
  animation: bubble-fadeIn 1s ease-in-out forwards;
  animation-delay: 0.5s;
  overflow: visible;
}

.report-bubble.open.inactive > .report-bubble-intro {
  width: 0;
  padding: 0;
  opacity: 0;
}

.report-bubble.open.inactive > .report-bubble-container {
  margin: 0;
  height: 100%;
}

.report-bubble-header:not(.active) { height: 125%; }
#report-bubble-container { height: 100%; }

#report-bubble-container.active { z-index: 9999; }

.report-bubble-header-intro {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 1;
}

.report-bubble-header-logo {
  position: absolute;
  width: 16rem;
  top: 2.25rem;
  left: 2.25rem;
  z-index: 1;
}

@keyframes bubble-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10%); }
}

@keyframes bubble-fadeIn {
  from { opacity: 0; bottom: -10%; }
  to { opacity: 1; bottom: 0; }
}

@media (min-width: 992px) {
  :root { --cm-narrow: 768px; }
  .wide {
    min-width: calc(960px + var(--bs-gutter-x) * 1);
    max-width: 1080px;
  }
  #header .nav-primary a { font-size: 2.5rem; }

  .report-bubble-header:not(.active) { height: 100%; }

  .report-bubble-header-logo {
    width: 20rem;
    top: auto;
    left: auto;
    bottom: 3rem;
    right: 3rem;
  }

  .report-bubble-header-intro {
    bottom: 1rem;
    left: 3rem;
    width: 45vw;
  }
}

@media (orientation: portrait) {
    #report-bubble-container {
        --report-description-font-size: 0.5em;
    }

  .report-bubble-back {
    top: 2.5rem;
    left: 1.5rem;
  }

  .report-bubble.open {
    flex-direction: column;
    justify-content: center;
  }

  .report-bubble.parent.open {
    justify-content: start;
  }

  .report-bubble.open > .report-bubble-intro {
    width: 100%;
    padding: 0 1.5rem;
    text-align: center;
  }

  .report-bubble.parent.open > .report-bubble-intro {
    justify-content: start;
    padding: 6rem 1.5rem 0;
  }

  .report-bubble.open > .report-bubble-container {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .report-bubble.open.inactive > .report-bubble-intro { height: 0; }
}


/* ==========================================================================
   Layout width helpers (wide / narrow)
   ========================================================================== */

.lead { font-size: 1rem; }

@media (min-width: 768px) {
  :root { --cm-narrow: 576px; }
  .wide {
    min-width: calc(720px + var(--bs-gutter-x) * 1);
    max-width: 900px;
  }
  .lead { font-size: 1.25rem; }
  .report-bubble-header:not(.active) { height: 100%; }
  .report-bubble-header-intro {
    width: 75%;
    bottom: 1.5rem;
  }
}

@media (min-width: 992px) {
  :root { --cm-narrow: 768px; }
  .wide {
    min-width: calc(960px + var(--bs-gutter-x) * 1);
    max-width: 1080px;
  }
  #header .nav-primary a { font-size: 2.5rem; }
}

@media (min-width: 1200px) {
  :root { --cm-narrow: 1000px; }
  .wide {
    min-width: calc(1140px + var(--bs-gutter-x) * 1);
    max-width: 1280px;
  }
  .resource-list-item .list-item-title { font-size: 1.75rem; }
  .resource-list-item .list-item-description { font-size: 1.25rem; }
}

@media (min-width: 1400px) {
  .wide {
    min-width: calc(1348px + var(--bs-gutter-x) * 1);
    max-width: 1640px;
  }
}

@media (min-width: 2000px) {
  .wide { max-width: 1900px; }
}

/* Orientation overrides */
@media (orientation: portrait) {}