/* ─────────────────────────────────────────────────────────────
   NatureForum – Custom stylesheet
   Loads after Bootstrap 5 so all rules here safely override it.
   ───────────────────────────────────────────────────────────── */

/* ── Colour tokens ─────────────────────────────────────────── */
:root {
  --nf-green-dark:  #1a5c2a;
  --nf-green:       #28a745;
  --nf-green-light: #d4edda;
  --nf-hero-from:   #0d3b1e;
  --nf-hero-to:     #1e7e34;
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: #f8f9fa;
}

/* ── Hero / under-construction banner ─────────────────────── */
.hero-section {
  background: linear-gradient(135deg, var(--nf-hero-from) 0%, var(--nf-hero-to) 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='35' fill='none' stroke='rgba(255,255,255,.04)' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ── Countdown ─────────────────────────────────────────────── */
#countdown span {
  display: inline-block;
  min-width: 3rem;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  transition: transform .2s ease, box-shadow .2s ease;
  border-radius: .75rem !important;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .1) !important;
}

/* ── Navbar active link underline ──────────────────────────── */
.navbar-nav .nav-link.active {
  font-weight: 600;
  border-bottom: 2px solid rgba(255, 255, 255, .7);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-success {
  background-color: var(--nf-green);
  border-color: var(--nf-green);
}

.btn-success:hover {
  background-color: var(--nf-green-dark);
  border-color: var(--nf-green-dark);
}

/* ── Form focus ────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--nf-green);
  box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .25);
}

/* ── Thank-you icon pulse ──────────────────────────────────── */
.bi-check-circle-fill {
  animation: pop-in .5s cubic-bezier(.175, .885, .32, 1.275) both;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
  border-top: 3px solid var(--nf-green-dark);
}

/* ── About page hero icon ──────────────────────────────────── */
.nf-about-tree-icon {
  font-size: 10rem;
  opacity: .15;
}