/* custom.css — hand-authored styles for the home microsite.
 *
 * The home page loads a frozen Tailwind build (assets/index-Cf6qwvTq.css), so a
 * few utilities we need (e.g. justify-self / grid-column) aren't present. Rather
 * than depend on the build, the rules below are written as plain CSS and loaded
 * AFTER the frozen build so they win. Covers:
 *   1. Mobile header — pin the hamburger to the right as a compact tap target.
 *   2. The app-style mobile navigation drawer (rows, icons, press feedback,
 *      staggered reveal). index2.js only toggles classes; the look lives here.
 *   3. Floating WhatsApp button (fixed bottom-right).
 */

/* --- 0. Interactive cursor ---------------------------------------------- *
 * Native <button> defaults to the arrow cursor, and some CTAs/links in the
 * frozen build don't carry the cursor-pointer utility. Loaded after that
 * build, this guarantees every CTA, link and clickable control shows the hand
 * cursor on hover. Disabled controls keep the default arrow. */
a,
button:not(:disabled),
[role="button"],
[data-scroll],
[data-testid^="nav-"],
[data-testid^="hero-cta"],
label[for],
summary {
  cursor: pointer;
}

/* --- 3. Floating WhatsApp button ---------------------------------------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wa-float:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  color: #fff;
}
.wa-float:active {
  transform: scale(0.95);
}
.wa-float svg {
  width: 30px;
  height: 30px;
}
/* Gentle attention pulse. */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #25d366;
  z-index: -1;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
@media (max-width: 640px) {
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .wa-float svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float::before { animation: none; }
}

/* --- 1. Mobile header: right-aligned, square hamburger ------------------- */
@media (max-width: 1023px) {
  header [data-testid="nav-mobile-toggle"] {
    grid-column: 3;         /* last column of the header grid */
    justify-self: end;      /* hug the right edge instead of stretching */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
  }
}

/* --- 2. App-style mobile navigation drawer ------------------------------ */
#mobile-menu {
  display: flex;
  flex-direction: column;
  /* Cap the drawer to the space below the fixed 4rem header. The matching
     Tailwind utility isn't in the frozen build, so it's set here. */
  max-height: calc(100vh - 4rem); 
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
    padding-bottom: 20px;
}
/* On short screens the drawer caps at the viewport height: the nav list
   scrolls while the CTA block stays pinned at the bottom, so the actions are
   never clipped (native-app behaviour). */
#mobile-menu > nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#mobile-menu > div {
  flex-shrink: 0;
}
#mobile-menu-backdrop {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.mm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 7px 11px;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.mm-item:active {
  background: rgba(255, 255, 255, 0.1);
}

.mm-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  color: #bfdbfe;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mm-item:active .mm-ico {
  background: rgba(59, 130, 246, 0.22);
  color: #dbeafe;
  transform: scale(0.94);
}

.mm-label {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
}

.mm-chev {
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.mm-item:active .mm-chev {
  transform: translateX(3px);
  color: rgba(255, 255, 255, 0.6);
}

/* Staggered slide-in (index2.js sets per-row transition-delay + .is-in). */
.mm-reveal {
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity 0.35s ease,
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.mm-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Press feedback for the full-width CTA buttons. */
.mm-cta {
  transition:
    transform 0.12s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.mm-cta:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .mm-reveal {
    transition: opacity 0.2s ease;
  }
  .mm-reveal,
  .mm-reveal.is-in {
    transform: none;
  }
}