/* ============================================================
   SHARED HEADER NAVIGATION — nav.css
   Used by all content/marketing pages.
   Load via: <link rel="stylesheet" href="/nav.css">
   ============================================================ */

nav { display: flex; align-items: center; gap: 4px; }
nav a { font-size: 15px; font-weight: 700; color: #4a4a4a; text-decoration: none; padding: 8px 18px; border-radius: 8px; transition: background 0.15s, color 0.15s; }
nav a:hover { background: #f4fae8; color: #4a8c11; }
nav a.active { color: #4a8c11; background: #f4fae8; }
nav a.nav-cta-buy { background: #62b517; color: #fff; margin-left: 4px; box-shadow: 0 2px 6px rgba(98,181,23,0.3); }
nav a.nav-cta-buy:hover { background: #4a8c11; color: #fff; }

/* Primary dropdowns */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger { font-size: 15px; font-weight: 700; color: #4a4a4a; background: none; border: none; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-family: inherit; line-height: inherit; transition: background 0.15s, color 0.15s; }
.nav-dropdown-trigger.open { background: #f4fae8; color: #4a8c11; }
.nav-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border: 1.5px solid #dde8c8; border-radius: 10px; box-shadow: 0 8px 24px rgba(98,181,23,0.15); padding: 6px; min-width: 200px; display: none; flex-direction: column; gap: 2px; z-index: 200; }
.nav-dropdown-menu.open { display: flex; }
.nav-dropdown-menu a { display: block; padding: 8px 14px; border-radius: 7px; font-size: 14px; font-weight: 700; color: #4a4a4a; text-decoration: none; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active { background: #f4fae8; color: #4a8c11; }

/* Sub-dropdowns (fly-out) */
.nav-sub-dropdown { position: relative; }
.nav-sub-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 14px; border-radius: 7px; font-size: 14px; font-weight: 700; color: #4a4a4a; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.nav-sub-trigger:hover, .nav-sub-dropdown:hover .nav-sub-trigger { background: #f4fae8; color: #4a8c11; }
.nav-sub-menu { position: absolute; left: 100%; top: -6px; background: #fff; border: 1.5px solid #dde8c8; border-radius: 10px; box-shadow: 0 8px 24px rgba(98,181,23,0.15); padding: 6px; min-width: 200px; display: none; flex-direction: column; gap: 2px; z-index: 300; }
.nav-sub-dropdown:hover .nav-sub-menu { display: flex; }

/* Mobile */
@media (max-width: 600px) {
  nav { gap: 0; justify-content: center; flex-wrap: wrap; }
  nav a { padding: 6px 5px; font-size: 12px; }
  .nav-dropdown-trigger { padding: 6px 5px; font-size: 12px; }
}