/**
 * MushyNest — shared conversion UX: skip links, focus rings, mobile sticky CTAs.
 * Loaded after /css/style.css and /styles/main.css where applicable.
 */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

.mn-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mn-skip-link:focus-visible {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 12px));
  left: max(12px, env(safe-area-inset-left, 12px));
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  z-index: 10002;
  padding: 11px 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: var(--color-button, #1d1d1f);
  color: #fff;
  border-radius: var(--radius-md, 10px);
  text-decoration: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

#main-content:focus,
#cfd-main:focus {
  outline: none;
}

.logo:focus-visible,
.menu-toggle:focus-visible,
.nav__link:focus-visible,
.btn:focus-visible,
button:focus-visible:not(:disabled),
.pricing-modal__close:focus-visible,
.pricing-modal__submit:focus-visible,
.hdr-btn:focus-visible,
.nav-tab:focus-visible {
  outline: 2px solid var(--color-link, #0066cc);
  outline-offset: 3px;
}

body.mn-has-sticky-bottom {
  padding-bottom: 0;
}

.mn-mobile-cta-bar {
  display: none;
}

/*
 * Cash flow dashboard (guest): marketing header is hidden but style.css applies body
 * padding-top for the fixed header — removes the empty strip; keep notch safe-area only.
 */
body.cfd-dashboard-page:not(.cfd-dashboard-auth) {
  padding-top: env(safe-area-inset-top, 0px);
}

@media (max-width: 900px) {
  body.mn-has-sticky-bottom {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }

  .mn-mobile-cta-bar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 260;
    padding: 10px max(14px, env(safe-area-inset-left))
      calc(12px + env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-right));
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.06);
  }

  body.pricing-body-theme .mn-mobile-cta-bar {
    background: rgba(250, 250, 248, 0.96);
    border-top-color: rgba(0, 0, 0, 0.08);
  }

  body.cfd-dashboard-page .mn-mobile-cta-bar {
    background: rgba(245, 244, 240, 0.95);
    border-top-color: rgba(0, 0, 0, 0.07);
    gap: 8px;
    flex-wrap: nowrap;
  }

  body.cfd-dashboard-page .mn-mobile-cta-primary,
  body.cfd-dashboard-page .mn-mobile-cta-secondary {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
  }

  body.cfd-dashboard-page .mn-mobile-cta-primary {
    white-space: nowrap;
  }

  body.cfd-dashboard-page.cfd-dashboard-auth.mn-has-sticky-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .mn-mobile-cta-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 10px;
    background: #2d6a2d;
    border: none;
    box-shadow: 0 4px 14px rgba(45, 106, 45, 0.28);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .mn-mobile-cta-primary:active {
    opacity: 0.9;
  }

  .mn-mobile-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1d1d1f) !important;
    text-decoration: none !important;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.98);
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  body.pricing-body-theme .mn-mobile-cta-secondary {
    background: #fff;
    color: #1a1a1a !important;
  }

  /* Cash flow dashboard: float save dock above thumb bar when both visible */
  body.cfd-dashboard-auth .cfd-save-dock:not([hidden]) {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .mn-mobile-cta-bar {
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
  }

  body.cfd-dashboard-page .mn-mobile-cta-bar {
    background: #f5f4f0;
  }
}

/* Desktop / wide: hide sticky bars (still in DOM for CSP simplicity) */
@media (min-width: 901px) {
  .mn-mobile-cta-bar {
    display: none !important;
  }

  body.mn-has-sticky-bottom {
    padding-bottom: 0 !important;
  }

  body.cfd-dashboard-auth .cfd-save-dock:not([hidden]) {
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }
}