/* global ------------------------------------------------------------------ */

* {
  margin: 0;
}

:root {
  /* color */
  --teal: #4aa08e;
  --violet: #553d67;
  --off-white: #fcfcfc;
  --light-grey: #b9b9b9;
  --nearly-black: #252525;
  --logoblue: #00aeef;
  --logoyellow: #fcb040;
  --darkteal: #30695d;
  /* --darklogoblue: #007099; */
  --darklogoblue: #0096cc;
  /* spacing */
  --little-gap: 1.5rem;
  --botnav_item-pad: 0.2em;
  --half-grid-width: 4.167vw; /* approx 1/24th viewport, or half a grid track*/
  /* font size */
  --site-heading-size: 4.2em;
  --page-heading-size: 2.5em; /* was 2.1em */
  --subheading-size: 1.1em;
  --graphtext-size: 1.1em;
  /* --topnav_item-size: 2em; */
  --topnav_item-size: 1.4em;
  --botnav_item-size: 1.2em;
  --bottext-size: 0.8em;
}

/* @font-face {
  font-family: "baloo";
  src: url("./fonts/Baloo-Regular.ttf") format("truetype");
} */

@font-face {
  font-family: "crete-round";
  src: url("./fonts/CreteRound-Regular.otf") format("opentype");
}

@font-face {
  font-family: "fira-sans";
  src: url("./fonts/FiraSans-Regular.otf") format("opentype");
}

html {
  scroll-behavior: smooth;
  background-color: var(--light-grey);
  font-family: fira-sans, sans-serif;
  color: var(--nearly-black);
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* header ------------------------------------------------------------------ */

.gridbod {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.header {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / 13;
  /* background-color: var(--teal); */
  background-color: var(--darklogoblue);
  color: var(--off-white);
}

.heading {
  /* font-family: baloo, sans-serif; */
  font-family: crete-round, serif;
}

.subheading {
  /*grid-column: 5 / 7;*/ /* @TODO: might want to change back */
  grid-column: 4 / 7;
  grid-row: 2;
  font-size: var(--subheading-size);
  padding-bottom: 0.5em;
  padding-left: var(--half-grid-width);
}

.menu-button {
  display: none;  /* hide for large & medium resolutions */
}

/* heading for the whole site */
.heading--site {
  grid-column: 3 / 7;
  font-size: var(--site-heading-size);
  /* @TODO: apparently line below is causing the element to overflow
  not sure if it matters */
  line-height: 1.25;
  /* text-transform: uppercase; */
}

/* heading for the current page */
.heading--page {
  color: var(--violet);
  font-size: var(--page-heading-size);
  line-height: 3.6;
}

.nav-container {
  grid-column: 7 / 13;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.topnav {
  display: flex;
  flex-direction: row;
}

.topnav__item {
  font-size: var(--topnav_item-size);
}

.link {
  padding: 0.5em; /* @TODO: make this a css variable? also, should it be rem? */
}

.link:hover {
  /* background-color: var(--violet); */
  background-color: var(--teal);
}

.link:active {
  background-color: var(--off-white);
  color: var(--teal);
}

@media (max-width: 1480px) {
  .heading--site {
    grid-column: 1 / 6;
    padding-left: var(--half-grid-width);
  }
  .subheading {
    /* @TODO: might want to change back if we bring back the above thing */
    /* grid-column: 4 / 7; */
    padding-left: 0em;
  }
  .nav-container {
    grid-column: 6 / 13;
    padding-left: var(--half-grid-width);
  }
}

@media (max-width: 1240px) {
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .heading--site {padding-left: 0;}
  .nav-container {padding-left: 0;}
  .topnav__item {
    padding-top: 0.5em; /* to prevent overflow issue */
    padding-bottom: 0.5em; /* to prevent overflow issue */
    /* @TODO: bring the below back for alternate version */
    /* font-size: calc(var(--topnav_item-size) * 0.666); */
    font-size: calc(var(--topnav_item-size) * 0.9);
  }
}

@media (max-width: 600px) {
  .heading--site {text-align: center;}
  .menu-button {
    display: block; /* unhide for small resolutions */
    font-size: calc(var(--topnav_item-size) * 0.9);
    padding-bottom: 1em;
  }
  .nav-container {flex-direction: column;}
  .menu-btn {
    padding-left: var(--little-gap);
    padding-right: var(--little-gap);
  }
  .topnav {
    display: none; /* hide by default */
    flex-direction: column;
    align-items: center;
  }
  .topnav:target {
    display: flex; /* reveal when menu button clicked */
  }
}

@media (max-width: 350px) {
  .heading--site {
    font-size: 3.7em;
  }
}

/* main -------------------------------------------------------------------- */

.main {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / 13;
  min-height: 100vh; /* @TODO: is this a good solution? */
}

.logo {
  grid-column: 2 / 4;
  justify-self: end;
  padding-top: var(--little-gap);
  padding-right: var(--little-gap);
}

.logo__img {
  position: sticky;
  top: var(--little-gap);
}

/* .image__dummylogo { */
.logo__dummyimg { /* @TODO: delete me plx */
  /* the below is cosmetic, and not actually doing anything in terms of positioning */
  padding-right: var(--little-gap);
  width: 100px;
  height: 200px;
  background-color: var(--off-white);
  color: #98252a;
  text-align: center;
  font-size: 1.5em;
}

.content-box {
  grid-column: 4 / 8;
  background-color: var(--off-white);
}

/* add spacing to sides of elements without having to use margin */
.spacer-sides {
  padding-left: var(--little-gap);
  padding-right: var(--little-gap);
  padding-bottom: calc(var(--little-gap) * 2);
}

/* paragraph text */
.graphtext {
  padding-bottom: 1.5em;
  font-size: var(--graphtext-size);
  line-height: 1.5;
  letter-spacing: 0.05em;
  word-spacing: 0.3em;
  text-indent: 2em;
}

.noindent {text-indent: 0;}

.bulletlist {
  padding-left: inherit;
  padding-bottom: 1.5em;
  font-size: var(--graphtext-size);
}

.bullet {
  list-style-type: disc;
  padding: var(--botnav_item-pad);
}

.bullet::marker {color: var(--teal);}

.rightimages {
  grid-column: 8 / 11; /* @TODO: should it be 6 / 8 ? */
  display: flex;
  flex-direction: column;
  gap: var(--little-gap);
  padding: var(--little-gap);
}

.rightimages__link { /* @TODO: remove if unused */
}

.rightimages__img {} /* @TODO: remove if unused */

.graphlink {
  text-decoration: underline;
  color: var(--teal);
}

@media (max-width: 1700px) {
  .content-box {grid-column: 4 / 9;}
  .rightimages {grid-column: 9 / 12;}
}

@media (max-width: 1480px) {
  .content-box {grid-column: 3 / 9;}
  .logo {grid-column: 1 / 3;}
}

@media (max-width: 1350px) {
  .logo {
    padding-right: calc(var(--little-gap) / 4);
    /* padding-right: 0em; */
  }
}

@media (max-width: 1240px) {
  /* .content-box {grid-column: 4 / 11;} */
  /* .logo {grid-column: 2 / 4;} */
  .logo {
    /* grid-column: 11 / 13; */
    grid-column: 1 / 13;
    justify-self: center;
    grid-row: 3;
    padding-right: 0em;
    padding-bottom: var(--little-gap);
  }
  .content-box {
    grid-column: 2 / 9;
    /* grid-row: 2; */
  }
}

/* @media (max-width: 990px) {
  .content-box {grid-column: 4 / 12;}
} */

/* @media (max-width: 930px) { */
@media (max-width: 1020px) {
  .heading--page {text-align: center;}
  .logo {
    grid-row: 2;
    /* grid-column: 1 / 13;
    justify-self: center; */
  }
  /* .content-box {grid-column: 1 / 9;} */
  .content-box {grid-column: 1 / 8;}
  .rightimages {grid-column: 8 / 13;}
}

@media (max-width: 830px) {
  .content-box {grid-column: 2 / 12;}
  .rightimages {
    grid-row: 3;
    grid-column: 1 / 13;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 770px) {
  .content-box {grid-column: 1 / 13;}
}

@media (max-width: 600px) {
  .heading--page {
    line-height: normal;
    padding-top: var(--little-gap);
    padding-bottom: var(--little-gap);
  }
  .graphtext {font-size: 0.9em;}
  .bulletlist {font-size: 0.9em;}
  .spacer-sides {
    padding-left: calc(var(--little-gap) / 2);
    padding-right: calc(var(--little-gap) / 2);
  }
}

/* footer ------------------------------------------------------------------ */

.footer {
  display: grid;
  grid-template-columns: subgrid;
  grid-row: 3;
  grid-column: 1 / 13;
  padding: var(--little-gap);
  /* background-color: var(--violet); */
  background-color: var(--darkteal);
  color: var(--off-white);
}

.botnav {
  display: flex;
  flex-direction: column;
  grid-column: 4;
}

.botnav__item {
  font-size: var(--botnav_item-size);
  padding: var(--botnav_item-pad);
}

.botnav__item:hover {
  text-decoration: underline 2px;
}

.botnav__item:active {
  color: var(--teal);
}

.bottext {
  grid-column: 5 / 9;
  padding-left: var(--little-gap);
  font-size: var(--bottext-size);
  /* line-height: 1.5; */
  line-height: 2;
  letter-spacing: 0.05em;
  word-spacing: 0.3em;
}

.botlink {
  text-decoration: underline;
}

@media (max-width: 1480px) {
  .botnav {grid-column: 3;}
  .bottext {grid-column: 4 / 9;}
}

@media (max-width: 1240px) {
  /* .botnav {grid-column: 4;} */
  /* .botnav {grid-column: 3;} */
  .bottext {grid-column: 5 / 11;}
  .bottext {padding-left: 0;}
}

@media (max-width: 990px) {
  .bottext {grid-column: 5 / 13;}
}

@media (max-width: 770px) {
  .botnav {grid-column: 1}
  .bottext {grid-column: 3 / 13;}
}

@media (max-width: 660px) {
  /* .footer {justify-content: center;} */
  .botnav {
    grid-column: 1 / 13;
    justify-self: center;
    padding-bottom: var(--little-gap);
  }
  .bottext {grid-column: 1 / 13;}
}

@media (max-width: 600px) {
  .footer {
    padding: calc(var(--little-gap) / 2);
  }
}