/* Hover / focus / responsive behaviours that the React app implemented with
   inline JS handlers. Layered on top of the compiled Tailwind output. */

html, body { background-color: #0a0a0a; }

/* ---- nav links ---- */
.zv-nav:hover {
  background-color: rgba(180, 190, 210, 0.06) !important;
  color: #b0b8c8 !important;
}

/* ---- nav dropdown mega-menus ---- */
.zv-panel { display: none; }
.zv-menu:hover .zv-panel,
.zv-menu:focus-within .zv-panel { display: block; }
.zv-menu:hover .zv-trigger {
  background-color: rgba(180, 190, 210, 0.12) !important;
  border-color: rgba(180, 190, 210, 0.30) !important;
  color: #d6dae2 !important;
}
.zv-menu:hover .zv-chevron { transform: rotate(180deg); }

/* Touch devices: theme.js toggles .zv-open on first tap (hover is unavailable). */
.zv-menu.zv-open .zv-panel { display: block; }
.zv-menu.zv-open .zv-trigger {
  background-color: rgba(180, 190, 210, 0.12) !important;
  border-color: rgba(180, 190, 210, 0.30) !important;
  color: #d6dae2 !important;
}
.zv-menu.zv-open .zv-chevron { transform: rotate(180deg); }
.zv-menu-item:hover {
  background-color: rgba(180, 190, 210, 0.06) !important;
  color: #d6dae2 !important;
}

/* ---- directory cards ---- */
.zv-card { transition: border-color .15s, background-color .15s; }
.zv-card:hover {
  border-color: rgba(180, 190, 210, 0.35) !important;
  background-color: #131313 !important;
}

/* ---- generic silver CTA buttons ---- */
.zv-cta:hover {
  border-color: rgba(180, 190, 210, 0.4) !important;
  background-color: rgba(180, 190, 210, 0.10) !important;
}

/* ---- stack pills + related cards on the detail page ---- */
.zv-pill:hover {
  border-color: rgba(180, 190, 210, 0.4) !important;
  color: #d0d8e8 !important;
}
.zv-rel:hover { border-color: rgba(180, 190, 210, 0.3) !important; }

/* ---- back links (subtle colour shift) ---- */
.zv-back:hover { color: #b0b8c8 !important; }

/* ---- calculator ---- */
.zv-input:focus { border-color: rgba(180, 190, 210, 0.35) !important; }
.zv-reset:hover {
  border-color: rgba(180, 190, 210, 0.3) !important;
  color: #b0b8c8 !important;
}

/* ---- search ---- */
.zv-search:focus { border-color: rgba(180, 190, 210, 0.4) !important; }

/* ---- banner carousel ---- */
.zv-arrow:hover { border-color: rgba(180, 190, 210, 0.6) !important; }
.zv-banner-cta:hover {
  border-color: rgba(180, 190, 210, 0.6) !important;
  background-color: rgba(180, 190, 210, 0.18) !important;
  box-shadow: 0 6px 28px rgba(180, 190, 210, 0.25) !important;
}
.zv-slide-img { object-fit: contain; }
.zv-desktop-cta { display: block; }
.zv-mobile-cta { display: none; }

@media (max-width: 640px) {
  .zv-carousel { aspect-ratio: 2 / 1 !important; }
  .zv-slide-img { object-fit: cover !important; }
  .zv-desktop-cta { display: none !important; }
  .zv-mobile-cta { display: block !important; }
}

/* ---- compact nav on narrow phones ----
   At 390px the full nav needs ~407px and the Contact icon clips off-screen.
   Tighter paddings + a smaller logo keep all five items visible down to 360px. */
@media (max-width: 430px) {
  nav .max-w-7xl { padding-left: 8px !important; padding-right: 8px !important; }
  nav .zv-trigger, nav .zv-nav { padding-left: 8px !important; padding-right: 8px !important; }
  nav img[alt="Zenova Peptides"] { height: 40px !important; }
}

/* ---- pulsing "Buy Now" banner CTAs (v1.3.0, matches client's Replit build) ---- */
.zv-cta-pulse {
  animation: zv-cta-pulse 1.6s ease-in-out infinite;
}
.zv-cta-pulse:hover {
  animation: none;
  transform: translateY(-2px) scale(1.06);
}
@keyframes zv-cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .zv-cta-pulse { animation: none; }
}
.zv-holo-silver {
  background: linear-gradient(135deg, #f2f4f8, #c8d0dc 25%, #e8d8f0, #b0b8c8, #d8e4ec 85%, #f0f2f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- FAQ accordion (/faq) ---- */
.zv-faq-item summary { list-style: none; }
.zv-faq-item summary::-webkit-details-marker { display: none; }
.zv-faq-item summary:hover { background-color: rgba(180, 190, 210, 0.03); }
.zv-faq-item[open] summary { background-color: rgba(180, 190, 210, 0.03); }
.zv-faq-item[open] .zv-faq-chev { transform: rotate(180deg); }