/*
Theme Name:  Clean Zone Kadence Child
Theme URI:   https://cleanzonelaundry.com
Description: Clean Zone Laundry child theme built on Kadence
Author:      Clean Zone Laundry
Template:    kadence
Version:     1.0.0
*/

/*
 * NOTE: Before activating on staging, verify the Kadence parent theme folder name
 * via cPanel File Manager at wp-content/themes/. The Template value above must
 * match exactly (case-sensitive). It is typically 'kadence' (all lowercase).
 */

/* ============================================================
   BRAND TOKENS — single source of truth for all colors, fonts,
   spacing, and radii. Reference these variables everywhere.
   Never hardcode a brand color or spacing value in other files.
   ============================================================ */

:root {
  /* Colors */
  --color-navy:        #213F67; /* Dark background, headers */
  --color-sky:         #00ADEF; /* Primary brand blue */
  --color-light-blue:  #5FD3FF; /* Accent, highlights */
  --color-green:       #78B825; /* Accent */
  --color-orange:      #FF5C00; /* Strong CTA, urgency */
  --color-orange-warm: #FF8823; /* Warm accent */
  --color-white:       #FFFFFF;
  --color-slate:       #334155; /* Body text */

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale (mobile-first, rem-based) */
  --space-xs:  0.25rem;  /*  4px */
  --space-sm:  0.5rem;   /*  8px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;
}

/* ============================================================
   TYPOGRAPHY — Self-hosted Inter Variable
   Using variable font (single file) covers all weights 100–900.
   font-display: swap prevents invisible text during font load.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body,
.wp-block-heading,
button,
input,
textarea,
select {
  font-family: var(--font-primary);
}

/* ============================================================
   STICKY MOBILE BOTTOM BAR
   Hidden on desktop (display:none). Shown on mobile via
   media query. JS injects the DOM element — see
   custom-animations.js. Body padding prevents content being
   hidden behind the bar.
   ============================================================ */

/* ============================================================
   MOBILE FAB — "Get Directions" floating action button
   Bottom-right corner, always visible on mobile.
   JS injects the DOM element — see custom-animations.js.
   env(safe-area-inset-bottom) clears iOS home indicator.
   ============================================================ */

.cz-sticky-bar {
  display: none;
}

@media (max-width: 768px) {
  .cz-sticky-bar {
    display: block;
    position: fixed;
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    right: 1.25rem;
    z-index: 9999;
  }
}

.cz-sticky-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cz-sticky-bar__btn:hover {
  background: var(--color-white);
  color: var(--color-orange);
  border-color: var(--color-orange);
  text-decoration: none;
}

.cz-sticky-bar__btn:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.cz-sticky-bar__btn svg {
  flex-shrink: 0;
}


/* ============================================================
   TRUST BADGES BAR
   6 pill badges on navy band. Horizontal scroll on mobile
   (single row, no visible scrollbar), centered wrap on desktop.
   ============================================================ */

.cz-trust-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 11 */
}

.cz-trust-bar::-webkit-scrollbar {
  display: none;                /* Chrome / Safari */
}

@media (min-width: 769px) {
  .cz-trust-bar {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    padding: var(--space-xl) var(--space-md);
    gap: var(--space-md);
  }
}

.cz-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cz-trust-badge--highlight {
  background: var(--color-sky);
  border-color: var(--color-sky);
}

/* ============================================================
   SECTION UTILITIES
   Reusable classes for pattern sections.
   ============================================================ */

/* Zero-padding modifier — used when the inner component
   (e.g. .cz-trust-bar) controls its own padding. */
.cz-section--compact {
  padding: 0;
}

.cz-section {
  padding: var(--space-3xl) var(--space-md);
}

.cz-section--navy {
  background: var(--color-navy);
  color: var(--color-white);
}

.cz-section--light {
  background: #F8FAFC;
}

.cz-section__heading {
  color: var(--color-navy);
  font-family: var(--font-primary);
  font-weight: 700;
}

.cz-section--navy .cz-section__heading {
  color: var(--color-white);
}

.cz-btn--primary {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  background: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cz-btn--primary:hover {
  background: var(--color-orange-warm);
  color: var(--color-white);
  text-decoration: none;
}

.cz-btn--secondary {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-white);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cz-btn--secondary:hover {
  background: var(--color-white);
  color: var(--color-navy);
  text-decoration: none;
}

/* ============================================================
   HERO SLIDESHOW
   CSS-only crossfade through 5 photos. No JS, no dependencies.
   Images live in: /wp-content/themes/clean-zone-kadence-child/images/
   Upload as: hero-1.webp, hero-2.webp, hero-3.webp
   Each image holds ~4s, crossfade ~1s. Full cycle: 15s.
   ============================================================ */


.cz-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cz-hero__slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cz-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: translateX(100%);           /* default: waiting off-screen right */
  animation: czHeroSlide 18s ease-in-out infinite;
  will-change: transform;
}

/*
  18s cycle, 3 slides, 1s slide transition, 5s hold per image.
  Slide 1: delay -1s  → starts mid-animation, already on-screen at t=0
  Slide 2: delay  5s  → slides in at t=5s (overlaps with slide 1 leaving)
  Slide 3: delay 11s  → slides in at t=11s (overlaps with slide 2 leaving)
  Slide 1 loops at t=17s, back on-screen by t=18s (seamless).
*/
.cz-hero__slide:nth-child(1) { animation-delay:  -1s; }
.cz-hero__slide:nth-child(2) { animation-delay:   5s; }
.cz-hero__slide:nth-child(3) { animation-delay:  11s; }

@keyframes czHeroSlide {
  0%      { transform: translateX(100%); }   /* off right — waiting */
  5.56%   { transform: translateX(0%); }     /* 1s: fully slid in */
  33.33%  { transform: translateX(0%); }     /* 5s: hold */
  38.89%  { transform: translateX(-100%); }  /* 1s: fully slid out left */
  100%    { transform: translateX(-100%); }  /* waiting off left */
}

/* Navy overlay so text stays readable against any photo */
.cz-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(33, 63, 103, 0.65);
  z-index: 1;
}

/* Content sits above slideshow and overlay */
.cz-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Accessibility: freeze on first slide for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .cz-hero__slide {
    animation: none;
    transform: translateX(100%);
  }
  .cz-hero__slide:nth-child(1) {
    transform: translateX(0);
  }
}