/*
 * Shared text formatting hook for RichEditor content.
 * This file is loaded both on the public site and in the Filament admin panel.
 * Add your typography styles here to keep both views visually synchronized.
 *
 * Внимание: в админке файл подключается инлайном (AdminPanelProvider читает его
 * через file_get_contents), поэтому здесь нельзя использовать url(...) —
 * относительные пути сломаются. Токены из style.css указываем с запасным значением:
 * в админке style.css не подключён.
 */
.text-formatter {
    color: var(--color-muted, #4a5565);
    font-size: 16px;
    line-height: 1.7;
    word-break: break-word;
}

.text-formatter a {
    color: var(--color-blue, #0099ff);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}
.text-formatter a:hover {
    color: var(--color-orange, #ff6900);
}

.text-formatter p {
    margin: 16px 0;
}

.text-formatter h1, .text-formatter .h1,
.text-formatter h2, .text-formatter .h2,
.text-formatter h3, .text-formatter .h3,
.text-formatter h4, .text-formatter .h4,
.text-formatter h5, .text-formatter .h5,
.text-formatter h6, .text-formatter .h6 {
    margin: 32px 0 12px 0;
    color: var(--color-text, #292b37);
    font-weight: 600;
    line-height: 1.3;
}

.text-formatter h1, .text-formatter .h1 { font-size: 32px; }
.text-formatter h2, .text-formatter .h2 { font-size: 26px; }
.text-formatter h3, .text-formatter .h3 { font-size: 21px; }
.text-formatter h4, .text-formatter .h4 { font-size: 18px; }
.text-formatter h5, .text-formatter .h5,
.text-formatter h6, .text-formatter .h6 { font-size: 16px; }

.text-formatter strong,
.text-formatter b {
    color: var(--color-text, #292b37);
    font-weight: 600;
}

.text-formatter ul,
.text-formatter ol {
    margin: 16px 0;
    padding-left: 24px;
}

.text-formatter li {
    margin: 8px 0;
}

.text-formatter li::marker {
    color: var(--color-blue, #0099ff);
}

.text-formatter blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--color-blue, #0099ff);
    color: var(--color-soft, #6a7282);
}

.text-formatter code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #f3f4f6;
    color: var(--color-text, #292b37);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
}

.text-formatter pre {
    margin: 20px 0;
    padding: 16px 20px;
    overflow-x: auto;
    border: 1px solid rgba(0, 153, 255, .18);
    border-radius: 14px;
    background: #101a2b;
    color: #e5edf7;
    tab-size: 4;
}

.text-formatter pre code {
    padding: 0;
    background: none;
    color: inherit;
    white-space: pre;
    overflow-wrap: normal;
}

.text-formatter table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    font-size: 15px;
}

.text-formatter th,
.text-formatter td {
    padding: 10px 14px;
    border: 1px solid var(--color-line, #d1d5dc);
    text-align: left;
}

.text-formatter th {
    background: #f3f4f6;
    color: var(--color-text, #292b37);
    font-weight: 600;
}

.text-formatter hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--color-line, #d1d5dc);
}

.text-formatter img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.text-formatter > *:first-child {
    margin-top: 0 !important;
}

.text-formatter > *:last-child {
    margin-bottom: 0 !important;
}

.wordbreak {
    word-break: break-all;
}

.theme-dark .text-formatter {
    color: #fff;
}

.theme-dark .text-formatter h1, .theme-dark .text-formatter .h1,
.theme-dark .text-formatter h2, .theme-dark .text-formatter .h2,
.theme-dark .text-formatter h3, .theme-dark .text-formatter .h3,
.theme-dark .text-formatter h4, .theme-dark .text-formatter .h4,
.theme-dark .text-formatter h5, .theme-dark .text-formatter .h5,
.theme-dark .text-formatter h6, .theme-dark .text-formatter .h6,
.theme-dark .text-formatter strong,
.theme-dark .text-formatter b {
    color: #fff;
}