/* ---- base ---- */
html { scroll-behavior: smooth; } /* Safe to keep; remove if your validator complains */
body { margin:0; font-family:Arial, sans-serif; color:#333; background:#7f8f74; }
.container { max-width:1100px; margin:0 auto; padding:0 16px; }

/* ---- header / nav ---- */
header { background:#6f8866; border-bottom:3px solid #2b2b2b; }
.nav {
  display:flex; align-items:center; justify-content:space-between; padding:14px 0;
}
.logo {
  background:#3aaa55; color:#fff; text-decoration:none;
  padding:12px 26px; border-radius:12px; border:3px solid #2b2b2b;
  font-size:28px; font-weight:600;
}
.nav-items { list-style:none; display:flex; margin:0; padding:0; }
/* fallback for gap: use sibling margin */
.nav-items > li { margin-left:22px; }
.nav-items > li:first-child { margin-left:0; }

.nav-item { position:relative; }
.nav-link {
  display:block; color:#fff; text-decoration:none; background:#3aaa55;
  padding:12px 26px; border-radius:12px; border:3px solid #2b2b2b;
  font-size:28px; font-weight:600;
}
.nav-link:focus { outline:3px solid #fff; outline-offset:2px; }

/* ---- dropdown ---- */
.dropdown {
  position:absolute; left:0; top:100%;
  min-width:220px; background:#fff; border:3px solid #2b2b2b; border-top:none;
  display:none; z-index:1000;
}
.dropdown li { list-style:none; }
.dropdown a {
  display:block; padding:10px 14px; color:#111; text-decoration:none;
  font-size:20px; border-top:1px solid #2b2b2b; background:#fff;
}
.dropdown a:hover { background:#e8f3e9; }

/* show dropdown on hover (removed :focus-within) */
.nav-item:hover .dropdown { display:block; }

/* ---- page content ---- */
.hero { background:#4CAF50; color:#fff; padding:14px 0; border-bottom:3px solid #2b2b2b; }
.section {
  background:#90a180; margin:18px 0; padding:28px 16px;
  border-top:3px solid #2b2b2b; border-bottom:3px solid #2b2b2b;
}
.intro {
  background:#dff3e5; padding:12px; border-radius:8px;
  /* fallback for width: min(800px, 96%) */
  max-width:800px; width:96%; margin:18px auto;
}
.figure { text-align:center; margin:20px 0; }
.figure img {
  max-width:300px; width:100%;
  border:4px solid #ccc; border-radius:10px; display:block; margin:0 auto;
}
.btn {
  display:inline-block; margin-top:14px; padding:10px 16px;
  background:#3aaa55; color:#fff; text-decoration:none; border-radius:8px;
}
.btn:hover { background:#2e8e47; }

footer { background:#2b2b2b; color:#fff; padding:18px 0; margin-top:24px; text-align:center; }

/* highlight current page */
.dropdown a.current, .nav-link.current { background:#e8f3e9; color:#000; }