:root {
  --white: #ffffff;
  /* pure colors */
  --blue: #000831;
  --red: #C81515;
  --yellow: #F3B61F;
  --green: #00916E;
  --grey: #6b7280;
  --light-grey: #f3f4f6;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 10px;
}

body {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--white);
  color: var(--blue);
  font-size: 1.5rem;
}

h1 {
  font-size: 5rem;
}

.title {
  margin-bottom: 2.5rem;
}

p,
ul,
li {
  color: var(--blue);
}

ul li::marker {
  color: var(--red);
}

.graph-button {
  background-color: var(--white);
  padding: 2px 5px;
  border: 2px solid var(--light-grey);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}

.graph-button:hover {
  background-color: var(--light-grey);
}

.graph-button.active {
  background-color: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.graph-button:focus {
  outline: none;

}

/* Left vertical navbar */
.navbar {
  background: var(--white);
  position: fixed;
  inset: 0 auto 0 0;
  width: 10vw;
  border-right: 1px solid var(--blue);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 10px;
  z-index: 30;
}

.nav-list {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.nav-item {
  text-align: center;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--blue);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  outline: none;
  /* Remove focus outline */
}

.nav-item:focus {
  outline: none;
  /* Ensure no outline on focus */
}

.nav-item[aria-current="true"] {
  color: var(--red);
  font-weight: 800;
  text-decoration: underline;
}


/* Viewport + track */
.viewport {
  position: relative;
  height: 100vh;
  width: 90vw;
  margin-left: 10vw;
  overflow: hidden;
  touch-action: pan-y;
}

.track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
}



/* Top-right buttons */
.top-right {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 20;
  display: flex;
  gap: 10px;
}

.nav-btn {
  background: var(--blue);
  border: 0;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(2, 6, 23, .2);
}

.nav-btn:hover {
  filter: brightness(1.08);
}

.nav-btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
}

/* Panels */
.panel {
  flex: 0 0 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 24px 28px 28px;
  position: relative;

  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  /* ← only one column now */
  gap: 20px;
}


.panel-inner {
  display: contents;
}

.kicker {
  grid-column: 1 / -1;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--grey);
}

.headline {
  grid-column: 1 / 2;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: .05em;
  text-transform: uppercase;
  height: 1em
}

.accent {
  color: var(--red);
}

p .accent,
li .accent {
  font-weight: 700;
}

.lede {
  grid-column: 1 / 2;
  margin-top: -6px;
  color: var(--grey);
  font-size: 13px;
}

/* keep your existing visual styles; only change the layout bits */
.figure {
  grid-column: 1 / 2;
  grid-row: auto;
  background: white;
  height: 100%;
  /* layout: two children side-by-side */
  display: grid;
  grid-template-columns: auto auto;
  /* content-based widths; use 1fr 1fr for equal split */
  gap: 1rem;
  align-items: stretch;
}




.figure .charts-grid {
  background: #fff;
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 44vh;
  gap: 10px;
}


.figure .caption {
  font-size: 12px;
  color: var(--red);
}

.spark {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}

.spark .chart {
  height: 120px;
}

/* Home / End */
.panel.home {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  text-align: left;
}

.panel.end {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  text-align: left;
}

.panel.home h1,
.panel.end h1 {
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.panel.home p,
.panel.end p {
  color: var(--blue);
}

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

/* Bike chart extras */
.bike-chart {
  position: relative;
  width: 100%;
  height: 100%;
  /* Use full available height from figure */
}

.bike-chart svg {
  display: block;
}

.bike-chart .axis path,
.bike-chart .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bike-chart .line {
  fill: none;
  stroke: var(--red);
  stroke-width: 2px;
}

.bike-chart .trend {
  fill: none;
  stroke: tomato;
  stroke-width: 2px;
  stroke-dasharray: 5, 5;
}

.bike-chart .point {
  fill: var(--red);
  stroke: #fff;
  stroke-width: 1px;
}

.zona30-line {
  stroke: gray;
  stroke-width: 1px;
  stroke-dasharray: 4, 2;
}

.zona30-label {
  fill: gray;
  font-size: 12px;
  text-anchor: start;
}

.bike-chart .no-data {
  fill: red;
  font-size: 16px;
}



.bike-chart .bike-tooltip {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

/* (optional) ev buttons look */
.chart.ev-share .ev-buttons button {
  font-family: inherit;
}

.figure,
.headline,
.lede,
.footer {
  grid-column: 1 / -1;
}



/* modifier when you want the chart bigger */
.figure.wide-chart {
  grid-template-columns: 1fr 1fr;
  /* chart gets twice as much as the other */
}

/* ensure the chart and the text each stay in their own track */
.figure.wide-chart>.chart {
  grid-column: 1;
  /* chart on left */
}

.figure.wide-chart>div:not(.chart) {
  grid-column: 2;
  /* text on right */
}

/* if sometimes the chart comes second, flip the ratio */
.figure.wide-chart.chart-right {
  grid-template-columns: 1fr 1fr;
}

.figure.wide-chart.chart-right>div:not(.chart) {
  grid-column: 1;
}

.figure.wide-chart.chart-right>.chart {
  grid-column: 2;
}

/*HEATMAPS*/
#map-section {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  width: 100%;
}

.map-text {
  width: 50%;
}

#map-text p {
  margin: 2rem auto;
}

.map-selector {
  margin: 0.5rem auto;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.map-selector button {
  margin: 0.3rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.mapchart {
  height: auto;
  width: 50%;
}

.map-container {
  position: relative;
  height: 40vh;
}

.map-frame {
  display: none;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  left: 0;
}

.map-frame.active {
  display: block;
}

.content2 {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  width: 100%;
}

#chart-text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 30%;
}

#chart-text p {
  margin: 0.5rem auto;
}

.chart-block {
  width: 70%;
}

.q1 p {
  margin: 0.1rem auto;
}

#air-text {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.bike-text {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

#bike1 h3 {
  font-size: 5rem;
}

.intro {
  height: 5vh;
  margin-bottom: 2vh;
}

.content {
  height: 93vh;
}

.content#air {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}


@media (prefers-reduced-motion: reduce) {
  .track {
    transition: none;
  }
}

/*ludo*/

.content#bike {
  display: flex;
  flex-direction: column;
  height: 90vh;
  overflow: hidden;
  gap: 0rem;
  /* Add gap between chart and text */
}

.bike-text {
  width: 100%;
  /* Remove excessive padding */
}

/* Ensure bike chart container takes appropriate space */
.content#bike .figure {
  height: 60vh;
  /* Set specific height instead of 100% */
  width: 100%;
  display: flex;
  padding: 0.5rem;
  align-items: flex-start;
}



/* End-section card layout (plays nice with Bootstrap) */
.conclusion-cards .card {
  background: var(--light-grey);
  border: 1px solid rgba(0, 8, 49, 0.12);
  border-radius: 12px;
}

.conclusion-cards .card-title {
  color: var(--blue);
  font-weight: 700;
}

.conclusion-cards .card-text {
  color: var(--blue);
  line-height: 1.45;
}

/* Conclusion cards */
.conclusion-cards {
  margin-top: 2rem;
  gap: 2rem;
  /* space between rows */
}

.conclusion-cards .card {
  background: var(--white);
  border: 1px solid rgba(0, 8, 49, 0.12);
  border-radius: 12px;
  overflow: hidden;
  /* so header color stays flush */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.conclusion-cards .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.conclusion-cards .card-title {
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 1.7rem;
  padding: 1rem 1.5rem;
  margin: -1rem -1.5rem 1.5rem -1.5rem;
  /* stretch full width of card */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.conclusion-cards .card-text {
  color: var(--blue);
  font-size: 1.5rem;
  line-height: 1.5;
}

/* Flexbox cards for END section */
.conclusion-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  /* space between cards */
  margin: 2rem auto;
}

.conclusion-cards .card {
  flex: 1 1 calc(50% - 2rem);
  /* two per row on wide screens */
  background: var(--white);
  border: 1px solid rgba(0, 8, 49, 0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.conclusion-cards .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.conclusion-cards .card-title {
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 1.7rem;
  padding: 1rem 1.5rem;
  margin: 0;
}

.conclusion-cards .card-text {
  flex: 1;
  padding: 1.5rem;
  font-size: 1.5rem;
  color: var(--blue);
  line-height: 1.5;
}

.home .content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
}

.mt-5,
.my-5 {
  margin-top: 0 !important;
}

.margintop {
  margin-top: 2rem;
}

/* Hide the whole site on small screens, show only the message */
#mobile-message {
  display: none;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.5rem;
  padding: 50px 20px;
}

/* For smartphones (adjust max-width if needed) */
@media screen and (max-width: 768px) {
  body > *:not(#mobile-message) {
    display: none !important;
  }
  #mobile-message {
    display: block;
  }
}


/* Credits: force 3 cards on one line, cap height */
.credits .conclusion-cards {
  display: flex;
  gap: var(--gap, 1rem);
  flex-wrap: nowrap;              /* keep them on one line */
  overflow-x: auto;               /* allow horizontal scroll on small screens */
  -webkit-overflow-scrolling: touch;
}

.credits .conclusion-cards .card {
  flex: 0 0 calc((100% - 2 * var(--gap, 1rem)) / 3); /* 3 equal columns */
  max-height: 240px;             /* cap card height */
  overflow: hidden;              /* hide overflow (clean look) */
  display: flex;
  flex-direction: column;
}

.credits .conclusion-cards .card-title {
  margin-bottom: 0.5rem;
}

.credits .conclusion-cards .card-text {
  /* keep text from making the card huge */
  max-height: 8.5rem;             /* adjust as needed */
  line-height: 1.3;
}

/* Credits cards layout */
.credits .conclusion-cards {
  display: flex;
  gap: var(--gap, 1rem);
  flex-wrap: nowrap;        /* keep them on one row */
  overflow-x: auto;         /* allow scroll on very small screens */
  -webkit-overflow-scrolling: touch;
}

.credits .conclusion-cards .card {
  flex: 0 0 calc((100% - 2 * var(--gap, 1rem)) / 3); /* 3 columns */
  max-height: 260px;
  display: flex;
  flex-direction: column;   /* stack title, text, github vertically */
  justify-content: space-between;
  overflow: hidden;
}

.credits .conclusion-cards .card-title {
  margin-bottom: 0.5rem;
}

.credits .conclusion-cards .card-text {
  flex-grow: 1;             /* fill remaining space */
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.credits .conclusion-cards .card-github {
  margin-top: auto;         /* push to bottom */
  font-size: 1.5rem;
  padding: 1.5rem;
}