@import "style/normalize.css";

:root {
  /*'--main-color': {
    100: '#FCFCFB',
    200: '#F8F7F4',
    300: '#F4F2EE',
    400: '#EBE8E1',
    500: '#E3DED4',
    600: '#CCC8BF',
    700: '#88857F',
    800: '#66645F',
    900: '#444340',
    }*/
  --main-color-300: hsl(36, 20%, 95%); 
  --main-color-400: hsl(42, 20%, 90%);
  --main-color: hsl(40, 21%, 86%);
  --main-color-600: hsl(42, 11%, 77%);
  --main-color-700: hsl(40, 4%, 52%);
    
  /*'--main-color-1': {
    100: '#F5E8EA',
    200: '#E6C6CA',
    300: '#D7A4AB',
    400: '#B9606B',
    500: '#9B1C2C',
    600: '#8C1928',
    700: '#5D111A',
    800: '#460D14',
    900: '#2F080D',
    }*/
  --main-color-1: hsl(352, 69%, 36%);

  /*'--main-color-2': {
  100: '#EBEBEF',
  200: '#CCCCD7',
  300: '#ADADBF',
  400: '#70708F',
  500: '#33335F',
  600: '#2E2E56',
  700: '#1F1F39',
  800: '#17172B',
  900: '#0F0F1D',
  */
  --main-color-2-100: hsl(240, 10%, 93%);
  --main-color-2-200: hsl(240, 12%, 82%);
  --main-color-2-300: hsl(240, 16%, 72%);
  --main-color-2-400: hsl(240, 22%, 50%);
  --main-color-2-500: hsl(240, 29%, 30%);
  --main-color-2: hsl(240, 29%, 30%);
  --main-color-2-600: hsl(240, 31%, 24%);
  --main-color-2-700: hsl(240, 32%, 18%);
  --main-color-2-800: hsl(240, 33%, 13%);
  --main-color-2-900: hsl(240, 34%, 9%);

  /*'--main-color-3': {
  100: '#F9F4EC',
  200: '#EFE5CF',
  300: '#E5D5B3',
  400: '#D2B579',
  500: '#BF9540',
  600: '#AC863A',
  700: '#735926',
  800: '#56431D',
  900: '#392D13',
  }*/
  --main-color-3: hsl(40, 50%, 50%);

  /*'--main-color-4': {
  100: '#F1F0EE',
  200: '#DBD9D3',
  300: '#C5C1B9',
  400: '#9A9385',
  500: '#6F6550',
  600: '#645B48',
  700: '#433D30',
  800: '#322D24',
  900: '#211E18',
  }*/
  --main-color-4: hsl(41, 16%, 37%);

  /*'--main-color-bg': {
  100: '#E8E8E9',
  200: '#C6C6C7',
  300: '#A3A3A5',
  400: '#5F5F62',
  500: '#1A1A1E',
  600: '#17171B',
  700: '#101012',
  800: '#0C0C0E',
  900: '#080809',
  },*/
  --main-color-bg: hsl(240, 8%, 5%);
  --main-color-bg-alpha: hsla(240, 8%, 5%, 0.671);
  /*
  --main-color-bg: hsl(240, 7%, 11%);
  --main-color-bg-alpha: hsla(240, 7%, 11%, 0.111);
  */

  --main-texture-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.875' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  --main-texture-dots-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.125' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  --main-texture-hexa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ffffff' fill-opacity='0.125' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  --section-texture: url("media/header-background.jpg");

  --main-header-height-sm: 40px;
}

html {
  color: var(--main-color);
  background-color: var(--main-color-bg);

  touch-action: manipulation;
  -webkit-tap-highlight-color: hsla(0, 0%, 100%, 0.892);
}

body {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);

  gap: 0;
  margin: 0;

  min-width: 240px;
  min-height: 480px;

  background-color: var(--main-color-bg);

  font-size: 1rem;
  font-family: Lato, Helvetica, sans-serif;
}

h1, h2, h3 {
  font-family: Aldrich, Optima, sans-serif;
}
h1 {
  color: var(--main-color);
  font-size: 2.827rem;
}
h2 {
  color: var(--main-color-400);
  font-size: 2rem;
  margin-block-start: 1em;
  margin-block-end: 0.5rem;
  text-transform: uppercase;
}
h3 {
  color: var(--main-color-1);
  font-size: 1.414rem;
}
h4 {
  color: var(--main-color-2-400);
  margin-block-start: 1em;
  margin-block-end: 1em;
  font-size: 1.207rem;
  font-weight: 700;
}
h5 {
  color: var(--main-color-2-400);
  font-size: 1.207rem;
  font-weight: 700;
  font-style: italic;
}
h6 {
  color: var(--main-color-2-400);
  font-size: 1.207rem;
  font-style: italic;
}
p {
  font-size: 1rem;
  margin-top: 0.707em;
  max-width: 40em;
}

a {
  color: var(--main-color-400);
  font-weight: 700;
  text-decoration: underline;
  text-shadow: var(--main-color-bg-alpha) 1px 1px 1px;
}
a[href^="tel:"]:before {
  content: "\260e";
  margin-right: 0.5em;
}

a[href^="mailto:"] {
  margin: 0;
}
a[href^="mailto:"]:before {
  content: "\1f4e7";
  margin-right: 0.5em;
}
a[href^="mailto:"]::after {
  content: " \1f4e8";
  margin-left: 0.5em;
}

ul {
  color: var(--main-color);
  list-style: none;
  /*list-style-position: inside;*/
  margin-top: 0.707em;
  margin-left: 1em;
  padding: 0;
}
ul li::before {
  content: "\2022";
  display: inline-block; 

  color: var(--main-color-300);
  font-weight: 700;

  width: 1em;
  margin-left: -1em;  
}

header,
.bob-hero,
.bob-hero__visual,
.bob-hero__section {
  grid-row: 1;
  grid-column: 1 / span 3;
}
main,
aside,
article,
section,
footer {
  grid-column: 1 / span 3;
}
header {
  height: 9vh;
  background-color: var(--main-color-bg-alpha);
  z-index: 2;
}
footer {
  margin: 0;
  padding: 0;

  background-color: var(--main-color-bg-alpha);
}
footer > h6 {
  height: 9vh;

  margin: 0;
  padding: 0;

  text-align: center;
}

.bob-bsg-clip {
  /*border-radius: 2.5vmin;*/

  /*padding-top: var(--main-header-height-sm);
  padding-bottom: var(--main-header-height-sm);*/
  padding-top: 2.5vmin;
  padding-bottom: 2.5vmin;
  padding-left: 5vmin;
  padding-right: 5vmin;

  /* Battlestar Galactica style */
  --notchSize: 5vmin;
  clip-path: 
    polygon(
      0% var(--notchSize), 
      var(--notchSize) 0%, 
      calc(100% - var(--notchSize)) 0%, 
      100% var(--notchSize), 
      100% calc(100% - var(--notchSize)), 
      calc(100% - var(--notchSize)) 100%, 
      var(--notchSize) 100%, 
      0% calc(100% - var(--notchSize))
    );
}

.bob-title,
.bob-subtitle,
.bob-title-text {
  font-weight: 400;
  text-decoration: none;
  text-emphasis: none;
}

.bob-title {
  color: var(--main-color-400);
  font-family: "Black Ops One", Georgia, serif;
  font-size: 15vmin;
  line-height: 0.9em;
  margin: 0;
  text-transform: uppercase;
  text-shadow: hsla(40, 100%, 60%, 0.33) 2px 3px 4px;
}
.bob-subtitle {
  color: var(--main-color-1);
  font-family: Aldrich, Optima, sans-serif;
  /*font-size: 4.1vw;*/
  font-size: 1.207rem;
  letter-spacing: 0.414em;
  text-shadow: hsla(352, 100%, 80%, 0.67) -1px -1px 1px;
  text-transform: uppercase;
}
.bob-title-text {
  color: var(--main-color-2-400);
  font-family: Lato, Helvetica, sans-serif;
  /*font-size: 4.1vw;*/
  font-size: 1rem;
  margin-block-start: 0.5em;
  max-width: 30em;
  text-shadow: var(--main-color-2-300) -1px -1px 1px;
}

.bob-hero {
  display: grid;

  background-color: var(--main-color-bg-alpha);

  z-index: -1;
}
.bob-hero::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 80vh;
  /*background-image: var(--main-texture-dots);*/
  background: url("media/texture-grid.png") repeat;

  z-index: 1;
}
.bob-hero__visual {
  width: 100%;
  height: 80vh;

  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.bob-hero__section {
  align-self: center;
  justify-self: center;

  display: flex;
  flex-direction: column;

  width: 90vw;
  max-width: 50rem;

  z-index: 2;
}

.bob-section {
  display: flex;
  flex-direction: column;

  background-size: cover;
  background-position: center;
}
.bob-section__visual {
  width: 100%;
  object-fit: cover;
  object-position: center;

  z-index: -1;
}
.bob-section__copy {
  padding-top: 2.414em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 3em;

  text-shadow: var(--main-color-bg) 1px 1px 1px;  

  z-index: 1;
}
.bob-section__copy > h1 {
  font-size: 12vmin;
  line-height: 0.9em;
  
  text-shadow: hsla(40, 100%, 60%, 0.33) 2px 3px 4px;
  text-transform: uppercase;
}
.bob-section--mission {
  /* NOTE: The background-image property as implimented at the date of this writing demotes color (even a color with
    alpha) to the bottom layer in a multiple image list. Using a 'fake' linear-gradient hacks our way around this. 
    Ref: https://www.w3.org/TR/css-backgrounds-3/#layering */
  background-image: linear-gradient(var(--main-color-bg-alpha), var(--main-color-bg-alpha)),
    url(media/aerial-air-air-force-aircraft-392024.jpg);
}
.bob-section--research {
  background-image: linear-gradient(var(--main-color-bg-alpha), var(--main-color-bg-alpha)),
    url(media/in-the-field-with-dji-inergy-powerfilm.jpg);
}

.bob-minihero {
  display: grid;

  align-items: center;
  align-content: center;

  background-color: var(--main-color-bg-alpha);

  z-index: -1;
}
.bob-minihero::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 30vh;

  background: url("media/texture-grid.png") repeat;

  z-index: 1;
}
.bob-minihero__visual {
  position: absolute;

  width: 100%;
  height: 30vh;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  z-index: 0;
}
.bob-minihero__copy {
  align-self: center;
  justify-self: center;

  display: flex;
  flex-direction: column;

  justify-content: center;

  width: 80vw;
  height: 30vh;

  text-align: center;

  z-index: 2;
}

.bob-tout {
  padding-top: 2em;
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1em;
  color: var(--main-color-1);
  background-color: var(--main-color);

  letter-spacing: 0.1em;
  line-height: 3em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: var(--main-color-bg-alpha) 1px 1px 1px;  
}

.bob-subfooter {
  display: grid;

  align-items: start;
  justify-items: start;

  padding: 1em;

  background-color: var(--main-color-bg);
  background-image: var(--section-texture);
}

.bob-contact > h1 {
  margin-block-end: 1em;
  margin-block-end: 0.5em;
}
.bob-contact > h2 {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}
.bob-contact > h3 {
  margin-block-start: 0;
  margin-block-end: 0;
}
.bob-contact > h4 {
  margin-block-start: 0;
  margin-block-end: 0.707em;
}
.bob-contact > p {
  margin-block-start: 0;
  margin-block-end: 0.707em;
}
.bob-contact > a {
  margin-block-start: 0.25em;
  margin-block-end: 0.5em;
}

.bob-social {
  align-self: flex-start;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  margin-block-start: 0.5em;
  margin-block-end: 0em;
}
.bob-social > h1 {
  margin-block-end: 1em;
  margin-block-end: 0.5em;
}
.bob-social > h2 {
  margin-block-end: 0.5em;
}
.bob-social > ul {
  display: flex;
  flex-direction: row;

  margin: 0;
  font-size: 1.414rem;
}
.bob-social > ul li {
  align-self: center;

  width: 1em;
  margin-right: 0.5em;
}
.bob-social > ul li::before {
  content: "";

  margin: -0.6em;

  color: var(--main-color-300);
}
.bob-social > ul a {
  font-weight: 400;
  text-decoration: none;
  text-shadow: none;
}
.bob-social__facebook-icon::before {
  content: url(media/els-social-facebook-light.svg);
  width: 1em;
}
.bob-social__instagram-icon::before {
  content: url(media/els-social-instagram-light.svg);
  width: 1em;
}
.bob-social__pinterest-icon::before {
  content: url(media/els-social-pinterest-light.svg);
  width: 1em;
}
.bob-social__twitter-icon::before {
  content: url(media/els-social-twitter-light.svg);
  width: 1em;
}
.bob-social__youtube-icon::before {
  content: url(media/els-social-youtube-light.svg);
  width: 1em;
}

.bob-copyright {
  margin-block-start: 1em;
}
.bob-copyright > p {
  margin-block-end: 0em;
}

@media all and (min-width: 420px) {
  body {
    grid-template-columns: repeat(9, 1fr);

    font-size: 1.207rem;
  }
  header,
  .bob-hero,
  .bob-hero__visual,
  .bob-hero__section {
    grid-column: 1 / span 9;
  }
  main,
  aside,
  article,
  section,
  footer {
    grid-column: 1 / span 9;
  }
  p {
    font-size: 1.207rem;
  }

  .bob-subtitle {
    font-size: 1.207rem;
  }
  .bob-title-text {
    font-size: 1.207rem;
  }

  .bob-mission {
    grid-column: 1 / span 9;
  }
}

@media all and (min-width: 720px) {
  body {
    grid-template-columns: repeat(13, 1fr);
  }
  header,
  .bob-hero,
  .bob-hero__visual,
  .bob-hero__section {
    grid-column: 1 / span 13;
  }
  main,
  aside,
  article,
  section, 
  footer {
    grid-column: 1 / span 13;
  }

  .bob-subtitle {
    font-size: 1.414rem;
  }

  .bob-section {
    display: flex;
    flex-direction: row;
  }
  /*.bob-mission::after {
    background: linear-gradient(98deg, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 33.333%, var(--main-color-bg-alpha) 66.667%, var(--main-color-bg-alpha) 100%);
  }*/
  .bob-section__visual {
    width: 40vw;
    min-height: 50%;
  }
  .bob-section__copy {
    width: 50vw;
  }
  .bob-section__copy > h1 {
    font-size: 9vmin;
  }  
  .bob-section--mission {
    background-image: linear-gradient(98deg, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 33.333%, var(--main-color-bg-alpha) 66.667%, var(--main-color-bg-alpha) 100%),
      url(media/aerial-air-air-force-aircraft-392024.jpg);   
  }
  .bob-section--research {
    background-image: linear-gradient(98deg, var(--main-color-bg-alpha) 100%, var(--main-color-bg-alpha) 66.667%, hsla(0, 0%, 100%, 0) 33.333%, hsla(0, 0%, 100%, 0) 0%),
      url(media/in-the-field-with-dji-inergy-powerfilm.jpg);   
  }

  .bob-subfooter {
    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: space-evenly;
  }
  .bob-contact {
    margin-block-start: 0em;
    margin-block-end: 1em;
    margin-right: 1em;
  }
  .bob-social {
    align-self: stretch;

    display: flex;
    flex-direction: column;

    margin-block-start: 0em;
    margin-block-end: 0em;
  }
  .bob-social > h2 {
    margin-block-start: 0.5em;
  }
  .bob-social > ul {

  }
  .bob-copyright {
    flex: 1;
    margin-block-start: 1.5em;
    margin-block-end: 0.75em;

    display: flex;
  }
  .bob-copyright > p {
    align-self: flex-end;
    margin-block-start: 0;
  }
}

@media all and (min-width: 940px) {
  .bob-title {
    font-size: 11vmin;
  }
  .bob-section__copy > h1 {
    font-size: 8vmin;
  }  
}

@media all and (min-width: 1440px) {
  .bob-section__copy > h1 {
    font-size: 7vmin;
  }  
  .bob-minihero__copy {
    width: 60vw;
  }
}

html {
  display: block;
}