/*
 * The ICR Core shell for icrealtime.com (layouts.core, #438 spike). ICR Core tokens only (tokens.css): every
 * colour, size, space and radius is a token, checked by CoreCssTokensTest. No Bootstrap, no jQuery.
 */
*, *::before, *::after { box-sizing: border-box; }
body.core { margin: 0; background: var(--icr-white); color: var(--icr-color-text); font: var(--icr-weight-regular) var(--icr-text-18)/1.6 var(--icr-font-body); -webkit-font-smoothing: antialiased; }
.core img { max-width: 100%; height: auto; }
.core a { color: var(--icr-color-link); }
.core a:hover { color: var(--icr-color-primary-hover); }
.core :focus-visible { outline: var(--icr-focus-outline); outline-offset: 2px; box-shadow: var(--icr-focus-shadow); }
.c-wrap { width: 100%; max-width: var(--icr-container); margin: 0 auto; padding: 0 var(--icr-space-6); }
.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c-skip { position: absolute; left: var(--icr-space-4); top: calc(-1 * var(--icr-space-16)); z-index: 100; padding: var(--icr-space-3) var(--icr-space-4); background: var(--icr-ink-900); color: var(--icr-white) !important; border-radius: var(--icr-radius-md); font-size: var(--icr-text-16); }
.c-skip:focus { top: var(--icr-space-4); }

/* Header, matching the home page's (inc.navbar, app.css #mid-header / #lower-header): a 44 px bar of search and
   the admin's top links, the two logos (140 × 50) centred, then the header menu in grey condensed capitals over a
   1 px rule. Phones: the menu button on the left, the logos centred, the menu behind the button. */
.c-top { position: relative; border-bottom: 1px solid var(--icr-ink-700); }
.c-utility .c-utility-in { max-width: none; display: flex; justify-content: flex-end; align-items: center; gap: var(--icr-space-5); height: var(--icr-control-height); padding: 0 var(--icr-space-3); }
.c-utility-links { display: flex; gap: var(--icr-space-5); margin: 0; padding: 0; list-style: none; }
.c-utility-links a { color: var(--icr-ink-700); font: 700 var(--icr-text-14) var(--icr-font-display); text-decoration: none; }
.c-utility-links a:hover { color: var(--icr-color-primary); }
.c-search { display: flex; }
.c-search input { width: 170px; height: 26px; padding: 0 var(--icr-space-2); font: var(--icr-text-14) var(--icr-font-display); color: var(--icr-color-text); background: var(--icr-white); border: 1px solid var(--icr-ink-400); border-right: 0; border-radius: var(--icr-radius-sm) 0 0 var(--icr-radius-sm); }
.c-search button { display: grid; place-items: center; width: 34px; height: 26px; color: var(--icr-ink-700); background: var(--icr-white); border: 1px solid var(--icr-ink-400); border-radius: 0 var(--icr-radius-sm) var(--icr-radius-sm) 0; cursor: pointer; }
.c-brand { display: flex; justify-content: center; align-items: center; height: 70px; }
.c-logo { display: flex; gap: var(--icr-space-1); }
.c-logo img { display: block; width: 140px; height: 50px; }
.c-nav { display: flex; justify-content: center; }
.c-nav-list { display: flex; margin: 0; padding: 0; list-style: none; }
.c-nav-list > li > a, .c-drop > summary { display: flex; align-items: center; height: 43px; padding: 0 var(--icr-space-6); color: var(--icr-ink-500); font: 600 var(--icr-text-14) var(--icr-font-display); text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; }
.c-nav-list > li > a:hover, .c-drop > summary:hover, .c-drop[open] > summary, .c-nav-list > li > a[aria-current="page"] { color: var(--icr-color-primary); border-bottom-color: var(--icr-ink-700); }
.c-drop { position: relative; }
.c-drop > summary { list-style: none; }
.c-drop > summary::-webkit-details-marker { display: none; }
.c-drop ul { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 240px; margin: 0; padding: var(--icr-space-2) 0; list-style: none; background: var(--icr-white); border: 1px solid var(--icr-line-subtle); border-radius: var(--icr-radius-sm); box-shadow: var(--icr-shadow-2); }
.c-drop ul a { display: block; padding: var(--icr-space-2) var(--icr-space-4); color: var(--icr-ink-700); font: var(--icr-text-16) var(--icr-font-body); text-decoration: none; }
.c-drop ul a:hover { color: var(--icr-color-primary); background: var(--icr-surface); }
.c-phone-menu { display: none; }
.c-nav-extra { display: none; }

/* Footer, matching the home page's (inc.footer, app.css #mid-footer / #lower-footer): white, the logo, social
   icons and the newsletter button centred in the left third, then the admin's link columns in grey condensed
   type; a thin black bar with the copyright. Phones: the brand block centred, then the columns two by two. */
.c-foot { margin-top: var(--icr-space-16); padding: var(--icr-space-10) 0 var(--icr-space-12); background: var(--icr-white); font-family: var(--icr-font-display); }
.c-foot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--icr-space-4); max-width: none; padding: 0 var(--icr-space-2); }
.c-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--icr-space-4); padding-top: var(--icr-space-2); }
.c-foot-brand { display: flex; flex-direction: column; align-items: center; gap: var(--icr-space-5); }
.c-foot-brand > img { display: block; width: 140px; height: 50px; }
.c-social { display: flex; gap: var(--icr-space-2); margin: 0; padding: 0; list-style: none; }
.c-social a { display: grid; place-items: center; width: 28px; height: 28px; }
.c-social img { display: block; width: 26px; height: 26px; opacity: .8; }
.c-social a:hover img { opacity: 1; }
.c-foot-col h2 { margin: 0 0 var(--icr-space-3); color: var(--icr-ink-700); font: var(--icr-weight-regular) var(--icr-text-16) var(--icr-font-display); text-transform: uppercase; }
.c-foot-col ul { margin: 0; padding: 0; list-style: none; }
.c-foot-col li { line-height: 1.6; }
.c-foot-col a { color: var(--icr-ink-400); font: var(--icr-text-14) var(--icr-font-display); text-decoration: none; }
.c-foot-col a:hover { color: var(--icr-color-primary); text-decoration: underline; }
.c-copy { margin: 0; padding: var(--icr-space-1) var(--icr-space-3); text-align: center; background: var(--icr-ink-900); color: var(--icr-white); font: 500 var(--icr-text-12) var(--icr-font-display); line-height: 20px; }
.c-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--icr-space-3); margin-top: var(--icr-space-6); background: var(--icr-color-primary); color: var(--icr-color-on-primary) !important; border-radius: var(--icr-radius-sm); font: var(--icr-text-14) var(--icr-font-display); text-transform: uppercase; text-decoration: none; }
.c-btn:hover { background: var(--icr-color-primary-hover); }

@media (max-width: 991px) {
  .c-foot-in { grid-template-columns: minmax(0, 1fr); gap: var(--icr-space-8); }
  .c-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--icr-space-6); padding: 0 var(--icr-space-3); }
}
@media (max-width: 767px) {
  .c-utility, .c-nav { display: none; }
  .c-top { border-bottom-color: var(--icr-line-subtle); }
  .c-wrap { padding: 0 var(--icr-space-4); }
  .c-brand { padding-left: var(--icr-space-10); padding-right: var(--icr-space-10); }
  .c-logo img { width: auto; max-width: 140px; height: auto; max-height: 50px; min-width: 0; flex: 1 1 0; object-fit: contain; }
  .c-phone-menu { display: block; position: absolute; top: 0; left: 0; }
  .c-phone-menu > summary { display: grid; place-items: center; width: var(--icr-control-height); height: 58px; color: var(--icr-ink-500); list-style: none; cursor: pointer; }
  .c-phone-menu > summary::-webkit-details-marker { display: none; }
  .c-phone-menu[open] > nav { position: fixed; inset: 70px 0 0; z-index: 40; overflow-y: auto; padding: var(--icr-space-4); background: var(--icr-white); border-top: 1px solid var(--icr-line-subtle); }
  .c-phone-menu .c-nav-list { flex-direction: column; }
  .c-phone-menu .c-nav-list > li { border-bottom: 1px solid var(--icr-line-subtle); }
  .c-phone-menu .c-nav-list > li > a, .c-phone-menu .c-drop > summary { height: auto; min-height: var(--icr-control-height); padding: 0 var(--icr-space-2); font-size: var(--icr-text-16); border-bottom: 0; }
  .c-phone-menu .c-drop ul { position: static; box-shadow: none; border: 0; padding: 0 0 var(--icr-space-2) var(--icr-space-4); }
  .c-nav-extra { display: block; }
}
@media (prefers-reduced-motion: reduce) { .core *, .core *::before, .core *::after { transition: none !important; animation: none !important; } }

/* The redesigned top nav (#496, features.home_v2): logo left, five menus at reading size, search and a
   Find a dealer button on one 72 px bar. Products and Series open one wide panel under the bar; Support
   and Dealers a short list. Phones: logo and Menu; the menus as a full-screen sheet. */
.c-hd { position: relative; z-index: 40; background: var(--icr-white); border-bottom: 1px solid var(--icr-line-subtle); }
.c-hd-in { display: flex; align-items: center; gap: var(--icr-space-6); max-width: var(--icr-container-wide); min-height: 72px; }
.c-hd-logo { display: flex; align-items: center; gap: var(--icr-space-2); flex: none; }
.c-hd-logo img { display: block; width: 126px; height: 45px; }
.c-hd-nav { flex: 1 1 auto; min-width: 0; }
.c-hd-menus { display: flex; align-items: stretch; gap: var(--icr-space-1); margin: 0; padding: 0; list-style: none; }
.c-hd-top { display: flex; align-items: center; gap: var(--icr-space-1); min-height: var(--icr-control-height); padding: 0 var(--icr-space-3); color: var(--icr-ink-900) !important; font: 700 var(--icr-text-16) var(--icr-font-display); text-decoration: none; border-radius: var(--icr-radius-sm); cursor: pointer; list-style: none; white-space: nowrap; }
.c-hd-top::-webkit-details-marker { display: none; }
.c-hd-top:hover, .c-hd-drop[open] > .c-hd-top { color: var(--icr-color-primary) !important; background: var(--icr-surface); }
.c-hd-top svg { transition: transform .15s; }
.c-hd-drop[open] > .c-hd-top svg { transform: rotate(180deg); }
.c-hd-menus > li { position: relative; }
.c-hd-menus > li:has(> .is-wide) { position: static; }
.c-hd-panel { position: absolute; top: 100%; left: 0; z-index: 41; min-width: 260px; padding: var(--icr-space-4) 0; background: var(--icr-white); border: 1px solid var(--icr-line-subtle); border-radius: 0 0 var(--icr-radius-md) var(--icr-radius-md); box-shadow: var(--icr-shadow-2); }
.is-wide > .c-hd-panel { left: 0; right: 0; border-radius: 0; border-width: 1px 0; }
.is-wide .c-hd-panel-in { display: flex; gap: var(--icr-space-10); max-width: var(--icr-container); margin: 0 auto; padding: var(--icr-space-4) var(--icr-space-6); }
.c-hd-col { min-width: 180px; }
.c-hd-col.is-tiles { flex: 1 1 auto; }
.c-hd-col-h { margin: 0 0 var(--icr-space-2); color: var(--icr-color-text-muted); font: 700 var(--icr-text-14) var(--icr-font-display); text-transform: uppercase; letter-spacing: .06em; }
.c-hd-col ul, .c-hd-list { margin: 0; padding: 0; list-style: none; }
.c-hd-col a, .c-hd-list a { display: flex; align-items: center; gap: var(--icr-space-3); min-height: var(--icr-control-height); padding: var(--icr-space-1) var(--icr-space-2); color: var(--icr-ink-900) !important; font: var(--icr-weight-regular) var(--icr-text-16) var(--icr-font-body); text-decoration: none; border-radius: var(--icr-radius-sm); }
.c-hd-list a { padding: 0 var(--icr-space-5); border-radius: 0; }
.c-hd-col a:hover, .c-hd-list a:hover { color: var(--icr-color-primary) !important; background: var(--icr-surface); }
.c-hd-col small { display: block; color: var(--icr-color-text-muted); font-size: var(--icr-text-14); }
.c-hd-col.is-tiles ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--icr-space-2) var(--icr-space-4); }
.c-hd-col.is-tiles img { flex: none; width: 96px; height: 60px; object-fit: cover; border-radius: var(--icr-radius-sm); background: var(--icr-surface); }
.c-hd-feature { display: grid; gap: var(--icr-space-1); align-content: start; width: 220px; padding: var(--icr-space-4); background: var(--icr-surface); color: var(--icr-ink-900) !important; border-radius: var(--icr-radius-md); text-decoration: none; }
.c-hd-feature img { width: 100%; height: auto; border-radius: var(--icr-radius-sm); background: var(--icr-white); }
.c-hd-feature b { font: 700 var(--icr-text-16)/1.25 var(--icr-font-display); }
.c-hd-feature span { color: var(--icr-color-text-muted); font-size: var(--icr-text-14); line-height: 1.4; }
.c-hd-feature:hover b { color: var(--icr-color-primary); }
.c-hd-panel-foot { max-width: var(--icr-container); margin: 0 auto; padding: var(--icr-space-2) var(--icr-space-6) 0; }
.c-hd-panel-foot a { font: 700 var(--icr-text-14) var(--icr-font-display); text-decoration: none; }
.c-hd-search { display: flex; flex: none; }
.c-hd-search input { width: 180px; height: 40px; padding: 0 var(--icr-space-3); font: var(--icr-text-16) var(--icr-font-body); color: var(--icr-color-text); background: var(--icr-white); border: 1px solid var(--icr-ink-400); border-right: 0; border-radius: var(--icr-radius-sm) 0 0 var(--icr-radius-sm); }
.c-hd-search button { display: grid; place-items: center; width: 44px; height: 40px; color: var(--icr-ink-700); background: var(--icr-white); border: 1px solid var(--icr-ink-400); border-radius: 0 var(--icr-radius-sm) var(--icr-radius-sm) 0; cursor: pointer; }
.c-hd-cta { display: inline-flex; align-items: center; flex: none; min-height: var(--icr-control-height); padding: 0 var(--icr-space-5); background: var(--icr-color-primary); color: var(--icr-color-on-primary) !important; font: 700 var(--icr-text-16) var(--icr-font-display); text-decoration: none; border-radius: var(--icr-radius-sm); }
.c-hd-cta:hover { background: var(--icr-color-primary-hover); }
.c-hd-phone { display: none; }
@media (max-width: 1199px) { .c-hd-20 { display: none; } .c-hd-search input { width: 120px; } }
@media (max-width: 1023px) {
  .c-hd-nav, .c-hd-in > .c-hd-search, .c-hd-in > .c-hd-cta { display: none; }
  .c-hd-in { justify-content: space-between; min-height: 64px; }
  .c-hd-phone { display: block; }
  .c-hd-phone > summary { display: grid; place-items: center; width: var(--icr-control-height); height: var(--icr-control-height); color: var(--icr-ink-900); list-style: none; cursor: pointer; }
  .c-hd-phone > summary::-webkit-details-marker { display: none; }
  .c-hd-sheet { position: fixed; inset: 64px 0 0; z-index: 45; overflow-y: auto; padding: var(--icr-space-4); background: var(--icr-white); border-top: 1px solid var(--icr-line-subtle); }
  .c-hd-search.is-sheet { margin-bottom: var(--icr-space-4); }
  .c-hd-search.is-sheet input { flex: 1 1 auto; width: auto; min-width: 0; }
  .c-hd-sheet-list { margin: 0; padding: 0; list-style: none; }
  .c-hd-sheet-list > li { border-bottom: 1px solid var(--icr-line-subtle); }
  .c-hd-sheet-list .c-hd-top { justify-content: space-between; min-height: 52px; font-size: var(--icr-text-18); }
  .c-hd-sheet-sub { margin: 0; padding: 0 0 var(--icr-space-3) var(--icr-space-3); list-style: none; }
  .c-hd-sheet-sub a { display: flex; align-items: center; min-height: var(--icr-control-height); color: var(--icr-ink-700) !important; text-decoration: none; }
  .c-hd-cta.is-sheet { justify-content: center; width: 100%; margin-top: var(--icr-space-5); }
}
