/* Companion content styles for lesson pages */
.companion-content { margin-top: 2rem; }
.companion-content .cc-section { margin-bottom: 30px; }
.companion-content .cc-section h2 {
  color: var(--c-orange); font-size: 1.15em; font-weight: 600;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.companion-content .cc-section p { color: var(--c-text); margin-bottom: 12px; }
.companion-content .cc-list { list-style: none; padding: 0; }
.companion-content .cc-list li {
  padding: 10px 15px; margin-bottom: 8px; background: white;
  border-radius: var(--radius-sm); border-right: 3px solid var(--c-teal);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.companion-content .cc-highlight {
  background: linear-gradient(135deg, var(--c-teal-pale) 0%, #e8f4f6 100%);
  padding: 20px; border-radius: 10px; margin: 20px 0;
}
.companion-content .cc-highlight p { font-size: 1.05em; color: var(--c-teal); margin: 0; }
.companion-content .cc-info-box {
  background: white; border: 1px solid #e0e0e0; border-radius: 10px;
  padding: 20px; margin: 20px 0;
}
.companion-content .cc-info-box h3 { color: var(--c-text); font-size: 1em; margin-bottom: 12px; }
.companion-content .cc-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.companion-content .cc-info-item { display: flex; align-items: center; gap: 8px; font-size: 0.95em; color: var(--c-text-soft); }
.companion-content .cc-info-item .icon { color: var(--c-teal); }
.companion-content .cc-takeaway {
  background: #fff9f0; border-radius: 10px; padding: 20px; margin-top: 25px;
}
.companion-content .cc-takeaway h3 { color: var(--c-orange); font-size: 1em; margin-bottom: 10px; }
.companion-content .cc-takeaway p { color: var(--c-text-soft); margin: 0; }
.companion-content .cc-important {
  background: #fff9f0; border-radius: 10px; padding: 20px; margin: 20px 0;
  border-right: 4px solid var(--c-orange);
}
.companion-content .cc-important h3 { color: var(--c-orange); font-size: 1em; margin-bottom: 10px; }
.companion-content .cc-important p { color: var(--c-text); margin-bottom: 8px; }
.companion-content .cc-task-section {
  background: #fef7ed; border-radius: 12px; padding: 24px; margin-top: 30px;
  border: 2px solid var(--c-orange);
}
.companion-content .cc-task-section h2 {
  color: var(--c-orange); font-size: 1.2em; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.companion-content .cc-warning {
  background: #fff0f0; border-radius: 10px; padding: 18px; margin: 20px 0;
  border-right: 4px solid #e85a5a;
}
.companion-content .cc-warning h3 { color: #c44; font-size: 1em; margin-bottom: 8px; }
.companion-content .cc-warning p { color: #666; margin: 0; }
.companion-content .cc-tip {
  background: #f0fff4; border-radius: 10px; padding: 18px; margin: 20px 0;
  border-right: 4px solid #4caf50;
}
.companion-content .cc-tip h3 { color: #2d6a2d; font-size: 1em; margin-bottom: 8px; }
.companion-content .cc-tip p { color: #2d6a2d; margin: 0; }
.companion-content .cc-example {
  background: #f8f5ff; border-radius: 10px; padding: 18px; margin: 15px 0;
  border-right: 4px solid #9b7ec8;
}
.companion-content .cc-example h3 { color: #6b4c9a; font-size: 1em; margin-bottom: 10px; }
.companion-content .cc-example p { color: var(--c-text); margin-bottom: 8px; }
.companion-content .cc-example ul { list-style: none; padding: 0; }
.companion-content .cc-example ul li { padding: 5px 0; color: var(--c-text); border: none; box-shadow: none; background: none; }
.companion-content .cc-example ul li::before { content: "\2022 "; color: #9b7ec8; font-weight: bold; }
.companion-content .cc-def-grid { display: grid; gap: 12px; margin: 15px 0; }
.companion-content .cc-def-item {
  background: white; padding: 15px; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.companion-content .cc-def-item strong { color: var(--c-teal); }
.companion-content .cc-reassurance {
  background: linear-gradient(135deg, #e8f4e8 0%, #f0f7f0 100%);
  padding: 18px; border-radius: 10px; margin: 20px 0;
}
.companion-content .cc-reassurance p { color: #2d6a2d; margin: 0; font-size: 0.95em; }
.companion-content .cc-task-box {
  background: white; border: 2px solid var(--c-teal); border-radius: 12px;
  padding: 20px; margin: 25px 0;
}
.companion-content .cc-task-box h3 { color: var(--c-teal); margin-bottom: 12px; }
.companion-content .cc-metaphor {
  background: linear-gradient(135deg, #faf0e6 0%, #f5e6d3 100%);
  padding: 20px; border-radius: 10px; margin: 20px 0;
}
.companion-content .cc-metaphor p { color: #8b7355; margin: 0; }
.companion-content .cc-example .child { color: var(--c-orange); font-weight: 500; }
.companion-content .cc-example .parent { color: var(--c-teal); font-weight: 500; }
@media (max-width: 600px) {
  .companion-content .cc-info-grid { grid-template-columns: 1fr; }
}