/* Shared behavior and accessibility rules used across ludit.games. */
.coming-soon-store {
  position: relative;
  box-sizing: border-box;
}

.coming-soon-store:hover,
.coming-soon-store:focus-visible {
  text-decoration: none !important;
}

.coming-soon-store:hover img,
.coming-soon-store:focus-visible img {
  visibility: hidden;
}

.coming-soon-store:hover::after,
.coming-soon-store:focus-visible::after {
  content: "COMING SOON";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-weight: 700;
}

.skip-link:focus {
  top: 12px;
}

/* Keep the shared MailerLite signup button label consistent site-wide. */
body .signup .ml-form-embedSubmit button,
body .signup .ml-form-embedSubmit button.primary {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
}

/*
  Keep the viewport as the only vertical scrolling container. Do not suppress
  vertical overscroll: mobile browsers need it for native pull-to-refresh.
  The page wrapper remains unclipped to avoid iOS hit-testing failures on links
  farther down the document.
*/
html {
  overflow-x: clip;
  overflow-y: visible;
  overscroll-behavior-y: auto;
}

body {
  overflow-x: clip;
  overflow-y: visible;
}

.site {
  overflow: visible;
}

/* Single authoritative sticky-header rule used by every standard page. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/*
  Touch devices do not have a real hover state. Prevent hover-only transforms
  from consuming the first tap, and keep every Bundles navigation link above
  decorative card and carousel media.
*/
@media (hover: none) and (pointer: coarse) {
  a[href*="bundles/"] {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .card-art-link:hover .bundle-art img,
  .bundle-card h3 a:hover,
  .bundle-card .card-button:hover,
  .hero .primary:hover {
    transform: none !important;
  }
}