/* ===============================
   Root Variables: Fonts & Colors
   =============================== */
:root {
  /* Font families */
  --font-sans: 'Inter', sans-serif;

  /* Brand colors */
  --color-primary: #4D9078;   
  --color-secondary: #ED7D3A;     

  /* Neutral palette */
  --color-bg: #ffffff;
  --color-surface: #f9fafb;
  --color-text: #080808;
  --color-text-light: #242424;

  /* Status colors */
  --color-success: #22c55e;
  --color-warning: #facc15;
  --color-error: #ef4444;

  /* Font sizes */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */
  --text-5xl: 3rem;     /* 48px */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Font weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* ===============================
   Global Reset & Body Layout
   =============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* full viewport height */
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
}

/* ===============================
   Navbar
   =============================== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--weight-normal);
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--color-primary);
}

.nav-logo {
  height: 50px;
  width: auto;
}

/* ===============================
   Hero / Tagline
   =============================== */
.tagline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 0 1rem;
}

h1 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.dot {
  color: var(--color-secondary);
}

/* ===============================
   Homepage Sections
   =============================== */
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 2rem;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.section h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin-bottom: 1rem;
}

.section p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

/* ===============================
   Help Page Section (centered, list left-aligned)
   =============================== */
.help-section {
  flex: 1;  /* fills remaining space to push footer down */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 900px;
  margin: 4rem auto;
  padding: 0 1rem;
  text-align: center;
}

.help-section h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.help-section p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.help-section ul {
  text-align: left;      
  display: inline-block;  /* centers list block within section */
  list-style: disc inside;
  margin: 1rem 0 1.5rem 0;
  padding-left: 1rem;
}

.help-section li {
  margin-bottom: 0.5rem;
  line-height: var(--leading-relaxed);
}

/* ===============================
   Footer
   =============================== */
footer {
  width: 100%;
  padding: 2rem 1rem;
  background-color: var(--color-surface);
  text-align: center;
  color: var(--color-text-light);
  margin-top: auto;  /* pushes footer to bottom */
  box-sizing: border-box;
}

footer a {
  color: var(--color-primary);
  text-decoration: none;
  margin-left: 0.5rem;
}

footer a:hover {
  text-decoration: underline;
}

/* ===============================
   Responsive Design
   =============================== */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-links {
    flex-direction: column;
    gap: 1rem;
  }

  .tagline h1 {
    font-size: var(--text-3xl);
  }

  .section,
  .help-section {
    padding: 2rem 1rem;
  }

  .help-section h2 {
    font-size: var(--text-2xl);
  }
}

.navbar {
    display: flex;
    flex-direction: row; /* always row */
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* prevent wrapping */
    padding: 1rem 2rem;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    flex-wrap: nowrap;    /* never wrap links */
    overflow-x: auto;     /* scroll if needed */
}

.nav-links li {
    flex-shrink: 0;       /* prevent shrinking too much */
}

.nav-logo {
    height: 4rem;
    flex-shrink: 0;       /* logo stays visible */
}

/* Optional: adjust font/logo for smaller screens */
@media (max-width: 480px) {
    .nav-links li a {
        font-size: 0.85rem;
        white-space: nowrap;
    }
    .nav-logo {
        height: 3rem;
    }
}

/* ==============================
   Responsive navbar (always in a row)
   ============================== */
@media (max-width: 768px) {
    .navbar {
        flex-wrap: nowrap; /* prevent wrapping */
        padding: 0.75rem 1rem;
    }

    .nav-links {
        gap: 1rem;  
        flex-wrap: nowrap;  /* keep links in a row */
        overflow-x: auto;   /* allow horizontal scroll if too tight */
        -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    }

    .nav-links li a {
        font-size: 1rem; /* slightly smaller text */
        white-space: nowrap; /* prevent link text from breaking */
    }

    .nav-logo {
        height: 3.5rem; /* slightly smaller logo */
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .nav-links li a {
        font-size: 0.85rem;
        padding: 0.25rem 0.5rem;
    }

    .nav-logo {
        height: 3rem;
    }
}