/* Note: Styles optimised to be viewed at max width of 697px */

@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 400;
  src: url(./font/Merriweather-Regular.woff) format("woff"),
    url(./font/Merriweather-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 700;
  src: url(./font/Merriweather-Bold.woff) format("woff"),
    url(./font/Merriweather-Bold.woff2) format("woff2");
}

/* Base HTML + Generic Styles */
:root {
  --pmi-color-good: #479b02;
  --pmi-color-moderate: #006fa1;
  --pmi-color-unhealthy: #ffce03;
  --pmi-color-very-unhealthy: #ffa800;
  --pmi-color-hazardous: #d60000;
}
body {
  margin: 0;
  padding: 0;
  background-color: #ebf6fa;
  font-family: Merriweather, serif;
  font-size: 2.4vh;
}
.hidden {
  display: none !important;
}

/* Main */
#main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#main-body {
  justify-content: center;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Map */
#map {
  width: 100vw;
  background: url(map.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 120%;
  display: flex;
  flex-direction: column;
  position: absolute;
  aspect-ratio: 1 / 1;
  z-index: -1;
  max-height: 100vh;
}
@media (min-width: 551px) {
  #map {
    background-size: 100%;
  }
}

/* PSI / PM Buttons */
.psi-or-pm-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 24px;
}
.psi-or-pm-container .psi-or-pm {
  width: 150px;
  height: 48px;
  border: 1px solid #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  font-weight: 700;
  color: #000000;
  cursor: pointer;
  box-shadow: 4px 4px 0px 0px #0000001a;
}
.psi-or-pm-container .psi-or-pm.selected {
  background-color: #000000;
  color: #ffffff;
  cursor: unset;
  font-weight: 400;
}
.psi-or-pm-container #btn-psi {
  border-radius: 8px 0px 0px 8px;
}
.psi-or-pm-container #btn-pm {
  border-radius: 0px 8px 8px 0px;
}

/* Time Indicator */
#ptime {
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

/* Box */
#box-container {
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: center;
  grid-template: repeat(3, 1fr) / 1fr min-content 1fr;
  grid-row-gap: 16px;
  grid-column-gap: 17px;
  position: relative;
}
@media (max-width: 550px) {
  #box-container {
    margin-top: 15px;
  }
}
@media (min-width: 551px) {
  #box-container {
    grid-column-gap: 3vw;
    grid-row-gap: 2vh;
  }
}
#box-container .pbox {
  background-color: #ffffffe5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: black;
  border-radius: 6px;
  cursor: default;
}
#box-container .pbox#pbox-n {
  left: calc(50% - 46px);
  grid-column: 1 / span 3;
}
#box-container .pbox#pbox-s {
  left: calc(50% - 46px);
  grid-column: 1 / span 3;
}
#box-container .pbox#pbox-w {
  justify-self: flex-end;
}
#box-container .pbox#pbox-e {
  justify-self: flex-start;
}
#box-container .pbox#pbox-c {
  left: calc(50% - 46px);
}
#box-container .pbox .pbox-area {
  color: #000000;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  margin-top: 8px;
  text-transform: uppercase;
}
#box-container .pbox .pbox-value {
  color: #000000;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}
body.psi #box-container .pbox {
  border: 6px solid var(--pmi-color-good);
  width: 80px;
  height: 70px;
}
body.psi #box-container .pbox.good {
  border-color: var(--pmi-color-good);
}
body.psi #box-container .pbox.moderate {
  border-color: var(--pmi-color-moderate);
}
body.psi #box-container .pbox.unhealthy {
  border-color: var(--pmi-color-unhealthy);
}
body.psi #box-container .pbox.very-unhealthy {
  border-color: var(--pmi-color-very-unhealthy);
}
body.psi #box-container .pbox.hazardous {
  border-color: var(--pmi-color-hazardous);
}
body.psi #box-container .pbox .pbox-range-indicator {
  display: none;
}
body.pm .pbox {
  border: 1px solid #595959;
  width: 80px;
  height: 80px;
}
body.pm .pbox .pbox-range-indicator {
  font-weight: 400;
  font-size: 12px;
  border-top: 1px solid #666666;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  padding-top: 6px;
}

/* Legend */
#legend {
  margin-left: 16px;
  margin-right: 16px;
  height: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#legend #legend-psi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#legend #legend-psi .legend-item {
  display: flex;
  align-items: center;
  margin-top: 16px;
}
#legend #legend-psi .legend-item:not(:first-child) {
  margin-left: 16px;
}
#legend #legend-psi .legend-item .legend-item-color {
  height: 20px;
  width: 20px;
  display: inline-block;
}
#legend #legend-psi .legend-item .legend-item-color.good {
  background: var(--pmi-color-good);
}
#legend #legend-psi .legend-item .legend-item-color.moderate {
  background: var(--pmi-color-moderate);
}
#legend #legend-psi .legend-item .legend-item-color.unhealthy {
  background: var(--pmi-color-unhealthy);
}
#legend #legend-psi .legend-item .legend-item-color.very-unhealthy {
  background: var(--pmi-color-very-unhealthy);
}
#legend #legend-psi .legend-item .legend-item-color.hazardous {
  background: var(--pmi-color-hazardous);
}
#legend #legend-psi .legend-item .legend-item-title {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  text-transform: uppercase;
}
#legend #legend-pm {
  display: grid;
  grid-template: repeat(5, 1fr) / 2fr 1fr;
  grid-row-gap: 6px;
  font-size: 12px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  grid-column-gap: 16px;
}
#legend #legend-pm .legend-header-pm {
  font-weight: 700;
}
#legend #legend-pm .legend-header-pm sub,
#legend #legend-pm .legend-header-pm sup {
  font-size: 8px;
}

body.psi #legend #legend-pm {
  display: none;
}
body.pm #legend #legend-psi {
  display: none;
}

/* Footer */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px;
  border-top: 1px solid #cccccc;
  padding-top: 16px;
}
.footer #logo {
  background: url(cnalogo200.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  height: 32px;
  width: 24px;
}
.footer #credits {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}