:root {
  color: white;
}
html {
  background: linear-gradient(to bottom right, #0eaa54, #097038, #043218);
  /* background-size: repeat; */
  background-attachment: fixed;
  /* cursor: url("cursor.svg") 16 16, default; */
}

body {
  margin: 0 2vw;
  box-sizing: border-box;
  min-height: 100vh;
  /* background: linear-gradient(to bottom right, #097038, #000000); */
  /* background-image: url("pattern_inverse.png"); */
  /* background-size: 20%; */
  /* background-repeat: no-repeat; */
  font-family: "Oxanium", Arial;
}

body > * {
  padding: 0 2rem;
}

.background-logo {
  will-change: transform, opacity;
  contain: content;
  pointer-events: none;
  user-select: none;
  /* Optional: Use translateZ(0) to trigger hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
}

nav {
  top: 0;
  margin: 0 0;
  padding: 2vw;
  /* width: 100%; */
  /* background: transparent; */
  /* color: white; */

  /* transition: transform 0.3s ease; */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  box-sizing: border-box;
  z-index: 1000;
}
nav > * {
  flex: 1 1 0;
  /* min-width: 0; */
}

/* nav.hide {
  transform: translateY(-100%);
} */

nav .right-group {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

#footer-links-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

h1 {
  margin: 0 0;
  color: white;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.77);
  /* text-shadow: 2px 2px 50px darkturquoise; */
  /* font-size: 4em; */
  font-size: clamp(2rem, 6vw, 6em);
  font-weight: normal;
  letter-spacing: 0.3em;
}
/* h2,
h3,
li,
p {
  text-shadow: 2px 2px 50px rgb(39, 165, 113);
} */
#video-caption li,
h2 {
  /* font-family: "Roboto", sans-serif; */
  font-weight: 500;
  font-size: clamp(1rem, 4vw, 3.6em);
  letter-spacing: clamp(0.05em, 0.2vw, 0.3em);
}
.section-title {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 40px;
}
h3 {
  font-weight: 600;
  /* text-shadow: 2px 2px 50px green; */
  font-size: clamp(1.2rem, 3vw, 2rem);
  letter-spacing: clamp(0.03em, 0.2vw, 0.3em);
}
/* #mockup-caption > * {
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.5em);
  letter-spacing: clamp(0.03em, 0.2vw, 0.3em);
} */
li,
p {
  /* text-shadow: 2px 2px 50px green; */
  font-weight: normal;
  font-size: clamp(1rem, 2vw, 1.5em);
  letter-spacing: clamp(0em, 0.08vw, 0.3em);
}
p.accent {
  color: rgb(0, 255, 123);
}

/* li {
  font-size: clamp(1rem, 2vw, 1.5em);
} */
/* ul {
  padding: 0;
  align-items: center;
} */
ul li:not(:last-child) {
  margin-bottom: 1em;
}

.site-icon {
  width: 60px;
  height: 60px;
}

.store-button-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.store-badge {
  justify-content: center;
  height: clamp(40px, 5vw, 80px);
  /* width: auto; */
  /* display: inline-block; */
}
.store-badge.apple {
  height: clamp(36px, 4.5vw, 72px);
}

#heading-content {
  /* display: grid; */
  /* min-height: 100vh; */
  /* width: 100%; */
  /* background: linear-gradient(to bottom right, rgb(38, 122, 41), #000000); */
  padding: 2vh 3vw;
  /* background: linear-gradient(to bottom right, #097038, #000000); */
  /* background: url("icon.svg") no-repeat top left; */
}
#body-content {
  /* display: grid; */
  /* height: 400px; */
  padding: 4vh 3vw;
  /* background: linear-gradient(to top right, #097038, #000000); */
}
/* Make sure all body content is above the pseudo-element */
body > * {
  position: relative;
  z-index: 1;
}
.flex-container-2 {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
/* Responsive 2-child flex block: 66-33 split above 600px */
.uneven-flex-container {
  display: flex;
  gap: 2rem;
  /* margin: 1rem; */
}

.video-placeholder {
  position: relative;
  width: 100%;
  cursor: pointer;
  aspect-ratio: 16 / 9; /* Modern way to maintain aspect ratio */
  background-color: #000;
}
.video-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
/* Style a fake play button */
.video-placeholder::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  pointer-events: none; /* Allows clicks to go through to the container */
}
/* When the container has the .video-loaded class, hide the play button */
.video-placeholder.video-loaded::after {
  display: none;
}
.video-placeholder iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

#video-caption {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: start;
  text-align: center;
}
#video-caption li {
  margin: 1rem 3vw;
}
#video-caption ul {
  padding: 0;
  list-style-type: none;
  flex: 0;
}
#video-caption .store-button-container {
  align-items: center;
  flex: 1;
}
#video-container {
  flex: 2;
  margin: auto;
  width: 100%;
  max-width: 50vw;
  /*max-height: 40vh; */
  aspect-ratio: 16 / 9;
  background: #222;
  border-radius: 2vw;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#mockup {
  flex: 3;
}
#mockup-caption {
  /* height: 100%; */
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center; /* center items vertically */
}

#faq-more {
  display: none;
  cursor: pointer;
} /* default hidden on desktop */

@media (max-width: 700px) {
  /* hide all cards by default, show first N */
  #faq-container .card {
    display: none;
  }
  #faq-container .card:nth-child(-n + 3) {
    display: block;
  }

  /* show the More button on mobile */
  #faq-more {
    display: inline-block;
    /* margin: 1rem auto 2rem auto;
    padding: 0.65rem 1rem;
    background: linear-gradient(90deg, #2f9a4a, #1f6e2e);
    color: #fff;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem; */
  }

  /* expanded state: show all cards */
  #faq-container.expanded .card {
    display: block;
  }
  nav {
    /* flex-direction: row-reverse; */
    align-items: center;
  }
  nav > * {
    flex: 1 0;
  }
  #footer-nav {
    flex-direction: column;
    flex: inherit;
  }
  #footer-links-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
  }

  .flex-container-2,
  .uneven-flex-container {
    flex-direction: column;
  }
  .uneven-flex-container:has(#mockup) {
    flex-direction: column-reverse;
  }
  #video-caption ul {
    display: flex;
    justify-content: center;
    margin: 1rem;
  }

  #video-caption > * {
    flex: 1 1 0;
  }

  #video-container {
    max-width: 1000px;
  }

  /* put the login button inside the hamburger menu */
  .login-button {
    display: none;
  }
  .right-group {
    display: none !important;
    position: relative;
    width: 40px;
    height: 40px;
  }
  /* .right-group::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 3px;
    background: white;
    box-shadow: 0 10px 0 white, 0 -10px 0 white;
  } */
  /* .login-button {
    display: none;
  } */
  .right-group > * {
    display: none;
  }

  /* #title h1 {
    display: none;
  } */
  /* #title img {
    display: block;
  }
  .title-logo {
    display: block;
    width: 40px;
  } */
}

a,
a:visited {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  /* padding: 0; */
  text-decoration: none;
}

button:hover,
a:hover {
  color: orange;
  /* cursor: url("pointer.svg") 16 16, pointer; */
}

/* 1. The Flexbox Container */
#faq-container {
  display: grid; /* Enables flexbox layout */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  flex-direction: row;
  flex-wrap: wrap;
  gap: 2vw; /* Adds space between the cards */
}
#faq-container > * {
  text-shadow: none;
}

section {
  justify-content: center;
}

/* 2. The Individual Cards (created by JavaScript) */
.card {
  /* Flex properties: grow, shrink, and ideal starting width */
  flex: 0 1 200px;
  /* align-items: flex-start; */
  justify-content: space-around;
  /* border: 2px solid #e0e0e0; */
  /* background-color: white; */
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.33);
  padding: 1.5rem;
  box-sizing: border-box; /* Ensures padding is included in the width */
}

.card h3 {
  margin-top: 0;
  font-size: clamp(1.2rem, 3vw, 2rem);
  /* font-size: clamp(1.1rem, 2rem, 2rem); */
  letter-spacing: clamp(0em, 0.1vw, 0.3em);
  /* color: #1c1e21; */
  /* font-size: inherit; */
}
.card p {
  /* color: #606770; */
  /* line-height: 1.5; */
  font-weight: normal;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  /* letter-spacing: inherit; */
}
.card > * {
  text-shadow: none;
}