/* Shared navigation and link feedback for both products and brand pages. */
.site-nav { align-items: center; }
.nav-group { position: relative; }
.nav-group > summary { display: flex; align-items: center; gap: .65rem; list-style: none; cursor: pointer; color: var(--muted); font-size: .96rem; font-weight: 500; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::marker { content: ''; }
.nav-chevron { width: .35rem; height: .35rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-group[open] > summary .nav-chevron { transform: rotate(225deg) translate(-1px, -1px); }
.nav-group:is([open], .is-active) > summary { color: var(--ink); }
.site-nav .nav-submenu { position: absolute; top: calc(100% + 1.2rem); right: 0; left: auto; min-width: 190px; padding: .5rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 18px 45px #0006; }
.site-nav .nav-submenu a { display: block; padding: .75rem .85rem; white-space: nowrap; border-radius: 4px; }
.mobile-nav { max-height: calc(100dvh - 4.2rem); overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav .nav-group > summary { padding: .85rem .4rem; border-bottom: 1px solid var(--line-soft); }
.mobile-nav .nav-submenu { padding: .25rem 0 .5rem 1rem; border-left: 1px solid var(--line); margin-left: .4rem; }
.mobile-nav .nav-submenu a { display: block; padding: .65rem .6rem; margin: 0; border: 0; }
.no-js-nav .nav-group > summary { padding-block: .4rem; }
.no-js-nav .nav-submenu a { display: block; padding: .5rem; }
@media (min-width: 1000px) { .no-js-nav { display: none; } }
@media (min-width: 1000px) and (max-width: 1200px) { .nav-group > summary { font-size: .85rem; } }

/* Separate product identities; the brand shell stays neutral.
   Hover lightens the same hue instead of jumping to cyan or pink. */
:root {
  --audio-link: #78a9dc; --audio-link-active: #adc9e7;
  --intercom-link: #ad99cf; --intercom-link-active: #cec0e5;
}
body { --link-color: #bdc2ca; --link-active-color: #edf0f4; }
body.product-audio-transport { --link-color: var(--audio-link); --link-active-color: var(--audio-link-active); }
body.product-intercom { --link-color: var(--intercom-link); --link-active-color: var(--intercom-link-active); }
/* Product selectors on the homepage and About reflect their destination. */
.brand-page .site-header a[href="/audio-over-ip/"], .choice-transport {
  --link-color: var(--audio-link); --link-active-color: var(--audio-link-active);
}
.brand-page .site-header a[href="/intercom/"], .choice-intercom {
  --link-color: var(--intercom-link); --link-active-color: var(--intercom-link-active);
}
/* No focus rings, including fragment targets. Text links use color feedback
   without underlines or a rectangular background highlight. */
:focus, :focus-visible { outline: none !important; }
/* Consistent in default, hover, active and keyboard states, including prose. */
a, a *, summary, summary *, button, button * { text-decoration: none !important; }
main a[href]:where(:not(.btn, .choice-link, .header-anchor, .doc-toc a, .manual-mobile-toc a, :has(img, strong, h2, h3))),
.footer-col a[href], .home-footer a[href] {
  color: var(--link-color);
}
main :is(.transport-resource-grid, .ic-resource-links) a strong {
  color: var(--link-color);
}
body a[href]:not(.btn, .choice-link, .header-anchor):is(:hover, :focus-visible),
body .nav-group > summary:is(:hover, :focus-visible),
body summary:is(:hover, :focus-visible) {
  color: var(--link-active-color);
}
/* Heading permalinks and navigation are not inline calls to action. */
body a.header-anchor { color: inherit; }
body a.header-anchor:hover { color: #fff; }
body a.header-anchor:focus-visible { color: var(--accent-bright); }
body :is(.doc-toc, .manual-mobile-toc) a[href] { color: var(--muted); }
body .doc-toc a[href].is-active { color: var(--accent-bright); background: transparent; }
body :is(.doc-toc, .manual-mobile-toc) a[href]:is(:hover, :focus-visible) { color: var(--link-active-color); }
body button:not(.btn):focus-visible, body [tabindex="0"]:focus-visible {
  background-color: color-mix(in srgb, var(--accent-bright) 16%, var(--bg));
}
body .choice-link { color: #18212b; }
body .choice-link:is(:hover, :focus-visible) { color: #18212b; background: #fff; }
body :is(.btn, .choice-link):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) { filter: brightness(1.12); }
body :is(input, textarea, select):focus-visible { background-color: var(--bg-3); border-color: var(--accent-bright); }
body main :is(.transport-resource-grid, .ic-resource-links) a[href]:is(:hover, :focus-visible) { text-decoration: none; }
body :is(.transport-resource-grid, .ic-resource-links) a:is(:hover, :focus-visible) strong { color: var(--link-active-color); }
body :is(.transport-resource-grid, .ic-resource-links) a:is(:hover, :focus-visible) .resource-action { color: var(--link-active-color); }
.transport-resource-grid .resource-action { display: inline-block; margin-top: 1rem; color: var(--link-color); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  a[href], summary, .btn, a strong { transition: color .18s ease, background-color .18s ease, filter .18s ease, transform .18s ease; }
  body :is(.btn, .choice-link):not(:disabled):not([aria-disabled="true"]):focus-visible { transform: translateY(-2px); }
  .resource-action { transition: translate .18s ease; }
  a:is(:hover, :focus-visible) .resource-action { translate: 3px 0; }
}