/* Normalize */
@import url('./normalize.css');

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Esteban&display=swap');

:root {
  --color-background: rgb(206, 235, 242);
  --color-backgroundHighlight: rgb(240, 240, 240);
  --color-line: rgb(182, 230, 242);
  --color-primary: rgb(0, 135, 168);
  --color-primaryOnBg: rgb(0, 102, 128);
  --color-secondary: rgb(144, 144, 144);
  --color-text: rgb(51, 51, 51);
  --fontFamily-alt: 'DM Sans', sans-serif;
  --fontSize-S: 0.9375rem;
  --fontSize-L: 1.1rem;
  --fontSize-XL: 1.5rem;
  --fontWeight-M: 500;
  --fontWeight-L: 700;
  --margin-horizontal: 4rem;
  --margin-vertical: 2.5rem;
  --padding-M: calc(var(--margin-vertical) * 0.8);
  --thumbnailWidth-M: 2.5rem;
  --transition-S: 225ms ease-in-out;
  --transition-S-all: all var(--transition-S);
  --transition-M: 450ms ease-in;
  --transition-M-all: all var(--transition-M);

  font-size: 16px;
  line-height: 1.3;
  transition: font-size var(--transition-S);
}

@media (max-width: 399px) {
  :root {
    --fontSize-XL: 1.3rem;
    --margin-horizontal: 2rem;
    --margin-vertical: 1.5rem;
    font-size: 13px;
  }
  #page {
    padding-left: calc(var(--margin-horizontal) - var(--padding-M)) !important;
    padding-right: calc(var(--margin-horizontal) - var(--padding-M)) !important;
  }
}
@media (min-width: 400px) {
  :root {
    --fontSize-XL: 1.4rem;
    --margin-horizontal: 3rem;
    --margin-vertical: 2rem;
    font-size: 14px;
  }
  #page {
    padding-left: calc(var(--margin-horizontal) - var(--padding-M)) !important;
    padding-right: calc(var(--margin-horizontal) - var(--padding-M)) !important;
  }
}
@media (min-width: 600px) {
  :root {
    font-size: 15px;
  }
}
@media (min-width: 800px) {
  :root {
    font-size: 16px;
  }
}



/* General */

* {
  box-sizing: border-box;
}

[onclick] {
  cursor: pointer;
}



/* Typography */

strong {
  font-family: var(--fontFamily-alt);
  font-weight: var(--fontWeight-L);
}

a:link, a:visited, a:hover, a:active {
  color: var(--color-primary);
  font-family: var(--fontFamily-alt);
  text-decoration: none;
}

a:visited {
  color: var(--color-primaryOnBg);
}

a.contactButton {
  display: block;
  background-color: var(--color-background);
  border-radius: 2rem;
  color: var(--color-primaryOnBg) !important;
  font-size: var(--fontSize-S);
  margin: 2rem auto 2rem auto;
  min-width: 10rem;
  padding: 0.3rem 2rem;
  text-align: center;
  transition: var(--transition-S-all);
  width: fit-content;
}

a.contactButton:hover {
  background-color: var(--color-backgroundHighlight);
  text-decoration: none;
}

h1 {
  color: var(--color-primary);
  font-size: var(--fontSize-XL);
  font-weight: var(--fontWeight-M);
  margin: 0px;
}

h3 {
  /* color: var(--color-primary); */
  font-family: var(--fontFamily-alt);
  font-size: var(--fontSize-L);
  font-weight: var(--fontWeight-L);
  margin-top: var(--padding-M);
}

ul {
  list-style: none;
  padding: 0rem;
}

ul > li {
  margin: 0rem;
  /* padding: 0rem 0rem 0rem var(--padding-M); */
  /* Match padding-right to thumb width + thumb margin-right (1rem) */
  padding: 0rem 0rem 0rem calc(var(--thumbnailWidth-M) + 1rem); 
  position: relative;
}

ul > li::before {
  content: "";
  border-top: 1px solid var(--color-primary);
  display: block;
  position: absolute;
  left: 0px;
  top: 0.7rem;
  width: var(--thumbnailWidth-M);
}

/* ul > li::before {
  content: "—";
  color: var(--color-primary);
  display: block;
  position: absolute;
  left: 0px;
} */

ul.linkList > li {
  color: var(--color-primary);
  font-family: var(--fontFamily-alt);
  font-size: 1rem;
}

ul.linkList--icons > li::before {
  display: none;
}

ul.linkList--icons > li {
  clear: both;
  margin: var(--padding-M) 0rem;
  padding-left: 0px;
}

ul.linkList--icons > li img {
  float: left;
  margin: 0.3rem 1rem calc(var(--padding-M) / 2) 0rem;
  width: var(--thumbnailWidth-M);
}

ul.linkList--icons > li.wideIcon img {
  width: calc(var(--thumbnailWidth-M) * 2);
}



/* Page elements */

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--fontFamily-alt);
  font-weight: var(--fontWeight-M);
  margin: 0px;
  padding: 0px;
}

#page {
  background-color: white;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: calc(var(--margin-vertical) * 3) var(--margin-horizontal);
  position: absolute;
  width: 100vw;
}

#logo {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  position: absolute;
  left: var(--margin-horizontal);
  top: var(--margin-vertical);
}

#logo > img {
  width: 5.75rem;
}

#logo > .slogan {
  color: var(--color-secondary);
  font-size: var(--fontSize-S);
  /* font-weight: bold; */
  letter-spacing: 0.02rem;
  padding: 0.5rem 0rem 0rem 1.5rem;
  text-transform: uppercase;
}

#content {
  margin: var(--padding-M) 0rem;
  max-width: 50rem;
}

#content > article {
  border: 0px solid var(--color-line);
  border-top-width: 1px;
  padding: var(--padding-M);
  transition: var(--transition-M-all);
}

#content > article:last-of-type {
  border-bottom-width: 1px;
}

#content > article > h1 {
  cursor: pointer;
  /* Expand clickable area */
  margin: calc(-1 * var(--padding-M));
  padding: var(--padding-M);
  transition: var(--transition-S-all);
}

#content > article:nth-last-of-type(1) > h1,
#content > article:nth-last-of-type(2) > h1 {
  text-align: right;
}

.bodyText {
  color: var(--color-text);
  font-family: 'Esteban', serif;
  line-height: 1.6;
  font-size: var(--fontSize-L);
  margin-bottom: calc(-1* var(--padding-M));
  max-height: 0px;
  overflow: hidden;
  padding-top: var(--padding-M);
  transition: var(--transition-M-all);
}

.expanded .bodyText {
  margin-bottom: calc(2 * var(--padding-M));
}

#contact {
  background-color: var(--color-background);
  color: var(--color-primaryOnBg);
  font-size: var(--fontSize-S);
  line-height: 1.5;
  padding: calc(var(--margin-horizontal) / 2.5) var(--margin-horizontal);
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
}

#contact a {
  color: var(--color-primaryOnBg) !important;
}


/* Hover */

@media (hover: hover) and (pointer: fine) {

  #content > article > h1:hover {
    background-color: var(--color-backgroundHighlight);
  }

  a:hover {
    text-decoration: underline;
  }

}