/* ultra-mobile-fixes v2.3 */
@media (max-width: 1150px) {
  .ultra-hamburger { margin-left: auto !important; }

  /* Accordion sub-menus: collapsed by default (handled by ultra-nav.min.css),
     expand on TAP only. Neutralize the desktop :hover reveal so hovering (a
     desktop browser at mobile width) doesn't half-open a section or spin its
     caret. These :hover rules come BEFORE the .is-open rules so a tapped-and-
     hovered section still wins and stays open. */
  .ultra-nav-links > li.ultra-has-dropdown:hover > .ultra-mega,
  .ultra-nav-links > li.ultra-has-dropdown:hover > .ultra-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: 0 !important;
  }
  .ultra-nav-links > li.ultra-has-dropdown:hover > a .ultra-caret {
    transform: none !important;
  }
  /* The OPEN (tapped) section: fully expanded + caret rotated, un-clipped so
     long sections (Solutions) aren't cut off at the 600px accordion limit. */
  .ultra-nav-links > li.ultra-has-dropdown.is-open > .ultra-mega,
  .ultra-nav-links > li.ultra-has-dropdown.is-open > .ultra-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 0 6px 16px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .ultra-nav-links > li.ultra-has-dropdown.is-open > a .ultra-caret {
    transform: rotate(180deg) !important;
  }

  /* Hide promo / feature cards entirely on mobile (old .ultra-mega-promo
     and the new redesign .mk-feature cards) */
  .ultra-mega-promo,
  .ultra-mega-col:last-child:has(.ultra-mega-promo),
  div.ultra-mega-promo,
  .mk-feature {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Single column, compact */
  .ultra-mega-grid { display: block !important; }
  .ultra-mega-col { padding: 0 !important; margin: 0 !important; }
  .ultra-mega-col-header { display: none !important; }
  .ultra-mega-icon { display: none !important; }
  .ultra-mega-desc { display: none !important; }
  .ultra-mega-item { padding: 6px 0 !important; display: block !important; }
  .ultra-mega-text { display: block !important; }
  .ultra-mega-title { color: rgba(255,255,255,0.6) !important; font-size: 14px !important; }

  /* Hub row — collapse to flat list style on mobile (match .ultra-mega-item) */
  .ultra-mega-hubs {
    display: block !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-top: 0 !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  .ultra-nav .ultra-mega-hubs .ultra-mega-hub {
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
    color: rgba(255,255,255,0.6) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
  }
  .ultra-nav .ultra-mega-hubs .ultra-mega-hub i,
  .ultra-mega-hub i { display: none !important; }

  /* Light mode: keep hub links readable (dark-on-white). The white rule
     above ties the base light-mode rule on specificity and wins on source
     order, so restore the dark color here. */
  [data-theme="light"] .ultra-nav .ultra-mega-hubs .ultra-mega-hub {
    color: rgba(26,26,46,0.6) !important;
  }

  /* About dropdown - match Hosting style */
  .ultra-dropdown-item { 
    padding: 6px 0 !important; 
    color: rgba(255,255,255,0.6) !important; 
    font-size: 14px !important; 
    display: block !important;
  }
  .ultra-dropdown-item i { display: none !important; }
  .ultra-dropdown-item span { color: rgba(255,255,255,0.85) !important; font-weight: 500 !important; }

  /* Parent links for Hosting/About - not blue */
  .ultra-nav-links > li.ultra-has-dropdown > a {
    color: rgba(255,255,255,0.85) !important;
  }

  /* Current page: keep the ACTIVE dropdown parent blue so the hamburger
     menu highlights the present page the same way Home does, matching the
     desktop blue underbar. Higher specificity + !important overrides the
     "not blue" rule above (and its light-mode counterpart below). */
  .ultra-nav-links > li.ultra-has-dropdown.active > a,
  [data-theme="light"] .ultra-nav-links > li.ultra-has-dropdown.active > a {
    color: var(--ultra-blue-icon) !important;
  }

  /* LIGHT MODE: the mobile panel background is white, so the white text set
     above (section headers, item titles, About sub-items) must go dark, and
     the fixed bottom action bar must be light instead of dark nav-bg. */
  [data-theme="light"] .ultra-nav-links > li.ultra-has-dropdown > a { color: #4a4a5a !important; }
  [data-theme="light"] .ultra-mega-title { color: #1a1a2e !important; }
  [data-theme="light"] .ultra-dropdown-item { color: #4a4a5a !important; }
  [data-theme="light"] .ultra-dropdown-item span { color: #1a1a2e !important; }
  [data-theme="light"] .ultra-nav-links.is-open ~ .ultra-nav-right {
    background: #fff !important;
    border-top-color: rgba(0,0,0,0.10) !important;
  }
  [data-theme="light"] .ultra-nav-links.is-open ~ .ultra-nav-right .ultra-cta {
    color: #fff !important;
  }

  /* Touch fixes */
  .ultra-has-dropdown > a { touch-action: manipulation !important; }
  .ultra-hamburger { touch-action: manipulation !important; }
}

/* Footer mobile centering */
@media (max-width: 768px) {
  .ultra-footer-column-title { text-align: center !important; }
  .ultra-footer-subsection-title { text-align: center !important; }
  .ultra-footer-links { align-items: center !important; }
}
@media (max-width: 480px) {
  .ultra-footer-column-title { text-align: center !important; }
  .ultra-footer-subsection-title { text-align: center !important; }
  .ultra-footer-flickr-column { text-align: center !important; }
  .ultra-footer-flickr-column .ultra-footer-column-title { text-align: center !important; }
  .ultra-footer-flickr-grid { margin-left: auto !important; margin-right: auto !important; }
  .ultra-footer-payments { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
}

/* Fix nav panel scroll - clear bottom Login/Get Started bar */
@media (max-width: 1150px) {
  .ultra-nav-links {
    padding-bottom: 160px !important;
  }
}

/* Fix nav panel scroll - clear bottom Login/Get Started bar */
@media (max-width: 1150px) {
  .ultra-nav-links {
    padding-bottom: 160px !important;
  }
}

/* Center the divider line/icon on mobile */
@media (max-width: 768px) {
  .stcode_title10 .line,
  .stcode_title10w .line {
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Center all section divider lines and icons on mobile */
@media (max-width: 768px) {
  .stcode_title10 .line,
  .stcode_title10w .line {
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    background-position: center 13px !important;
  }
  .stcode_title10 .line i,
  .stcode_title10w .line i {
    margin: 0 auto !important;
    text-align: center !important;
  }
  .one_full {
    float: none !important;
    text-align: center !important;
  }
}

/* Ensure nav stays above hero sections */
@media (max-width: 1150px) {
  .ultra-nav { position: relative !important; z-index: 9999 !important; }
  .ultra-nav-main { z-index: 9999 !important; }
  .page_title2 { margin-top: 0 !important; }
  .page_title1 { margin-top: 0 !important; }
}