/* ==========================================================================
   Job CMS Custom Stylesheet (index.css)
   ========================================================================== */

/* === Content Typography (.cms-content & .tool-content) === */
.tool-content, .cms-content {
    color: #334155;
    line-height: 1.75;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.dark .tool-content, .dark .cms-content {
    color: #cbd5e1;
}

/* === Headings === */
.tool-content h1, .cms-content h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    scroll-margin-top: 6rem;
    overflow-wrap: break-word;
}
.dark .tool-content h1, .dark .cms-content h1 {
    color: #f8fafc;
}

.tool-content h2, .cms-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #e2e8f0;
    line-height: 1.35;
    scroll-margin-top: 6rem;
    overflow-wrap: break-word;
}
.dark .tool-content h2, .dark .cms-content h2 {
    color: #f8fafc;
    border-bottom-color: #334155;
}

.tool-content h2:first-child, .cms-content h2:first-child,
.tool-content h1:first-child, .cms-content h1:first-child {
    margin-top: 0;
}

.tool-content h3, .cms-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 1.35rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    scroll-margin-top: 6rem;
    overflow-wrap: break-word;
}
.dark .tool-content h3, .dark .cms-content h3 {
    color: #f1f5f9;
}

.tool-content h4, .cms-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin-top: 1.1rem;
    margin-bottom: 0.4rem;
    scroll-margin-top: 6rem;
    overflow-wrap: break-word;
}
.dark .tool-content h4, .dark .cms-content h4 {
    color: #e2e8f0;
}

.tool-content h5, .cms-content h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    margin-top: 0.875rem;
    margin-bottom: 0.35rem;
}
.dark .tool-content h5, .dark .cms-content h5 {
    color: #cbd5e1;
}

/* === Paragraphs & Text Readability === */
.tool-content p, .cms-content p {
    margin-bottom: 0.875rem;
    font-size: 1rem;
    line-height: 1.8;
    color: #334155;
}
.dark .tool-content p, .dark .cms-content p {
    color: #cbd5e1;
}

/* Paragraph spacing directly following headings */
.tool-content h1 + p, .cms-content h1 + p,
.tool-content h2 + p, .cms-content h2 + p {
    margin-top: 0.25rem;
}
.tool-content h3 + p, .cms-content h3 + p {
    margin-top: 0.25rem;
}

/* === Lists === */
.tool-content ul, .cms-content ul,
.tool-content ol, .cms-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.35rem;
}
.tool-content ul, .cms-content ul {
    list-style-type: disc;
}
.tool-content ol, .cms-content ol {
    list-style-type: decimal;
}
.tool-content li, .cms-content li {
    margin-bottom: 0.4rem;
    font-size: 0.975rem;
    color: #334155;
}
.dark .tool-content li, .dark .cms-content li {
    color: #cbd5e1;
}

/* === Tables === */
.tool-content table, .cms-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.925rem;
}
.tool-content th, .cms-content th {
    background: #f1f5f9;
    font-weight: 700;
    text-align: left;
    color: #0f172a;
}
.dark .tool-content th, .dark .cms-content th {
    background: #1e293b;
    color: #f8fafc;
}
.tool-content th, .cms-content th,
.tool-content td, .cms-content td {
    border: 1px solid #cbd5e1;
    padding: 0.625rem 0.875rem;
}
.dark .tool-content th, .dark .cms-content th,
.dark .tool-content td, .dark .cms-content td {
    border-color: #475569;
}