@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap");

/*
  ============================================================
  STYLE GUIDE / WHERE TO EDIT
  ============================================================
  - Brand/accent colours: edit :root variables.
  - Infographic canvas size and background: see .stage-shell and .stage-frame.
  - Hover labels and hotspot scaling: see HOTSPOTS section.
  - Popup/modal layout: see MODAL section.
  - Electricity, Biomass and Data-quality cards: see OPTION CARDS section.
  - Scrap graph and GHG iframe snippet: see SPECIAL POPUP MEDIA section.
  - Keep border-radius: 0 to match the square infographic style.
*/

:root {
  --ink: #385a75;
  --purple: #8a1596;
  --orange: #ff5a1f;
  --blue: #38a8e8;
  --teal: #5bc9bf;
  --slate: #5b7389;
  --card-shadow: 0 14px 36px rgba(32, 59, 84, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #f7fbff 0%, #edf3f7 100%);
}

/* ============================================================
   INFOGRAPHIC STAGE
   ============================================================ */

.app {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 20px 24px;
}

.stage-shell {
  padding: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(62, 97, 124, 0.10);
  border-radius: 0;
  box-shadow: var(--card-shadow);
}

.stage-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2339 / 1654;
  overflow: hidden;
  background: #fff;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(52, 88, 116, 0.10);
}

.base-infographic,
.boundary-highlight,
.hotspot img {
  display: block;
}

.base-infographic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}

.boundary-highlight {
  position: absolute;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.boundary-highlight.is-visible {
  opacity: 1;
}

/* ============================================================
   HOTSPOTS AND HOVER LABELS
   ============================================================ */

.hotspot {
  position: absolute;
  z-index: 10;
  padding: 0;
  overflow: visible;
  line-height: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}

.hotspot.is-transport {
  z-index: 8;
}

.hotspot.is-boundary {
  z-index: 35;
}

.hotspot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform-origin: center center;
  transition: transform 180ms ease;
}

.hotspot::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: -12px;
  z-index: 80;
  padding: 9px 12px 9px 14px;
  white-space: nowrap;
  line-height: 1;
  font-size: 13px;
  font-weight: 800;
  color: #314e68;
  background: #fff;
  border: 1px solid rgba(49, 78, 104, 0.08);
  border-left-width: 6px;
  border-radius: 0;
  box-shadow: 0 14px 32px rgba(23, 45, 64, 0.20);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -100%) scale(0.96);
  transition: opacity 160ms ease, transform 160ms ease;
}

.hotspot[data-tone="purple"]::after { border-left-color: var(--purple); }
.hotspot[data-tone="orange"]::after { border-left-color: var(--orange); }
.hotspot[data-tone="blue"]::after { border-left-color: var(--blue); }
.hotspot[data-tone="teal"]::after { border-left-color: var(--teal); }
.hotspot[data-tone="slate"]::after { border-left-color: var(--slate); }
.hotspot[data-link-url="true"]::after { border-left-color: var(--slate); }

.hotspot:hover,
.hotspot:focus-visible {
  z-index: 60;
}

.hotspot.is-boundary:hover,
.hotspot.is-boundary:focus-visible {
  z-index: 70;
}

.hotspot:hover::after,
.hotspot:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

.hotspot:hover img,
.hotspot:focus-visible img {
  transform: scale(1.15);
}

.hotspot.is-large:hover img,
.hotspot.is-large:focus-visible img,
.hotspot.is-boundary:hover img,
.hotspot.is-boundary:focus-visible img,
.hotspot.is-transport:hover img,
.hotspot.is-transport:focus-visible img {
  transform: scale(1.015);
}

/* ============================================================
   MODAL
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(16, 35, 51, 0.45);
  backdrop-filter: blur(4px);
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  width: min(720px, 100%);
  max-height: min(82vh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  animation: popupIn 180ms ease-out;
}

@keyframes popupIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal-header {
  position: relative;
  flex: 0 0 auto;
  padding: 22px 24px 18px;
  color: #fff;
  background: #41627b;
}

.modal-header.purple { background: linear-gradient(135deg, #8a1596, #b328bd); }
.modal-header.orange { background: linear-gradient(135deg, #ff5a1f, #ff7d33); }
.modal-header.blue { background: linear-gradient(135deg, #2a9edf, #53b9f0); }
.modal-header.teal { background: linear-gradient(135deg, #37bcb0, #68d3c7); }
.modal-header.slate { background: var(--slate); }

.modal-header h2 {
  max-width: 620px;
  margin: 0;
  padding-right: 46px;
  font-size: 26px;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
}

.close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  box-shadow: none;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
  font-size: 16px;
  line-height: 1.65;
  color: #405e78;
  scrollbar-width: thin;
  scrollbar-color: #9fb0bf #eef3f6;
}

.modal-body::-webkit-scrollbar {
  width: 10px;
}

.modal-body::-webkit-scrollbar-track {
  background: #eef3f6;
  border-radius: 0;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #9fb0bf;
  border: 2px solid #eef3f6;
  border-radius: 0;
}

.body-block,
.option-panel {
  padding: 18px;
  background: #fbfdff;
  border: 1px solid rgba(65, 98, 123, 0.12);
  border-radius: 0;
}

.body-block p,
.body-block li {
  margin-top: 0;
}

.body-block p {
  margin: 0 0 1em;
}

.body-block ul {
  margin: 0 0 1em 1.2em;
  padding-left: 1.1em;
}

.body-block li {
  margin: 0 0 0.35em;
}

.body-block p:last-child {
  margin-bottom: 0;
}

.body-block a,
.inline-popup-link {
  color: var(--modal-accent, var(--purple));
  font-weight: 800;
  text-decoration: underline;
}

#modalBodyText {
  white-space: normal;
}

/* ============================================================
   OPTION CARDS
   Used by Electricity, Biomass and Data sources/quality popups.
   ============================================================ */

.option-panel {
  margin: 0 0 14px;
  text-align: left;
}

.option-intro {
  margin: 0 0 16px;
  color: #405e78;
  line-height: 1.55;
}

.option-intro ul {
  margin: 10px 0 0 1.2em;
  padding-left: 1.1em;
}

.option-intro li {
  margin: 0 0 0.35em;
}

.option-buttons {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  text-align: center;
}

.option-button {
  display: flex;
  flex: 0 0 179px;
  width: 179px;
  max-width: 179px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 6px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #385a75;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--modal-accent, var(--purple)) 35%, transparent);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.option-button:hover,
.option-button:focus-visible {
  border-color: var(--modal-accent, var(--purple));
  box-shadow: 0 0 0 2px rgba(138, 21, 150, 0.12);
}

.option-button.active {
  color: #fff;
  background: rgba(138, 21, 150, 0.10);
  border-color: var(--modal-accent, var(--purple));
  box-shadow: 0 0 0 3px var(--modal-accent, var(--purple));
}

.option-button img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto;
  background: #fff;
}

.option-button span {
  display: none;
}

/* ============================================================
   SPECIAL POPUP MEDIA
   ============================================================ */

.popup-figure {
  margin: 18px auto;
  text-align: center;
}

.popup-figure img {
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(65, 98, 123, 0.12);
}

.popup-figure figcaption {
  margin-top: 7px;
  font-size: 12px;
  color: #6f879b;
}

.popup-figure-clickable img {
  cursor: zoom-in;
}

.popup-figure-clickable img:hover,
.popup-figure-clickable img:focus-visible {
  outline: 3px solid var(--modal-accent, var(--purple));
  outline-offset: 3px;
}

/* ============================================================
   INCLUDED GHGs SNIPPET SIZE — CHANGE HERE

   The visible GWP snippet height is fixed here.
   Keep this height large enough for BOTH the table and pie chart views.
   Increase it if the pie chart is clipped. Decrease it only if both views fit cleanly.
   ============================================================ */
:root {
  --gwp-snippet-height: 390px;
}

.gwp-snippet-frame {
  display: block !important;
  width: min(640px, 100%) !important;
  height: var(--gwp-snippet-height) !important;
  min-height: 0 !important;
  max-height: var(--gwp-snippet-height) !important;
  overflow: hidden !important;
  margin: 12px auto 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.gwp-snippet-frame.is-auto-sized {
  min-height: 0 !important;
}

#modalBodyText:has(.gwp-snippet-frame) .gwp-snippet-frame {
  background: transparent !important;
}

#modalBodyText:has(.gwp-snippet-frame) p {
  margin-bottom: 8px;
}

.gwp-snippet-frame + p,
#modalBodyText:has(.gwp-snippet-frame) p:last-child {
  margin-top: 0 !important;
}

/* Scrap graph lightbox. */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 35, 51, 0.82);
}

.image-lightbox.open {
  display: flex;
}

.image-lightbox img {
  display: block;
  max-width: min(96vw, 1500px);
  max-height: 92vh;
  width: auto;
  height: auto;
  background: #fff;
  border: 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
}

/* ============================================================
   ACCESSIBILITY AND RESPONSIVE RULES
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 780px) {
  .app {
    padding: 10px 8px 18px;
  }

  .stage-shell {
    padding: 8px;
  }

  .hotspot::after {
    padding: 7px 9px 7px 12px;
    font-size: 11px;
  }

  .modal-header h2 {
    font-size: 22px;
  }

  .modal-body {
    padding: 18px;
    font-size: 15px;
  }

  .option-buttons {
    justify-content: center;
  }

  .option-button {
    flex: 0 0 170px;
    width: 170px;
    max-width: 170px;
  }

  /* Keep the Included GHGs iframe controlled by --gwp-snippet-height above. */
}


/* v59: keep text directly below the visible GHG snippet */
.gwp-snippet-frame + p,
#modalBodyText:has(.gwp-snippet-frame) p:last-child {
  margin-top: 0 !important;
}
#modalBodyText:has(.gwp-snippet-frame) p:first-child {
  margin-bottom: 6px !important;
}


/* v60 safety override: keep Included GHGs snippet tight and easy to change. */
.gwp-snippet-frame {
  height: var(--gwp-snippet-height) !important;
  max-height: var(--gwp-snippet-height) !important;
  min-height: 0 !important;
}


/* ============================================================
   v61 — INCLUDED GHGs SNIPPET: FIXED TABLE/PIE SIZE

   This prevents the iframe/snippet from changing size when the user
   switches between Table and Pie chart. The value below must fit both
   views so nothing is hidden behind the iframe mask.
   ============================================================ */
:root {
  --gwp-snippet-height: 360px;
}

.gwp-snippet-frame {
  height: var(--gwp-snippet-height) !important;
  min-height: var(--gwp-snippet-height) !important;
  max-height: var(--gwp-snippet-height) !important;
}