/* @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@100;300;400;700;900&display=swap");

/* BASIC Styles */

:root {
  /* Custom Properties */
  --color-primary-blue: #047aed;
  --color-secondary-blue: #1c3fa8;
  --color-dark-blue: #002240;
  --color-light-gray: #f4f4f4;
  --color-success: #5cb85c;
  --color-error: #d9534f;

  /* For scroll-animate.css */
  /* GRAY-SCALE PALETTE */
  --color-gray-100: #ececec;
  --color-gray-300: #868686;
  --color-gray-600: #3a3a3a;

  /* PRIMARY COLORS */
  --color-primary-300: rgb(146, 12, 12);
  --color-primary-600: #b50d10;

  /* ACCENT COLOR(S) */
  --color-highlight-wqtoolbox: rgb(65, 65, 247);

  /* CSS variable to modify animations app-wide */
  /* see: https://animate.style/ */
  /* see: https://www.youtube.com/watch?v=gDYv61UOLas */
  --animate-duration: 2800ms;
  --animate-delay: 0.25s;
}

* {
  /* "...add padding and borders without adding to the width of an element */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  color: #333;
  line-height: 1.618;
  background-color: rgba(7, 51, 73, 1); /* REDIRECT */
}

ul {
  list-style: none;
  margin-bottom: 0;
}

a {
  text-decoration: none;
  color: #333;
}

h1,
h2 {
  font-weight: 300;
  line-height: 1.2;
  margin: 0.625rem 0;
}

p {
  margin: 0.625rem 0;
}

img {
  width: 100%;
}

code,
pre {
  background-color: #333;
  color: #fff;
  padding: 0.625rem;
}

/* ----------------------- */
/* STYLE LINK TO TZ's BOOK */
/* ----------------------- */

.tzachi-book-link p {
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 2rem;
  padding: 0 3rem;
}

.tzachi-book-link a {
  color: blue;
}

.tzachi-book-link a:hover {
  color: rgb(153, 0, 255);
  text-decoration: underline;
}

/* ------------- */
/* navbar-wqmap Styles */
/* ------------- */

.navbar-wqmap {
  background-color: var(--color-primary-blue);
  color: #fff;
  height: 4.375rem; /* 70px */
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  z-index: 200;

  /* padding: 10px; */

  /* background-color: #2f353f; */
  background-color: rgba(7, 51, 73, 1);

  /* color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start; */
}

.navbar-wqmap ul {
  display: flex;
  align-items: center;
}

.navbar-wqmap ul li {
  display: flex;
  /* margin-top: 1.5px; */
}

.navbar-wqmap a {
  /* .navbar-wqmap a { */
  color: rgb(220, 220, 220);
  margin: 0 0.8rem;
  /* padding: 0 0.625rem; */
  padding-bottom: 1.5px;
  /* border-bottom: transparent; */
}

.navbar-wqmap a:hover {
  color: #fff;
  border-bottom: 1.5px solid #fff;
}

/* Keep border-bottom on selected nav menu item */
.selectedNavMenu {
  border-bottom: 1.5px solid #fff;
}

.navbar-wqmap .flex {
  justify-content: space-between; /* general flex: center -- navbar-wqmap: space-between */
}

.logo {
  font-size: 1.7rem;
  margin-bottom: 0;
}

/* hit '+' in WQ ToolBox+ */
.logo sup {
  color: gold;
}

.logo a:hover {
  color: gold;
  cursor: pointer;
  border: none;
}

hr {
  border: 1px solid rgb(158, 156, 250);
}

/* --------------------------- */
/* MAIN-HEADER & SECTION-TITLE */
/* for emphasis of 'WQ *' & .. */
/* --------------------------- */

.main-header h2 span {
  /* .section-title span { */
  font-family: "Nunito", sans-serif;
  font-weight: bold;
  color: var(--color-secondary-blue);
}

.main-header p {
  border: 0.5px solid gray;
  background: #ffffe0;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 2.35rem;
}

.main-header p span {
  /* font-family: "Nunito", sans-serif; */
  font-weight: 400;
  color: var(--color-secondary-blue);
}

/* --------------- */
/* SHOWCASE Styles */
/* --------------- */

.showcase {
  height: 33rem;
  /* height: 25rem; */
  background-color: var(--color-primary-blue);
  /* background-image: linear-gradient(rgb(21, 85, 146), rgb(28, 126, 214)); */
  color: rgb(245, 245, 245);
  /* color: #fff; */
  position: relative;

  /* see: https://help.optimizepress.com/article/479-background-image-not-showing-in-ios-mobile-safari */
  background-image: url("/images/the-wqmap.jpg");
  /* background-image: url("/images/Buza-sun-sea-stone.jpg"); */

  /* see: https://www.boldgrid.com/support/question/resize-background-image-for-mobile-phones/ */
  /* background-size: auto 100%; */

  background-size: cover;
  /* background-size: 100% 100%; */

  /* see: https://stackoverflow.com/questions/18999660/background-image-not-showing-on-ipad-and-iphone */
  background-attachment: fixed;

  /* background-position-y: -8rem; */

  /* background-position-x: 0; */
  /* background-repeat: no-repeat; */

  /* ss: https://dev.to/tobiasroeder/iphone-safari-fixed-background-image-d3p */
  /* display: block; */
  /* z-index: -1; */
  /* position: fixed; */
  /* top: 0; */
  /* right: 0;
  bottom: 0;
  left: 0; */
  object-fit: cover;
  /* width: 100%;
  height: 100%; */
}

.showcase h1 {
  font-size: 2.5rem;
}

.showcase p {
  font-size: 1.5rem;
  margin: 1.25rem 0;
}

/* Modify showcase grid from 50-50 -- Why important here? */
.showcase .grid {
  overflow: visible; /* extends Request form below showcase */
  grid-template-columns: 55% 45%;
  gap: 1.875rem;
}

.showcase-text h1 {
  font-size: 3.25rem;
  animation: slideInFromLeft 2s ease-in-out;
}

.showcase-text p {
  animation: slideInFromLeft 5s ease-in-out;
}

.showcase-form {
  position: relative;
  top: 3.75rem; /* 60px */
  height: 23rem; /* 350px */
  width: 25rem; /* 400px */
  padding: 1.5rem; /* 40px */
  background-color: #fff;

  color: #2b3629;
  z-index: 100;
  justify-self: flex-end;
  animation: slideInFromRight 2s ease-in;
}

.showcase-form .form-control-index {
  margin: 1.875rem 0;
}

.showcase-form input[type="text"],
.showcase-form input[type="email"] {
  font: inherit;
  border: none;
  border-bottom: 1px solid #b4becb;
  width: 100%;
  /* display: block; */
  /* margin: 0 auto; */
  padding: 0.25rem;
  font-size: 1.25rem;
}

.showcase-form h2 {
  color: #2b3629;
}

.showcase-form input:focus {
  outline: none;
}

/* ...add slant effect... */
.showcase::before,
.showcase::after {
  content: "";
  position: absolute; /* within .showcase's position: relative */
  height: 6.25rem; /* original: 6.25rem */
  bottom: 59.4rem; /* original: -4.4rem */
  right: 0;
  left: 0;
  background-color: #fff; /* NO Rediret */
  background-color: #073349;
  transform: skewY(-3deg);
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
}

/* --------------------- */
/* --- STATS Section --- */
/* --------------------- */

.stats {
  padding-top: 6.25rem;
  animation: slideInFromBottom 1s ease-in-out;
  /* position: relative;
  height: 30rem;
  background-color: rgb(250, 250, 206); */
}

.stats-heading {
  width: 31.25rem;
  margin: auto;
}

.stats .grid h3 {
  font-size: 2rem;
}

.stats .grid p {
  font-size: 1.25rem;
  font-weight: bold;
}

/* --- --- --- */
/*     CLI     */
/* --- --- --- */

.cli .grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.cli .grid img {
  /* .cli .grid > *:first-child { */
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

/* WQ Map Carousel Section */

.wqmap .grid {
  grid-template-columns: 1fr 1fr;
  /* grid-template-columns: 4fr 3fr; */
  /* background-color: var(--color-secondary-blue); */
  /* background-image: linear-gradient(rgb(28, 126, 214), rgb(21, 85, 146)); */
  background-image: linear-gradient(rgb(21, 85, 146), rgb(28, 126, 214));
  color: var(--color-gray-100);
  padding: 0.5rem;
}

/* WQ SOFTWARE -- WQ Map, ToolBox, & Manuaal */

/* Only use the following animation*/
/*  if want all 3 cards as a group */
/*  else use each card's id */
/* .wq-software {
  animation: slideInFromBottom 1s ease-in-out;
} */

.wq-software .flex {
  flex-wrap: wrap;
}

.wq-software .card-index {
  text-align: center;
  margin: 1.2rem 0.625rem 2.5rem;
  transition: transform 0.2s ease-in;

  /* to "raise" three cards under showcase */
  /* above diagonal strip that cuts a an angle */
  /* on the bottom of the showcase Korčula image */
  position: relative;
}

.wq-software .card-index:hover {
  /* transform: scale(1.1); */
  transform: translateY(-1rem);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.wq-software .card-index h4 {
  font-size: 1.25rem;
  color: rgb(21, 85, 146);
  font-weight: bold;
  margin-bottom: 1.8rem;
}

.wq-software .card-index p {
  padding-top: 0.5rem;
}

#to-the-wq-map {
  animation: slideInFromBottom 1.7s ease-in-out;
  /* animation-delay: 2s; */
}

#to-the-wq-toolbox {
  animation: slideInFromBottom 2.4s ease-in-out;
  /* animation-delay: 2s; */
}

#to-the-wq-manual {
  animation: slideInFromBottom 3.1s ease-in-out;
  /* animation-delay: 2s; */
}

/* FEATURES */

.features-head img,
.docs-head img {
  width: 12.5rem;
  justify-self: flex-end;
}

.features-sub-head img {
  width: 18.75rem;
  justify-self: flex-end;
}

.features-main .card-index > i {
  margin-right: 1.25rem;
}

/* Brad's code */
/* .features-main .grid > *:first-child {
  grid-column: 1 / span 3;
}

.features-main .grid > *:nth-child(2) {
  grid-column: 1 / span 2;
} */

/* My sol'n */
.features-main .grid-3 > div:nth-of-type(1) {
  grid-column: 1 / span 3;
}

.features-main .grid-3 > div:nth-of-type(2) {
  grid-column: 1 / span 2;
}

/* DOCS */

.docs-main h3 {
  margin: 1.25rem 0;
}

.docs-main .grid {
  grid-template-columns: 1fr 2fr;
  align-items: flex-start;
}

.docs-main nav li {
  font-size: 1.06rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid #ccc;
}

.docs-main nav li:hover {
  font-weight: bold;
  transform: scale(1.02);
}

/* FOOTER */

footer {
  background-color: rgba(7, 51, 73, 1);
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: #cfc6c9;
  padding-top: 1.5rem;
}

footer a {
  color: rgb(220, 220, 220);
  margin: 0 0.8rem;
  padding-bottom: 0.25rem;
}

footer a:hover {
  color: #fff;
  /* color: rgb(220, 220, 220); */
  border-bottom: 2.5px solid #fff;
}

.social a {
  margin: 0 1rem;
}

/* ---------- */
/* Animations */
/* ---------- */

@keyframes slideInFromLeft {
  0% {
    /* transform: translateX(-100%); */
    opacity: 0;
  }
  90% {
    /* transform: translateX(-10%); */
    opacity: 0.85;
  }
  100% {
    /* transform: translateX(0%); */
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  90% {
    /* transform: translateX(-10%); */
    opacity: 0.5;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  90% {
    /* transform: translateX(-10%); */
    opacity: 0.5;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  90% {
    /* transform: translateX(-10%); */
    opacity: 0.5;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

/* .showcase-text {
  opacity: 1;
}

.showcase-form {
} */

/* nav list (Essentials/Deployment) in about.html */
#essentials-and-deployment {
  padding: 0 0.75rem;
}

/*           -------------           */
/*           MEDIA Queries           */
/*           -------------           */

/* https://www.webmobilefirst.com/en/devices/apple-ipad-pro-11-2018/?utm_source=extension&utm_campaign=browsing&utm_content=click_info */
/* @media (max-width: 1194px) { */
/* see: https://www.webmobilefirst.com/en/devices/apple-ipad-air-4/?utm_source=extension&utm_campaign=browsing&utm_content=click_info */
/* @media (max-width: 1180px) { */
@media (max-width: 1024px) {
  .showcase {
    /* height: auto; */
    /* background-image: url("/images/Buza-sun-sea-stone.jpg"); */
    /* background-image: url("/images/the-wqmap-sea.png"); */
    /* background-image: url("/images/the-wqmap-sea-sm.jpg"); */
    background-image: url("/images/the-wqmap.jpg");

    /* background-position: bottom;
    background-size: cover; */

    /* see: https://medium.com/the-coders-guide-to-javascript/css-background-images-for-mobile-225317f1d083 */
    background-position: top center;
    background-size: 150vw auto;

    /* background-attachment: local; */
  }

  .showcase-text p {
    color: rgb(231, 231, 233);
  }
}

/* old iPad - portrait (768px) */
/* iPhone X - landscape (812px) */
/* Pixel 2cXL - landscape (823px) */
@media (max-width: 823px) {
  .showcase {
    /* background-position-y: -4.5rem; */
    height: 32rem;
  }

  .showcase-text h1 {
    font-size: 2.5rem;
  }
  .showcase-text p {
    font-size: 1.35rem;
  }
}

/* TABLET (portrait) and under... */
/* ...52rem = 832px... */
/* @media (max-width: 52rem) { */
/* @media (max-width: 48rem) { */
/* @media (max-width: 823px) { */
/* @media (max-width: 720px) { */
@media (max-width: 768px) {
  /* ---------------- */
  /* Stack Grid Items */
  /* ---------------- */
  .grid,
  .showcase .grid,
  .stats .grid,
  .cli .grid,
  .wqmap .grid,
  .features-main .grid,
  .docs-main .grid {
    grid-template-columns: 2fr 3fr;
    /* grid-template-columns: 1fr 3fr; */
  }

  /* height: auto -- pushes down following section (Stats) */
  .showcase {
    height: 30rem;
    /* height: auto; */
    /* background-image: url("/images/the-wqmap-sea.png");
    background-position: top;
    background-size: cover; */
  }

  .showcase-text {
    text-align: center;
    margin-top: 2.5rem;
  }

  .showcase-form {
    justify-self: center;
    margin: auto;
  }

  .cli .grid img {
    /* .cli .grid > *:first-child { */
    grid-column: 1;
    grid-row: 1;
  }

  .card-index h3 {
    text-align: center;
  }

  .features-head,
  .features-sub-head,
  .docs-head {
    text-align: center;
  }

  .features-head img,
  .features-sub-head img,
  .docs-head img {
    justify-self: center;
  }

  .features-main .card-index {
    justify-content: flex-start;
  }

  /* lower 3 cards under showcase in tablet/portrait */
  .wq-software .card-index {
    margin: 6.2rem 0.625rem 2.5rem;
  }

  /* Added to shrink width on tablets */
  #essentials-and-deployment {
    width: 65%;
    margin: 0 auto;
  }
}

/* Surface Duo - landscape */
@media (max-width: 768px) {
  /* .showcase { */
  /* background-position-y: 4rem; */
  /* height: 32rem; */
  /* } */

  /* .showcase-text h1 {
    font-size: 2.5rem;
  } */

  .showcase-text p {
    font-size: 1.25rem;
  }
}

/* to get Surface Duo - portrit */
@media (max-width: 540px) {
  /* @media (max-width: 412px) { */
  /* @media (max-width: 375px) { */
  .showcase-text {
    margin-top: 4.5rem;
  }
  .showcase-text h1 {
    font-size: 2.25rem;
  }

  .grid,
  .showcase .grid,
  .stats .grid,
  .cli .grid,
  .wqmap .grid,
  .features-main .grid,
  .docs-main .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .wq-software {
    margin-top: 230px;
  }
}

/* SMART PHONE (portrait) and under... */
/* ...30rem = 480px... */
/* @media (max-width: 30rem) { */
@media (max-width: 480px) {
  .showcase {
    height: 31rem;
  }

  .navbar-wqmap {
    height: 6.875rem;
  }

  .navbar-wqmap .flex {
    flex-direction: column;
  }

  .navbar-wqmap ul {
    padding: 0.625rem;
    background-color: rgba(0, 0, 0, 0.1);
  }

  /* .showcase {
    background-position-x: 20;
  } */

  .showcase-form {
    width: 22rem;
  }

  .stats-heading {
    width: 18.5rem;
  }

  .features-main .grid > div:nth-of-type(1),
  .features-main .grid > div:nth-of-type(2) {
    grid-column: 1;
  }

  /* Added to shrink width on smart phones */
  #essentials-and-deployment {
    width: 50%;
    /* width: 100%; */
    margin: 0 auto;
  }
}