/**
 * Responsive Navigation & Cart Button Layout  — v20260405_HARDENED
 * Desktop (>= 1024px): Hide hamburger menu toggle; cart icon remains visible and alone.
 * Mobile  (<  1024px): Hamburger toggle AND cart icon are visible, side-by-side.
 *
 * Targets the HOME PAGE HEADER only (header element rendered by React in index.php).
 * Uses flexbox + media queries — no JavaScript required.
 *
 * KEY CLASSES / SELECTORS
 *   Menu toggle : header button[aria-expanded], [aria-label*="menu"], .hamburger-menu, etc.
 *   Cart        : #jovico-cart-navbar-responsive, #jovico-cart-navbar-btn, .jovico-cart-button
 */

/* ════════════════════════════════════════════════════════ */
/* UNIVERSAL: Right-side nav group — always a flex row      */
/* This ensures the cart + (optional) hamburger are inline  */
/* ════════════════════════════════════════════════════════ */

/* The last direct-child div of the header wrapper contains the nav buttons */
header > div > div:last-child,
header > div > nav,
header nav,
header .nav-container,
header .nav-buttons,
header .nav-right,
header .header-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* ════════════════════════════════════════════════════════ */
/* DESKTOP (>= 1024px): Hide hamburger, show cart only      */
/* ════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /*
   * HIDE hamburger / mobile-menu toggle button on desktop.
   * Selectors cover all patterns used by the Jovico React app:
   *   - aria-expanded="true/false" pattern (React controlled)
   *   - aria-label containing "menu" or "navigation"
   *   - class names containing menu / hamburger / mobile / nav-toggle
   *   - data-testid pattern
   *   - Utility-class shorthand names
   */
  header button[aria-expanded],
  header button[aria-label*="menu" i],
  header button[aria-label*="navigation" i],
  header button[class*="menu"],
  header button[class*="hamburger"],
  header button[class*="mobile"],
  header button[class*="nav-toggle"],
  header button[data-testid*="menu"],
  header .hamburger-menu,
  header .mobile-menu-btn,
  header .mobile-nav-toggle,
  header .menu-toggle,
  nav > button[aria-expanded],
  nav > button[aria-label*="menu" i],
  nav > button[class*="menu"],
  nav .hamburger-menu,
  nav .mobile-menu-btn {
    display: none !important;
  }

  /*
   * SHOW cart button — visible alone on the right of the header bar.
   * Always inline-flex so icon + count badge render correctly.
   */
  #jovico-cart-navbar-responsive,
  #jovico-cart-navbar-btn,
  .jovico-cart-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════ */
/* STICKY NAVIGATION BAR (home page only)                   */
/* ════════════════════════════════════════════════════════ */
body[data-page="home"] header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background-color: rgba(5, 5, 5, 0.95) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Header wrapper: logo left / nav-buttons right */
body[data-page="home"] header > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* Right-side nav group container */
body[data-page="home"] header nav,
body[data-page="home"] header .nav-container,
body[data-page="home"] header > div > div:last-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

/* ════════════════════════════════════════════════════════ */
/* MOBILE (< 1024px): Both hamburger AND cart, side-by-side */
/* ════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /*
   * SHOW hamburger menu toggle — explicit override to counteract any
   * desktop-first CSS that might globally hide it.
   */
  header button[aria-expanded],
  header button[aria-label*="menu" i],
  header button[aria-label*="navigation" i],
  header button[class*="menu"],
  header button[class*="hamburger"],
  header button[class*="mobile"],
  header button[class*="nav-toggle"],
  header .hamburger-menu,
  header .mobile-menu-btn,
  header .mobile-nav-toggle,
  header .menu-toggle,
  nav > button[aria-expanded],
  nav > button[aria-label*="menu" i],
  nav > button[class*="menu"],
  nav .hamburger-menu,
  nav .mobile-menu-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /*
   * SHOW cart button beside the hamburger — same flex row.
   */
  #jovico-cart-navbar-responsive,
  #jovico-cart-navbar-btn,
  .jovico-cart-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /*
   * Flex container rules ensure hamburger + cart are side-by-side.
   * Applied to the header wrapper and its direct nav child.
   */
  header > div,
  header > div > div:last-child,
  header nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
}

/* ════════════════════════════════════════════════════════ */
/* UNIVERSAL: Cart button base styling                       */
/* ════════════════════════════════════════════════════════ */
#jovico-cart-navbar-responsive,
#jovico-cart-navbar-btn {
  background-color: transparent !important;
  border: none !important;
  color: white !important;
  cursor: pointer !important;
  padding: 10px 14px !important;
  margin: 0 4px !important;
  font-size: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 500 !important;
  transition: transform 0.2s ease !important;
  white-space: nowrap !important;
}

#jovico-cart-navbar-responsive:hover,
#jovico-cart-navbar-btn:hover {
  transform: scale(1.1) !important;
}

/* Cart count badge */
#jovico-cart-navbar-responsive .jovico-cart-count,
#jovico-cart-navbar-btn .jovico-cart-count {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background-color: #ef4444 !important;
  color: white !important;
  border-radius: 50% !important;
  text-align: center !important;
  line-height: 20px !important;
  font-size: 11px !important;
  font-weight: bold !important;
  margin-left: -8px !important;
  position: relative !important;
  top: -2px !important;
}