/* Cal's Garden Center — shared styles (works alongside Tailwind utility classes) */

html {
  scroll-behavior: smooth;
}

body {
  background-color: #FAF6EC;
}

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

.font-body {
  font-family: 'Public Sans', sans-serif;
}

/* Hand-painted hours-board plank texture (signature element) */
.plank {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 0px,
    rgba(0, 0, 0, 0.06) 2px,
    transparent 2px,
    transparent 118px
  );
}

.focus-ring:focus-visible {
  outline: 3px solid #E7A33E;
  outline-offset: 3px;
}

/* Hero decorative blob sway */
.hero-blob {
  animation: sway 9s ease-in-out infinite;
  transform-origin: center;
}

@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2.5deg); }
}

/* Testimonial carousel */
.testimonial-track {
  transition: transform 0.5s ease;
}

/* Shared slider arrow buttons — sit on the left/right edge of the slider
   itself (vertically centered), not stacked below it. Works on both light
   and dark slider backgrounds since it's an opaque circle with its own
   shadow. Used by the hero slider, testimonials, and the resource-detail
   "More Resources" carousel. */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: #FAF6EC;
  color: #1F3D2B;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.06);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.slider-arrow:hover {
  background: #1F3D2B;
  color: #FAF6EC;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.slider-arrow:active {
  transform: translateY(-50%) scale(0.94);
}
.slider-arrow svg {
  width: 1.15rem;
  height: 1.15rem;
}
.slider-arrow.arrow-prev {
  left: -0.25rem;
}
.slider-arrow.arrow-next {
  right: -0.25rem;
}
@media (min-width: 768px) {
  .slider-arrow.arrow-prev { left: -1.375rem; }
  .slider-arrow.arrow-next { right: -1.375rem; }
}
@media (max-width: 640px) {
  .slider-arrow { width: 2.375rem; height: 2.375rem; }
  .slider-arrow.arrow-prev { left: 0.5rem; }
  .slider-arrow.arrow-next { right: 0.5rem; }
}

/* Hero-only: hide the side arrows below md. The hero's image column (which
   the arrows are meant to sit beside) is hidden below md too, so without
   this the arrows would float mid-height over the text column instead.
   Swipe and the dots still navigate on mobile. Kept as its own rule (rather
   than Tailwind's hidden/md:flex) since the Tailwind CDN stylesheet loads
   before this file and would lose that cascade fight. */
@media (max-width: 767px) {
  .hero-arrow { display: none; }
}

/* ---------------------------------------------------------------
   Global responsive guards
   --------------------------------------------------------------- */

/* Nothing should be able to push the page wider than the viewport and
   create a horizontal scrollbar on phones. Note: we deliberately do NOT
   use `overflow-x: hidden` here — setting one axis to hidden forces the
   other axis to `auto`, which is what caused the earlier stray scrollbar.
   Constraining the media itself avoids the problem at the source. */
img,
svg,
video,
iframe,
canvas {
  max-width: 100%;
}

/* Long unbroken strings (URLs, emails) shouldn't blow out narrow layouts */
h1, h2, h3, h4, p, li, a {
  overflow-wrap: break-word;
}

/* Comfortable tap targets on touch devices (WCAG 2.5.5) */
@media (max-width: 767px) and (pointer: coarse) {
  header nav a,
  #mobile-menu a,
  #menu-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  #mobile-menu a {
    justify-content: flex-start;
  }
  #mobile-menu a:last-child {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------
   Hero slider viewport
   --------------------------------------------------------------- */

/* The height is written by js/hero-slider.js to match whichever slide is
   active, so a short image slide no longer inherits the height of the tall
   text slides (which left a large empty band under it on mobile). The
   transition keeps that resize in step with the horizontal slide motion. */
.hero-viewport {
  transition: height 0.6s ease-out;
}

/* Slides keep their natural height instead of stretching to the tallest */
.hero-slide {
  align-self: flex-start;
}

/* Before JS measures, cap the first paint so there's never a tall green void */
.hero-viewport:not([style*="height"]) {
  max-height: 78vh;
}

/* Simple fade-up used when AJAX content finishes loading */
.fade-up {
  animation: fadeUp 0.5s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Skeleton loading shimmer for AJAX-fetched cards */
.skeleton {
  background: linear-gradient(90deg, #eee7d6 25%, #f5efe1 37%, #eee7d6 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Toast used for AJAX contact-form feedback */
.toast {
  transition: transform 0.35s ease, opacity 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}