/* ===========================
   Child Safety Page Styles
   ======================== */

/* Inherit all styles from shared legal styles */
@import '/legal/privacy/styles.css';

/* Additional Child Safety specific styles */

.legal-header {
  background: linear-gradient(135deg, var(--surface-secondary), #e8f4f8);
  border-bottom: 3px solid var(--accent);
}

.legal-section {
  scroll-margin-top: 100px;
}

/* Emphasis box for important child safety information */
.child-safety-notice {
  background-color: #fff3cd;
  border-left: 5px solid #ff9800;
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
}

.child-safety-notice h3 {
  color: #d84315;
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}

.child-safety-notice p {
  color: #5d4037;
  margin-bottom: 0;
}

/* Critical emergency information styling */
.emergency-box {
  background-color: #ffebee;
  border-left: 5px solid var(--color-utility-error);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: 0 2px 8px rgba(239, 52, 52, 0.1);
}

.emergency-box h3 {
  color: #c62828;
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}

.emergency-box p {
  color: #b71c1c;
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
}

.emergency-box a {
  color: #d32f2f;
  font-weight: var(--font-weight-bold);
}

/* Positive/safe practices box */
.safety-positive-box {
  background-color: #e8f5e9;
  border-left: 5px solid #4caf50;
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.safety-positive-box h3 {
  color: #2e7d32;
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}

.safety-positive-box p {
  color: #388e3c;
  margin-bottom: 0;
}

/* Compliance badges */
.compliance-badge {
  display: inline-block;
  background-color: var(--color-accents);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: var(--spacing-sm) var(--spacing-md);
  margin: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  font-size: var(--font-size-body-md);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.compliance-badges {
  margin: var(--spacing-lg) 0;
  display: flex;
  flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .child-safety-notice,
  .emergency-box,
  .safety-positive-box {
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
  }

  .child-safety-notice h3,
  .emergency-box h3,
  .safety-positive-box h3 {
    font-size: var(--font-size-body-lg);
  }

  .compliance-badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-caption);
  }
}

/* Dark mode support for child safety specific elements */
@media (prefers-color-scheme: dark) {
  .child-safety-notice {
    background-color: #4a3c1a;
    border-left-color: #ff9800;
  }

  .child-safety-notice h3 {
    color: #ffb74d;
  }

  .child-safety-notice p {
    color: #ffe0b2;
  }

  .emergency-box {
    background-color: #3c1c1c;
    border-left-color: var(--color-utility-error);
  }

  .emergency-box h3 {
    color: #ef5350;
  }

  .emergency-box p {
    color: #e57373;
  }

  .emergency-box a {
    color: #ef5350;
  }

  .safety-positive-box {
    background-color: #1c3a1c;
    border-left-color: #4caf50;
  }

  .safety-positive-box h3 {
    color: #66bb6a;
  }

  .safety-positive-box p {
    color: #81c784;
  }
}