/* ============================================================
   Kanzy – Shared Styles
   Mobile-first. All media queries at the bottom of this file.
   ============================================================ */

/* Base body: subtle grid background, smooth text rendering */
body {
  background-color: #fcfcfc;
  background-image:
    linear-gradient(#f0f0f0 1px, transparent 1px),
    linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/*
  content-visibility: auto tells the browser it can skip rendering
  off-screen sections until the user scrolls near them.
  contain-intrinsic-size gives it an estimated height so the
  scrollbar doesn't jump when sections are rendered.
*/
section + section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

/* ---- Feature cards: subtle tilt for visual interest ---- */

.tilted-card-left {
  transform: rotate(-3deg);
  transition: transform 0.3s ease;
}

.tilted-card-right {
  transform: rotate(3deg);
  transition: transform 0.3s ease;
}

/* Straighten and slightly enlarge card on hover */
.tilted-card-left:hover,
.tilted-card-right:hover {
  transform: rotate(0deg) scale(1.02);
}

/* Feature card accent background colors */
.first-card-accent-blue {
  background-color: #bae6fd;
}

.third-card-accent-green {
  background-color: #bbf7d0;
}

.fourth-card-accent-peach {
  background-color: #ffedd5;
}

/* Elevated image frame for cards with a colored background.
   Uses a strong shadow so it reads as depth, not a faint halo.
   Paired with border-accent-green to prevent edge gaps on the green card. */
.shadow-card-soft {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.30);
}

.border-accent-green {
  border-color: #bbf7d0;
}

/*
  .card-bullets: standard disc list for feature card bullet points.
  Defined here (not in Tailwind) to avoid relying on generated utility
  classes that may not be present in the built tailwind.css output.
*/
.card-bullets {
  list-style: disc;
  padding-left: 1.75rem;
}

.card-bullets li + li {
  margin-top: 0.5rem;
}

/* ---- Story section: tilted image with elevated shadow ---- */

.story-image-elevated {
  transform: rotate(-2deg);
  transition: transform 0.3s ease;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.15);
}

.story-image-elevated:hover {
  transform: rotate(0deg) scale(1.02);
}

/* ---- Navigation ---- */

/* Highlights the current page link in the nav */
.nav-link-active {
  color: #ee5b2b;
  font-weight: 700;
}

/* Full-width tap-friendly links inside the mobile dropdown */
.mobile-menu-link {
  display: block;
  width: 100%;
  padding: 0.75rem 0;
}

/* ---- Pricing card ---- */

/*
  Fixed-size circle with a checkmark inside each plan bullet.
  Defined here to avoid Tailwind class availability issues.
*/
.pricing-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #ee5b2b;
  border-radius: 9999px;
  color: #ee5b2b;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

/*
  Free trial CTA button:
  - Full width on mobile so it's easy to tap
  - Auto width centered on larger screens
*/
.pricing-trial-cta {
  display: block;
  width: 100%;
  text-align: center;
}

/* Black disc bullets for the "What's Included" list */
.trial-bullets {
  list-style: disc;
  padding-left: 1.5rem;
}

.trial-bullets li::marker {
  color: #000;
}

/*
  Feature card images: natural height on all screen sizes.
  No fixed height, no cropping — the full image is always visible.
*/
.feature-card-img {
  height: auto;
  display: block;
}

/* ============================================================
   Media Queries
   ============================================================ */

/* CTA becomes auto-width and centered on screens 640px and wider */
@media (min-width: 640px) {
  .pricing-trial-cta {
    display: flex;
    width: fit-content;
    justify-content: center;
    margin-inline: auto;
  }
}

/*
  Mobile performance optimizations for screens narrower than 768px:
  - Remove the decorative grid background (reduces paint cost on mobile GPUs)
  - Disable transforms on tilted cards and story image (no GPU compositing needed)
*/
@media (max-width: 768px) {
  body {
    background-image: none;
  }

  .tilted-card-left,
  .tilted-card-right,
  .tilted-card-left:hover,
  .tilted-card-right:hover,
  .story-image-elevated {
    transform: none;
  }
}

/* Skip animations entirely for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tilted-card-left,
  .tilted-card-right,
  .story-image-elevated {
    transition: none;
  }
}