/*
=========================================================
PAYMENTPROCESSOR.COM
RESPONSIVE NAVIGATION
=========================================================
*/

/* Mobile-only CTA lives inside the Navigation block so the primary action
   remains available when the separate desktop header button is hidden. */
.pp-site-header .pp-mobile-nav-cta {
  display: none !important;
}

@media (max-width: 820px) {
  /* Use the menu button at tablet/mobile sizes instead of squeezing the
     desktop link row into the header. */
  .pp-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .pp-site-header .wp-block-navigation__responsive-container-open {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(231, 167, 47, .24);
    border-radius: 10px;
    background: rgba(8, 11, 14, .72);
    color: #f5f6f5;
    cursor: pointer;
  }

  .pp-site-header .wp-block-navigation__responsive-container-open:hover,
  .pp-site-header .wp-block-navigation__responsive-container-open:focus-visible {
    border-color: rgba(231, 167, 47, .62);
    background: rgba(231, 167, 47, .06);
    color: var(--pp-gold-light);
  }

  .pp-site-header .wp-block-navigation__responsive-container-open svg,
  .pp-site-header .wp-block-navigation__responsive-container-close svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  /* Full-screen dark overlay. Gutenberg's stock overlay is white, which made
     the site's white navigation links effectively disappear on mobile. */
  .pp-site-header .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    display: flex !important;
    overflow-y: auto !important;
    color: #f5f6f5 !important;
    background:
      radial-gradient(circle at 85% 10%, rgba(231, 167, 47, .075), transparent 32%),
      linear-gradient(155deg, #071019 0%, #020407 48%, #030507 100%) !important;
  }

  .pp-site-header .wp-block-navigation__responsive-close,
  .pp-site-header .wp-block-navigation__responsive-dialog {
    width: 100% !important;
    min-height: 100% !important;
  }

  .pp-site-header .wp-block-navigation__responsive-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .pp-site-header .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    color: #f5f6f5;
    cursor: pointer;
  }

  .pp-site-header .wp-block-navigation__responsive-container-close:hover,
  .pp-site-header .wp-block-navigation__responsive-container-close:focus-visible {
    border-color: rgba(231, 167, 47, .48);
    color: var(--pp-gold-light);
  }

  .pp-site-header .wp-block-navigation__responsive-container-content {
    width: 100% !important;
    min-height: 100% !important;
    padding: 92px 24px 34px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Override the desktop navigation container rules while the overlay is open. */
  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
    width: 100% !important;
    max-width: 520px;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
  }

  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    width: 100% !important;
    min-height: 58px;
    padding: 16px 4px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    color: #eef1f3 !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
  }

  /* Gutenberg focuses the first menu link when the overlay opens. Suppress the
     browser's harsh white focus rectangle for pointer/touch users, then add a
     branded focus-visible treatment for keyboard users. */
  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover {
    color: var(--pp-gold-light) !important;
  }

  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus-visible {
    outline: 2px solid rgba(231, 167, 47, .72) !important;
    outline-offset: 2px;
    background: rgba(231, 167, 47, .055) !important;
    color: var(--pp-gold-light) !important;
  }

  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .pp-mobile-nav-cta {
    display: block !important;
    margin-top: 24px !important;
    border-bottom: 0 !important;
  }

  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .pp-mobile-nav-cta
  .wp-block-navigation-item__content {
    min-height: 52px;
    padding: 0 20px !important;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pp-gold-light), var(--pp-gold));
    color: #101010 !important;
    font-size: 15px;
    font-weight: 800;
  }

  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .pp-mobile-nav-cta
  .wp-block-navigation-item__content:hover {
    filter: brightness(1.06);
    color: #101010 !important;
  }

  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .pp-mobile-nav-cta
  .wp-block-navigation-item__content:focus-visible {
    outline-color: rgba(255, 196, 81, .9) !important;
    background: linear-gradient(135deg, var(--pp-gold-light), var(--pp-gold)) !important;
    filter: brightness(1.06);
    color: #101010 !important;
  }

  body:has(.pp-site-header .wp-block-navigation__responsive-container.is-menu-open) {
    overflow: hidden !important;
  }
}

@media (max-width: 480px) {
  .pp-site-header .wp-block-navigation__responsive-container-content {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .pp-site-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    min-height: 56px;
    font-size: 17px;
  }
}