/* ===========================
   General Reset and Layout
   =========================== */
html, body {
  overflow-x: hidden;
  min-width: 0; /* Override Skel's forced min-width */
}

p, h1, h2, h3, h4, h5, h6, li, a, div, section {
  white-space: normal;
  word-break: break-word;
}

body, p, h1, h2, h3, h4, h5, h6 {
  color: #000 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  font-family: 'Lato', sans-serif;
}

/* ===========================
   Container and Row
   =========================== */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1em;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.row > * {
  float: none !important;
  padding: 1em;
  box-sizing: border-box;
}

/* Remove extra Skel spacing from .row.200% */
.row.\32 00\% {
  margin: 0 !important;
  padding: 0 !important;
}

/* ===========================
   Hero Section
   =========================== */
.hero-content {
  text-align: center;
  padding: 2em 1em;
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: 2.5em;
  font-weight: 900;
  color: #000;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.2em;
  color: #333;
  font-weight: 300;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto 1.5em auto;
  text-align: center;
}

.hero-subtitle strong {
  color: #000;
  font-weight: 600;
}

/* Buttons in Hero Section */
.actions {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.actions li {
  margin: 0 0.5em;
}

/* ===========================
   Banner Styles
   =========================== */
#banner {
  position: relative;
  background-size: cover;
  background-position: center;
  filter: brightness(1.2); /* Brighten background image */
  text-align: center;
  padding-bottom: 2em;
}

#banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.1)
  );
  pointer-events: none;
}

#banner {
  position: relative; /* Ensure it stays below the fixed header */
  z-index: 1;
}

/* ===========================
   App Features Grid
   =========================== */
#one header {
  margin-top: 2.5em;
}

#one p, #one h2 {
  -webkit-text-stroke-width: 0;
  text-shadow: none;
  color: #000;
}

#one p {
  font-weight: 400;
}

#one h2 {
  font-weight: 900;
}

/* Feature grid layout */
#one .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em;
}

#one .row > section {
  flex: 0 1 300px;
  text-align: center;
  padding: 1em;
  box-sizing: border-box;
}

#one img.image.fit {
  max-width: 300px;
  width: 100%;
  display: block;
  margin: 0 auto 1em auto;
}

/* Responsive grid */
@media screen and (max-width: 992px) {
  #one .row > section {
    flex: 0 1 calc(50% - 1.5em);
  }
}

@media screen and (max-width: 600px) {
  #one .row > section {
    flex: 0 1 100%;
  }
}

/* Tighten vertical spacing between feature blocks on mobile */
@media screen and (max-width: 600px) {
  #one .row {
    gap: 0.8em !important;  /* Reduce vertical gap between sections */
    margin: 0 !important;
  }

  #one .row > section {
    padding: 0.5em 0 !important;  /* Reduce padding around each block */
    margin-bottom: 0.8em !important; /* Less space between blocks */
  }

  #one img.image.fit {
    margin: 0.5em auto !important;  /* Smaller gap below images */
  }

  #one h3, 
  #one p {
    margin: 0.3em 0 !important;  /* Tighter text spacing */
  }
}

/* ===========================
   Navigation
   =========================== */
#nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#nav .menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8em;
  cursor: pointer;
  color: #000;
}

#nav .nav-links {
  display: flex;
  gap: 1em;
}

@media screen and (max-width: 768px) {
  #nav {
    position: relative;
  }

  #nav .menu-toggle {
    display: block;
  }

  #nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    flex-direction: column;
    width: 200px;
    border: 1px solid #ddd;
    padding: 0.5em 0;
  }

  #nav .nav-links.open {
    display: flex;
  }

  #nav .nav-links li {
    padding: 0.5em 1em;
  }

  #nav .nav-links a {
    color: #000;
    text-decoration: none;
  }
}

@media screen and (max-width: 768px) {
  #nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    flex-direction: column;
    width: 200px;
    border: 1px solid #ddd;
    padding: 0.3em 0; /* Reduce vertical padding inside menu */
    gap: 0;
    text-align: left;
  }

  #nav .nav-links li {
    padding: 0.3em 1em; /* Reduce vertical padding */
    margin: 0;
  }

  #nav .nav-links li a {
    display: block;
    width: 100%;
    color: #000;
    text-decoration: none;
    padding: 0.2em 0; /* Tighten vertical padding inside link */
    line-height: 1.2; /* Shrinks the overall vertical spacing */
  }
}

/* ===========================
   Header
   =========================== */

#header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: #ffffff !important; /* Solid background */
  border-bottom: 4px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999 !important; /* Always on top */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 1em;
}

body.landing {
  padding-top: 80px; /* Matches header height */
}

/* Header Left Section */
.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-logo {
  max-height: 36px;
  width: auto;
  vertical-align: middle;
}

.site-title a {
  color: #000 !important;
  text-decoration: none !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
}

.site-title a:hover {
  text-decoration: none;
  color: #555;
}

/* ===========================
   Navigation
   =========================== */
#nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#nav .menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8em;
  cursor: pointer;
  color: #000;
}

#nav .nav-links {
  display: flex;
  gap: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav .nav-links li a {
  text-decoration: none;
  color: #000;
  font-size: 1rem;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
  #nav {
    position: relative;
  }

  #nav .menu-toggle {
    display: block;
  }

  #nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(255, 255, 255, 0.9); /* Slight white overlay for readability */
    flex-direction: column;
    width: 200px;
    border: 1px solid #ddd;
    padding: 0.3em 0;
    gap: 0;
    text-align: left;
  }

  #nav .nav-links.open {
    display: flex;
  }

  #nav .nav-links li {
    padding: 0.3em 1em;
    margin: 0;
  }

  #nav .nav-links li a {
    display: block;
    width: 100%;
    color: #000;
    text-decoration: none;
    padding: 0.2em 0;
    line-height: 1.2;
  }
}

/* ===========================
   Footer
   =========================== */
#footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2em;
}

#footer .row > section {
  flex: 1 1 30%;
  min-width: 250px;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  padding: 1em 0 !important;
  text-align: left;
}

@media screen and (min-width: 768px) {
  #footer .row > section {
    flex: 1 1 45% !important;
  }
}

@media screen and (max-width: 768px) {
  #footer .row {
    flex-direction: column;
    align-items: flex-start;
  }
  #footer .row > section {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

/* Reduce top padding on mobile to tighten space below navbar */
@media screen and (max-width: 768px) {
  body.landing {
    padding-top: 5px !important; /* Decrease from 80px to 60px */
  }
}

/* Footer colors */
#footer, #footer p, #footer h3, #footer a, .copyright {
  color: #f0f0f0 !important;
}

#footer a:hover {
  color: #ffffff !important;
}

/* Modal Styles */
#betaModal {
  color: #f0f0f0 !important; /* Off-white text */
}

#betaModal h3,
#betaModal p,
#betaModal button {
  color: #f0f0f0 !important;
}

#betaModal button {
  background: #007acc; /* Keep the blue button */
  border: none;
  color: #fff !important; /* Ensure text is white */
  cursor: pointer;
}

/* Modal container */
#betaModal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);

  /* Flexbox centering */
  align-items: center;     /* Vertical center */
  justify-content: center; /* Horizontal center */
  padding: 1em;
  box-sizing: border-box;
}

/* Show modal when class 'show' is applied */
#betaModal.show {
  display: flex; /* Activate flex centering */
}

/* Modal content */
.beta-modal-content {
  background: #000;
  color: #ffffffd4;
  border-radius: 6px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  padding: 20px;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

/* Modal heading and text */
.beta-modal-content h3 {
  margin-top: 0;
  font-weight: 700;
}

.beta-modal-content p {
  font-weight: 600;
  color: #ffffffd4;
}

/* Modal button */
.beta-modal-button {
  margin-top: 1em;
  padding: 8px 16px;
  background: #007acc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 400;
  font-family: 'Lato', sans-serif;
}

#header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}