/* -------------------------------------------------------------------------- */
/* Global Vars                                                                */
/* -------------------------------------------------------------------------- */
:root {
  /* Layout */
  /* Nothing for now */
  
  /* Colors */
  --color-n0: #ffffff;
  --color-n1: #f3f6f3;
  --color-n2: #c8c8c8;
  --color-n3: #909090;
  --color-n4: #505050;
  --color-n5: #000000;
  --color-primary: #16adae;     /* Toothpaste green */
  --color-secondary: #148086;   /* Turquoise */
  --color-tertiary: #2c5a6e;    /* Dark aqua */
  --color-quaternary: #203345;  /* Deep sea blue */
  --color-shade: #20334593;
  --color-shade-darker: #203345b8;
  
  /* Sizes */
  --text-smaller: 0.9rem;
  --text-smallest: 0.7rem;
  --text-bigger: 1.2rem;
  --text-biggest: 1.5rem;
}


/* -------------------------------------------------------------------------- */
/* Generic Elements                                                           */
/* -------------------------------------------------------------------------- */
body {
  background-color: var(--color-n1);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5 {
  font-family: 'Heebo', sans-serif;
}

h1 { font-size: 4rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }

h1, h2, h3, h4 {
  margin: 1rem 0;
}

p, h1, h2, h3, h4, h5 {
  color: var(--color-n5);
}

a {
  transition: all .2s linear;
  color: var(--color-secondary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary);
}

a, p, input, textarea, button, li {
  font-family: 'Lato', sans-serif;
  line-height: 1.75rem;
}

hr {
  border: none;
  height: 1px;
  background-color: gray;
}

img {
  max-width: 100%;
}

input, textarea, button {
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 5px;
  border: 1px solid var(--color-tint);
}

textarea {
  resize: vertical;
}

input[type="text"]:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 5px 1px var(--color-primary);
}

button {
  border: none;
  background-color: var(--color-secondary);
  color: var(--color-n1);
  cursor: pointer;
}

button:hover {
  background-color: var(--color-primary);
}

button:active {
  background-color: var(--color-tertiary);
}

button:disabled {
  background-color: var(--color-n3);
  cursor: default;
}


/* -------------------------------------------------------------------------- */
/* Layout Components                                                          */
/* -------------------------------------------------------------------------- */

.shade {
  background-color: var(--color-shade);
  background-blend-mode: multiply;
}

.shade-darker {
  background-color: var(--color-shade-darker);
  background-blend-mode: multiply;
}

.spacer {
  height: 2rem;
}

.block, .article {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.block {
  padding: 1rem 4vw;
}

.article {
  padding: 1rem 8vw;
}

.image-rollover {
  display: flex;
  overflow: hidden;
}

.image-rollover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all .5s;
}

.image-rollover:hover img,
.image-rollover:focus img {
  transform: scale(1.2);
}

.img-link {
  display: inline-flex;
  align-items: center;
  background-size: 100%;
  gap: 0.5rem;
}

.img-link img, .img-link :not(img) {
  transition: all .2s linear;
}

.img-link:hover img {
  opacity: 0.5;
}

.img-link:hover :not(img) {
  color: var(--color-primary);
}

.square-link {
  font-size: var(--text-smaller);
  border: 2px solid var(--color-n1);
  padding: 1rem 2rem;
  display: inline-block;
}

.square-link:hover {
  background: var(--color-n1);
}

.img-size-1 { width:  16px; height:  16px; }
.img-size-2 { width:  32px; height:  32px; }
.img-size-3 { width:  48px; height:  48px; }
.img-size-4 { width:  64px; height:  64px; }
.img-size-5 { width:  80px; height:  80px; }
.img-size-6 { width:  96px; height:  96px; }
.img-size-7 { width: 128px; height: 128px; }
.img-size-8 { width: 192px; height: 192px; }
.img-size-9 { width: 256px; height: 256px; }

.sm-icon:first-child { margin-left: 0; }
.sm-icon:last-child { margin-right: 0; }

/* Desktop */
@media only screen and (min-width: 800px) {
  .block {
    padding: 1rem 8vw;
  }
  
  .article {
    padding: 1rem 14vw;
  }
  
  .columns {
    display: grid;
  }
}

@media only screen and (min-width: 1280px) {
  .block {
    padding: 1rem 14vw;
  }
  
  .article {
    padding: 1rem 22vw;
  }
}


/* -------------------------------------------------------------------------- */
/* Atomic Formats                                                             */
/* -------------------------------------------------------------------------- */
.align-left   { text-align: left;   } 
.align-center { text-align: center; }
.align-right  { text-align: right;  }

.align-top { align-items: flex-start;  }
.align-middle { align-items: center;   }
.align-bottom { align-items: flex-end; }

.bold   { font-weight: bold; }
.italic { font-style: italic; }

.spaced { margin-left: 0.5rem; margin-right: 0.5rem; }
.spaced-more { margin-left: 1rem; margin-right: 1rem; }
.spaced-most { margin-left: 2rem; margin-right: 2rem; }
.spaced:first-child, .spaced-more:first-child, .spaced-most:first-child {
  margin-left: 0;
}
.spaced:last-child, .spaced-more:last-child, .spaced-most:last-child {
  margin-right: 0;
}

.padded { padding: 1rem; }

.rounded { border-radius: 1rem; }

.drop-shadow { box-shadow: 0px 3px 3px rgba(1,1,1,0.25); }

.color-n0       { color: var(--color-n0);      }
.color-n1       { color: var(--color-n1);      }
.color-n2       { color: var(--color-n2);      }
.color-n3       { color: var(--color-n3);      }
.color-n4       { color: var(--color-n4);      }
.color-n5        { color: var(--color-n5);       }
.color-primary     { color: var(--color-primary);    }
.color-secondary   { color: var(--color-secondary);  }
.color-tertiary    { color: var(--color-tertiary);   }
.color-quaternary  { color: var(--color-quaternary); }

.color-bg-n0         { background-color: var(--color-n0);         }
.color-bg-n1         { background-color: var(--color-n1);         }
.color-bg-n2         { background-color: var(--color-n2);         }
.color-bg-n3         { background-color: var(--color-n3);         }
.color-bg-n4         { background-color: var(--color-n4);         }
.color-bg-n5         { background-color: var(--color-n5);         }
.color-bg-primary    { background-color: var(--color-primary);    }
.color-bg-secondary  { background-color: var(--color-secondary);  }
.color-bg-tertiary   { background-color: var(--color-tertiary);   }
.color-bg-quaternary { background-color: var(--color-quaternary); }

.text-smaller  { font-size: var(--text-smaller);  }
.text-smallest { font-size: var(--text-smallest); }
.text-bigger  { font-size: var(--text-bigger);  }
.text-biggest { font-size: var(--text-biggest); }

.circle { border-radius: 50%; }

/* Mobile */
@media only screen and (max-width: 800px) {
  .desktop-only { display: none; }
  
  .mobile-align-left   { text-align: left;   }
  .mobile-align-center { text-align: center; }
  .mobile-align-right  { text-align: right;  }
}

/* Desktop */
@media only screen and (min-width: 800px) {
  .mobile-only { display: none !important; }
}


/* -------------------------------------------------------------------------- */
/* Specific Elements                                                          */
/* -------------------------------------------------------------------------- */
.contact-form {
  padding: 1rem;
  border-radius: 5px;
  position: relative;
}

.contact-form-main, .contact-form-complete {
  display: flex;
  flex-direction: column;
}

.contact-form-complete {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#mobile-menu-toggle {
  position: absolute;
  cursor: pointer;
  right: 1.5rem;
  top: 2.5rem;
}

#mobile-menu {
  margin: 1rem 0 0.5rem;
  display: none;
  flex-direction: column;
  align-items: stretch;
}

#mobile-menu a {
  margin: 0;
  text-align: center;
}

.share-link-container {
  display: flex;
  justify-content: center;
}

.share-link {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-secondary);
  margin: 0 0.25rem;
  border-radius: 50%;
}

.share-link:hover {
  background-color: var(--color-primary);
}

.share-link img {
  max-height: 24px;
}

.testimonial {
  display: flex;
  flex-direction: column;
}

.testimonial p:not(:first-child) {
  margin-top: 0;
}

.testimonial p:last-child {
  margin-top: auto;
  text-align: right;
}

/* Mobile */
@media only screen and (max-width: 800px) {
  .share-link {
    flex: 1;
  }
}