/* Essential Editor.js theming - cannot be replaced with Tailwind */
.codex-editor {
  min-height: 300px;
  padding: 1rem;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.codex-editor .ce-block__content {
  color: var(--color-text-primary);
}

.codex-editor .ce-paragraph {
  color: var(--color-text-primary);
  font-size: 1.125rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.codex-editor .ce-header {
  color: var(--color-text-primary);
  font-weight: bold;
}

/* Header level styling for real-time preview */
.codex-editor .ce-header[data-level="1"] {
  font-size: 2.25rem;
  line-height: 2.5rem;
  margin-bottom: 1rem;
}

.codex-editor .ce-header[data-level="2"] {
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin-bottom: 0.75rem;
}

.codex-editor .ce-header[data-level="3"] {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 0.5rem;
}

.codex-editor .ce-header[data-level="4"] {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 0.5rem;
}

.codex-editor .ce-toolbar__content {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.codex-editor .ce-toolbar__settings-btn {
  color: var(--color-text-primary);
}

.codex-editor .ce-toolbar__settings-btn:hover {
  background-color: var(--color-bg-tertiary);
}

.codex-editor .ce-toolbox {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.codex-editor .ce-toolbox__button {
  color: var(--color-text-primary);
}

.codex-editor .ce-toolbox__button:hover {
  background-color: var(--color-bg-tertiary);
}

.codex-editor .ce-inline-toolbar {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.codex-editor .ce-inline-tool {
  color: var(--color-text-primary);
}

.codex-editor .ce-inline-tool:hover {
  background-color: var(--color-bg-tertiary);
}

.codex-editor .ce-conversion-toolbar {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.codex-editor .ce-conversion-tool {
  color: var(--color-text-primary);
}

.codex-editor .ce-conversion-tool:hover {
  background-color: var(--color-bg-tertiary);
}

/* Marketing content display styles */
.marketing-content {
  max-width: none;
  font-size: 1.125rem;
  line-height: 1.75;
}

.marketing-content h1,
.marketing-content h2,
.marketing-content h3,
.marketing-content h4 {
  font-weight: bold;
  color: var(--color-text-primary);
}

.marketing-content h1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  margin-bottom: 1rem;
}

.marketing-content h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin-bottom: 0.75rem;
}

.marketing-content h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 0.5rem;
}

.marketing-content h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 0.5rem;
}

.marketing-content p {
  color: var(--color-text-primary);
  line-height: 1.625;
  margin-bottom: 1rem;
}

.marketing-content a {
  color: var(--color-accent);
  text-decoration: underline;
}

.marketing-content a:hover {
  color: var(--color-accent-hover);
}

.marketing-content strong {
  font-weight: bold;
  color: var(--color-text-primary);
}

.marketing-content em {
  font-style: italic;
}

.marketing-content u {
  text-decoration: underline;
}

.marketing-content del {
  text-decoration: line-through;
}

.marketing-content ul,
.marketing-content ol {
  padding-left: 1.5rem;
}

.marketing-content li {
  margin-bottom: 0.5rem;
}

/* Responsive adjustments for mobile */
@media (max-width: 480px) {
  .codex-editor {
    min-height: 250px;
    padding: 0.5rem;
  }
}