/*
Theme Name: LevyRight
Theme URI: https://levyright.com
Author: LevyRight
Description: Marketing site for LevyRight's free Maricopa County property tax assessment check. Companion to the check.levyright.com tool - same design tokens for brand consistency.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: levyright
*/

/* Footer margin reset (required by the theming reference). */
.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* Section margin reset lives inline per-section via theme.json-style
   attributes in the templates themselves. */

/* --- Step markers (how-it-works) --- */
.step-marker {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--wp--preset--color--primary-soft);
  color: var(--wp--preset--color--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--geist-mono);
  font-size: 0.85rem;
  font-weight: 500;
  flex-shrink: 0;
}

/* --- Equal-height cards (how-it-works, why-honest) --- */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* --- Waitlist card --- */
.waitlist-card {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 12%, transparent);
  border-radius: 1rem;
}
.waitlist-form-wrap input[type="email"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.625rem;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 15%, transparent);
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
  font-family: var(--wp--preset--font-family--geist);
  font-size: 1rem;
}
#lr-waitlist-message {
  font-size: 0.875rem;
  margin-top: 0.6rem;
}

/* --- Numbers/data in Geist Mono throughout (ledger/surveyor precision,
   matching the tool at check.levyright.com) --- */
.font-mono {
  font-family: var(--wp--preset--font-family--geist-mono);
}

/* --- Quiet plat-line texture: a nod to parcel/survey boundary lines,
   used once, sparingly, as hero ambience (not a stock image). --- */
.plat-texture {
  position: relative;
  overflow: hidden;
}
.plat-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 80%);
  pointer-events: none;
}

/* --- Hover interactions --- */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--wp--preset--color--foreground) 10%, transparent);
}

/* --- Entrance + scroll animation --- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.6s ease forwards;
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up,
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === Editor: keep animated content visible while editing === */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .animate-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Dark mode: mirror the tool's dark tokens for consistency. Block themes
   don't get automatic dark-mode palette swaps, so this overrides the CSS
   custom properties WordPress generates from theme.json. */
@media (prefers-color-scheme: dark) {
  :root {
    --wp--preset--color--background: #12140f;
    --wp--preset--color--surface: #181b15;
    --wp--preset--color--foreground: #f2f1ec;
    --wp--preset--color--muted: #9aa39a;
    --wp--preset--color--primary: #4c9a75;
    --wp--preset--color--primary-soft: #1c2d24;
  }
  .waitlist-card {
    border-color: color-mix(in srgb, var(--wp--preset--color--foreground) 18%, transparent);
  }
}