/*
 * Action Text / Trix Editor Styles for Astro By Veda
 * Applies dark mystic theme to Trix editor and rendered content
 */

/* Trix Editor - Dark Theme Override */
trix-editor {
    background-color: rgba(26, 31, 51, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
    min-height: 400px;
    padding: 1.5rem !important;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
}

trix-editor:focus {
    border-color: rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1) !important;
    outline: none !important;
}

trix-editor h1 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #fff;
    font-size: 2rem;
    margin-top: 1.5rem;
}

trix-editor a {
    color: #d4af37;
}

trix-editor blockquote {
    border-left: 3px solid rgba(212, 175, 55, 0.3);
    padding-left: 1rem;
    color: #9ca3af;
    font-style: italic;
}

trix-editor pre {
    background-color: #1a1f33;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem;
    color: #d4af37;
    overflow-x: auto;
}

/* Trix Toolbar - Dark Theme */
trix-toolbar {
    background-color: rgba(26, 31, 51, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: none !important;
    padding: 0.5rem !important;
}

trix-toolbar .trix-button-group {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 0 !important;
}

trix-toolbar .trix-button {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #9ca3af !important;
}

trix-toolbar .trix-button:hover {
    background-color: rgba(212, 175, 55, 0.1) !important;
}

trix-toolbar .trix-button.trix-active {
    background-color: rgba(212, 175, 55, 0.15) !important;
}

trix-toolbar .trix-button::before {
    filter: invert(0.6) !important;
}

trix-toolbar .trix-button.trix-active::before {
    filter: invert(0.8) sepia(1) saturate(2) hue-rotate(10deg) !important;
}

/* Trix Dialog - Dark Theme */
trix-toolbar .trix-dialog {
    background-color: #1a1f33 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
}

trix-toolbar .trix-dialog input[type="text"],
trix-toolbar .trix-dialog input[type="url"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
    padding: 0.5rem !important;
}

trix-toolbar .trix-dialog .trix-button-group .trix-button {
    color: #d4af37 !important;
}

/* Rendered Action Text Content */
.trix-content {
    color: #d1d5db;
    font-family: 'Inter', sans-serif;
    line-height: 1.75;
}

.trix-content h1 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #fff;
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.trix-content a {
    color: #d4af37;
    text-decoration: none;
}

.trix-content a:hover {
    text-decoration: underline;
}

.trix-content blockquote {
    border-left: 3px solid rgba(212, 175, 55, 0.3);
    padding-left: 1rem;
    color: #9ca3af;
    font-style: italic;
    font-family: 'Playfair Display', serif;
}

.trix-content pre {
    background-color: #1a1f33;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem;
    color: #d4af37;
    overflow-x: auto;
    border-radius: 0.25rem;
}

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

.trix-content li {
    margin-bottom: 0.25rem;
}

.trix-content img {
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}