/* Gecko Lawns clone — custom overrides on top of the compiled Tailwind bundle */

/* iOS Safari auto-zooms any focused input/textarea under 16px. Force 16px on mobile. */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Ringing call-button icon wiggle */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(5deg); }
}

/* Phone-buzzing-on-a-desk style vibrate, used on the header Call Now icon */
@keyframes phone-vibrate {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1.5px, -1px); }
  20% { transform: translate(1.5px, 1px); }
  30% { transform: translate(-1.5px, 1px); }
  40% { transform: translate(1.5px, -1px); }
  50% { transform: translate(-1.5px, -1px); }
  60% { transform: translate(1.5px, 1px); }
  70% { transform: translate(-1.5px, 1px); }
  80% { transform: translate(1.5px, -1px); }
  90% { transform: translate(-1px, 0); }
}
.animate-phone-vibrate { animation: phone-vibrate 0.5s ease-in-out infinite; }

/* Chat popup panel */
#chat-widget-root { max-width: 92vw; }
#chat-panel {
  animation: chat-pop .18s ease-out;
  max-height: min(760px, calc(100vh - 100px));
}
/* Scoped to :not(.hidden) — an unconditional "display: flex" here would beat the
   ".hidden { display:none }" utility class on specificity (ID always beats class),
   permanently defeating the JS open/close toggle regardless of which class is applied. */
#chat-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
}
/* "p-5" isn't in the reused Tailwind bundle (never used on the original site), so it silently
   applies zero padding. Set it explicitly rather than relying on the arbitrary class. */
#chat-panel #chat-form { overflow-y: auto; padding: 1.25rem; }
/* Success/error messages live as siblings of #chat-form (not children) — see main.js notes:
   nesting them inside the form meant form.style.display='none' hid the confirmation too. */
#chat-panel #chat-success,
#chat-panel #chat-error { padding: 0 1.25rem 1.25rem; }
@keyframes chat-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#chat-toggle-close { display: none; }
#chat-toggle.is-open #chat-toggle-avatar,
#chat-toggle.is-open #chat-toggle-dot { display: none; }
#chat-toggle.is-open #chat-toggle-close { display: flex; }

/* Header close (X) button — "p-1"/"-m-1" also aren't in the bundle. Give it an explicit,
   unambiguous 44x44 tap target instead of relying on classes that resolve to nothing. */
#chat-close {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: 0;
}

/* Blog cards */
.blog-more-note { color: hsl(var(--muted-foreground, 215 16% 47%)); }

/* Mobile menu */
#mobile-menu.is-open { display: block; }

/* Static review cards (crawlable, above the live Fouita widget) */
.review-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 0.75rem; padding: 1.25rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.review-stars { color: #FBBC05; letter-spacing: 2px; }

/* Ensure tap targets are comfortable on phones */
@media (max-width: 480px) {
  a, button { min-height: 40px; }
}

/* Scroll-reveal animations. The "reveal-ready" class is added by JS only once it has
   confirmed it can actually observe and un-hide elements — content is never hidden by
   CSS alone, so a JS failure or slow load never leaves anything permanently invisible. */
html.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
html.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}