/* ========================================
   SENKIDZSF DESIGN SYSTEM
   Warm, Professional, Growth-Oriented
   ======================================== */

/* Typography */
body {
  font-family: var(--body-font);
  color: var(--neutral-dark);
  background-color: var(--neutral-light);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--neutral-dark);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-md);
}

h1 { font-size: 2.75rem; letter-spacing: -0.02em; }
h2 { font-size: 2.25rem; letter-spacing: -0.01em; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.35rem; }

p {
  margin-bottom: var(--space-md);
  color: var(--neutral-dark);
}

.lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--neutral-medium);
}

/* Buttons */
.btn-primary, 
.wp-block-button__link,
.kb-btn {
  background-color: var(--primary);
  color: var(--neutral-white) !important;
  border-radius: var(--radius-sm);
  padding: 14px 32px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: none;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.wp-block-button__link:hover,
.kb-btn:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: var(--accent-coral);
  color: var(--neutral-white) !important;
  border-radius: var(--radius-sm);
  padding: 14px 32px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background-color: var(--accent-coral);
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Cards & Sections */
.content-card {
  background: var(--neutral-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.content-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

section {
  padding: var(--space-xl) 0;
}

.section-accent {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
  color: var(--neutral-white);
}

.section-accent h1,
.section-accent h2,
.section-accent h3 {
  color: var(--neutral-white);
}

/* Accent Decorations */
.accent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 8px;
}

.accent-dot.coral { background-color: var(--accent-coral); }
.accent-dot.yellow { background-color: var(--accent-yellow); }
.accent-dot.purple { background-color: var(--accent-purple); }
.accent-dot.teal { background-color: var(--primary); }

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--neutral-white);
  padding: var(--space-xl) 0;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
}

/* Service Cards */
.service-item {
  background: var(--neutral-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  border-left: 4px solid var(--primary);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.service-item:hover {
  border-left-color: var(--accent-coral);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

/* Therapist Cards */
.therapist-card {
  background: var(--neutral-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.therapist-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}

.therapist-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.therapist-card-content {
  padding: var(--space-md);
}

/* Colorful Accents */
.accent-bg-coral { background-color: var(--accent-coral-light); }
.accent-bg-yellow { background-color: var(--accent-yellow-light); }
.accent-bg-purple { background-color: var(--accent-purple-light); }
.accent-bg-teal { background-color: var(--primary-light); }

/* Spacing Utilities */
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* WordPress Block Overrides */
.wp-block-columns {
  margin-bottom: var(--space-lg);
}

.wp-block-column {
  padding: var(--space-sm);
}

/* Navigation */
.site-header {
  background: var(--neutral-white);
  box-shadow: var(--shadow-sm);
}

/* Footer */
.site-footer {
  background: var(--neutral-dark);
  color: var(--neutral-white);
  padding: var(--space-xl) 0;
}

.site-footer a {
  color: var(--primary-light);
}

.site-footer a:hover {
  color: var(--accent-yellow);
}