/* The IC Realtime top menu (resources/views/inc/global-nav.blade.php, App\Site\GlobalNav): the same menus on
   every IC Realtime site, above that site's own row. ICR Core tokens only (HelpCssTokensTest). */

.g-nav { position: relative; z-index: 50; background: var(--icr-white); border-bottom: 1px solid var(--icr-line-subtle); font-family: var(--icr-font-body); }
.g-bar { display: flex; align-items: center; gap: var(--icr-space-2); max-width: var(--icr-container); min-height: var(--icr-space-16); margin: 0 auto; padding: 0 var(--icr-space-6); }
.g-logo { display: inline-flex; align-items: center; min-height: var(--icr-control-height); margin-right: var(--icr-space-6); }
.g-logo img { display: block; height: var(--icr-space-8); width: auto; }
/* The logo on dark grounds (#512): the guide's white-wordmark version where a page is dark. */
:is(.g-logo, .hs-logo) .is-on-dark, html[data-theme="dark"] :is(.g-logo, .hs-logo) .is-on-light { display: none; }
html[data-theme="dark"] :is(.g-logo, .hs-logo) .is-on-dark { display: block; }
.g-menus { display: flex; align-items: center; gap: var(--icr-space-1); flex: 1; margin: 0; padding: 0; list-style: none; }
.g-menus > li:last-child { margin-left: auto; } /* the store, at the right */
.g-top { display: inline-flex; align-items: center; gap: var(--icr-space-1); min-height: var(--icr-control-height); padding: 0 var(--icr-space-3); border-radius: var(--icr-radius-md); color: var(--icr-ink-900) !important; font: 500 var(--icr-text-16) var(--icr-font-body); text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.g-top::-webkit-details-marker { display: none; }
.g-top:hover, .g-drop[open] > .g-top { background: var(--icr-surface); text-decoration: none !important; }
.g-top[data-current] { box-shadow: inset 0 -2px 0 var(--icr-red-600); }
.g-drop[open] > .g-top svg { transform: rotate(180deg); }
.g-top:focus-visible, .g-nav a:focus-visible { outline: var(--icr-focus-outline); box-shadow: var(--icr-focus-shadow); }

/* Panels: full width under the bar, one open at a time. */
.g-panel { position: absolute; left: 0; right: 0; top: 100%; padding: var(--icr-space-6) 0 var(--icr-space-5); background: var(--icr-white); border-top: 1px solid var(--icr-line-subtle); box-shadow: var(--icr-shadow-2); }
.g-panel.is-list { left: auto; right: auto; min-width: 240px; padding: var(--icr-space-2); border-radius: 0 0 var(--icr-radius-md) var(--icr-radius-md); }
.g-menus > li { position: relative; }
.g-menus > li:has(> .g-drop .g-panel:not(.is-list)) { position: static; }
.g-panel-in { display: flex; gap: var(--icr-space-10); max-width: var(--icr-container); margin: 0 auto; padding: 0 var(--icr-space-6); }
.g-more { max-width: var(--icr-container); margin: var(--icr-space-4) auto 0; padding: 0 var(--icr-space-6); font-size: var(--icr-text-14); }
.g-panel.is-list .g-more { padding: 0 var(--icr-space-2); }
.g-more a { color: var(--icr-red-600) !important; font-weight: var(--icr-weight-bold); }
.g-group { flex: 1 1 0; min-width: 0; }
.g-group-h { margin: 0 0 var(--icr-space-2); padding: 0 var(--icr-space-2); color: var(--icr-ink-500); font: var(--icr-weight-bold) var(--icr-text-14) var(--icr-font-display); text-transform: uppercase; letter-spacing: .06em; }
.g-group ul, .g-list { margin: 0; padding: 0; list-style: none; }

/* An item: its name leads to this site's place for it; the other places sit beside it. */
.g-item { display: flex; align-items: center; gap: var(--icr-space-2); border-radius: var(--icr-radius-md); }
.g-item:hover { background: var(--icr-surface); }
.g-item-main { display: flex; flex: 1; align-items: center; gap: var(--icr-space-3); min-width: 0; min-height: var(--icr-control-height); padding: var(--icr-space-1) var(--icr-space-2); color: var(--icr-ink-900) !important; text-decoration: none !important; }
.g-item-main img { flex: none; width: 64px; height: 40px; object-fit: cover; border-radius: var(--icr-radius-sm); background: var(--icr-white); }
.g-item-txt { min-width: 0; }
.g-item-txt b { display: block; font-size: var(--icr-text-16); font-weight: 500; }
.g-item-main:hover b { color: var(--icr-red-600); }
.g-item-txt small { display: block; overflow: hidden; color: var(--icr-ink-500); font-size: var(--icr-text-14); text-overflow: ellipsis; white-space: nowrap; }
.g-where { display: flex; flex: none; gap: var(--icr-space-1); padding-right: var(--icr-space-2); }
.g-where a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--icr-space-3); border-radius: var(--icr-radius-pill); background: var(--icr-surface); color: var(--icr-ink-700) !important; font-size: var(--icr-text-14); font-weight: 500; text-decoration: none !important; }
.g-where a:hover { background: var(--icr-ink-900); color: var(--icr-white) !important; }

/* Series: picture tiles. */
.g-group.is-tiles ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: var(--icr-space-3); }
.g-group.is-tiles .g-item { flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; border: 1px solid var(--icr-line-subtle); border-radius: var(--icr-radius-lg); }
.g-group.is-tiles .g-item-main { flex-direction: column; align-items: stretch; gap: var(--icr-space-2); padding: 0 0 var(--icr-space-1); }
.g-group.is-tiles .g-item-main img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
.g-group.is-tiles .g-item-txt { padding: 0 var(--icr-space-3); }
.g-group.is-tiles .g-item-txt small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-group.is-tiles .g-where { padding: 0 var(--icr-space-3) var(--icr-space-3); }

/* Products (#570): four columns, every level showing. A group's heading is a link; its types (#573) sit under it. */
.g-panel-in.is-tree { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--icr-space-8); }
.g-col { display: grid; align-content: start; gap: var(--icr-space-6); min-width: 0; }
.g-tree-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--icr-space-2); margin: 0 0 var(--icr-space-1); padding: 0 var(--icr-space-2); }
.g-tree-h { margin: 0; font: var(--icr-weight-bold) var(--icr-text-18) var(--icr-font-display); }
.g-tree-h a { color: var(--icr-ink-900) !important; text-decoration: none !important; }
.g-tree-h a:hover { color: var(--icr-red-600) !important; }
.g-tree-head .g-where { padding: 0; }
.g-leaves a { display: flex; align-items: center; gap: var(--icr-space-1); min-height: 36px; padding: 0 var(--icr-space-2); border-radius: var(--icr-radius-md); color: var(--icr-ink-700) !important; font-size: var(--icr-text-16); text-decoration: none !important; }
.g-leaves a:hover { background: var(--icr-surface); color: var(--icr-red-600) !important; }
.g-leaves .is-more a { color: var(--icr-red-600) !important; font-size: var(--icr-text-14); font-weight: var(--icr-weight-bold); }

/* Short lists: Support, Dealers. */
.g-list a { display: flex; align-items: center; min-height: var(--icr-control-height); padding: 0 var(--icr-space-3); border-radius: var(--icr-radius-md); color: var(--icr-ink-900) !important; font-size: var(--icr-text-16); text-decoration: none !important; white-space: nowrap; }
.g-list a:hover { background: var(--icr-surface); }

/* Phones and narrow windows: the menus fold into one button. */
.g-phone { display: none; margin-left: auto; }
.g-phone > summary { display: grid; place-items: center; width: var(--icr-control-height); height: var(--icr-control-height); cursor: pointer; list-style: none; }
.g-phone > summary::-webkit-details-marker { display: none; }
.g-sheet { position: fixed; inset: var(--icr-space-16) 0 0; z-index: 60; overflow-y: auto; padding: var(--icr-space-4); background: var(--icr-white); border-top: 1px solid var(--icr-line-subtle); }
.g-sheet-top { display: flex; align-items: center; min-height: 52px; color: var(--icr-ink-900) !important; font: var(--icr-weight-bold) var(--icr-text-18) var(--icr-font-display); text-decoration: none; border-bottom: 1px solid var(--icr-line-subtle); cursor: pointer; list-style: none; }
.g-sheet-top::-webkit-details-marker { display: none; }
.g-sheet-sec ul { margin: 0; padding: var(--icr-space-2) 0; list-style: none; }
.g-sheet-sec a { display: flex; align-items: center; min-height: var(--icr-control-height); padding: 0 var(--icr-space-3); color: var(--icr-ink-700) !important; font-size: var(--icr-text-16); text-decoration: none; }
.g-sheet-sec .g-sheet-h a { color: var(--icr-ink-900) !important; font-weight: var(--icr-weight-bold); }
.g-sheet-sec .g-sheet-leaf a { padding-left: var(--icr-space-6); }

@media (max-width: 1179px) {
  .g-menus { display: none; }
  .g-phone { display: block; }
}
@media (max-width: 599px) {
  .g-bar { padding: 0 var(--icr-space-4); }
}
@media (prefers-reduced-motion: reduce) { .g-drop > .g-top svg { transition: none; } }

/* The site's own row under the menu: in the help center, "Support" leads it and the logo is in the menu above. */
.has-global .h-hd-bar { min-height: var(--icr-space-12); }
.has-global .hs-name { padding-left: 0; border-left: 0; }
/* With the menu above, the help center's own row is short (Support, Firmware, Downloads, Warranty & returns,
   Contact support), so it stays open down to tablet width instead of folding at 1180 px. */
@media (min-width: 768px) and (max-width: 1179px) {
  .has-global .h-hd-nav { display: block; }
  .has-global .h-hd-phone { display: none; }
  .has-global .h-hd-bar > .h-hd-contact { display: inline-flex; margin-left: auto; }
}
.has-global .h-hd-sheet { inset: calc(var(--icr-space-16) + var(--icr-space-12)) 0 0; } /* under both rows */
/* Pages with the topic tree use the wide container; the menu lines up with the row under it. */
.has-side .g-bar, .has-side .g-panel-in, .has-side .g-more { max-width: var(--icr-container-wide); }