/* ==========================================================================
   SPRINT-THRU — DESKTOP STYLESHEET
   --------------------------------------------------------------------------
   Scope   : screens 992px AND ABOVE (Bootstrap 'lg' breakpoint and up)
   Purpose : desktop-only structural rules — sticky header, hover fly-out
             submenus, and hamburger suppression.

   IMPORTANT — READ THIS
   Your existing visual styling (colours, fonts, cards, hero, footer, section
   backgrounds) already lives in:
       https://www.mysinglelink.com/sprint_thru/css/Sprint_Thru_V5.css
   That file is hosted externally and was NOT available to me, so its rules
   are NOT duplicated here. Keep loading it. This file only adds/guarantees
   the structural desktop behaviour, everything wrapped in a min-width query
   so it can never leak into the mobile layout.

   Section 6 at the bottom is a COMPLETE INVENTORY of every custom selector
   used by the markup, so you can audit Sprint_Thru_V5.css for gaps.

   LOAD ORDER:
     1. bootstrap.min.css
     2. font-awesome / aos.css
     3. Sprint_Thru_V5.css          (existing desktop base)
     4. sprint-thru-desktop.css     <-- THIS FILE
     5. sprint-thru-mobile.css
   ========================================================================== */


/* ==========================================================================
   1. DESKTOP  ( min-width: 992px )
   ========================================================================== */
@media (min-width: 992px) {

  /* ------------------------------------------------------------------
     1.1  HAMBURGER — never shown on desktop
     ------------------------------------------------------------------ */
  .mobile-nav-toggle {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     1.2  STICKY HEADER
     ------------------------------------------------------------------ */
  .sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1050;
    width: 100%;
    background: #fff;
  }

  /* overflow:hidden / transform on an ancestor breaks position:sticky */
  html,
  body {
    overflow-x: clip;
  }

  /* ------------------------------------------------------------------
     1.3  MENU PANEL — always visible, horizontal
     (neutralises the mobile collapse state)
     ------------------------------------------------------------------ */
  #primaryNavMenu {
    display: flex;
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border-top: none;
    box-shadow: none;
  }

  /* ------------------------------------------------------------------
     1.4  TWO-LEVEL HOVER FLY-OUT SUBMENUS
     Used by: Shop (Merchant Store / Consumer Store) and
              Login (Merchant Login / Consumer Login).
     Bootstrap 5 has no native multi-level dropdown, so this is required.
     ------------------------------------------------------------------ */
  .dropdown-submenu {
    position: relative;
  }

  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -.25rem;
    margin-left: .1rem;
    display: none;
  }

  /* Reveal the child menu on hover or keyboard focus */
  .dropdown-submenu:hover > .dropdown-menu,
  .dropdown-submenu:focus-within > .dropdown-menu {
    display: block;
  }

  .dropdown-submenu > .submenu-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    cursor: pointer;
    white-space: nowrap;
  }

  /* Right-pointing caret on submenu parents */
  .dropdown-submenu > .submenu-label .nav-chevron {
    font-size: .72rem;
    margin-left: auto;
  }

  /* Flip the fly-out to the left if it would overflow the viewport */
  .dropdown-menu-end .dropdown-submenu > .dropdown-menu {
    left: auto;
    right: 100%;
  }

  /* ------------------------------------------------------------------
     1.5  ANCHOR SCROLL OFFSET (clears the sticky header)
     --anchor-offset is set at runtime from the real header height.
     ------------------------------------------------------------------ */
  section[id],
  [id$="-collapse-begin"],
  #about-us,
  #features,
  #solutions {
    scroll-margin-top: var(--anchor-offset, 140px);
  }
}


/* ==========================================================================
   2. GLOBAL SMOOTH SCROLL
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ==========================================================================
   3. SELECTOR INVENTORY — for auditing Sprint_Thru_V5.css
   --------------------------------------------------------------------------
   Every custom (non-Bootstrap) class used by the markup. Bootstrap 5 supplies
   the grid/utility classes (container, row, col-lg-*, fs-*, fw-*, text-*,
   bg-*, d-*, btn*, navbar*, dropdown*, collapse), so they are not listed.

   LAYOUT / SECTIONS
     .sticky-header          header wrapper (sticky positioning)
     .section-white          light section background
     .section-non-white      alternate/tinted section background
     .section-sort-padding   vertical rhythm between sections
     .auth-block             centred content block inside sections

   HERO / SLIDER
     .hero                   hero wrapper + padding
     .slider-card            slider outer card
     .slider-frame           image frame/border
     .slider-caption         caption text under slide
     .myMerSlides            individual slide element
     .media-box              media container
     .pickup-media           pickup-section media wrapper
     .execution-img          execution diagram image

   CARDS
     .image-card             card on white sections
     .image-card-non-white   card on tinted sections

   NAVIGATION
     .portal-nav             portal links row in the navbar
     .submenu-label          2nd-level submenu parent label
     .nav-chevron            caret icon (down / right)
     .mobile-nav-toggle      hamburger button      [mobile only]
     .mobile-nav-toggle-bar  hamburger bars        [mobile only]
     .nav-contact-cta        Contact button wrapper

   FOOTER
     .footer-wp              footer wrapper
     .footer-top-flex        top flex row
     .footer-top-col         column within the top row
     .footer-logo            logo block
     .footer-qr              QR code group
     .footer-qr-card         individual QR card
     .footer-app-icons       app-store badges
     .footer-pay             payment method icons
     .footer-office          office/address block
     .footer-follow          social links
     .footer-divider         separator rule
     .footer-bottom          copyright bar

   LOADER
     #pageLoader             full-screen loading overlay
     .loader-spinner         spinner graphic

   KEY IDs
     #primaryNavMenu         collapsible nav container
     #mobileNavToggle        hamburger button
     #solutions #about-us #features    anchor targets
     #Mer_PCode              merchant promo-code field
     [id$="-collapse-begin"] ~55 expand/collapse solution panels

   RUNTIME CSS VARIABLES (set by JS, do not hard-code)
     --anchor-offset         header height + 12px, for scroll-margin-top
     --mobile-header-h       header height, for the fixed-header fallback
   ========================================================================== */