/* =========================================================
   Fountain IT — Products mega-menu
   Content is rendered into .nav-mega-panel by js/mega-menu.js
   from js/products-data.js. This file overrides the base panel
   sizing in css/style.css and styles the new three-panel
   desktop layout (family list / product list / featured
   preview) plus its own mobile accordion. Shared by
   index.html, product.html and products.html.
   ========================================================= */

/* ---- panel shell: override the generic 4-col grid from
   style.css with a wider, non-grid container the .mega
   structure below manages internally ---- */
.nav-mega-panel {
  display: block;
  width: min(980px, 94vw);
  padding: 0;
  overflow: hidden;
}
.mega { display: flex; flex-direction: column; }

/* ---- search ---- */
.mega-search {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--glass-border);
}
.mega-search-ico { width: 18px; height: 18px; color: var(--ink-mute); flex-shrink: 0; }
.mega-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--ink); font-family: var(--font-body); font-size: 14.5px;
}
.mega-search input::placeholder { color: var(--ink-mute); }

/* ---- three-panel body ---- */
.mega-body {
  display: grid;
  grid-template-columns: 240px 1fr 270px;
  /* The implicit row defaults to auto-sizing on its tallest
     child's max-content — with 16 legacy categories that's taller
     than the panel should ever be. minmax(0,1fr) makes the row
     fill the container's own (capped) height instead, so the
     columns below can actually be constrained by it. */
  grid-template-rows: minmax(0, 1fr);
  min-height: 380px; max-height: 62vh;
  overflow: hidden;
}
.mega-families {
  border-right: 1px solid var(--glass-border);
  padding: 12px; display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  /* Grid/flex items default to min-height:auto, which lets them
     grow past their row's stretched height and ignore overflow-y —
     this is what needs the reset for the 16-category list to
     actually scroll within .mega-body's capped height instead of
     spilling out. */
  min-height: 0;
}
.mega-family-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 10px; padding: 9px 10px; cursor: pointer;
  color: var(--ink-soft); min-height: 44px;
}
.mega-family-btn > svg:first-child { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.mega-family-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mega-family-text strong { font-size: 12.5px; font-weight: 600; color: inherit; line-height: 1.3; }
.mega-family-text em {
  font-style: normal; font-size: 11px; color: var(--ink-mute); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mega-family-chevron { width: 14px; height: 14px; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; flex-shrink: 0; }
.mega-family-btn:hover { background: var(--overlay-soft); color: var(--ink); }
.mega-family-btn.is-active { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent); color: var(--ink); }
.mega-family-btn.is-active .mega-family-chevron { opacity: 0.7; transform: translateX(0); }
.mega-family-btn.is-active > svg:first-child { color: var(--accent-ink); }

/* Mobile-only label marking which family the list below belongs to
   (see js/mega-menu.js renderProductList) — hidden on desktop, where
   the 3-panel layout already makes that obvious via the highlighted
   .mega-family-btn.is-active sitting right next to this list. */
.mega-products-heading { display: none; }

.mega-products {
  padding: 12px; overflow-y: auto; border-right: 1px solid var(--glass-border);
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0;
}
.mega-product-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px;
  color: var(--ink-soft); min-height: 44px;
}
.mega-product-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--row-accent, var(--accent)) 18%, transparent);
  color: var(--row-accent-ink);
  box-shadow: var(--elevation-1);
}
.mega-product-ico svg { width: 18px; height: 18px; }
.mega-product-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mega-product-text strong { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.mega-product-text em {
  font-style: normal; font-size: 12px; color: var(--ink-mute); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mega-product-arrow {
  width: 14px; height: 14px; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease;
  flex-shrink: 0; margin-top: 2px; color: var(--row-accent-ink);
}
.mega-product-row:hover { background: var(--overlay-soft); }
.mega-product-row:hover .mega-product-arrow, .mega-product-row:focus-visible .mega-product-arrow { opacity: 1; transform: translateX(0); }

.mega-preview { padding: 22px; display: flex; flex-direction: column; background: var(--overlay-soft); overflow-y: auto; min-height: 0; }
.mega-preview-visual {
  border-radius: 14px; overflow: hidden; margin-bottom: 16px; aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--row-accent) 28%, transparent), transparent 70%);
  box-shadow: var(--elevation-1);
}
.mega-preview-illus svg { width: 84%; height: 84%; color: var(--row-accent-ink); }
.mega-preview-photo img { width: 100%; height: 100%; object-fit: cover; }
.mega-preview-logo img { width: 58%; object-fit: contain; }
.mega-preview-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-ink); }
.mega-preview-body h4 { font-size: 17px; margin: 8px 0; color: var(--ink); }
.mega-preview-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 16px; }
.mega-preview-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.mega-preview-link svg { width: 14px; height: 14px; }

.mega-no-results { grid-column: 1 / -1; padding: 34px 20px; text-align: center; color: var(--ink-mute); font-size: 13.5px; }
.mega-no-results a { color: var(--accent-ink); }

.mega-body.is-searching .mega-families { display: none; }
.mega-body.is-searching .mega-products { grid-column: 1 / span 2; }

.mega-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-top: 1px solid var(--glass-border);
}
.mega-viewall { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.mega-viewall svg { width: 14px; height: 14px; color: var(--accent-ink); }
.mega-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

/* ---- visible keyboard focus (site has no global focus-visible
   treatment yet, so the mega-menu supplies its own — WCAG 2.2 AA) ---- */
.mega-search input:focus-visible,
.mega-family-btn:focus-visible,
.mega-product-row:focus-visible,
.mega-preview-link:focus-visible,
.mega-viewall:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px;
}

/* =========================================================
   Mobile — a real accordion in the off-canvas drawer, not the
   desktop layout squeezed down. Matches the nav's own collapse
   breakpoint (see .main-nav / .nav-toggle in css/style.css).
   ========================================================= */
@media (max-width: 1320px) {
  .nav-mega-panel { width: 100%; }
  .mega-search { padding: 12px 4px; }
  .mega-body {
    display: flex; flex-direction: column; max-height: none; min-height: 0;
  }
  .mega-families { border-right: none; padding: 4px 0; }
  .mega-family-btn { padding: 13px 6px; }
  .mega-products-heading {
    display: block;
    padding: 14px 6px 4px; margin-top: 4px;
    border-top: 1px solid var(--glass-border);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--accent-ink);
  }
  .mega-body.is-searching .mega-products-heading { display: none; }
  .mega-products { border-right: none; padding: 0 0 6px 6px; gap: 4px; }
  .mega-product-row { padding: 10px 6px; }
  .mega-preview { display: none; } /* full visual preview is a desktop-only affordance */
  .mega-body.is-searching .mega-products { grid-column: auto; }
  .mega-foot { padding: 12px 6px; flex-direction: column; align-items: flex-start; gap: 8px; }
}