/* Shared wide-screen navbar styling (site-wide)
   - Applies only on desktop/wide screens
   - Uses safe fallbacks so pages without theme tokens still render correctly
*/

@media (min-width: 992px) {
  .header-area {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: sticky !important;
    top: 20px !important;
    z-index: 1000 !important;
    padding: 0 !important;
  }

  .header-area.header-sticky {
    top: 0 !important;
    padding: 0 !important;
  }

  .header-area .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .nav-wrapper {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 12px 34px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10) !important;
    border: 1px solid rgba(31, 41, 55, 0.12) !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s ease !important;
    margin: 0 16px !important;
    width: 100% !important;
    max-width: calc(100% - 32px) !important;
  }

  /* Slightly stronger when sticky */
  .header-area.header-sticky .nav-wrapper {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14) !important;
  }

  .main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 16px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .main-nav .nav {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
    background: transparent !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    order: 1 !important;
    justify-content: flex-start !important;
  }

  .main-nav .nav li {
    position: relative !important;
  }

  /* Logo on the right (matches current layout) */
  .main-nav .logo {
    flex-shrink: 0 !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0.5rem !important;
    background: transparent !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    order: 2 !important;
  }

  .main-nav .logo img {
    height: 56px !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .main-nav .logo:hover {
    transform: translateY(-2px) !important;
    opacity: 0.92 !important;
  }

  .header-area .main-nav .nav li a,
  .main-nav .nav li > a {
    color: var(--ny-text, var(--yoga-text, #3d2e1f)) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    display: block !important;
    position: relative !important;
    text-decoration: none !important;
    letter-spacing: 0.2px !important;
    border: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    background: transparent !important;
    height: auto !important;
    line-height: normal !important;
    text-transform: none !important;
  }

  .main-nav .nav li > a:hover,
  .main-nav .nav li > a.active {
    color: var(--ny-primary, var(--yoga-sage, #8b9a7e)) !important;
    background: rgba(43, 182, 115, 0.08) !important;
    box-shadow: none !important;
  }

  /* Dropdown arrow: avoid overlap on "in-between" wide screens where nav items wrap */
  .main-nav .nav li.has-sub > a {
    padding-right: 34px !important; /* reserve room for the arrow */
  }

  .main-nav .nav li.has-sub > a::after {
    content: "\f107" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-left: 0 !important;
    font-size: 10px !important;
    transition: transform 0.25s ease !important;
    display: inline-block !important;
    color: inherit !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  .main-nav .nav li.has-sub:hover > a::after {
    transform: translateY(-50%) rotate(180deg) !important;
  }

  /* Dropdown */
  .main-nav .nav .sub-menu {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    min-width: 260px !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14) !important;
    border: 1px solid rgba(31, 41, 55, 0.12) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.22s ease !important;
    z-index: 1000 !important;
    margin-top: 0 !important;
    overflow: visible !important; /* allow nested dropdowns */
  }

  .main-nav .nav li.has-sub:hover .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .main-nav .nav .sub-menu li {
    width: 100% !important;
    position: relative !important;
  }

  .main-nav .nav .sub-menu li a {
    padding: 10px 12px !important;
    font-size: 14px !important;
    color: var(--ny-text, var(--yoga-text, #3d2e1f)) !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .main-nav .nav .sub-menu li a:hover {
    color: var(--ny-primary, var(--yoga-sage, #8b9a7e)) !important;
    background: rgba(43, 182, 115, 0.08) !important;
    transform: translateX(2px) !important;
    box-shadow: none !important;
  }

  /* Nested sub-menu */
  .main-nav .nav .sub-menu .has-sub .sub-menu {
    left: 100% !important;
    top: 0 !important;
    margin-top: 0 !important;
    margin-left: 10px !important;
  }

  /* Ensure the template mobile hamburger is hidden on wide screens */
  .menu-trigger {
    display: none !important;
  }
}

/* Tighten spacing for wide desktop widths */
@media (min-width: 1200px) and (max-width: 1680px) {
  .nav-wrapper {
    padding: 10px 20px !important;
  }

  .main-nav {
    gap: 12px !important;
  }

  .main-nav .nav {
    gap: 0.25rem !important;
  }

  .header-area .main-nav .nav li a,
  .main-nav .nav li > a {
    padding: 10px 14px !important;
  }

  .main-nav .nav li.has-sub > a {
    padding-right: 30px !important;
  }

  .main-nav .nav li.has-sub > a::after {
    right: 12px !important;
  }

  .main-nav .logo img {
    height: 54px !important;
  }
}