/* Tiny Hands Studio — shared brand stylesheet (mockup phase) */

:root {
  --th-cream: #fffaf1;
  --th-cream-2: #fff4e2;
  --th-blue: #dcf1fc;
  --th-purple: #efe4fb;
  --th-navy: #2e2b45;
  --th-navy-soft: #514c6e;
  --th-green: #4caf50;
  --th-green-dark: #3d9440;
  --th-coral: #ff8a5b;
  --th-yellow: #ffc94a;
  --th-pink: #ff6f91;
  --th-sky: #4fb6e8;
  --th-mint: #4fd8ac;
  --th-white: #ffffff;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--th-cream);
  color: var(--th-navy);
}

.font-display {
  font-family: 'Fredoka', sans-serif;
}

/* Header logo — oversized brand mark that overlaps the header's bottom border on
   desktop, shrinking back to normal size once the sticky header is scrolled.
   Mobile keeps the original compact size (no room to overlap without colliding
   with the hero content below). */
.site-logo-img {
  position: absolute;
  left: 0;
  top: 1rem;
  height: 4rem;
  width: auto;
  transition: height 0.25s ease, top 0.25s ease;
}
@media (min-width: 768px) {
  .site-logo-img {
    top: -0.5rem;
    height: 12rem;
  }
  header.is-scrolled .site-logo-img {
    top: 1rem;
    height: 4rem;
  }
}

/* Buttons */
.btn-th {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.85rem 2rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: 0 6px 0 rgba(0,0,0,0.08);
}
.btn-th:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,0.08); }

.btn-th-green {
  background-color: var(--th-green);
  color: white;
}
.btn-th-green:hover { background-color: var(--th-green-dark); }

.btn-th-white {
  background-color: white;
  color: var(--th-navy);
}
.btn-th-white:hover { background-color: #f4f4f4; }

.btn-th-outline {
  background-color: transparent;
  border: 2px solid var(--th-navy);
  color: var(--th-navy);
  box-shadow: none;
}
.btn-th-outline:hover { background-color: var(--th-navy); color: white; }

/* Card */
.card-th {
  background: white;
  border-radius: 1.75rem;
  box-shadow: 0 10px 30px rgba(46,43,69,0.08);
}

/* Section blob backgrounds */
.section-blue { background-color: var(--th-blue); }
.section-purple { background-color: var(--th-purple); }
.section-cream2 { background-color: var(--th-cream-2); }

.blob-shadow {
  box-shadow: 0 20px 45px rgba(46,43,69,0.15);
}

/* Rounded device frame */
.ipad-frame {
  background: var(--th-navy);
  border-radius: 2.25rem;
  padding: 0.9rem;
  box-shadow: 0 25px 50px rgba(46,43,69,0.25);
}
.ipad-screen {
  border-radius: 1.5rem;
  overflow: hidden;
  background: white;
}

/* Auto-advancing showcase gallery inside .ipad-screen — see index.php's script block for the
   timer that swaps .active between slides. */
.gallery-slide {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.gallery-slide.active {
  opacity: 1;
}

/* Star rating */
.star-icon { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.1)); }

/* Dotted wavy divider */
.wave-divider {
  height: 60px;
  width: 100%;
}

/* ===== App mockup chrome (iPad landscape frame) ===== */
.app-page-bg {
  background: linear-gradient(140deg, var(--th-blue) 0%, var(--th-cream) 45%, var(--th-purple) 100%);
  min-height: 100vh;
}

.device-frame {
  background: var(--th-navy);
  border-radius: 2.75rem;
  padding: 1.1rem;
  box-shadow: 0 30px 60px rgba(46,43,69,0.3);
  aspect-ratio: 4 / 3;
}
.device-screen {
  border-radius: 1.75rem;
  overflow: hidden;
  background: white;
  position: relative;
  height: 100%;
}

.mockup-nav-pill {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  color: var(--th-navy-soft);
  transition: background-color .15s ease, color .15s ease;
}
.mockup-nav-pill.active { background: var(--th-navy); color: white; }
.mockup-nav-pill:not(.active):hover { background: white; }

/* Icon buttons within app screens */
.icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 4px 10px rgba(46,43,69,0.15);
}

.demo-badge {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--th-yellow);
  color: var(--th-navy);
}

.color-swatch {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border: 3px solid white;
}
.color-swatch.selected { outline: 3px solid var(--th-navy); outline-offset: 2px; }

/* Testimonial avatar slider controls */
.testimonial-avatar-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  overflow: hidden;
  padding: 0;
  border: 3px solid transparent;
  background: none;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.55;
}
.testimonial-avatar-btn:hover { opacity: 0.85; transform: scale(1.05); }
.testimonial-avatar-btn.active { border-color: var(--th-green); opacity: 1; transform: scale(1.08); }

/* Hero preview — loops the trail draw to signal this area is animated/video, no real recording implied */
@keyframes th-trail-draw {
  0%   { stroke-dashoffset: 100; }
  45%  { stroke-dashoffset: 0; }
  75%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}
.th-animated-trail {
  animation: th-trail-draw 4s ease-in-out infinite;
}

/* Content block previews — same loop pace as the hero trail */
.th-star-fill {
  y: 0px;
  height: 160px;
  animation: th-star-rise 4s ease-in-out infinite;
}
@keyframes th-star-rise {
  0%   { y: 160px; height: 0px; }
  45%  { y: 0px; height: 160px; }
  75%  { y: 0px; height: 160px; }
  100% { y: 160px; height: 0px; }
}

/* Reduced motion: freeze on the fully-realized frame — same look as the original static graphics */
@media (prefers-reduced-motion: reduce) {
  .th-animated-trail,
  .th-star-fill {
    animation: none !important;
  }
}

/* ===== Form fields ===== */
.label-th {
  display: block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--th-navy);
  margin-bottom: 0.4rem;
}
.input-th,
.select-th,
.textarea-th {
  width: 100%;
  background: white;
  border: 1.5px solid rgba(46,43,69,0.14);
  border-radius: 0.9rem;
  padding: 0.75rem 1rem;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  color: var(--th-navy);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-th::placeholder,
.textarea-th::placeholder { color: rgba(46,43,69,0.35); }
.input-th:focus,
.select-th:focus,
.textarea-th:focus {
  outline: none;
  border-color: var(--th-sky);
  box-shadow: 0 0 0 3px rgba(79,182,232,0.18);
}
.textarea-th { resize: vertical; min-height: 8rem; }
.select-th {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e2b45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

/* Package / plan choice cards (radio-style) */
.plan-card { position: relative; }
.plan-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.plan-card .plan-card-box {
  border: 2px solid rgba(46,43,69,0.12);
  border-radius: 1.25rem;
  padding: 1.25rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.plan-card input:checked ~ .plan-card-box {
  border-color: var(--th-green);
  background-color: rgba(76,175,80,0.06);
}
.plan-card .plan-card-dot {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 2px solid rgba(46,43,69,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plan-card input:checked ~ .plan-card-box .plan-card-dot {
  border-color: var(--th-green);
  background: var(--th-green);
}
.plan-card input:checked ~ .plan-card-box .plan-card-dot::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: white;
}

/* Simple checkbox */
.checkbox-th {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.35rem;
  border: 1.5px solid rgba(46,43,69,0.3);
  accent-color: var(--th-green);
}

/* reCAPTCHA placeholder */
.recaptcha-th {
  border: 1px solid rgba(46,43,69,0.14);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  max-width: 300px;
}

/* Logged-in shell: sidebar/nav pill for account pages */
.account-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-radius: 0.85rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--th-navy-soft);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.account-nav-link:hover { background: rgba(79,182,232,0.08); color: var(--th-navy); }
.account-nav-link.active { background: var(--th-navy); color: white; }