/* ===== Consolidated styles.css for FRA WebGIS ===== */

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base */
html, body {
  height: 100%;
  font-family: 'Poppins', sans-serif;
  color: #333;
  background: #f5f5f5;
}

/* HEADER */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center; /* Logo centered */
  align-items: center;
  padding: 20px 50px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  z-index: 1000;
}

/* LOGO / TITLE */
.logo {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2E8B57;
  text-align: center;
}

/* MENU ICON (Top-Left) */
.menu-icon-left {
  position: absolute;
  left: 20px;
  font-size: 2rem;
  cursor: pointer;
  color: #2E8B57;
  z-index: 1100;
}
.menu-icon-left:hover { color: #246b44; }

/* SIDE MENU */
.side-menu {
  position: fixed;
  top: 0;
  left: -260px;
  width: 260px;
  height: 100%;
  background: #2E8B57;
  color: white;
  padding-top: 70px;
  transition: left 0.28s ease;
  z-index: 1200;
}
.side-menu.active { left: 0; }

.side-menu .close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  text-decoration: none;
  color: #fff;
}
.side-menu ul { list-style: none; padding: 0 8px; }
.side-menu ul li {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.side-menu ul li a {
  color: #fff; text-decoration: none; font-size: 1.05rem;
  display: block; padding: 6px 8px; border-radius: 6px;
}
.side-menu ul li a:hover { background: rgba(0,0,0,0.12); }

/* HERO */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  text-align: center;
  background: linear-gradient(135deg, #fff 0%, #f2f6f2 100%);
  margin-top: 72px; /* give space for fixed header */
}
.hero-content h1 {
  font-size: 3rem; color: #2E8B57; margin-bottom: 8px;
}
.hero-content p { font-size: 1.15rem; color: #555; margin-bottom: 18px; }
.cta-button {
  display:inline-block; padding: 10px 20px; border-radius: 6px;
  background: #2E8B57; color: #fff; text-decoration:none; font-weight:600;
}
.cta-button:hover { background:#246b44; }

/* ABOUT */
.about { padding: 60px 20px; text-align:center; background: #fafafa; }
.about h2 { font-size: 2rem; color:#2E8B57; margin-bottom:12px; }
.about p { max-width:700px; margin:0 auto; color:#555; line-height:1.6; }

/* FOOTER */
.footer { text-align:center; padding:18px; background:#2E8B57; color:#fff; margin-top:30px; }

/* ===== AUTH PAGES (login / signup) ===== */
.auth-body {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; background: linear-gradient(135deg,#f5f5f5,#eaeaea);
  padding: 20px;
}
.auth-container {
  width:100%; max-width:420px; background:#fff; padding:28px;
  border-radius:10px; box-shadow:0 6px 20px rgba(40,40,40,0.08);
  text-align:left;
}
.auth-title { text-align:center; font-size:1.75rem; color:#2E8B57; margin-bottom:16px; }
.auth-form .form-group { margin-bottom:14px; }
.auth-form label { display:block; font-weight:600; margin-bottom:6px; color:#333; }
.auth-form input, .auth-form select {
  width:100%; padding:10px 12px; border:1px solid #d0d0d0; border-radius:6px;
  font-size:1rem; outline:none; transition:border-color .18s ease, box-shadow .18s ease;
  background:#fff;
}
.auth-form input:focus, .auth-form select:focus {
  border-color: #2E8B57; box-shadow: 0 2px 8px rgba(46,139,87,0.08);
}
.auth-btn {
  width:100%; padding:12px; border-radius:8px; background:#2E8B57; color:#fff; border:0;
  font-weight:600; cursor:pointer; margin-top:6px;
}
.auth-btn:hover { background:#246b44; }

.auth-switch { text-align:center; margin-top:14px; font-size:0.95rem; color:#555; }
.auth-switch a { color:#2E8B57; text-decoration:none; font-weight:600; }
.auth-switch a:hover { text-decoration:underline; }

/* small screens */
@media (max-width:520px) {
  .hero-content h1 { font-size:2rem; }
  .header { padding: 12px 18px; }
  .menu-icon-left { left: 12px; }
}