/* CONFIG */

@font-face {
  font-family: "space-grotesk";
  src: url("../fonts/space-grotesk.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --primary: #111827;
  --secondary: #bc413a;
  --secondary-tint-90: #f8eceb; // alternative section color
  --secondary-tint-80: #f2d9d8;
  --secondary-tint-70: #ebc6c4;
  --secondary-tint-60: #e4b3b0;
  --secondary-tint-50: #dea09d;
  --red-alt: #df0f3c;
  --body: #343f52;
  --body-light: #60697b;
  /* font-size: 16px; */
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}

/* DEFAULT ELEMENTS */

body {
  background-color: var(--primary);
  color: var(--body);
  font-family: "space-grotesk", system-ui, sans-serif;
}

section {
  padding: max(50px, 3%) max(50px, 5%);
}

main > :nth-child(2n + 1) {
  background-color: var(--secondary-tint-90);
}

h1 {
  font-weight: 600;
  font-size: 2.25rem;
  text-wrap: balance;
  max-width: 50ch;
}

h2 {
  font-weight: 500;
  font-size: 1.75rem;
  text-wrap: balance;
}

p {
  max-width: 70ch;
  text-wrap: pretty;
}

button {
  padding: 0.5em 1em;
  border-radius: 5px;
  color: white;
  background-color: var(--secondary);
  cursor: pointer;
  transition: all 150ms ease-out;

  &:hover {
    transform: translatey(-5px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }

  &:active {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  }

  &.selected {
    transform: translatey(-5px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  }
  /* TODO: REFACTOR THIS NESTED CLASS SELECTOR */
}

/* PAGE */

#page {
  margin: 10px;
  margin-top: 15px;
  border-radius: 5px;
  background-color: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* HEADER */

header {
  display: flex;
  padding-top: 15px;
  justify-content: center;
  align-items: center;
}

#logo {
  width: 10rem;
  height: auto;
}

/* nav {
  position: fixed;
  display: flex;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  border-radius: 5px;
  background-color: var(--body);
}

.nav-item {
  font-size: 1.5rem;
  padding-inline: 8px;
  text-wrap: nowrap;
  color: white;
  border-right: 0.2rem solid var(--primary);
  transition: background-color 1000ms ease-out;

  &.nav-item-last {
    border: none;
  }

  &:hover {
    background-color: var(--primary);
  }
} */

/* HERO SECTION */

#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.bold-transition {
  transition: font-weight 300ms ease-out;

  &:hover {
    font-weight: 300;
  }
}

.red-gradient {
  background-image: linear-gradient(
    90deg,
    var(--secondary) 0%,
    var(--red-alt) 100%
  );
  background-clip: text;
  color: transparent;
}

#hero-buttons {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

#hero-buttons button {
  flex: 1 1 0;
  max-width: 12rem;
  /* TODO: Use min width too? How about just setting the width to vw or % and getting rid of flex? */
}

/* APP-CONFIGURATOR SECTION */

#appconfigurator {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding: 30px 0px; */
}

#appconfigurator-heading {
  margin-bottom: 2rem;
  text-align: center;
}

.appconfigurator-options {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 10px 0px;
}
.appconfigurator-options button {
  flex: 1;
}

/* .appconfigurator-option-button {
  padding: 20px;
  border-radius: 5px;
  background-color: white;
  border: solid;
  cursor: pointer;

  &:hover {
    background-color: #e5e5e5;
  }
} */

/* FOOTER */

footer {
  /* height: 20vh; */
  background-color: var(--body);
  text-align: center;
  color: white;
  display: flex;
}

/* RESPONSIVENESS ON MOBILE */

@media (max-width: 900px) {
  /* #page {
    margin: 10px;
  }

  header {
    padding-top: 10px;
  } */
}

#calendar-button-container button {
  border-radius: 50px !important;
  /* Additional custom styles */
  padding: 10px 20px;
  font-size: 16px;
  color: black;
}
#google-scheduler {
  border-radius: 50px !important;
  /* Additional custom styles */
  padding: 10px 20px;
  font-size: 16px;
  color: black;
}