/* Component-Specific Styles */

/* Logo Placeholder - Mystical Fox Theme */
.logo-placeholder {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary));
  border-radius: 50%;
  color: white;
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
  border: 2px solid var(--color-secondary-light);
  transition: all var(--transition-base);
}

.logo-placeholder:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4);
}

/* Service Icon Placeholders */
.service-emoji {
  font-size: 32px;
  display: block;
  line-height: 1;
}

/* Social Icon Placeholders */
.social-emoji {
  font-size: 24px;
  display: block;
  line-height: 1;
}

/* Override service icon styles for emoji - Mystical Theme */
.service-card .service-icon {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary)) !important;
  color: white;
  box-shadow: 0 8px 25px rgba(30, 58, 138, 0.2);
  border: 3px solid var(--color-secondary-light);
}

.service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent)) !important;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 12px 30px rgba(30, 58, 138, 0.3);
  color: white;
}

/* Override social link styles for emoji */
.social-link .social-emoji {
  filter: none;
}

/* Enhanced hover effects */
.service-card:hover .service-emoji {
  transform: scale(1.2);
  transition: transform var(--transition-base);
  filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.5));
}

.social-link:hover .social-emoji {
  transform: scale(1.1);
  transition: transform var(--transition-base);
}

/* Mystical decorative elements */
.section-header::before {
  content: '✧ ◦ ✧';
  display: block;
  color: var(--color-secondary);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
  letter-spacing: var(--space-md);
}

/* Add mystical sparkles to hero title */
.hero-title::after {
  content: ' ✦';
  color: var(--color-secondary-light);
  font-size: 0.8em;
  opacity: 0.8;
}

/* Magical gradient text effect for service titles */
.service-title {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}