/* ===================================================================== */
/* OCEAN PROFILE MARKDOWN STYLING                                        */
/* Styles for AI-generated personality reports displayed in             */
/* #oceanProfileContent and .ocean-profile-content containers           */
/* ===================================================================== */

/* === BASE CONTAINER === */
.ocean-profile-content {
    line-height: 2!important;
    font-size: var(--font-size);
    color: var(--text-primary);
    font-family: var(--font-main);
    text-align: left;
    width: 100%;
    max-width: 100%;
}

    /* === TYPOGRAPHY HIERARCHY === */

    /* Main section headers (H1) */
    .ocean-profile-content h1 {
        font-size: 1.5em;
        font-weight: 600;
        color: var(--text-primary);
        margin: 24px 0 12px 0;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--border-color);
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

        /* First H1 has no top margin */
        .ocean-profile-content h1:first-child {
            margin-top: 0;
        }

    /* Trait headers (H2) */
    .ocean-profile-content h2 {
        font-size: 1.25em;
        font-weight: 600;
        color: var(--text-primary);
        margin: 16px 0 10px 0;
        padding: 10px 14px;
        background-color: var(--bg-secondary);
        border-left: 4px solid var(--signature-blue);
        border-radius: 4px;
    }

    /* Subsection headers (if H3 exists) */
    .ocean-profile-content h3 {
        font-size: 1.1em;
        font-weight: 600;
        color: var(--text-primary);
        margin: 12px 0 8px 0;
    }

    /* === PARAGRAPHS & TEXT === */
    .ocean-profile-content p {
        margin: 0 0 10px 0;
        line-height: 1.6;
        color: var(--text-primary);
    }

    /* === INLINE FORMATTING === */
    .ocean-profile-content strong {
        font-weight: 600;
        color: var(--text-primary);
    }

    .ocean-profile-content em {
        font-style: italic;
        color: var(--text-secondary);
    }

        /* Bold + Italic (trait nicknames like ***The Curious Adventurer***) */
        .ocean-profile-content strong em,
        .ocean-profile-content em strong {
            font-weight: 700;
            font-style: italic;
            color: var(--signature-blue);
        }

    /* === LISTS === */
    .ocean-profile-content ul,
    .ocean-profile-content ol {
        margin: 10px 0;
        padding-left: 28px;
    }

    .ocean-profile-content li {
        margin: 6px 0;
        line-height: 1.5;
        color: var(--text-primary);
    }

    .ocean-profile-content ul li {
        list-style-type: disc;
    }

    .ocean-profile-content li strong {
        color: var(--text-primary);
    }

    /* === BLOCKQUOTES (Key Insights, Special Callouts) === */
    .ocean-profile-content blockquote {
        margin: 14px 0;
        padding: 12px 16px;
        background-color: rgba(99, 102, 241, 0.08);
        border-left: 4px solid var(--signature-blue);
        border-radius: 4px;
        color: var(--text-primary);
    }

        .ocean-profile-content blockquote p {
            margin: 0 0 8px 0;
        }

            .ocean-profile-content blockquote p:last-child {
                margin-bottom: 0;
            }

        /* Blockquote emphasis */
        .ocean-profile-content blockquote strong {
            color: var(--signature-blue);
        }

    /* === HORIZONTAL RULES === */
    .ocean-profile-content hr {
        border: none;
        border-top: 1px solid var(--border-color);
        margin: 14px 0;
    }

/* === THEME-SPECIFIC ADJUSTMENTS === */

/* Dark mode */
body[data-theme="dark"] .ocean-profile-content h2 {
    background-color: rgba(99, 102, 241, 0.1);
    border-left-color: #818cf8;
}

body[data-theme="dark"] .ocean-profile-content blockquote {
    background-color: rgba(99, 102, 241, 0.12);
    border-left-color: #818cf8;
}

body[data-theme="dark"] .ocean-profile-content strong em,
body[data-theme="dark"] .ocean-profile-content em strong {
    color: #a5b4fc;
}

/* SLM Dark mode */
body[data-theme="slm-dark"] .ocean-profile-content h2 {
    background-color: rgba(105, 240, 174, 0.1);
    border-left-color: #69F0AE;
}

body[data-theme="slm-dark"] .ocean-profile-content blockquote {
    background-color: rgba(105, 240, 174, 0.08);
    border-left-color: #69F0AE;
}

body[data-theme="slm-dark"] .ocean-profile-content strong em,
body[data-theme="slm-dark"] .ocean-profile-content em strong {
    color: #69F0AE;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .ocean-profile-content {
        font-size: calc(var(--font-size) * 0.95);
    }

        .ocean-profile-content h1 {
            font-size: 1.35em;
            margin: 20px 0 10px 0;
        }

            .ocean-profile-content h1:first-child {
                margin-top: 0;
            }

        .ocean-profile-content h2 {
            font-size: 1.15em;
            padding: 8px 12px;
            margin: 14px 0 8px 0;
        }

        .ocean-profile-content blockquote {
            padding: 10px 14px;
            margin: 12px 0;
        }
}

/* === ACCESSIBILITY === */
.ocean-profile-content {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure sufficient contrast */
@media (prefers-contrast: high) {
    .ocean-profile-content h2 {
        border-left-width: 6px;
    }

    .ocean-profile-content blockquote {
        border-left-width: 6px;
    }
}