/* HydroNeo global navigation additions (added 1 Oct 2026)
   Products dropdown (desktop) + Products group (mobile menu).
   Shared by index, farmos, iot-monitoring-automation, resources and research pages.
   Base nav styles still live in each page; this file only adds the dropdown. */
.nav-dd { position: relative; }
.nav-links .nav-dd-toggle {
 display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0;
 background: none; border: 0; cursor: pointer;
 color: var(--primary, #06377A); font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 500;
 transition: color 0.2s;
}
.nav-links .nav-dd-toggle:hover, .nav-dd.open .nav-dd-toggle { color: var(--secondary, #017a9e); }
.nav-links .nav-dd-toggle.active { color: var(--secondary, #017a9e); font-weight: 700; }
.nav-dd-toggle svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.nav-dd.open .nav-dd-toggle svg { transform: rotate(180deg); }
.nav-links .nav-dd-toggle:focus-visible, .nav-links a:focus-visible, .mobile-menu a:focus-visible, .mm-group-toggle:focus-visible {
 outline: 2px solid var(--secondary, #017a9e); outline-offset: 3px; border-radius: 4px;
}
.nav-dd-panel {
 position: absolute; top: calc(100% + 8px); left: 50%; width: max-content; max-width: min(400px, calc(100vw - 32px)); z-index: 1001; /* hugs its content */
 transform: translate(-50%, 6px); opacity: 0; visibility: hidden;
 background: var(--white, #fff); border: 1px solid var(--border, #d0dcea); border-radius: 12px;
 box-shadow: 0 12px 48px rgba(6,55,122,0.12); padding: 8px;
 transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.nav-dd.open .nav-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s; }
.nav-links .nav-dd-item { white-space: normal; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; transition: background 0.15s; }
.nav-links .nav-dd-item:hover, .nav-links .nav-dd-item:focus-visible { background: var(--off-white, #f7f9fc); }
.nav-dd-title { font-family: 'Poppins', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--primary, #06377A); line-height: 1.35; }
.nav-dd-desc { font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 400; color: var(--text-light, #62738a); line-height: 1.4; }
.nav-links .nav-dd-item:hover .nav-dd-title, .nav-links .nav-dd-item.active .nav-dd-title { color: var(--secondary, #017a9e); }

/* mobile menu: Products group */
.mobile-menu .mm-group-toggle {
 display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px;
 padding: 0.5rem 0; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,0.07); cursor: pointer;
 color: rgba(255,255,255,0.85); font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 500; text-align: left;
}
.mobile-menu .mm-group-toggle.active { color: var(--secondary-vivid, #01ADEF); font-weight: 700; }
.mm-group-toggle svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.mm-group-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu .mm-sub { display: flex; flex-direction: column; gap: 0.75rem; padding: 0 0 0 1rem; margin-top: -0.25rem; }
.mobile-menu .mm-sub[hidden] { display: none; }
.mobile-menu .mm-sub a { font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
 .nav-dd-panel, .nav-dd-toggle svg, .mm-group-toggle svg { transition: none; }
}

/* keep every top-level label on one line; tighten spacing just above the hamburger breakpoint */
nav .nav-links a, nav .nav-links .nav-dd-toggle { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 940px) {
 nav .nav-links { gap: 1rem; }
 nav .nav-links a, nav .nav-links .nav-dd-toggle { font-size: 0.8rem; }
 nav .nav-links .nav-cta { padding: 0.5rem 0.9rem; }
 nav .nav-logo img { height: 32px; }
}

/* 23 Oct 2026: the menu has two dropdowns now (Products, News & Blog), about 75px wider.
   Use the compact sizes up to 1020px, and tighten further just above the hamburger breakpoint. */
@media (min-width: 769px) and (max-width: 1020px) {
 #navbar .nav-links { gap: 1rem; }
 #navbar .nav-links a, #navbar .nav-links .nav-dd-toggle { font-size: 0.8rem; }
 #navbar .nav-links .nav-cta { padding: 0.5rem 0.9rem; }
 #navbar .nav-logo img { height: 32px; }
}
@media (min-width: 769px) and (max-width: 880px) {
 #navbar { padding-left: 3%; padding-right: 3%; }
 #navbar .nav-links { gap: 0.6rem; }
 #navbar .nav-links a, #navbar .nav-links .nav-dd-toggle { font-size: 0.76rem; }
 #navbar .nav-links .nav-cta { padding: 0.5rem 0.75rem; }
}

/* pages with a white mobile menu (resources.html): dark dropdown headings */
.mobile-menu--light .mm-group-toggle { color: var(--primary, #06377A); font-weight: 600; border-bottom-color: var(--border, #d0dcea); padding: 0.6rem 0; }
.mobile-menu--light .mm-group-toggle.active { color: var(--secondary, #017a9e); }