/* ============================================================================
   Mobile Excellence Layer  ·  shared across Bright Presence Digital, SwitchPoint
   Backup, and Bark & Stroll (served from the shared /fonts symlink).
   PROGRESSIVE ENHANCEMENT ONLY — every feature is @supports-guarded or degrades
   to nothing, so no browser ever breaks. Brand colors come from per-site --mx-*
   custom properties set in each site's own CSS. No reduce-motion kill switch
   (owner keeps animations live on his sites, by design).
   ========================================================================== */

:root {
  --mx-accent:     #c8a030;              /* per-site override */
  --mx-on-accent:  #0c0c12;              /* text/icon color on the accent */
  --mx-bar-bg:     rgba(8,8,12,.82);     /* sticky bar glass */
  --mx-cta-font:   inherit;
  --mx-radius:     13px;
  --mx-safe-b:     env(safe-area-inset-bottom, 0px);
  --mx-safe-t:     env(safe-area-inset-top, 0px);
}

/* ---- 1. Snappy, native-feeling taps (touch devices only) ---- */
@media (hover: none) and (pointer: coarse) {
  a, button, [role="button"], .btn, .btn-primary, .nav-cta, .price-btn,
  .hosting-btn, input[type="submit"], label {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  a:active, button:active, [role="button"]:active, .btn:active,
  .btn-primary:active, .nav-cta:active, .price-btn:active, .hosting-btn:active {
    transform: scale(.972);
    transition: transform .07s ease;
  }
}

/* ---- 2. Typography polish — kill orphans & ragged headline lines ---- */
h1, h2, h3, .hero h1, .sec, .price-name, .hosting-name { text-wrap: balance; }
p, li, .lede, .hero-body, .price-note { text-wrap: pretty; }

/* ---- 3. Smooth, app-like cross-page navigation ---- */
/* Same-origin navigations cross-fade in supporting browsers; ignored elsewhere. */
@view-transition { navigation: auto; }

/* ---- 4. Native viewport height for full-height heroes (no iOS URL-bar jump) ---- */
@supports (height: 100svh) {
  .hero[data-mx-hero], [data-mx-fullh] { min-height: 100svh; }
}

/* ---- 5. Sticky thumb CTA bar (mobile only) ---------------------------------
   Markup per site:  <div class="mx-cta"><a href="#contact">Start a Project</a></div>
   Shown by mobile-x.js once you scroll past the hero; auto-hides over #contact. */
.mx-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: none;
  padding: 10px 14px calc(10px + var(--mx-safe-b));
  background: var(--mx-bar-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border-top: 1px solid color-mix(in srgb, var(--mx-accent) 30%, transparent);
  transform: translateY(130%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 -10px 34px rgba(0,0,0,.36);
  pointer-events: none;
}
.mx-cta.is-on { transform: none; pointer-events: auto; }
.mx-cta > a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 52px; padding: .9rem 1rem;
  border-radius: var(--mx-radius);
  background: var(--mx-accent); color: var(--mx-on-accent) !important;
  font-family: var(--mx-cta-font);
  font-size: .9rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; border: none;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--mx-accent) 34%, transparent);
}
.mx-cta > a:active { transform: scale(.985); }

@media (max-width: 760px) {
  .mx-cta { display: block; }
  body.mx-has-cta { padding-bottom: calc(74px + var(--mx-safe-b)); }
}