/* style.css - basic site styles and navbar/badge styles */

body { font-family: Arial, sans-serif; background:#ffffff; margin:0; padding:0; }
.container { width:95%; max-width:1100px; margin:18px auto; background:#fff; padding:16px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.05); }

/* Navbar */
.navbar { display:flex; justify-content:space-between; align-items:center; background:#0056D2; padding:10px 20px; color:#fff; }
.navbar a { color:#fff; margin:0 8px; text-decoration:none; position:relative; }
.navbar .logo { font-weight:700; color:#003EA6; font-size:18px; text-decoration:none; }

/* Search */
.nav-search input { padding:6px 8px; border-radius:4px 0 0 4px; border:1px solid #ddd; }
.nav-search button { padding:6px 10px; border:none; background:#003EA6; color:#fff; border-radius:0 4px 4px 0; cursor:pointer; }

/* Badge */
.badge { background:#ff4d4f; color:#fff; border-radius:999px; padding:2px 7px; font-size:12px; margin-left:6px; }

/* Posts */
.post { padding:12px 0; border-bottom:1px solid #eee; }
.post img, .post video { max-width:100%; height:auto; border-radius:8px; margin-top:8px; }
.post .meta { color:#666; font-size:13px; }

/* Forms */
input[type=text], input[type=email], input[type=password], textarea { width:100%; padding:8px; margin:6px 0 12px; border-radius:6px; border:1px solid #ddd; box-sizing:border-box; }
button.btn { background:#007bff; color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; }

/* Small screens */
@media (max-width:768px) {
  .navbar { flex-wrap:wrap; }
  .nav-search { order:3; width:100%; margin-top:10px; }
}


/* ======= Polished form styles for Register/Login ======= */
.form-card{background:#fff;border-radius:14px;padding:22px 22px 26px;border:1px solid #e5e7eb;box-shadow:0 6px 22px rgba(0,0,0,.06);}
.form-card h2{margin-top:0;margin-bottom:16px;font-size:26px}
.nice-form label{display:block;font-weight:600;margin:6px 0 6px;color:#374151}
.nice-form input, .nice-form select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #d1d5db;background:#fafafa}
.nice-form .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.nice-form .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.nice-form .actions{display:flex;gap:10px;align-items:center;margin-top:14px}
.nice-form .muted{color:#6b7280;font-size:13px}
.nice-form .btn-primary{background:#0056D2;color:#fff;border:none;padding:10px 16px;border-radius:10px;cursor:pointer}
.nice-form .btn-link{background:transparent;border:none;color:#111827;text-decoration:underline;cursor:pointer;padding:0}
.nice-form .alert{background:#fef3c7;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:10px 12px;margin:10px 0}
@media (max-width:768px){ .nice-form .grid-2, .nice-form .grid-3{grid-template-columns:1fr} }

.brand-name{margin-left:8px;font-weight:700;font-size:20px;color:#fff;letter-spacing:.5px}

/* =====================================
   Responsive Fixes - Added 2025
   ===================================== */

/* Make images scale */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive containers */
.container, .content, .wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.navbar ul {
  list-style: none;
  display: flex;
  gap: 15px;
}
.navbar-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

/* Tablet */
@media (max-width: 1024px) {
  body { font-size: 16px; }
  .navbar ul { gap: 10px; }
}

/* Mobile */
@media (max-width: 768px) {
  .navbar ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #333;
    padding: 10px;
  }
  .navbar ul.show {
    display: flex;
  }
  .navbar-toggle {
    display: block;
    color: #fff;
  }
  .content, .container {
    padding: 0 10px;
  }
}