/**
 * Community Quotes - embed stylesheet
 *
 * Self contained styles for the {cquote} content embeds and the editors-xtd
 * picker preview. Renders card, blockquote, pullquote, and inline variants,
 * matching docs/design/picker.jsx PreviewEmbed. All colours and fonts are
 * defined locally (via :where fallbacks so template overrides can still win)
 * so an embed looks correct on any light template background.
 *
 * @copyright  Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

:where(.cquotes-embed) {
    --cqe-bg-sunken: #efece4;
    --cqe-surface: #ffffff;
    --cqe-ink: #1a1a1a;
    --cqe-ink-soft: #4a4a48;
    --cqe-ink-muted: #8a8a86;
    --cqe-line: #e3dfd5;
    --cqe-accent: #d97757;
    --cqe-accent-ink: #8c4628;
    --cqe-serif: "Spectral", "Iowan Old Style", "Charter", Georgia, serif;
    --cqe-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cqe-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    --cqe-radius-sm: 6px;
    --cqe-radius: 10px;
}

.cquotes-embed {
    box-sizing: border-box;
    color: var(--cqe-ink);
    font-family: var(--cqe-sans);
    -webkit-font-smoothing: antialiased;
}

.cquotes-embed * {
    box-sizing: border-box;
}

.cquotes-embed .cquotes-embed-link,
.cquotes-embed .cquotes-embed-link:link,
.cquotes-embed .cquotes-embed-link:visited,
.cquotes-embed .cquotes-embed-link:hover,
.cquotes-embed .cquotes-embed-link:focus,
.cquotes-embed .cquotes-embed-link:active {
    color: inherit;
    text-decoration-line: none !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: auto !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: auto !important;
}

.cquotes-embed .cquotes-embed-link:hover,
.cquotes-embed .cquotes-embed-link:focus {
    color: var(--cqe-accent-ink);
}

.cquotes-embed .cquotes-embed-author,
.cquotes-embed .cquotes-embed-author:link,
.cquotes-embed .cquotes-embed-author:visited,
.cquotes-embed .cquotes-embed-author:active {
    color: var(--cqe-accent);
    font-weight: 600;
    text-decoration-line: none !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: auto !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: auto !important;
}

.cquotes-embed a.cquotes-embed-author:hover,
.cquotes-embed a.cquotes-embed-author:focus {
    text-decoration-line: underline !important;
}

/* ---------------------------------------------------------------- */
/* Card + blockquote (shared figure skeleton)                        */
/* ---------------------------------------------------------------- */

.cquotes-embed-card,
.cquotes-embed-blockquote {
    display: block;
    margin: 1.5em 0;
}

.cquotes-embed-card {
    padding: 24px 28px;
    background: var(--cqe-surface);
    border: 1px solid var(--cqe-line);
    border-radius: var(--cqe-radius);
    box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 8px 24px -8px rgba(20, 20, 20, 0.08);
}

.cquotes-embed-blockquote {
    padding: 12px 18px;
    background: var(--cqe-bg-sunken);
    border-left: 4px solid var(--cqe-accent);
    border-radius: 0 var(--cqe-radius-sm) var(--cqe-radius-sm) 0;
}

.cquotes-embed-card .cquotes-embed-text,
.cquotes-embed-blockquote .cquotes-embed-text {
    margin: 0;
    padding: 0;
    border: 0;
    quotes: none;
    font-family: var(--cqe-serif);
    font-style: italic;
    line-height: 1.45;
    color: var(--cqe-ink);
}

.cquotes-embed-card .cquotes-embed-text {
    font-size: 19px;
    line-height: 1.4;
}

.cquotes-embed-blockquote .cquotes-embed-text {
    font-size: 16px;
}

.cquotes-embed-card .cquotes-embed-meta,
.cquotes-embed-blockquote .cquotes-embed-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--cqe-ink-muted);
}

.cquotes-embed-blockquote .cquotes-embed-meta {
    margin-top: 8px;
}

.cquotes-embed .cquotes-embed-source {
    font-style: normal;
    font-family: var(--cqe-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--cqe-ink-muted);
}

/* A short em rule sits before the author name in the card and blockquote
   figcaption, drawn as a border so no dash character appears in content. */
.cquotes-embed-card .cquotes-embed-author,
.cquotes-embed-blockquote .cquotes-embed-author {
    position: relative;
    padding-left: 22px;
}

.cquotes-embed-card .cquotes-embed-author::before,
.cquotes-embed-blockquote .cquotes-embed-author::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 14px;
    height: 1px;
    background: var(--cqe-ink-muted);
}

/* ---------------------------------------------------------------- */
/* Pullquote                                                         */
/* ---------------------------------------------------------------- */

.cquotes-embed-pullquote {
    display: block;
    margin: 1.75em 0;
    padding: 24px 12px;
    text-align: center;
    border-top: 2px solid var(--cqe-ink);
    border-bottom: 2px solid var(--cqe-ink);
}

.cquotes-embed-pullquote .cquotes-embed-text {
    margin: 0;
    padding: 0;
    border: 0;
    quotes: none;
    font-family: var(--cqe-serif);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--cqe-ink);
}

.cquotes-embed-pullquote .cquotes-embed-meta {
    margin-top: 10px;
    font-family: var(--cqe-sans);
    font-size: 12px;
    color: var(--cqe-ink-muted);
}

.cquotes-embed-pullquote .cquotes-embed-author {
    color: var(--cqe-ink-muted);
    font-weight: 500;
}

/* ---------------------------------------------------------------- */
/* Inline citation                                                   */
/* ---------------------------------------------------------------- */

.cquotes-embed-inline {
    display: inline;
    font-family: var(--cqe-sans);
    font-size: inherit;
    line-height: inherit;
    color: var(--cqe-ink);
}

.cquotes-embed-inline em {
    font-family: var(--cqe-serif);
    font-style: italic;
}

.cquotes-embed-inline .cquotes-embed-source {
    color: var(--cqe-ink-muted);
}

/* ---------------------------------------------------------------- */
/* Dark template surfaces                                            */
/* ---------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :where(.cquotes-embed) {
        --cqe-bg-sunken: #0c0b0a;
        --cqe-surface: #1c1b18;
        --cqe-ink: #f6f4ef;
        --cqe-ink-soft: #c8c4ba;
        --cqe-ink-muted: #8a8680;
        --cqe-line: #2a2825;
        --cqe-accent: #e8895c;
        --cqe-accent-ink: #f0c4ac;
    }
}