/*
 * Products mega menu (partials/header-content.hbs, helpers/hdv-products-menu.js).
 * Same layout as the "Platform" menu of hdvisionsystems.com: app groups with icons, LumiScan Keryx and
 * LumiScan X as cards beside them, a footer row. A light, full-width panel under the navbar from 1100 px
 * (opens on hover and keyboard focus, Esc closes it), a dark list inside the burger menu below that
 * (opened by the touch toggle in head-meta.hbs). The breakpoint matches css/header.css.
 */

.hdv-mega {
  --mega-ink: #262b27;
  --mega-muted: #677064;
  --mega-rule: #d8ddd4;
  --mega-gold: #c8b32f;
  --mega-gold-text: #716500;   /* gold dark enough for small text on the light panel */
  white-space: normal;
}
.hdv-mega ul { list-style: none; margin: 0; padding: 0; }
.hdv-mega a { text-decoration: none; }

.hdv-mega-inner { max-width: 1440px; margin: 0 auto; padding: 1.75rem 2.5rem 1.25rem; }

.hdv-mega-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.5rem; }
.hdv-mega-eyebrow { display: block; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; line-height: 1.6; color: var(--mega-gold-text); }
.hdv-mega-heading p { margin: .35rem 0 0; font-size: 1.45rem; letter-spacing: -.02em; line-height: 1.25; }
.hdv-mega-all { display: flex; align-items: center; gap: 2rem; flex-shrink: 0; white-space: nowrap; font-size: .85rem; padding: .6rem 0; border-bottom: 1px solid #b4aa67; }

.hdv-mega-layout { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 2.25rem; }
.hdv-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
.hdv-mega-group { min-width: 0; border-top: 1px solid var(--mega-rule); padding-top: 1.25rem; }
.hdv-mega-group-head { display: flex; gap: .9rem; align-items: flex-start; }
.hdv-mega-group-head img { flex: none; display: block; width: 52px; height: 52px; border-radius: 8px; }
.hdv-mega-group-head strong { display: block; font-size: .98rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.hdv-mega-desc { display: block; margin-top: .35rem; font-size: .8rem; line-height: 1.55; color: var(--mega-muted); }
.hdv-mega .hdv-mega-apps { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin: .9rem 0 0 calc(52px + .9rem); }
.hdv-mega-apps a { display: inline-flex; align-items: center; gap: .5rem; padding: .1rem 0; font-size: .88rem; line-height: 1.5; }
.hdv-mega-apps a span { color: #8d9489; transition: transform .2s; }
.hdv-mega-apps a:hover span, .hdv-mega-apps a:focus-visible span { transform: translateX(3px); }

.hdv-mega-side { display: flex; flex-direction: column; gap: .75rem; align-self: start; min-width: 0; }
.hdv-mega-card-eyebrow { display: block; font-size: .58rem; letter-spacing: .15em; line-height: 1.6; text-transform: uppercase; }
.hdv-mega-card-title { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: .45rem; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.25; }
.hdv-mega-card-title span { font-size: 1rem; }
.hdv-mega-card-text { display: block; margin-top: .5rem; font-size: .8rem; line-height: 1.6; }

.hdv-mega .hdv-mega-keryx { display: flex; flex-direction: column; align-items: flex-start; padding: 1rem 1rem 1.15rem; background: #151a1b; color: #f1f2ee; border-left: 3px solid var(--mega-gold); }
.hdv-mega .hdv-mega-keryx:hover { background: #1c2325; }
.hdv-mega-keryx .hdv-mega-card-eyebrow { color: #d8c42a; }
.hdv-mega-keryx .hdv-mega-card-title span { color: var(--mega-gold); }
.hdv-mega-keryx .hdv-mega-card-text { color: #b4bcb5; }

.hdv-mega .hdv-mega-sensor { display: flex; flex-direction: column; align-items: flex-start; padding: .95rem .95rem 1.3rem; background: #ededed; overflow: hidden; }
.hdv-mega-sensor-art { display: block; width: 100%; aspect-ratio: 1.5; margin-bottom: 1.25rem; overflow: hidden; background: radial-gradient(circle at 50% 42%, #fafaf8 0, #dcdcd7 75%); }
.hdv-mega-sensor-art svg { display: block; width: 100%; height: 100%; transition: transform .45s; }
.hdv-mega-sensor:hover .hdv-mega-sensor-art svg { transform: scale(1.05); }
.hdv-mega-sensor .hdv-mega-card-eyebrow { color: var(--mega-gold-text); }
.hdv-mega-sensor .hdv-mega-card-title { font-size: 1.6rem; }
.hdv-mega-sensor .hdv-mega-card-title span { color: #827600; }
.hdv-mega-sensor .hdv-mega-card-text { color: #5f685d; }

.hdv-mega-footer { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--mega-rule); font-size: .82rem; line-height: 1.6; color: #63705f; }
.hdv-mega .hdv-mega-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; }
.hdv-mega-more-label { margin-right: .25rem; }
.hdv-mega-start { display: flex; gap: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .hdv-mega-apps a span, .hdv-mega-sensor-art svg { transition: none; }
}

/* ---- Desktop: light full-width panel under the navbar ---- */
@media (min-width: 1100px) {
  /* the panel spans the fixed navbar, not the Products item */
  .navbar-item.has-dropdown.hdv-products { position: static; }
  .navbar .hdv-products > .navbar-dropdown.hdv-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-height: calc(100vh - var(--navbar-height, 63px));
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0;
    background: #f9faf7;
    color: var(--mega-ink);
    border: 0;
    border-top: 2px solid var(--mega-gold);   /* continues the navbar's gold rule */
    border-bottom: 1px solid #d9ddd4;
    border-radius: 0;
    box-shadow: 0 24px 45px rgba(0, 0, 0, .14);
    scrollbar-color: #c8b32f #ecece6;
    z-index: 20;
  }
  .navbar .hdv-products:hover > .navbar-dropdown.hdv-mega,
  .navbar .hdv-products:focus-within > .navbar-dropdown.hdv-mega { display: block; }
  .navbar .hdv-products.is-closed > .navbar-dropdown.hdv-mega { display: none; }   /* Esc */
  .navbar .hdv-products:hover > .navbar-link,
  .navbar .hdv-products:focus-within > .navbar-link { color: var(--hdv-gold, #c8b32f); }

  .hdv-mega a { color: var(--mega-ink); }
  .hdv-mega a.hdv-mega-keryx { color: #f1f2ee; }
  .hdv-mega-apps a:hover { color: var(--mega-gold-text); text-decoration: underline; text-underline-offset: 3px; }
  .hdv-mega-more a:hover { color: var(--mega-gold-text); text-decoration: underline; text-underline-offset: 3px; }
  .hdv-mega .hdv-mega-all:hover, .hdv-mega a.hdv-mega-start:hover { color: #534b00; }
  .hdv-mega a.hdv-mega-start { color: var(--mega-gold-text); }
  .hdv-mega :focus-visible { outline: 2px solid #827600; outline-offset: 4px; }
}

/* narrow desktop */
@media (min-width: 1100px) and (max-width: 1300px) {
  .hdv-mega-inner { padding-inline: 1.75rem; }
  .hdv-mega-layout { grid-template-columns: minmax(0, 1fr) 225px; gap: 1.5rem; }
  .hdv-mega-grid { gap: 1.5rem 1.25rem; }
  .hdv-mega-group-head { gap: .65rem; }
  .hdv-mega-group-head img { width: 42px; height: 42px; }
  .hdv-mega .hdv-mega-apps { margin-left: calc(42px + .65rem); }
}

/* ---- Phones and tablets: dark list inside the burger menu ---- */
@media (max-width: 1099px) {
  .navbar-menu.is-active .navbar-item.has-dropdown.hdv-products.is-active > .navbar-dropdown.hdv-mega {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .hdv-mega {
    --mega-ink: #f5f5f5;
    --mega-muted: #a9aea6;
    --mega-rule: #454545;
    --mega-gold-text: #c8b32f;
  }
  .hdv-mega a { color: #f5f5f5; }
  .hdv-mega-inner { padding: .5rem 1rem 1rem; }
  .hdv-mega-heading { display: block; margin-bottom: 1rem; }
  .hdv-mega-heading p { font-size: 1.05rem; color: #f5f5f5; }
  .hdv-mega-all { width: fit-content; margin-top: .4rem; gap: 1rem; border-bottom-color: #6b6430; }
  .hdv-mega-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .hdv-mega-grid { grid-template-columns: 1fr; gap: 1rem; }
  .hdv-mega-group { padding-top: .9rem; }
  .hdv-mega-group-head strong { color: #f5f5f5; }
  .hdv-mega-group-head img { width: 40px; height: 40px; }
  .hdv-mega .hdv-mega-apps { margin-left: calc(40px + .9rem); gap: 0; }
  .hdv-mega-apps a { min-height: 2.25rem; font-size: .95rem; }
  .hdv-mega .hdv-mega-sensor { display: grid; grid-template-columns: 84px 1fr; column-gap: .9rem; align-items: start; background: #333; }
  .hdv-mega-sensor-art { grid-row: 1 / 4; aspect-ratio: 1; margin: 0; }
  .hdv-mega-sensor .hdv-mega-card-title { margin-top: .15rem; font-size: 1.25rem; }
  .hdv-mega-sensor .hdv-mega-card-title span, .hdv-mega-sensor .hdv-mega-card-eyebrow { color: #c8b32f; }
  .hdv-mega-sensor .hdv-mega-card-text { color: #bdbdb8; }
  .hdv-mega-footer { flex-direction: column; gap: .5rem; color: #a9aea6; }
  .hdv-mega a.hdv-mega-start { color: #c8b32f; }
}

/* tablets: two columns, the two cards side by side */
@media (min-width: 600px) and (max-width: 1099px) {
  .hdv-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
  .hdv-mega-side { flex-direction: row; align-items: stretch; }
  .hdv-mega-side > a { flex: 1 1 0; min-width: 0; }
}