/* ==========================================================================
   /ami/ — native-app layer for phones
   Added 17 Oct 2026. Loaded on ami/index.html only, after site-chrome.css.

   The owner asked for the app feel WITHOUT changing the page's design, so
   this only adds chrome: the 56px app bar (as on the homepage), the shared
   bottom tab bar, a floating "Book Now" bar in the page's own violet, and
   press feedback. No section is restyled.

   Everything sits inside the 768px query the tab bar uses; desktop and
   tablet-landscape are untouched.
   ========================================================================== */

.app-cta { display: none; }

@media (max-width: 768px) {

   :root {
      --app-bar: 56px;
      --app-ink: #15131f;
      --app-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
      --app-tabs: calc(58px + env(safe-area-inset-bottom, 0px));
   }

   html {
      scroll-padding-top: calc(var(--app-bar) + 12px + env(safe-area-inset-top, 0px));
   }

   body { overscroll-behavior-x: none; }

   /* ---- App bar (same as the homepage — see home-app.css) -----------------
      The CONTAINER is fixed and moved, never .bd-nav-wrapper: the drawer and
      its overlay live inside the wrapper, and a transform on their ancestor
      would break their position:fixed. */

   .bd-nav-wrapper {
      height: calc(var(--app-bar) + env(safe-area-inset-top, 0px));
   }

   .bd-nav-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 997;
      height: calc(var(--app-bar) + env(safe-area-inset-top, 0px));
      padding-top: env(safe-area-inset-top, 0px);
      background: rgba(255, 255, 255, 0.97);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      backdrop-filter: saturate(180%) blur(16px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      transition: transform 0.28s var(--app-ease), box-shadow 0.2s ease;
   }

   body.app-scrolled .bd-nav-container { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); }
   body.app-bar-hidden .bd-nav-container { transform: translateY(-100%); }

   .bd-nav-inner {
      height: var(--app-bar);
      padding: 0 12px 0 8px;
      gap: 8px;
   }

   .bd-nav-logo {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
   }

   /* Both sizes need !important: the markup carries an inline
      "width:93px; height:auto", and width:auto against that inline height
      renders the video at its native size across the whole screen. */
   .bd-nav-logo video {
      width: auto !important;
      height: 42px !important;
      max-width: 72px;
      object-fit: contain;
      mix-blend-mode: multiply;
   }

   .bd-nav-logo::after {
      content: "Abundance Mindset";
      font-family: "Cinzel", Georgia, serif;
      font-weight: 700;
      font-size: clamp(13px, 3.7vw, 15px);
      letter-spacing: 0.02em;
      color: var(--app-ink);
      white-space: nowrap;
   }

   /* the Menu tab opens the drawer (app-shell.js clicks this button) */
   .bd-nav-hamburger { display: none; }

   .bd-nav-actions .bd-nav-contact.desktop[href*="coachavinash.com"] {
      display: inline-flex;
      align-items: center;
      height: 34px;
      padding: 0 14px;
      font-size: 12px;
      border-width: 1.5px;
      white-space: nowrap;
   }

   /* ---- Press feedback ----------------------------------------------------- */

   .abm-cta, #ami-happens .cta, .ws-cta, .hero-btn, .acc-btn, .app-cta__btn {
      transition: transform 0.12s ease, filter 0.12s ease;
      -webkit-tap-highlight-color: transparent;
   }

   .abm-cta:active, #ami-happens .cta:active, .ws-cta:active, .hero-btn:active,
   .app-cta__btn:active {
      transform: scale(0.96);
      filter: brightness(0.96);
   }

   /* ---- Floating Book Now bar ------------------------------------------------
      Built by ami-app.js from the hero card (link, dates, price), shown once
      the hero card has scrolled away and hidden wherever the page already
      shows one of its own booking buttons, and at the footer. */

   .app-cta {
      display: flex;
      align-items: center;
      gap: 12px;
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: calc(var(--app-tabs) + 10px);
      z-index: 890;              /* just under the tab bar (900) */
      padding: 8px 8px 8px 16px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 18px;
      background: rgba(22, 18, 52, 0.94);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      backdrop-filter: blur(14px) saturate(160%);
      color: #fff;
      box-shadow: 0 16px 36px -12px rgba(20, 10, 60, 0.65);
      opacity: 0;
      transform: translateY(calc(100% + 90px));
      transition: transform 0.34s var(--app-ease), opacity 0.2s ease;
      pointer-events: none;
   }

   .app-cta.is-on {
      opacity: 1;
      transform: none;
      pointer-events: auto;
   }

   body:has(.bd-nav-drawer.open) .app-cta { opacity: 0; pointer-events: none; }

   .app-cta__text { flex: 1; min-width: 0; line-height: 1.25; }

   .app-cta__eyebrow {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font: 700 10.5px/1.3 "Montserrat", sans-serif;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #bdb5ff;
   }

   .app-cta__title {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: "Cinzel", Georgia, serif;
      font-weight: 700;
      font-size: 14px;
      color: #fff;
   }

   /* the hero's own Book Now: same violet gradient and glow */
   .app-cta__btn {
      flex: none;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 999px;
      background: linear-gradient(135deg, #8a7bff, #6f63ff);
      color: #fff;
      font: 700 14.5px/1 "Montserrat", sans-serif;
      letter-spacing: 0.3px;
      text-decoration: none;
      white-space: nowrap;
      box-shadow: 0 10px 24px -8px rgba(111, 99, 255, 0.7);
   }
   .app-cta__btn:hover,
   .app-cta__btn:focus { color: #fff; text-decoration: none; }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
   html { scroll-behavior: smooth; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
   .bd-nav-container,
   .app-cta { transition: none; }
}