/* =============================================================
   KLARAVEX — Healthcare Project Styles
   Loaded on service pages when healthcare project is detected.
   Extends services.css with healthcare-specific styling.
   ============================================================= */

/* ── Healthcare-themed color accents ── */
:root {
  --healthcare-accent: #0ea5e9;
  --healthcare-light: #dbeafe;
  --healthcare-dark: #1d4ed8;
  --healthcare-border: rgba(14, 165, 233, 0.2);
}

/* ── Healthcare-specific section styling ── */
.kx-service-content .healthcare-highlight,
.kx-page .entry-content .healthcare-highlight {
  background: var(--healthcare-light) !important;
  border-left: 4px solid var(--healthcare-accent) !important;
  padding: 16px !important;
  margin: 20px 0 !important;
  border-radius: 0 8px 8px 0 !important;
}

.kx-service-content .healthcare-hero-highlight,
.kx-page .entry-content .healthcare-hero-highlight {
  background: var(--healthcare-light) !important;
  border-left: 4px solid var(--healthcare-accent) !important;
  padding: 16px !important;
  margin: 20px 0 !important;
  border-radius: 0 8px 8px 0 !important;
}

/* ── Healthcare-specific callout styling ── */
.kx-service-content .healthcare-callout,
.kx-page .entry-content .healthcare-callout {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 8px !important;
  background: rgba(14, 165, 233, 0.05) !important;
  border: 1px solid var(--healthcare-border) !important;
  margin: 24px 0 !important;
}

.kx-service-content .healthcare-callout-icon,
.kx-page .entry-content .healthcare-callout-icon {
  color: var(--healthcare-accent) !important;
  font-size: 20px !important;
  min-width: 20px !important;
}

.kx-service-content .healthcare-callout-content,
.kx-page .entry-content .healthcare-callout-content {
  flex: 1 !important;
}

/* ── Healthcare-specific service cards styling ── */
.kx-service-content .wp-block-column[style*="background-color:#161B22"],
.kx-page .entry-content .wp-block-column[style*="background-color:#161B22"] {
  transition: all 0.3s cubic-bezier(.16,1,.3,1) !important;
}

.kx-service-content .wp-block-column[style*="background-color:#161B22"]:hover,
.kx-page .entry-content .wp-block-column[style*="background-color:#161B22"]:hover {
  background-color: var(--lift) !important;
  border-color: var(--healthcare-border) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px var(--healthcare-border) !important;
}

/* ── Healthcare-specific buttons styling ── */
.kx-service-content .wp-block-button__link,
.kx-page .entry-content .wp-block-button__link {
  background: linear-gradient(135deg, var(--healthcare-dark), var(--healthcare-accent)) !important;
  color: white !important;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.35) !important;
}

.kx-service-content .wp-block-button__link:hover,
.kx-page .entry-content .wp-block-button__link:hover {
  background: linear-gradient(135deg, var(--healthcare-accent), var(--healthcare-dark)) !important;
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
}

/* ── Healthcare-specific heading styling ── */
.kx-service-content .wp-block-heading[style*="font-size:24px"],
.kx-service-content .wp-block-heading[style*="font-size:22px"],
.kx-service-content .wp-block-heading[style*="font-size:20px"],
.kx-service-content .wp-block-heading[style*="font-size:18px"],
.kx-page .entry-content .wp-block-heading[style*="font-size:24px"],
.kx-page .entry-content .wp-block-heading[style*="font-size:22px"],
.kx-page .entry-content .wp-block-heading[style*="font-size:20px"],
.kx-page .entry-content .wp-block-heading[style*="font-size:18px"] {
  letter-spacing: -0.02em !important;
}

/* ── Healthcare-specific list styling ── */
.kx-service-content .wp-block-list,
.kx-page .entry-content .wp-block-list {
  color: var(--dim) !important;
  padding-left: 1.4em !important;
}

.kx-service-content .wp-block-list li::marker,
.kx-page .entry-content .wp-block-list li::marker {
  color: var(--healthcare-accent) !important;
}

/* ── Responsive healthcare styling ── */
@media (max-width: 768px) {
  .kx-service-content .healthcare-highlight,
  .kx-page .entry-content .healthcare-highlight,
  .kx-service-content .healthcare-hero-highlight,
  .kx-page .entry-content .healthcare-hero-highlight {
    margin: 16px 0 !important;
    padding: 12px !important;
  }
}