/* File: css/style.css */
/* Dark Mode with Green Accent (#009733) */

/* Base Layout */
body {
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
  background: #121212;
  color: #e0e0e0;
  line-height: 1.6;
}

html {
  scroll-behavior: smooth;
}

/* Prevent any horizontal scrolling and only allow vertical panning */
html, body {
  overflow-x: hidden;
  touch-action: pan-y;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header & Nav */
.site-header {
  background: #1f1f1f;
  border-bottom: 1px solid #333;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;                /* spacing between icon & title */
  flex-shrink: 1;
  white-space: nowrap;
}

.logo {
  font-size: 1.25rem;
  color: #009733;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;                /* remove extra inset */
}

.hamburger {
  display: none; /* only on mobile */
  font-size: 1.5rem;
  background: none;
  border: none;
  color: #009733;
  cursor: pointer;
  flex-shrink: 0;
  /* align by default via flex */
}

.site-nav {
  display: flex;
  gap: 1rem;
  flex-shrink: 1;
}

.site-nav a {
  color: #009733;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: #007a29;
  text-decoration: underline;
}

/* Mobile Menu */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    align-items: stretch;
  }

  .site-header .container {
    padding: 0 1rem;
  }

  .nav-left {
    display: flex;
    align-items: center;
    gap: 1rem;           /* space between icon & title */
    padding: 0.75rem 1rem;
  }

  .hamburger {
    display: block;
    position: relative;  /* was absolute */
    line-height: 1;
    left: auto;
    top: auto;
    bottom: 0.1em;
    transform: none;
    margin: 0;           /* no need for extra margins */
  }
  
  .logo {
    /* no extra margin; flex gap handles spacing */
    font-size: 1.35rem;
  }

  .site-nav {
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    margin-top: 0;
  }

  .site-nav.nav-open {
    max-height: 200px;
    margin-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* Section Styling */
section {
  margin: 2rem 0;
  background: #1e1e1e;
  border-radius: 12px;
  padding: 2rem 1rem;
}

section:nth-of-type(even) {
  background: #2a2a2a;
}

section h2 {
  text-align: center;
  color: #009733;
}

section h3 {
  color: #009733;
  margin-top: 2rem;
  font-size: 1.2rem;
}

section ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

section ul li {
  margin-bottom: 0.5rem;
}

/* Screenshots */
.screenshots {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 1rem 0;
}

.screenshots figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
}

.screenshots img {
  height: 200px;
  width: auto;
  border-radius: 6px;
  object-fit: contain;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s ease;
  cursor: pointer;
}

.screenshots img:hover {
  transform: scale(1.05);
}

.screenshots figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #ccc;
  text-align: center;
}

/* Footer */
footer {
  background: #1f1f1f;
  text-align: center;
  padding: 1rem;
  margin-top: 4rem;
  color: #e0e0e0;
}

/* App Store Badge */
.appstore-badge {
  margin-top: 1.5rem;
  text-align: center;
}

.appstore-badge img {
  height: 50px;
  transition: transform 0.2s ease;
  filter: none;             /* show badge as-is */
}

.appstore-badge img:hover {
  transform: scale(1.05);
}

/* About Section Text Centering */
#about {
  text-align: center;
}

#about p {
  max-width: 700px;
  margin: 0 auto;
}

/* Desktop Landscape (and up) */
@media (min-width: 769px) {
  .nav-container {
    justify-content: flex-start;
  }

  .site-nav {
    margin-left: auto;
    margin-right: 2rem;
  }

  .nav-left {
    margin-right: auto;
  }
}

/* make footer links look like plain text */
#contact a {
  color: inherit;           /* same as surrounding text */
  text-decoration: none;    /* no underline */
  cursor: text;             /* won’t look like a clickable link */
}

/* Center & polish contact form */
#contact .contact-form {
  justify-content: center;  /* center the overall grid */
  justify-items: center;    /* center each item in its cell */
  max-width: 600px;           /* limit overall width */
  margin: 2rem auto;          /* center in footer */
  display: grid;
  grid-template-columns: 1fr 1fr;  /* two-column layout */
  grid-gap: 1rem;
}

/* Labels span the full width */
#contact .contact-form label {
  grid-column: 1 / -1;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Email & Subject each take one column */
#contact .contact-form input[name="from"],
#contact .contact-form input[name="subject"] {
  width: 100%;
  max-width: 400px;
  grid-column: 1 / -1;
}

/* Message textarea spans both columns */
#contact .contact-form textarea[name="body"] {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 400px;
  min-height: 120px;
}

/* Submit button centered under the form */
#contact .contact-form button {
  justify-self: center; 
  background: #009733;        /* your green */
  color: #fff;                /* white text */
  border: none;               /* remove default border */
  border-radius: 6px;         /* match your card styling */
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

/* Hover/focus states */
#contact .contact-form button:hover,
#contact .contact-form button:focus {
  background: #007a29;        /* slightly darker green */
  transform: translateY(-1px);
  outline: none;
}
#contact .contact-form button {
  grid-column: 1 / -1;    /* span both columns */
  justify-self: center;    /* center horizontally */
}