/* Import colors */
@import url("/shared/colors/colors.css");

/* Editor Library - Global Content Markup Styles
   Applied across all features. Centralized to avoid duplication. */

@import url("../editor-lib/table/table.css");
@import url("../editor-lib/list/list.css");

/* Content area base styling */
.content-area,
.page-content-scope {
    background: var(--content-bg);
    color: var(--content-text);
    padding: var(--content-padding);
}

/* Typography */
.content-area h1,
.page-content-scope h1 {
    color: var(--heading1-color);
    font-size: 28px;
    font-weight: 700;
    margin: 24px 0 12px;
    line-height: 1.25;
}

.content-area h2,
.page-content-scope h2 {
    color: var(--heading2-color);
    font-size: 24px;
    font-weight: 600;
    margin: 20px 0 10px;
    line-height: 1.25;
}

.content-area h3,
.page-content-scope h3 {
    color: var(--heading3-color);
    font-size: 20px;
    font-weight: 600;
    margin: 18px 0 8px;
    line-height: 1.25;
}

.content-area h4,
.page-content-scope h4 {
    color: var(--heading3-color);
    font-size: 18px;
    font-weight: 600;
    margin: 16px 0 6px;
    line-height: 1.25;
}

.content-area h5,
.page-content-scope h5 {
    color: var(--heading3-color);
    font-size: 16px;
    font-weight: 600;
    margin: 14px 0 4px;
    line-height: 1.3;
}

.content-area h6,
.page-content-scope h6 {
    color: var(--heading3-color);
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0 4px;
    line-height: 1.3;
}

.content-area p,
.page-content-scope p {
    color: var(--paragraph-color);
    font-size: 16px;
    line-height: 1.6;
    margin: 12px 0;
}

/* Links */
.content-area a,
.page-content-scope a {
    color: var(--link-color) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.content-area a:visited,
.page-content-scope a:visited {
    color: var(--link-visited-color) !important;
}

.content-area a:hover,
.page-content-scope a:hover {
    color: var(--link-color) !important;
    text-decoration: underline !important;
}

/* Blockquotes */
.content-area blockquote,
.page-content-scope blockquote,
.page-content-scope > blockquote:nth-child(18) {
    border-left: 4px solid var(--blockquote-border) !important;
    padding: 16px 20px !important;
    margin: 20px 0 !important;
    background: var(--blockquote-bg) !important;
    color: var(--blockquote-text) !important;
    border-radius: 8px !important;
    font-style: normal;
    position: relative;
}

/* Override any inline styles on blockquotes */
blockquote[style],
.content-area blockquote[style],
.page-content-scope blockquote[style] {
    border-left: 4px solid var(--blockquote-border) !important;
    padding: 16px 20px !important;
    margin: 20px 0 !important;
    background: var(--blockquote-bg) !important;
    color: var(--blockquote-text) !important;
    border-radius: 8px !important;
}

/* Table library variables */
.content-area .table-lib-container,
.page-content-scope .table-lib-container {
    --table-lib-bg: var(--table-cell-bg);
    --table-lib-border: var(--table-border);
    --table-lib-text: var(--table-cell-text);
    --table-lib-header-bg: var(--table-header-bg);
    --table-lib-header-text: var(--table-header-text);
    --table-lib-cell-bg: var(--table-cell-bg);
    --table-lib-cell-text: var(--table-cell-text);
    --table-lib-stripe-bg: var(--table-stripe-bg);
    --table-lib-hover-bg: var(--table-hover-bg);
    --table-lib-selection-bg: rgba(59, 130, 246, 0.12);
    --table-lib-selection-border: rgba(59, 130, 246, 0.3);
}

/* Legacy table support */
.content-area table:not(.table-lib-table),
.page-content-scope table:not(.table-lib-table) {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    background: var(--table-cell-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--table-border);
    table-layout: fixed;
}

.content-area table:not(.table-lib-table) th,
.page-content-scope table:not(.table-lib-table) th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    text-align: center;
    vertical-align: middle;
    padding: 8px 12px;
    font-weight: 600;
    border: 1px solid var(--table-border);
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    cursor: text;
}

.content-area table:not(.table-lib-table) td,
.page-content-scope table:not(.table-lib-table) td {
    padding: 8px 12px;
    border: 1px solid var(--table-border);
    color: var(--table-cell-text);
    text-align: center;
    vertical-align: middle;
    background: var(--table-cell-bg);
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    cursor: text;
}

.content-area table:not(.table-lib-table) tbody tr:nth-child(even) td,
.page-content-scope table:not(.table-lib-table) tbody tr:nth-child(even) td {
    background: var(--table-stripe-bg);
}

.content-area table:not(.table-lib-table) tbody tr:hover td,
.page-content-scope table:not(.table-lib-table) tbody tr:hover td {
    background: var(--table-hover-bg);
}

/* Lists */
.content-area ul,
.page-content-scope ul {
    list-style-position: outside;
    margin: 0 0 20px;
    padding-left: 28px;
}

.content-area ul li::marker,
.page-content-scope ul li::marker {
    content: "‣  ";
    color: var(--link-color);
    font-weight: 700;
    font-size: 1.05em;
    letter-spacing: 0.02em;
}

.content-area li,
.page-content-scope li {
    margin: 0.15rem 0;
    padding-left: 0;
    color: var(--paragraph-color);
}

/* Ordered lists */
.content-area ol,
.page-content-scope ol {
    list-style-position: outside;
    margin: 0 0 20px;
    padding-left: 28px;
}

.content-area ol li::marker,
.page-content-scope ol li::marker {
    color: var(--link-color);
    font-weight: 700;
}

/* Horizontal rule */
.content-area hr,
.page-content-scope hr {
    border: 0;
    border-top: 1px solid var(--list-border);
    margin: 24px 0;
}

/* Inline code (uses --inline-code-text, which differs per theme) */
.content-area code:not([class*="language-"]),
.page-content-scope code:not([class*="language-"]) {
    color: var(--inline-code-text) !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Override any inline styles on inline code */
.content-area code[style]:not([class*="language-"]),
.page-content-scope code[style]:not([class*="language-"]) {
    color: var(--inline-code-text) !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Inline code styled like URL/link (for API endpoints, paths, etc.) */
.content-area .inline-code,
.page-content-scope .inline-code {
    color: var(--link-color) !important;
    font-weight: 600 !important;
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
    font-size: 0.95em;
    background: transparent !important;
    border: 0 !important;
}

/* Code blocks (pre > code) use --code-text for syntax highlighting */
.content-area pre code,
.page-content-scope pre code,
.content-area pre[class*="language-"] code,
.page-content-scope pre[class*="language-"] code {
    color: var(--code-text) !important;
    font-weight: normal !important;
}

/* KBD */
.content-area kbd,
.page-content-scope kbd {
    background: var(--code-bg);
    color: var(--inline-code-text);
    border: 1px solid var(--code-border);
    padding: 2px 6px;
    border-radius: 6px;
    font-family:
        "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
    font-size: 12px;
}