/* ============================================
   MOOD SYSTEM
   Applied via body class: zs-mood-{name}
   Each mood overrides visual personality without
   changing structural patterns.

   All values reference :root --zs-* tokens.
   ============================================ */


/* ── Bold ── sharp edges, high contrast, punchy */

body.zs-mood-bold {
  --zs-radius: 0px;
  --zs-radius-lg: 0px;
}

body.zs-mood-bold .zs-service-card {
  border-left: 3px solid var(--zs-accent);
}

body.zs-mood-bold .zs-btn-primary .wp-block-button__link,
body.zs-mood-bold .zs-btn-outline .wp-block-button__link {
  text-transform: uppercase;
  letter-spacing: var(--zs-tracking-wider);
}

body.zs-mood-bold .zs-section-title {
  letter-spacing: var(--zs-tracking-tight);
}

body.zs-mood-bold .zs-cta {
  border-top: 3px solid var(--zs-accent);
  border-bottom: 3px solid var(--zs-accent);
}

body.zs-mood-bold .zs-stats-bar {
  border-top: 3px solid oklch(100% 0 0 / 0.15);
  border-bottom: 3px solid oklch(100% 0 0 / 0.15);
}

body.zs-mood-bold .zs-portfolio-card:hover img {
  transform: scale(1.06);
}

body.zs-mood-bold .zs-hero-heading {
  letter-spacing: var(--zs-tracking-tight);
  text-transform: uppercase;
}

body.zs-mood-bold .zs-eyebrow {
  letter-spacing: var(--zs-tracking-wider);
  font-weight: var(--zs-font-weight-black);
}

body.zs-mood-bold .zs-testimonial-card {
  border-left: 3px solid var(--zs-accent);
  border-radius: 0;
}

body.zs-mood-bold .zs-faq-section details summary {
  font-weight: var(--zs-font-weight-bold);
  text-transform: uppercase;
  font-size: var(--zs-text-sm);
  letter-spacing: var(--zs-tracking-wide);
}

body.zs-mood-bold .zs-badge {
  letter-spacing: var(--zs-tracking-wider);
  font-weight: var(--zs-font-weight-black);
}


/* ── Elegant ── generous whitespace, refined type, subtle shadows */

body.zs-mood-elegant {
  --zs-radius: 2px;
  --zs-radius-lg: 4px;
  --zs-section-padding: 5rem var(--zs-container-padding);
}

body.zs-mood-elegant .zs-hero {
  min-height: 75vh;
}

body.zs-mood-elegant .zs-hero-heading {
  letter-spacing: var(--zs-tracking-tight);
}

body.zs-mood-elegant .zs-service-card {
  border-bottom: var(--zs-border-width) solid var(--zs-border);
  border-left: none;
  padding: var(--zs-space-xl);
}

body.zs-mood-elegant .zs-service-card:hover {
  border-bottom-color: var(--zs-accent);
}

body.zs-mood-elegant .zs-testimonial-card blockquote {
  font-style: italic;
}

body.zs-mood-elegant .zs-badge {
  border: none;
  background: transparent;
  font-style: italic;
  letter-spacing: 0.05em;
}

body.zs-mood-elegant .zs-pullquote {
  border-left-width: var(--zs-border-width-thick);
  padding-left: var(--zs-space-xl);
}

body.zs-mood-elegant .zs-separator { max-width: 60px; }

body.zs-mood-elegant .zs-section-title {
  font-weight: var(--zs-font-weight-semibold);
}

body.zs-mood-elegant .zs-eyebrow {
  font-style: italic;
  letter-spacing: 0.05em;
}

body.zs-mood-elegant .zs-faq-section details summary {
  font-weight: var(--zs-font-weight-medium);
}

body.zs-mood-elegant .zs-stats-bar .zs-stat-value {
  font-weight: var(--zs-font-weight-semibold);
  letter-spacing: var(--zs-tracking-tight);
}

body.zs-mood-elegant .zs-cta-heading {
  font-weight: var(--zs-font-weight-semibold);
}


/* ── Warm ── rounded corners, cozy spacing, soft shadows */

body.zs-mood-warm {
  --zs-radius: 12px;
  --zs-radius-lg: 16px;
  --zs-section-padding: 4.5rem var(--zs-container-padding);
}

body.zs-mood-warm .zs-service-card {
  border-radius: 16px;
  box-shadow: var(--zs-shadow-sm);
}

body.zs-mood-warm .zs-service-card:hover {
  box-shadow: var(--zs-shadow-md);
  transform: translateY(-4px);
}

body.zs-mood-warm .zs-testimonial-card {
  border-radius: 16px;
}

body.zs-mood-warm .zs-btn-primary .wp-block-button__link {
  border-radius: var(--zs-btn-radius);
}

body.zs-mood-warm .zs-btn-outline .wp-block-button__link {
  border-radius: var(--zs-btn-radius);
}

body.zs-mood-warm .zs-badge {
  border-radius: var(--zs-pill);
}

body.zs-mood-warm .zs-portfolio-card {
  border-radius: 12px;
  overflow: hidden;
}

body.zs-mood-warm .zs-faq-section details {
  border-radius: var(--zs-radius);
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  background: var(--zs-bg-alt);
  border: none;
}

body.zs-mood-warm .zs-stats-bar {
  background: var(--zs-primary);
  color: #fff;
}

body.zs-mood-warm .zs-stats-bar .zs-stat__value {
  color: #fff;
}

body.zs-mood-warm .zs-stats-bar .zs-stat__label {
  color: inherit;
  opacity: 0.8;
}

body.zs-mood-warm .zs-stats-bar .zs-stat + .zs-stat::before {
  background: oklch(100% 0 0 / 0.2);
}

body.zs-mood-warm .zs-cta {
  background: var(--zs-primary);
  color: #fff;
}

body.zs-mood-warm .zs-cta .zs-cta__heading {
  color: #fff;
}

body.zs-mood-warm .zs-cta .zs-cta__desc {
  color: inherit;
  opacity: 0.9;
}

body.zs-mood-warm .zs-section-title {
  font-weight: var(--zs-font-weight-bold);
}

body.zs-mood-warm .zs-pricing-card {
  border-radius: 16px;
}


/* ── Clean ── minimal, lots of white space, barely-there borders */

body.zs-mood-clean {
  --zs-radius: 4px;
  --zs-radius-lg: 6px;
  --zs-section-padding: 5rem var(--zs-container-padding);
}

body.zs-mood-clean .zs-section-alt {
  background: transparent;
}

body.zs-mood-clean .zs-hero {
  min-height: 70vh;
}

body.zs-mood-clean .zs-hero-heading {
  font-weight: var(--zs-font-weight-normal);
}

body.zs-mood-clean .zs-service-card {
  border: none;
  padding: var(--zs-space-xl) 0;
  border-bottom: var(--zs-border-width) solid var(--zs-border-light);
  border-radius: 0;
}

body.zs-mood-clean .zs-service-card:hover {
  border-bottom-color: var(--zs-accent);
  background: transparent;
}

/* Mood-clean only styles the DEFAULT variants of each block - when a designer
 * explicitly picks --dark / --primary / --gradient / --banner, that variant wins.
 * Pre-5.3.5 these rules forced every CTA + stats-bar to clean white regardless
 * of variant, silently breaking dark/primary/banner choices on mood-clean sites. */

body.zs-mood-clean .zs-stats-bar--transparent,
body.zs-mood-clean .zs-stats-bar--editorial {
  background: var(--zs-bg);
  color: var(--zs-text);
  border-top: var(--zs-border-width) solid var(--zs-border);
  border-bottom: var(--zs-border-width) solid var(--zs-border);
}

body.zs-mood-clean .zs-stats-bar--transparent .zs-stat-value,
body.zs-mood-clean .zs-stats-bar--editorial .zs-stat-value {
  color: var(--zs-heading);
}

body.zs-mood-clean .zs-stats-bar--transparent .zs-stat-label,
body.zs-mood-clean .zs-stats-bar--editorial .zs-stat-label {
  color: var(--zs-text-muted);
}

body.zs-mood-clean .zs-cta--minimal {
  background: var(--zs-bg-alt);
  color: var(--zs-text);
}

body.zs-mood-clean .zs-cta--minimal .zs-cta-heading,
body.zs-mood-clean .zs-cta--minimal .zs-cta__heading {
  color: var(--zs-heading);
}

body.zs-mood-clean .zs-cta--minimal .zs-cta-desc,
body.zs-mood-clean .zs-cta--minimal .zs-cta__desc {
  color: var(--zs-text-secondary);
}

body.zs-mood-clean .zs-testimonial-card {
  background: transparent;
  border: var(--zs-border-width) solid var(--zs-border-light);
}

body.zs-mood-clean .zs-badge {
  background: transparent;
  border: var(--zs-border-width) solid var(--zs-border);
  color: var(--zs-text-muted);
}

body.zs-mood-clean .zs-faq-section details {
  border-bottom-color: var(--zs-border-light);
}

body.zs-mood-clean .zs-pricing-card {
  border: var(--zs-border-width) solid var(--zs-border-light);
  box-shadow: none;
}


/* ── Vibrant ── gradient overlays, bold dividers, pop animations */

body.zs-mood-vibrant {
  --zs-radius: 8px;
  --zs-radius-lg: 12px;
}

body.zs-mood-vibrant .zs-hero {
  background-blend-mode: overlay;
}

body.zs-mood-vibrant .zs-stats-bar {
  background: linear-gradient(135deg, var(--zs-primary), var(--zs-secondary));
  color: #fff;
}

body.zs-mood-vibrant .zs-stats-bar .zs-stat__value {
  color: #fff;
}

body.zs-mood-vibrant .zs-stats-bar .zs-stat__label {
  color: inherit;
  opacity: 0.8;
}

body.zs-mood-vibrant .zs-cta {
  background: linear-gradient(135deg, var(--zs-primary), var(--zs-secondary));
  color: #fff;
}

body.zs-mood-vibrant .zs-cta .zs-cta__heading {
  color: #fff;
}

body.zs-mood-vibrant .zs-cta .zs-cta__desc {
  color: inherit;
  opacity: 0.9;
}

body.zs-mood-vibrant .zs-service-card {
  border-top: 3px solid transparent;
  background-clip: padding-box;
}

body.zs-mood-vibrant .zs-service-card:hover {
  border-image: linear-gradient(135deg, var(--zs-primary), var(--zs-secondary)) 1;
}

body.zs-mood-vibrant .zs-btn-primary .wp-block-button__link {
  background: linear-gradient(135deg, var(--zs-primary), var(--zs-secondary));
}

body.zs-mood-vibrant .zs-badge {
  background: linear-gradient(135deg, var(--zs-primary), var(--zs-secondary));
  color: #fff;
  border: none;
}

body.zs-mood-vibrant .zs-portfolio-card:hover img {
  filter: saturate(1.3);
  transform: scale(1.04);
}

body.zs-mood-vibrant .zs-testimonial-card {
  border-left: 3px solid var(--zs-secondary);
}

body.zs-mood-vibrant .zs-section-title {
  background: linear-gradient(135deg, var(--zs-primary), var(--zs-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.zs-mood-vibrant .zs-pricing-card.is-featured {
  border-image: linear-gradient(135deg, var(--zs-primary), var(--zs-secondary)) 1;
}

body.zs-mood-vibrant .zs-faq-section details[open] summary {
  color: var(--zs-secondary);
}


/* ── Heritage ── dark palette, editorial feel, structured borders */

body.zs-mood-heritage {
  --zs-radius: 0px;
  --zs-radius-lg: 0px;
  --zs-section-padding: 5rem var(--zs-container-padding);
}

body.zs-mood-heritage .zs-hero-heading {
  font-style: italic;
}

body.zs-mood-heritage .zs-service-card {
  border: var(--zs-border-width) solid var(--zs-border);
  padding: var(--zs-space-xl);
}

body.zs-mood-heritage .zs-service-card:hover {
  background: var(--zs-bg-alt);
}

body.zs-mood-heritage .zs-stats-bar {
  border-top: 3px solid var(--zs-accent);
  border-bottom: 3px solid var(--zs-accent);
}

body.zs-mood-heritage .zs-testimonial-card {
  border: var(--zs-border-width) solid var(--zs-border);
}

body.zs-mood-heritage .zs-cta {
  border-top: 3px solid var(--zs-accent);
}

body.zs-mood-heritage .zs-badge {
  background: var(--zs-accent);
  color: #fff;
  border: none;
  font-variant: small-caps;
  letter-spacing: var(--zs-tracking-wider);
}

body.zs-mood-heritage .zs-pullquote {
  font-size: 1.4rem;
  font-style: italic;
  border-left: 3px solid var(--zs-accent);
}

body.zs-mood-heritage .zs-separator {
  background: var(--zs-accent);
  height: var(--zs-border-width-thick);
}

body.zs-mood-heritage .zs-section-title {
  font-style: italic;
  font-weight: var(--zs-font-weight-bold);
}

body.zs-mood-heritage .zs-eyebrow {
  font-variant: small-caps;
  letter-spacing: var(--zs-tracking-wider);
}

body.zs-mood-heritage .zs-faq-section details {
  border-bottom: var(--zs-border-width) solid var(--zs-border);
}

body.zs-mood-heritage .zs-faq-section details summary {
  font-style: italic;
}

body.zs-mood-heritage .zs-pricing-card {
  border: var(--zs-border-width) solid var(--zs-border);
}

body.zs-mood-heritage .zs-pricing-card.is-featured {
  border-color: var(--zs-accent);
  border-width: var(--zs-border-width-thick);
}