/* Base */
html { scroll-behavior:smooth; }
body { margin:0; font-family:Arial, sans-serif; color:#333; background:#7f8f74; }
.container { max-width:1100px; margin:0 auto; padding:0 16px; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Header */
header { background:#6f8866; border-bottom:3px solid #2b2b2b; position:relative; z-index:9999; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }

/* Home button style (source of truth for green boxes) */
.logo,
.menu-toggle,
.nav-btn {
  -webkit-appearance:none; appearance:none;
  background:#3aaa55; color:#fff; text-decoration:none;
  border:3px solid #2b2b2b; border-radius:12px;
  padding:12px 26px; font-size:28px; font-weight:600; cursor:pointer;
}

/* Menu button size tweak */
.menu-toggle { font-size:22px; padding:12px 20px; }

/* Nav layout */
.nav-items { list-style:none; display:none; margin:0; padding:0; gap:12px; }
.nav-items.show { display:flex; }
.nav-item { position:relative; }

/* Dropdowns (desktop-like pop; green items) */
.dropdown {
  position:absolute; top:100%; left:0;
  display:none; padding:8px; margin-top:6px;
  background:transparent; border:0; z-index:1000;
}
.nav-item.open > .dropdown { display:block; }

.dropdown li { list-style:none; margin:0; padding:0; }
.dropdown a {
  display:block; margin:6px 0; padding:10px 14px;
  text-decoration:none; color:#fff;
  background:#3aaa55; border:2px solid #2b2b2b; border-radius:10px;
  font-size:18px;
}
.dropdown a:hover { background:#2e8e47; }

/* Page content (unchanged) */
.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; 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; }

/* Responsive */
@media (max-width:768px){
  .nav { flex-wrap:wrap; gap:10px; }
  .nav-items { flex-direction:column; width:100%; }
  .nav-item { width:100%; }
  .nav-btn { width:100%; text-align:left; font-size:22px; padding:12px 20px; }
  .dropdown { position:static; display:none; padding:8px; margin:0; background:#3aaa55; border-radius:0 0 12px 12px; }
  .nav-item.open > .dropdown { display:block; }
  .dropdown a { background:#5fbf75; }
}

/* Focus ring for accessibility */
.menu-toggle:focus-visible, .nav-btn:focus-visible, .logo:focus-visible {
  outline:3px solid #fff; outline-offset:2px;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }