/*
 * Lexxy Editor Custom Content Styles
 *
 * These styles ensure the Lexxy editor content area matches
 * the rendered document view styling.
 *
 * Using !important to override Lexxy's default styles.
 * Using higher specificity to ensure these styles win.
 */

/* Hide the rendered content div when editor is active */
lexxy-editor:not(.lexxy-editor--empty) div.lexxy-content {
  display: none !important;
}

/* Target BOTH the editor content AND the rendered content */
lexxy-editor div[contenteditable="true"].lexxy-editor__content,
lexxy-editor div.lexxy-content,
.lexxy-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #333 !important;
  padding: 24px !important;
  cursor: text !important;
  user-select: text !important;
}

/* Ensure the editable area is interactive */
lexxy-editor div[contenteditable="true"].lexxy-editor__content {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Headings - light blue color matching view mode */
lexxy-editor div.lexxy-editor__content h1,
lexxy-editor div.lexxy-content h1,
.lexxy-content h1,
lexxy-editor div.lexxy-editor__content h2,
lexxy-editor div.lexxy-content h2,
.lexxy-content h2,
lexxy-editor div.lexxy-editor__content h3,
lexxy-editor div.lexxy-content h3,
.lexxy-content h3,
lexxy-editor div.lexxy-editor__content h4,
lexxy-editor div.lexxy-content h4,
.lexxy-content h4,
lexxy-editor div.lexxy-editor__content h5,
lexxy-editor div.lexxy-content h5,
.lexxy-content h5,
lexxy-editor div.lexxy-editor__content h6,
lexxy-editor div.lexxy-content h6,
.lexxy-content h6 {
  color: #3baaf0 !important;
  font-weight: 400 !important;
  margin-bottom: 0.5em !important;
  line-height: 1.2 !important;
}

lexxy-editor div.lexxy-editor__content h1,
lexxy-editor div.lexxy-content h1,
.lexxy-content h1 {
  font-size: 26px !important;
  margin-top: 2.2em !important;
}

lexxy-editor div.lexxy-editor__content h1:first-of-type,
lexxy-editor div.lexxy-content h1:first-of-type,
.lexxy-content h1:first-of-type,
lexxy-editor div.lexxy-editor__content h2:first-of-type,
lexxy-editor div.lexxy-content h2:first-of-type,
.lexxy-content h2:first-of-type,
lexxy-editor div.lexxy-editor__content h3:first-of-type,
lexxy-editor div.lexxy-content h3:first-of-type,
.lexxy-content h3:first-of-type {
  margin-top: 0.4em !important;
}

lexxy-editor div.lexxy-editor__content h2,
lexxy-editor div.lexxy-content h2,
.lexxy-content h2 {
  font-size: 22px !important;
  margin-top: 2em !important;
  padding-left: 0 !important;
}

lexxy-editor div.lexxy-editor__content h3,
lexxy-editor div.lexxy-content h3,
.lexxy-content h3 {
  font-size: 20px !important;
  margin-top: 1.5em !important;
  padding-left: 0 !important;
}

lexxy-editor div.lexxy-editor__content h4,
lexxy-editor div.lexxy-content h4,
.lexxy-content h4 {
  font-size: 18px !important;
  margin-top: 1.5em !important;
}

/* Paragraphs */
lexxy-editor div.lexxy-editor__content p,
lexxy-editor div.lexxy-content p,
.lexxy-content p {
  margin: 0 0 0.25em 0 !important;
  line-height: 1.5 !important;
}

/* Lists */
lexxy-editor div.lexxy-editor__content ul,
lexxy-editor div.lexxy-content ul,
.lexxy-content ul {
  margin: 0 0 1em 0 !important;
  padding-left: 1.5em !important;
  list-style-type: disc !important;
}

lexxy-editor div.lexxy-editor__content ol,
lexxy-editor div.lexxy-content ol,
.lexxy-content ol {
  margin: 0 0 1em 0 !important;
  padding-left: 1.5em !important;
}

lexxy-editor div.lexxy-editor__content li,
lexxy-editor div.lexxy-content li,
.lexxy-content li {
  margin-bottom: 0.5em !important;
  line-height: 1.5 !important;
}

/* Links - matching editor blue */
lexxy-editor div.lexxy-editor__content a,
lexxy-editor div.lexxy-content a,
.lexxy-content a {
  color: #2577c9 !important;
  text-decoration: none !important;
}

lexxy-editor div.lexxy-editor__content a:hover,
lexxy-editor div.lexxy-content a:hover,
.lexxy-content a:hover {
  text-decoration: underline !important;
}

/* Blockquotes - but NOT tip-box-blockquotes */
lexxy-editor div.lexxy-editor__content blockquote:not(.tip-box-blockquote),
lexxy-editor div.lexxy-content blockquote:not(.tip-box-blockquote),
.lexxy-content blockquote:not(.tip-box-blockquote) {
  border-left: 4px solid #3baaf0 !important;
  padding-left: 1em !important;
  margin: 1em 0 !important;
  color: #666 !important;
}

/* Code */
lexxy-editor div.lexxy-editor__content code,
lexxy-editor div.lexxy-content code,
.lexxy-content code {
  background-color: #f3f4f6 !important;
  padding: 0.2em 0.4em !important;
  border-radius: 3px !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 0.9em !important;
}

lexxy-editor div.lexxy-editor__content pre,
lexxy-editor div.lexxy-content pre,
.lexxy-content pre {
  background-color: #f3f4f6 !important;
  padding: 1em !important;
  border-radius: 5px !important;
  overflow-x: auto !important;
  margin: 1.5em 0 !important;
}

lexxy-editor div.lexxy-editor__content pre code,
lexxy-editor div.lexxy-content pre code,
.lexxy-content pre code {
  background: none !important;
  padding: 0 !important;
}

/* Tables */
lexxy-editor div.lexxy-editor__content table,
lexxy-editor div.lexxy-content table,
.lexxy-content table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1.5em 0 !important;
}

lexxy-editor div.lexxy-editor__content table td,
lexxy-editor div.lexxy-content table td,
.lexxy-content table td,
lexxy-editor div.lexxy-editor__content table th,
lexxy-editor div.lexxy-content table th,
.lexxy-content table th {
  border: none !important;
  padding: 10px 15px !important;
  vertical-align: top !important;
  border-bottom: 1px solid #eaeaea !important;
}

/* Horizontal rule - gradient */
lexxy-editor div.lexxy-editor__content hr,
lexxy-editor div.lexxy-content hr,
.lexxy-content hr {
  border: none !important;
  height: 3px !important;
  background: linear-gradient(to right, #39c0ff, #2577c9) !important;
  margin: 2em 0 !important;
}

/* Strong and emphasis */
lexxy-editor div.lexxy-editor__content strong,
lexxy-editor div.lexxy-content strong,
.lexxy-content strong {
  font-weight: 600 !important;
}

lexxy-editor div.lexxy-editor__content em,
lexxy-editor div.lexxy-content em,
.lexxy-content em {
  font-style: italic !important;
}

/* Tip box with info icon */
/* Very specific selectors to override lexxy defaults */
lexxy-editor div[contenteditable="true"].lexxy-editor__content blockquote.tip-box-blockquote,
lexxy-editor div.lexxy-editor__content blockquote.tip-box-blockquote,
lexxy-editor div.lexxy-content blockquote.tip-box-blockquote,
.lexxy-content blockquote.tip-box-blockquote,
lexxy-editor div.lexxy-editor__content .tip-box,
lexxy-editor div.lexxy-content .tip-box,
.lexxy-content .tip-box {
  display: block !important;
  background-color: #ffffff !important;
  border-radius: 4px !important;
  padding: 24px 20px 20px 60px !important; /* Extra top padding for gradient */
  margin: 1.5em 0 !important;
  position: relative !important;
  /* Remove all default borders */
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  clear: both !important;
  font-style: normal !important; /* Override blockquote italic */
  color: #333 !important; /* Override blockquote color */
}

/* Gradient top border using ::after pseudo-element for crisp rendering */
lexxy-editor div[contenteditable="true"].lexxy-editor__content blockquote.tip-box-blockquote::after,
lexxy-editor div.lexxy-editor__content blockquote.tip-box-blockquote::after,
lexxy-editor div.lexxy-content blockquote.tip-box-blockquote::after,
.lexxy-content blockquote.tip-box-blockquote::after,
lexxy-editor div.lexxy-editor__content .tip-box::after,
lexxy-editor div.lexxy-content .tip-box::after,
.lexxy-content .tip-box::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(to right, #39c0ff, #2577c9) !important;
  border-radius: 4px 4px 0 0 !important;
  z-index: 1 !important;
}

/* Info icon styling - positioned absolutely */
lexxy-editor div.lexxy-editor__content .tip-box::before,
lexxy-editor div.lexxy-content .tip-box::before,
.lexxy-content .tip-box::before,
lexxy-editor div.lexxy-editor__content blockquote.tip-box-blockquote::before,
lexxy-editor div.lexxy-content blockquote.tip-box-blockquote::before,
.lexxy-content blockquote.tip-box-blockquote::before {
  content: "i" !important;
  display: block !important;
  position: absolute !important;
  left: 20px !important;
  top: 24px !important; /* Adjusted for new padding */
  width: 24px !important;
  height: 24px !important;
  color: #39c0ff !important;
  text-align: center !important;
  line-height: 24px !important;
  border: 2px solid #39c0ff !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  font-weight: bold !important;
  font-style: italic !important;
  z-index: 2 !important; /* Above gradient */
}

/* Tip box paragraphs */
lexxy-editor div.lexxy-editor__content .tip-box p,
lexxy-editor div.lexxy-content .tip-box p,
.lexxy-content .tip-box p,
lexxy-editor div.lexxy-editor__content blockquote.tip-box-blockquote p,
lexxy-editor div.lexxy-content blockquote.tip-box-blockquote p,
.lexxy-content blockquote.tip-box-blockquote p {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0.5em !important;
  min-height: 1.2em !important;
}

lexxy-editor div.lexxy-editor__content .tip-box p:last-child,
lexxy-editor div.lexxy-content .tip-box p:last-child,
.lexxy-content .tip-box p:last-child,
lexxy-editor div.lexxy-editor__content blockquote.tip-box-blockquote p:last-child,
lexxy-editor div.lexxy-content blockquote.tip-box-blockquote p:last-child,
.lexxy-content blockquote.tip-box-blockquote p:last-child {
  margin-bottom: 0 !important;
}

/* Explicit rules for tip boxes directly after headings */
lexxy-editor div.lexxy-editor__content h1 + .tip-box,
lexxy-editor div.lexxy-content h1 + .tip-box,
.lexxy-content h1 + .tip-box,
lexxy-editor div.lexxy-editor__content h2 + .tip-box,
lexxy-editor div.lexxy-content h2 + .tip-box,
.lexxy-content h2 + .tip-box,
lexxy-editor div.lexxy-editor__content h3 + .tip-box,
lexxy-editor div.lexxy-content h3 + .tip-box,
.lexxy-content h3 + .tip-box,
lexxy-editor div.lexxy-editor__content h4 + .tip-box,
lexxy-editor div.lexxy-content h4 + .tip-box,
.lexxy-content h4 + .tip-box,
lexxy-editor div.lexxy-editor__content h1 + blockquote.tip-box-blockquote,
lexxy-editor div.lexxy-content h1 + blockquote.tip-box-blockquote,
.lexxy-content h1 + blockquote.tip-box-blockquote,
lexxy-editor div.lexxy-editor__content h2 + blockquote.tip-box-blockquote,
lexxy-editor div.lexxy-content h2 + blockquote.tip-box-blockquote,
.lexxy-content h2 + blockquote.tip-box-blockquote,
lexxy-editor div.lexxy-editor__content h3 + blockquote.tip-box-blockquote,
lexxy-editor div.lexxy-content h3 + blockquote.tip-box-blockquote,
.lexxy-content h3 + blockquote.tip-box-blockquote,
lexxy-editor div.lexxy-editor__content h4 + blockquote.tip-box-blockquote,
lexxy-editor div.lexxy-content h4 + blockquote.tip-box-blockquote,
.lexxy-content h4 + blockquote.tip-box-blockquote {
  clear: both !important;
  padding-left: 60px !important; /* Force correct padding */
  text-indent: 0 !important; /* Reset any inherited indentation */
  margin-top: 1em !important; /* Add some space after heading */
}