/* ============================================================
RANK YOU — FULL CONSOLIDATED RESPONSIVE NAV CSS
Desktop dropdown + button-based mobile hamburger + CTA button fix
Paste into Appearance > Customize > Additional CSS,
REPLACING the previous version entirely.
============================================================ */

/* ---------- DESKTOP ---------- */
@media (min-width: 769px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  #site-header,
  #site-header .header-inner,
  #site-header .site-branding,
  #site-header .site-navigation,
  #site-header nav,
  #site-header ul,
  #site-header li {
    overflow: visible !important;
  }

  #site-header {
    position: relative !important;
    z-index: 99999 !important;
    background-color: #000 !important;
  }

  #site-header .header-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    background-color: #000 !important;
  }

  #site-header .site-branding {
    flex: 0 0 auto !important;
  }

  #site-header .site-navigation {
    flex: 1 1 auto !important;
    position: relative !important;
    z-index: 99999 !important;
  }

  #site-header .site-navigation > ul,
  #site-header nav > ul {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000 !important;
  }

  #site-header .site-navigation > ul > li,
  #site-header nav > ul > li {
    position: relative !important;
    list-style: none !important;
  }

  .main-navigation,
  nav ul {
    background-color: #000 !important;
  }

  .main-navigation ul li a,
  nav ul li a,
  #site-header .site-navigation > ul > li > a,
  #site-header nav > ul > li > a {
    color: #2AFF00 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    padding: 14px 18px !important;
    transition: color 0.15s ease !important;
    display: block !important;
  }

  .main-navigation ul li a:hover,
  nav ul li a:hover,
  #site-header .site-navigation > ul > li > a:hover,
  #site-header nav > ul > li > a:hover {
    color: #ffffff !important;
  }

  /* Desktop Services dropdown */
  #site-header .site-navigation ul ul,
  #site-header nav ul ul,
  #site-header .sub-menu,
  .main-navigation ul ul,
  nav ul ul,
  .nav-services-dropdown ul,
  .nav-services-dropdown .sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 999999 !important;
    background-color: #0d0d0d !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    min-width: 260px !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    list-style: none !important;
  }

  #site-header .site-navigation ul li:hover > ul,
  #site-header nav ul li:hover > ul,
  #site-header .menu-item-has-children:hover > .sub-menu,
  .main-navigation ul li:hover > ul,
  nav ul li:hover > ul {
    display: block !important;
  }

  #site-header .site-navigation ul ul li,
  #site-header nav ul ul li,
  #site-header .sub-menu li,
  .main-navigation ul ul li,
  nav ul ul li {
    display: block !important;
    width: 100% !important;
    position: relative !important;
  }

  #site-header .site-navigation ul ul li a,
  #site-header nav ul ul li a,
  #site-header .sub-menu li a,
  .main-navigation ul ul li a,
  nav ul ul li a,
  .nav-services-dropdown ul li a,
  .nav-services-dropdown .sub-menu li a {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    background-color: transparent !important;
    padding: 13px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    box-sizing: border-box !important;
  }

  #site-header .site-navigation ul ul li:last-child a,
  #site-header nav ul ul li:last-child a,
  #site-header .sub-menu li:last-child a,
  .main-navigation ul ul li:last-child a,
  nav ul ul li:last-child a {
    border-bottom: 0 !important;
  }

  #site-header .site-navigation ul ul li a:hover,
  #site-header nav ul ul li a:hover,
  #site-header .sub-menu li a:hover,
  .main-navigation ul ul li a:hover,
  nav ul ul li a:hover,
  .nav-services-dropdown ul li a:hover,
  .nav-services-dropdown .sub-menu li a:hover {
    color: #2AFF00 !important;
    background-color: rgba(42,255,0,0.08) !important;
  }

  /* Desktop Call Now button */
  html body #site-header .nav-call-button a,
  html body #site-header li.nav-call-button a,
  html body #site-header .site-navigation .nav-call-button a,
  html body #site-header nav .nav-call-button a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #2AFF00 !important;
    border-radius: 6px !important;
    padding: 10px 22px !important;
    min-width: 120px !important;
    height: auto !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html body #site-header .nav-call-button a:hover,
  html body #site-header li.nav-call-button a:hover,
  html body #site-header .site-navigation .nav-call-button a:hover,
  html body #site-header nav .nav-call-button a:hover {
    background-color: rgba(42,255,0,0.08) !important;
    color: #2AFF00 !important;
  }

  /* Desktop Strategy Session button */
  html body #site-header .nav-cta-button a,
  html body #site-header li.nav-cta-button a,
  html body #site-header .site-navigation .nav-cta-button a,
  html body #site-header nav .nav-cta-button a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #2AFF00 !important;
    color: #000000 !important;
    border: 1px solid #2AFF00 !important;
    border-radius: 6px !important;
    padding: 10px 22px !important;
    min-width: 190px !important;
    height: auto !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html body #site-header .nav-cta-button a:hover,
  html body #site-header li.nav-cta-button a:hover,
  html body #site-header .site-navigation .nav-cta-button a:hover,
  html body #site-header nav .nav-cta-button a:hover {
    background-color: #2AFF00 !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(42,255,0,0.25) !important;
  }

  html body #ry-mobile-nav-wrap {
    display: none !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body.ry-mobile-menu-open {
    overflow: hidden !important;
  }

  html body #site-header,
  html body #site-header .header-inner,
  html body #site-header .site-branding {
    overflow: visible !important;
  }

  html body #site-header {
    background-color: #000 !important;
  }

  html body #site-header .site-navigation > ul,
  html body #site-header nav > ul {
    display: none !important;
  }

  html body #site-header .menu-toggle,
  html body #site-header .site-header-toggle {
    display: none !important;
  }

  html body #site-header .header-inner {
    background-color: #000 !important;
  }

  html body #ry-mobile-nav-wrap {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483600 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  html body #ry-mobile-nav-wrap.ry-open {
    pointer-events: auto !important;
  }

  html body #ry-nav-toggle {
    display: none !important;
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
  }

  /* Mobile hamburger button */
  html body button#ry-hamburger-label,
  html body label#ry-hamburger-label {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    position: fixed !important;
    top: 14px !important;
    right: 16px !important;
    z-index: 2147483647 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
    background: #000 !important;
    border-radius: 6px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
  }

  html body button#ry-hamburger-label span,
  html body label#ry-hamburger-label span {
    display: block !important;
    width: 24px !important;
    height: 2.5px !important;
    background-color: #2AFF00 !important;
    border-radius: 2px !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
    pointer-events: none !important;
  }

  /* Mobile overlay */
  html body button#ry-mobile-overlay,
  html body label#ry-mobile-overlay {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 2147482998 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
  }

  /* Mobile slide-out panel */
  html body nav#ry-mobile-panel {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 80% !important;
    max-width: 340px !important;
    background-color: #000 !important;
    z-index: 2147482999 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 22px !important;
    padding: 90px 24px 40px !important;
    box-shadow: -10px 0 40px rgba(0,0,0,0.5) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  /* Mobile open state — hamburger turns into X */
  html body #ry-mobile-nav-wrap.ry-open button#ry-hamburger-label span:nth-child(1),
  html body #ry-mobile-nav-wrap.ry-open label#ry-hamburger-label span:nth-child(1),
  html body #ry-mobile-nav-wrap:has(#ry-nav-toggle:checked) label#ry-hamburger-label span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg) !important;
  }

  html body #ry-mobile-nav-wrap.ry-open button#ry-hamburger-label span:nth-child(2),
  html body #ry-mobile-nav-wrap.ry-open label#ry-hamburger-label span:nth-child(2),
  html body #ry-mobile-nav-wrap:has(#ry-nav-toggle:checked) label#ry-hamburger-label span:nth-child(2) {
    opacity: 0 !important;
  }

  html body #ry-mobile-nav-wrap.ry-open button#ry-hamburger-label span:nth-child(3),
  html body #ry-mobile-nav-wrap.ry-open label#ry-hamburger-label span:nth-child(3),
  html body #ry-mobile-nav-wrap:has(#ry-nav-toggle:checked) label#ry-hamburger-label span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg) !important;
  }

  /* Mobile open state — overlay visible */
  html body #ry-mobile-nav-wrap.ry-open button#ry-mobile-overlay,
  html body #ry-mobile-nav-wrap.ry-open label#ry-mobile-overlay,
  html body #ry-mobile-nav-wrap:has(#ry-nav-toggle:checked) label#ry-mobile-overlay,
  html body #ry-nav-toggle:checked ~ label#ry-mobile-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Mobile open state — panel slides in */
  html body #ry-mobile-nav-wrap.ry-open nav#ry-mobile-panel,
  html body #ry-mobile-nav-wrap:has(#ry-nav-toggle:checked) nav#ry-mobile-panel,
  html body #ry-nav-toggle:checked ~ nav#ry-mobile-panel {
    transform: translateX(0) !important;
  }

  /* Mobile panel links */
  html body nav#ry-mobile-panel a {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    text-align: center !important;
  }

  html body nav#ry-mobile-panel a:hover {
    color: #2AFF00 !important;
  }

  html body nav#ry-mobile-panel .ry-mobile-submenu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: -6px !important;
  }

  html body nav#ry-mobile-panel .ry-mobile-submenu a {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: #cccccc !important;
  }

  html body nav#ry-mobile-panel .ry-mobile-submenu a:hover {
    color: #2AFF00 !important;
  }

  html body nav#ry-mobile-panel .nav-cta-button {
    background-color: #2AFF00 !important;
    border-radius: 6px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    display: inline-block !important;
  }

  html body nav#ry-mobile-panel .nav-cta-button a {
    color: #000 !important;
  }

  html body nav#ry-mobile-panel .nav-call-button {
    background-color: transparent !important;
    border: 1px solid #2AFF00 !important;
    border-radius: 6px !important;
    padding: 11px 26px !important;
    font-weight: 700 !important;
    display: inline-block !important;
  }

  html body nav#ry-mobile-panel .nav-call-button a {
    color: #ffffff !important;
  }
}