/**
 * @file
 * Frontend styles for CKEditor Factbox.
 *
 * Collapsible factbox with chevron toggle.
 */

.ckeditor-factbox {
  background: #f0f0f0;
  border-radius: 4px;
  margin: 3rem 0;
  overflow: hidden;
}

/* Header row: title + chevron toggle */
.ckeditor-factbox .factbox-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 2rem 2rem 1.5rem;
  cursor: pointer;
  user-select: none;
}

.ckeditor-factbox .factbox-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.3;
  flex: 1;
  padding-right: 1rem;
}

/* Chevron SVG icon — points down by default. The SVG path uses currentColor;
   this color matches the fill previously hardcoded in the SVG so the default
   look is unchanged, while color variants can restyle it. */
.ckeditor-factbox .factbox-toggle-icon {
  flex-shrink: 0;
  width: 16px;
  height: 12px;
  margin-top: 2px;
  color: #006875;
  transition: transform 0.25s ease;
  transform: rotate(180deg);
}

/* Chevron rotates to point up when expanded */
.ckeditor-factbox.is-expanded .factbox-toggle-icon {
  transform: rotate(0deg);
}

/* Content area — collapsed by default, ~2 lines visible with gradient */
.ckeditor-factbox .factbox-content {
  padding: 0 1.75rem 0;
  overflow: hidden;
  position: relative;
  max-height: 85px; /* ~2 lines at 1.6 line-height */
  transition: max-height 0.35s ease, padding 0.35s ease;
}

/* Gradient fade at bottom of preview */
.ckeditor-factbox .factbox-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 67px;
  background: linear-gradient(to bottom, transparent, #F4F4F4, #F4F4F4);
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Expanded — full height, no gradient */
.ckeditor-factbox.is-expanded .factbox-content {
  max-height: 2000px;
  padding-bottom: 1.75rem;
}

.ckeditor-factbox.is-expanded .factbox-content::after {
  opacity: 0;
}

.ckeditor-factbox .factbox-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1rem;
}

.ckeditor-factbox .factbox-content > *:first-child {
  margin-top: 0;
}

.ckeditor-factbox .factbox-content > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Color variants — brand palette modifiers set by the editor's color
   dropdown. Default (no modifier) keeps the original grey.
   ========================================================================== */

.ckeditor-factbox.ckeditor-factbox--kendrew { background: #006875; }
.ckeditor-factbox.ckeditor-factbox--krogh { background: #E0F8FE; }
.ckeditor-factbox.ckeditor-factbox--einstein { background: #D6E82B; }
.ckeditor-factbox.ckeditor-factbox--esaki { background: #F2FCC0; }
.ckeditor-factbox.ckeditor-factbox--rainwater { background: #C0C1FF; }
.ckeditor-factbox.ckeditor-factbox--wilsom { background: #F4F4F4; }
.ckeditor-factbox.ckeditor-factbox--weller { background: #000000; }

/* The collapsed-preview gradient must fade into the variant background. */
.ckeditor-factbox.ckeditor-factbox--kendrew .factbox-content::after { background: linear-gradient(to bottom, transparent, #006875, #006875); }
.ckeditor-factbox.ckeditor-factbox--krogh .factbox-content::after { background: linear-gradient(to bottom, transparent, #E0F8FE, #E0F8FE); }
.ckeditor-factbox.ckeditor-factbox--einstein .factbox-content::after { background: linear-gradient(to bottom, transparent, #D6E82B, #D6E82B); }
.ckeditor-factbox.ckeditor-factbox--esaki .factbox-content::after { background: linear-gradient(to bottom, transparent, #F2FCC0, #F2FCC0); }
.ckeditor-factbox.ckeditor-factbox--rainwater .factbox-content::after { background: linear-gradient(to bottom, transparent, #C0C1FF, #C0C1FF); }
.ckeditor-factbox.ckeditor-factbox--wilsom .factbox-content::after { background: linear-gradient(to bottom, transparent, #F4F4F4, #F4F4F4); }
.ckeditor-factbox.ckeditor-factbox--weller .factbox-content::after { background: linear-gradient(to bottom, transparent, #000000, #000000); }

/* Dark backgrounds (Kendrew, Weller) need light text and a light chevron. */
.ckeditor-factbox.ckeditor-factbox--kendrew .factbox-title,
.ckeditor-factbox.ckeditor-factbox--weller .factbox-title {
  color: #ffffff;
}

.ckeditor-factbox.ckeditor-factbox--kendrew .factbox-content,
.ckeditor-factbox.ckeditor-factbox--kendrew .factbox-content p,
.ckeditor-factbox.ckeditor-factbox--weller .factbox-content,
.ckeditor-factbox.ckeditor-factbox--weller .factbox-content p {
  color: #ffffff;
}

.ckeditor-factbox.ckeditor-factbox--kendrew .factbox-content a,
.ckeditor-factbox.ckeditor-factbox--weller .factbox-content a {
  color: #ffffff;
}

.ckeditor-factbox.ckeditor-factbox--kendrew .factbox-toggle-icon,
.ckeditor-factbox.ckeditor-factbox--weller .factbox-toggle-icon {
  color: #ffffff;
}