/* ============================================
   DS Rich Content - universal typography reset
   Used for: vocabulary, portfolio, service,
   courses, blog posts and any other CPT content.
   Applied via .ds-rich-content wrapper class.
   ============================================ */

.ds-rich-content,
.ds-rich-content * {
    font-family: 'Inter', sans-serif;
}

.ds-rich-content {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #393939;
}

/* ---- Reset all direct children spacing ---- */
.ds-rich-content > * {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

.ds-rich-content > *:last-child {
    margin-bottom: 0 !important;
}

/* ---- Body text ---- */
.ds-rich-content p,
.ds-rich-content li,
.ds-rich-content span:not([class]) {
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.6;
    color: #393939;
}

/* ---- Headings: unified compact scale ---- */
.ds-rich-content h1,
.ds-rich-content h2,
.ds-rich-content h3,
.ds-rich-content h4,
.ds-rich-content h5,
.ds-rich-content h6 {
    font-family: 'Inter', sans-serif !important;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.3;
}

.ds-rich-content > h2 {
    font-size: 24px !important;
    margin-top: 32px !important;
    margin-bottom: 12px !important;
}

.ds-rich-content > h3 {
    font-size: 20px !important;
    margin-top: 24px !important;
    margin-bottom: 8px !important;
}

.ds-rich-content > h4 {
    font-size: 18px !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
}

.ds-rich-content > h2:first-child,
.ds-rich-content > h3:first-child,
.ds-rich-content > h4:first-child {
    margin-top: 0 !important;
}

/* Heading immediately followed by content gets smaller bottom gap */
.ds-rich-content > h2 + p,
.ds-rich-content > h2 + ul,
.ds-rich-content > h2 + ol,
.ds-rich-content > h2 + .wp-block-list,
.ds-rich-content > h3 + p,
.ds-rich-content > h3 + ul,
.ds-rich-content > h3 + ol,
.ds-rich-content > h3 + .wp-block-list,
.ds-rich-content > h4 + p,
.ds-rich-content > h4 + ul,
.ds-rich-content > h4 + ol,
.ds-rich-content > h4 + .wp-block-list {
    margin-top: 0 !important;
}

/* Neutralize <strong> wrappers inside headings */
.ds-rich-content h2 strong,
.ds-rich-content h3 strong,
.ds-rich-content h4 strong {
    font-weight: inherit;
    color: inherit;
    font-size: inherit !important;
}

.ds-rich-content h2 a,
.ds-rich-content h3 a,
.ds-rich-content h4 a {
    color: inherit;
    text-decoration: underline;
}

/* ---- Paragraphs ---- */
.ds-rich-content > p {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* ---- Lists ---- */
.ds-rich-content > ul,
.ds-rich-content > ol,
.ds-rich-content > .wp-block-list {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding-left: 24px !important;
    list-style-position: outside;
}

.ds-rich-content ul,
.ds-rich-content .wp-block-list {
    list-style-type: disc;
}

.ds-rich-content ol {
    list-style-type: decimal;
}

.ds-rich-content li {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}

.ds-rich-content li:last-child {
    margin-bottom: 0 !important;
}

/* Nested lists - safety net */
.ds-rich-content li > ul,
.ds-rich-content li > ol {
    margin: 6px 0 0 0 !important;
}

.ds-rich-content li[style*="list-style-type: none"] {
    list-style: none !important;
}

/* ---- Bold inline labels ---- */
.ds-rich-content strong,
.ds-rich-content b {
    font-weight: 700;
    color: inherit;
    font-size: inherit !important;
}

/* ---- Separator (wp:separator) ---- */
.ds-rich-content > hr,
.ds-rich-content > .wp-block-separator {
    border: 0 !important;
    border-top: 1px solid #e5e5e5 !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    height: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

.ds-rich-content .wp-block-separator.has-alpha-channel-opacity {
    opacity: 1;
}

/* ---- Body links - Figma purple ---- */
.ds-rich-content a {
    color: #d360ff;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
    transition: opacity .2s ease;
}

.ds-rich-content a:hover {
    opacity: .75;
}