/* ===========================================
   Blog Editor & Content Styles
   Themed for AccessGuard design system
   =========================================== */

@layer components {

/* ===========================================
   TinyMCE Editor Overrides
   =========================================== */

.tox-tinymce {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}

.tox .tox-toolbar__primary {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.tox .tox-tbtn {
  color: var(--color-text-muted) !important;
}

.tox .tox-tbtn:hover {
  background: var(--color-gray-100) !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
  background: var(--color-primary-100) !important;
  color: var(--color-primary-700) !important;
}

.tox .tox-statusbar {
  border-top: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .tox-tinymce {
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .tox .tox-toolbar__primary {
  background: var(--color-background) !important;
  border-bottom-color: var(--color-border) !important;
}

[data-theme="dark"] .tox .tox-tbtn {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .tox .tox-tbtn:hover {
  background: var(--color-gray-800) !important;
}

[data-theme="dark"] .tox .tox-tbtn--enabled,
[data-theme="dark"] .tox .tox-tbtn--enabled:hover {
  background: hsl(var(--color-primary-h) var(--color-primary-s) 50% / 0.2) !important;
  color: var(--color-primary-400) !important;
}

[data-theme="dark"] .tox .tox-statusbar {
  background: var(--color-background) !important;
  border-top-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .tox .tox-edit-area__iframe {
  background: var(--color-background) !important;
}

/* Post form card overflow for sticky toolbar */
#posts-edit .card,
#posts-new .card {
  overflow: visible;
}

/* ===========================================
   .trix-content (show page rendering)
   Used for both legacy Trix and new TinyMCE content
   =========================================== */

.trix-content {
  line-height: 1.8;
  overflow-wrap: break-word;
  word-break: break-word;
  color: var(--color-text);
}

.trix-content * {
  box-sizing: border-box;
}

.trix-content > * + * {
  margin-top: var(--space-4);
}

.trix-content h1 {
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.3;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.trix-content h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
}

.trix-content h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.trix-content h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.trix-content blockquote {
  border: 0 solid var(--color-primary-400);
  border-left-width: 4px;
  margin-left: 0;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
  padding-left: var(--space-6);
  font-style: italic;
  color: var(--color-text-muted);
}

.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 4px;
  margin-right: 0;
  padding-right: var(--space-6);
}

.trix-content ul,
.trix-content ol {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  padding-left: var(--space-8);
}

.trix-content li {
  margin-left: 0;
  margin-bottom: var(--space-1);
}

.trix-content [dir=rtl] li {
  margin-right: 1em;
}

.trix-content pre {
  display: block;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  white-space: pre;
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.trix-content code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
}

.trix-content pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
}

[data-theme="dark"] .trix-content code {
  background-color: var(--color-gray-800);
}

.trix-content a {
  color: var(--color-link);
  text-decoration: underline;
}

.trix-content a:hover {
  color: var(--color-link-hover);
}

.trix-content strong {
  font-weight: var(--font-bold);
}

.trix-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.trix-content figure {
  margin: var(--space-6) 0;
}

.trix-content figcaption {
  text-align: center;
  margin-top: var(--space-2);
  font-size: 0.875em;
  color: var(--color-text-muted);
}

/* Tables */
.trix-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.trix-content th,
.trix-content td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.trix-content th {
  background-color: var(--color-surface);
  font-weight: var(--font-semibold);
}

[data-theme="dark"] .trix-content th {
  background-color: var(--color-gray-800);
}

/* Video / Embeds */
.trix-content iframe {
  max-width: 100%;
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.trix-content video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Legacy Trix attachment styles (for old content) */
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}

.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
  color: inherit;
}

.trix-content .attachment__caption {
  text-align: center;
  margin-top: var(--space-2);
  font-size: 0.875em;
  color: var(--color-text-muted);
}

.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: ' \2022 ';
}

.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}

.trix-content .attachment--preview .attachment__caption {
  color: var(--color-text-muted);
  font-size: 0.9em;
  line-height: 1.2;
}

.trix-content .attachment--file {
  color: var(--color-text);
  line-height: 1;
  margin: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

} /* End @layer components */