/* Navbar with dropdowns. Loaded after style.css, so it overrides the old .nav-links rules.
   Colours come from :root in style.css. Desktop menu from 1024px, mobile menu below. */
.nav { gap: 16px; }
.nav-menu { display: none; align-items: center; gap: 2px; margin: 0 auto 0 28px; padding: 0; list-style: none; }
.nav-menu > li { position: relative; display: flex; align-items: center; }
.nav-menu a, .nav-menu .sub-toggle { font: inherit; font-size: 16px; font-weight: 600; color: rgba(15, 42, 45, 0.82); background: none; border: 0; cursor: pointer; transition: color .2s, background-color .2s; }
.nav-menu > li > a { padding: 10px 6px 10px 12px; border-radius: 8px; }
.nav-menu > li:not(.has-sub) > a { padding-right: 12px; }
.nav-menu .sub-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 10px 10px 10px 2px; border-radius: 8px; }
.nav-menu .sub-toggle.sub-label { padding: 10px 12px; }
.nav-menu a:hover, .nav-menu .sub-toggle:hover, .nav-menu .is-active > a, .nav-menu .is-active > .sub-toggle { color: var(--brand); }
.nav-menu .caret { transition: transform .2s; }
.nav-menu .has-sub.open .caret { transform: rotate(180deg); }

.sub-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 250px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 60, 66, 0.16); }
.sub-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 15px; white-space: nowrap; color: rgba(15, 42, 45, 0.85); }
.sub-menu a:hover, .sub-menu a[aria-current="page"] { background: var(--brand-light); color: var(--brand-dark); }
.has-sub.open > .sub-menu { display: block; }
@media (hover: hover) and (min-width: 1024px) { .has-sub:hover > .sub-menu { display: block; } .has-sub:hover .caret { transform: rotate(180deg); } .nav-menu.hover-off .has-sub:hover > .sub-menu { display: none; } }

/* Login and Inquire buttons */
.nav-login, .nav-inquire { display: none; align-items: center; gap: 8px; border-radius: 8px; padding: 9px 16px; font-size: 15px; font-weight: 700; border: 2px solid var(--brand); white-space: nowrap; transition: background-color .2s, color .2s; }
.nav-login { color: var(--brand); background: transparent; }
.nav-login:hover { background: var(--brand-light); }
.nav-inquire { color: #fff; background: var(--brand); }
.nav-inquire:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* Desktop */
@media (min-width: 1024px) {
  .nav-menu { display: flex; }
  .nav-right .nav-login, .nav-right .nav-inquire { display: inline-flex; }
  .menu-btn, .mobile-menu { display: none !important; }
}
/* The live AQI badge needs room, so it only shows on wide screens */
@media (max-width: 1279px) { .aqi-badge { display: none !important; } }
@media (min-width: 1024px) and (max-width: 1180px) { .nav-menu a, .nav-menu .sub-toggle { font-size: 15px; } .nav { gap: 8px; } .nav-menu > li > a { padding-left: 8px; } .nav-menu > li:not(.has-sub) > a { padding-right: 8px; } .nav-menu .sub-toggle.sub-label { padding: 10px 8px; } .nav-login, .nav-inquire { padding: 8px 12px; } .nav-menu { margin-left: 12px; } }

/* Tablet and phone: hamburger + accordion menu (overrides the old rule in style.css that hid it from 768px) */
@media (max-width: 1023px) {
  .menu-btn { display: inline-flex !important; }
  .mobile-menu:not([hidden]) { display: block !important; max-height: calc(100vh - 84px); overflow-y: auto; }
}
.mobile-menu > li { border-bottom: 1px solid rgba(0, 128, 136, 0.1); }
.mobile-menu summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-weight: 600; color: rgba(15, 42, 45, 0.85); cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.mobile-menu details[open] > summary::after { transform: rotate(-135deg); }
.mobile-menu details ul { padding: 0 0 8px 14px; margin: 0; list-style: none; }
.mobile-menu details ul a { padding: 9px 0; font-weight: 500; }
.mobile-menu .mobile-actions { display: flex; gap: 10px; padding: 14px 0 4px; border-bottom: 0; }
.mobile-menu .mobile-actions a { display: inline-flex; flex: 1; justify-content: center; padding: 11px 12px; }
.mobile-menu .mobile-actions .nav-login, .mobile-menu .mobile-actions .nav-inquire { display: inline-flex; }

@media (prefers-reduced-motion: reduce) { .nav-menu .caret, .mobile-menu summary::after { transition: none; } }

/* Mobile action buttons: beat the generic ".mobile-menu a" colour from style.css */
.mobile-menu .mobile-actions .nav-login { color: var(--brand); }
.mobile-menu .mobile-actions .nav-inquire { color: #fff; }