/* Base Layout */
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background-image: url('/static-images/background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #333;
}

/* background-attachment: fixed triggers repaints on scroll for mobile browsers
   and is unsupported on iOS (falls back to scroll anyway). Use scroll on small
   screens to avoid unnecessary composite layers and improve performance. */
@media (max-width: 768px) {
  body, body.dark-mode { background-attachment: scroll; }
}

.container {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}

.card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  backdrop-filter: blur(4px);
  position: relative;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 16px;
  background-color: #f3f4f6;
  border-radius: 20px;
  transition: background-color 0.2s;
}

.nav-link.active { background-color: #16a34a; color: white; }
.nav-link:hover { background-color: #e5e7eb; }
.nav-link.active:hover { background-color: #15803d; }

.btn-donate {
  display: block;
  background-color: #16a34a;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  transition: background-color 0.2s;
  margin-top: 15px;
}

@media (min-width: 600px) {
  .btn-donate {
    display: inline-block;
    margin-top: 0;
    position: absolute;
    top: 24px;
    right: 24px;
  }
}

.btn-donate:hover { background-color: #15803d; }

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* Lightbox Modal */
#modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Dark Mode */
body.dark-mode { color: #e0e0e0; background-image: url('/static-images/background-night.jpg'); }
body.dark-mode .card { background: rgba(30, 30, 30, 0.9); color: #e0e0e0; }
body.dark-mode .nav-link { background-color: #444; color: #e0e0e0; }
body.dark-mode .nav-link:hover { background-color: #555; }
body.dark-mode .nav-link.active { background-color: #16a34a; color: white; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { color: #fff; }
body.dark-mode p { color: #bbb !important; }
body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background-color: #333; color: #fff; border: 1px solid #555; }
body.dark-mode #media-container { background-color: #222; }

/* Circular Icon Button (Shared Style) */
.btn-icon-circle {
  background: none;
  border: 1px solid #16a34a;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-icon-circle:hover { background-color: #16a34a; color: white; border-color: #16a34a; }

body.dark-mode .btn-icon-circle { color: #4ade80; border-color: #4ade80; }
body.dark-mode .btn-icon-circle:hover { background-color: #4ade80; color: #1f2937; border-color: #4ade80; }