/* Lexxy Content Rendering Styles for Public Pages (Dark Theme) */

.lexxy-content {
  color: rgb(209, 213, 219); /* text-gray-300 */
  line-height: 1.75;
  max-width: 100%;
}

/* Headings with glowing bottom borders */
.lexxy-content h1 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  line-height: 1.2;
  color: rgb(243, 244, 246); /* text-gray-100 */
  border-bottom: 2px solid rgb(20, 184, 166); /* Accent color border */
  box-shadow: 0 2px 8px 0px rgba(20, 184, 166, 0.4); /* Glowing effect */
}

.lexxy-content h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.4rem;
  line-height: 1.3;
  color: rgb(243, 244, 246); /* text-gray-100 */
  border-bottom: 2px solid rgb(20, 184, 166); /* Accent color border */
  box-shadow: 0 2px 6px 0px rgba(20, 184, 166, 0.3); /* Subtle glow */
}

.lexxy-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.3rem;
  line-height: 1.4;
  color: rgb(229, 231, 235); /* text-gray-200 */
  border-bottom: 2px dotted rgb(20, 184, 166); /* Dotted accent border */
  box-shadow: 0 1px 4px 0px rgba(20, 184, 166, 0.2); /* Light glow */
}

.lexxy-content h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.625rem;
  color: rgb(229, 231, 235); /* text-gray-200 */
}

.lexxy-content h5 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: rgb(229, 231, 235); /* text-gray-200 */
}

.lexxy-content h6 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: rgb(209, 213, 219); /* text-gray-300 */
}

/* Paragraphs */
.lexxy-content p {
  margin-bottom: 1.25rem;
  color: rgb(209, 213, 219); /* text-gray-300 */
}

/* Lists */
.lexxy-content ul,
.lexxy-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.625rem;
}

.lexxy-content ul {
  list-style-type: disc;
}

.lexxy-content ol {
  list-style-type: decimal;
}

.lexxy-content li {
  margin-bottom: 0.5rem;
  color: rgb(209, 213, 219); /* text-gray-300 */
}

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

/* Nested lists */
.lexxy-content ul ul,
.lexxy-content ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
}

.lexxy-content ul ul {
  list-style-type: circle;
}

.lexxy-content ul ul ul {
  list-style-type: square;
}

.lexxy-content ol ol {
  list-style-type: lower-alpha;
}

.lexxy-content ol ol ol {
  list-style-type: lower-roman;
}

/* Links */
.lexxy-content a {
  color: rgb(96, 165, 250); /* text-blue-400 */
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s;
}

.lexxy-content a:hover {
  color: rgb(20, 184, 166); /* accent color */
}

/* Strong and emphasis */
.lexxy-content strong {
  font-weight: 700;
  color: rgb(243, 244, 246); /* text-gray-100 */
}

.lexxy-content em {
  font-style: italic;
  color: rgb(209, 213, 219); /* text-gray-300 */
}

/* Code blocks with pre tag */
.lexxy-content pre {
  background-color: rgb(31, 41, 55) !important;
  color: rgb(229, 231, 235) !important;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgb(75, 85, 99);
}

.lexxy-content pre code {
  background-color: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 1em !important;
  border: none !important;
  font-weight: normal !important;
}

/* Default: All code tags as code blocks (standalone) */
.lexxy-content code {
  display: block;
  background-color: rgb(31, 41, 55);
  color: rgb(229, 231, 235);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgb(75, 85, 99);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Inline code - code inside paragraphs or other text elements */
.lexxy-content p code,
.lexxy-content li code,
.lexxy-content h1 code,
.lexxy-content h2 code,
.lexxy-content h3 code,
.lexxy-content h4 code,
.lexxy-content h5 code,
.lexxy-content h6 code,
.lexxy-content td code,
.lexxy-content th code {
  display: inline;
  background-color: rgb(31, 41, 55);
  color: rgb(96, 165, 250);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-weight: 500;
  border: 1px solid rgb(75, 85, 99);
  margin: 0;
  white-space: normal;
  box-shadow: none;
}

/* Syntax highlighting colors for code blocks */
.lexxy-content pre .hljs-comment,
.lexxy-content pre .hljs-quote {
  color: rgb(156, 163, 175);
  font-style: italic;
}

.lexxy-content pre .hljs-keyword,
.lexxy-content pre .hljs-selector-tag,
.lexxy-content pre .hljs-addition {
  color: rgb(167, 243, 208);
}

.lexxy-content pre .hljs-number,
.lexxy-content pre .hljs-string,
.lexxy-content pre .hljs-meta .hljs-meta-string,
.lexxy-content pre .hljs-literal,
.lexxy-content pre .hljs-doctag,
.lexxy-content pre .hljs-regexp {
  color: rgb(253, 224, 71);
}

.lexxy-content pre .hljs-title,
.lexxy-content pre .hljs-section,
.lexxy-content pre .hljs-name,
.lexxy-content pre .hljs-selector-id,
.lexxy-content pre .hljs-selector-class {
  color: rgb(147, 197, 253);
}

.lexxy-content pre .hljs-attribute,
.lexxy-content pre .hljs-attr,
.lexxy-content pre .hljs-variable,
.lexxy-content pre .hljs-template-variable,
.lexxy-content pre .hljs-class .hljs-title,
.lexxy-content pre .hljs-type {
  color: rgb(251, 146, 60);
}

.lexxy-content pre .hljs-symbol,
.lexxy-content pre .hljs-bullet,
.lexxy-content pre .hljs-subst,
.lexxy-content pre .hljs-meta,
.lexxy-content pre .hljs-meta .hljs-keyword,
.lexxy-content pre .hljs-selector-attr,
.lexxy-content pre .hljs-selector-pseudo,
.lexxy-content pre .hljs-link {
  color: rgb(196, 181, 253);
}

.lexxy-content pre .hljs-built_in,
.lexxy-content pre .hljs-deletion {
  color: rgb(252, 165, 165);
}

/* Blockquotes */
.lexxy-content blockquote {
  border-left: 4px solid rgb(20, 184, 166); /* accent */
  padding-left: 1rem;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1.5rem;
  font-style: italic;
  color: rgb(156, 163, 175); /* text-gray-400 */
  background-color: rgba(31, 41, 55, 0.5); /* bg-gray-800 with opacity */
  padding: 1rem;
  border-radius: 0.5rem;
}

.lexxy-content blockquote p {
  color: rgb(156, 163, 175); /* text-gray-400 */
}

/* Horizontal rule */
.lexxy-content hr {
  border: none;
  border-top: 2px solid rgb(75, 85, 99); /* border-gray-600 */
  margin: 2.5rem 0;
}

/* Images */
.lexxy-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Tables */
.lexxy-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  border: 1px solid rgb(75, 85, 99);
  border-radius: 0.5rem;
  overflow: hidden;
}

.lexxy-content thead {
  background-color: rgb(31, 41, 55); /* bg-gray-800 */
}

.lexxy-content th {
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  color: rgb(243, 244, 246); /* text-gray-100 */
  border-bottom: 2px solid rgb(75, 85, 99);
}

.lexxy-content td {
  padding: 0.75rem;
  border-bottom: 1px solid rgb(75, 85, 99);
  color: rgb(209, 213, 219); /* text-gray-300 */
}

.lexxy-content tbody tr:hover {
  background-color: rgba(55, 65, 81, 0.5); /* bg-gray-700 with opacity */
}

/* Attachments */
.lexxy-content .attachment {
  background-color: rgba(31, 41, 55, 0.5); /* bg-gray-800 with opacity */
  border: 1px solid rgb(75, 85, 99);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lexxy-content .attachment__caption {
  color: rgb(156, 163, 175); /* text-gray-400 */
  font-size: 0.875rem;
}

/* First paragraph styling */
.lexxy-content > p:first-of-type {
  font-size: 1.125rem;
  color: rgb(209, 213, 219); /* text-gray-300 */
}

/* Last element margin fix */
.lexxy-content > *:last-child {
  margin-bottom: 0;
}

/* Code copy button */
.code-copy-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.5rem;
  background-color: rgba(55, 65, 81, 0.8);
  border: 1px solid rgb(75, 85, 99);
  border-radius: 0.375rem;
  color: rgb(156, 163, 175);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.code-copy-button:hover {
  background-color: rgb(75, 85, 99);
  color: rgb(243, 244, 246);
  border-color: rgb(20, 184, 166);
}

.code-copy-button.copied {
  background-color: rgb(20, 184, 166);
  color: rgb(17, 24, 39);
  border-color: rgb(20, 184, 166);
}

/* Show copy button on hover */
.lexxy-content pre:hover .code-copy-button,
.lexxy-content code:hover .code-copy-button {
  opacity: 1;
}

.code-copy-button .hidden {
  display: none;
}