/*
 * Application-wide styles for Myotaku
 * Complements Tailwind (tailwind.css) with additional overrides
 *
 * This file loads AFTER tailwind.css, so rules here win the cascade.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Hero text rotation — vertical slide + fade
   All words stack in the same grid cell; only the active one is visible.
   Default state: hidden below.  --active: visible.  --exit: hidden above.
   Transitions only on --active / --exit so the reset to default is instant.
   ───────────────────────────────────────────────────────────────────────────── */

.hero-rotate-container {
  display: inline-grid;
  overflow: hidden;
  vertical-align: baseline;
}

.hero-rotate-word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(40px);
}

.hero-rotate-word--active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-rotate-word--exit {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile-only overrides (< 640px)
   Plain CSS — not processed by Tailwind, guaranteed to render.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   Short-viewport overrides (height ≤ 750px)
   Hides non-essential hero elements when vertical space is tight.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-height: 750px) {
  .hero-section .hero-badge {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Very-short + wide viewport overrides (e.g. squished laptop window)
   Only fires on non-mobile widths (≥ 640px) with limited height (≤ 650px).
   Shrinks hero text and spacing so nothing gets clipped.
   ───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 640px) and (max-height: 650px) {
  .hero-section h1 {
    font-size: 2.5rem !important;   /* down from 3rem / 3.75rem */
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
  }

  .hero-section .hero-sub {
    font-size: 0.95rem !important;
    margin-bottom: 1rem !important;
  }

  .hero-section .hero-trust {
    margin-bottom: 1rem !important;
  }

  .hero-section .hero-cta-wrap {
    margin-bottom: 0.5rem !important;
  }
}

@media (max-width: 639px) {
  /* Nav: hide both CTA buttons on mobile */
  .nav-hide-mobile {
    display: none !important;
  }

  /* Hero: full-viewport height (beats inline style) */
  .hero-section {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
  }

  /* Hero: hide price badge */
  .hero-section .hero-badge {
    display: none;
  }

  /* Hero: smaller headline + tighter spacing */
  .hero-section h1 {
    font-size: 2.25rem !important;  /* down from 3rem */
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
  }

  /* Hero: smaller + tighter subheadline */
  .hero-section .hero-sub {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Hero: compact trust indicators */
  .hero-section .hero-trust {
    column-gap: 1rem !important;
    row-gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Hero: hide all CTA buttons (sticky bar covers this) */
  .hero-section .hero-cta-wrap {
    display: none !important;
  }

  /* Hero: hide tertiary link */
  .hero-hide-mobile {
    display: none !important;
  }

  /* Sticky CTA: phone link as plain text, not a button */
  .sticky-cta-phone {
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #C4724A !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
  }
}