/* 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) */
/* Wooden hours board.
   The previous version drew a hard 2px near-black rule every 118px, which
   didn't read as wood at all — it looked like an unstyled table with empty
   columns cutting through the day rows. Replaced with fine, warm, irregularly
   spaced grain (9px and 23px periods, which share no common factor, so there's
   no visible repeat) plus a soft top-light gradient. Alpha is kept very low —
   tested against denser values, anything stronger reads as stripes rather than
   as texture behind the text. */
.plank {
  background-color: #efe6d2;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(
      90deg,
      rgba(122, 84, 42, 0.022) 0px,
      rgba(122, 84, 42, 0.022) 1px,
      transparent 1px,
      transparent 9px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(122, 84, 42, 0.016) 0px,
      rgba(122, 84, 42, 0.016) 1px,
      transparent 1px,
      transparent 23px
    );
}

/* Today's row on the hours board — the bold weight alone was easy to miss */
.hours-row {
  border-left: 3px solid transparent;
  padding-left: 0.625rem;
  margin-left: -0.625rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hours-row.is-today {
  border-left-color: #E7A33E;
  background-color: rgba(231, 163, 62, 0.12);
}

/* Closed-for-a-holiday rows read as a status, not as opening times */
.hours-row.is-closed [data-range] {
  color: #B4552D;
  font-style: italic;
}

.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;
  }
}