/**
 * Inline Quote Component - Theme Integration
 *
 * Essential styling for span.quote elements throughout the site.
 * Provides quotation marks and proper styling for inline quotes.
 *
 * Migrated from plugin frontend.css for clean theme-centric architecture.
 */

/* ==========================================================================
   Inline Quote Styling - Basic Text Quotes
   ========================================================================== */

span.quote {
    font-style: italic;
    color: var(--qm-text-secondary, #444);
    position: relative;
}

span.quote::before,
span.quote::after {
    font-style: italic;
}

span.quote::before {
    content: "\201C";
    margin-right: 0.1em;
}

span.quote::after {
    content: "\201D";
    margin-left: 0.1em;
}

/* Quote styling in editor and content */
.wp-block-post-content span.quote,
.qm-post-excerpt span.quote,
.qm-story-excerpt span.quote {
    padding: 0.2em 0.5em;
    margin: 0 0.1em;
    border-radius: 0.4em;
    font-style: italic;
    position: relative;
    display: inline-block;
}

/* Quotation marks with proper specificity */
.wp-block-post-content span.quote::before,
.qm-post-excerpt span.quote::before,
.qm-story-excerpt span.quote::before,
span.quote::before {
    content: "\201C";
    font-style: italic;
    font-weight: inherit;
}

.wp-block-post-content span.quote::after,
.qm-post-excerpt span.quote::after,
.qm-story-excerpt span.quote::after,
span.quote::after {
    content: "\201D";
    font-style: italic;
    font-weight: inherit;
}

/* Interactive quote styling */
span.quote[data-character-name] {
    cursor: help;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-block-post-content span.quote {
        padding: 0.15em 0.3em;
        margin: 0 0.05em;
    }
}