/**
 * DIT TrendStudio Article Styles
 * Frontend + editor styles for generated magazine content
 *
 * @package DIT_TrendStudio
 * @MODIFIED 2025-12-13 - Created for frontend article styling
 * @MODIFIED 2025-12-14 - Merged design tokens, utility classes, editor parity
 */

/* ==========================================================================
   Design Tokens
   Extends Neve theme CSS variables with article-specific values
   ========================================================================== */

:root {
    /* Typography - extends Neve */
    --dit-ts-font-display: var(--nv-fallback-ff, Georgia, serif);
    --dit-ts-font-body: var(--nv-body-font-family, Georgia, serif);
    --dit-ts-font-ui: var(--nv-headings-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

    /* Type scale (Major Third 1.25) */
    --dit-ts-text-sm: 0.875rem;
    --dit-ts-text-base: 1rem;
    --dit-ts-text-lg: 1.25rem;
    --dit-ts-text-xl: 1.563rem;
    --dit-ts-text-2xl: 1.953rem;

    /* Spacing rhythm */
    --dit-ts-space-xs: 0.25rem;
    --dit-ts-space-sm: 0.5rem;
    --dit-ts-space-md: 1rem;
    --dit-ts-space-lg: 2rem;
    --dit-ts-space-xl: 3rem;

    /* Colors */
    --dit-ts-color-text: #1a1a1a;
    --dit-ts-color-muted: #666;
    --dit-ts-color-accent: #c41e3a;
    --dit-ts-color-border: #e0e0e0;
    --dit-ts-color-surface: #f8f8f8;
}

/* ==========================================================================
   Article Wrapper (core/group with className)
   ========================================================================== */

.dit-ts-article {
    font-family: var(--dit-ts-font-body);
    font-size: var(--dit-ts-text-base);
    line-height: 1.6;
    color: var(--dit-ts-color-text);
    max-width: 720px;
}

.dit-ts-article h2 {
    font-family: var(--dit-ts-font-ui);
    font-size: var(--dit-ts-text-xl);
    font-weight: 600;
    margin: var(--dit-ts-space-lg) 0 var(--dit-ts-space-md);
    color: var(--dit-ts-color-text);
}

.dit-ts-article p {
    margin-bottom: var(--dit-ts-space-md);
}

.dit-ts-article a {
    color: var(--dit-ts-color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dit-ts-article a:hover {
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   Utility Class 1: Dek / Subhead
   Apply to: core/paragraph with className="dit-ts-dek"
   ========================================================================== */

.dit-ts-dek {
    font-size: var(--dit-ts-text-lg);
    font-style: italic;
    color: var(--dit-ts-color-muted);
    line-height: 1.5;
    margin-bottom: var(--dit-ts-space-lg);
    padding-bottom: var(--dit-ts-space-md);
    border-bottom: 1px solid var(--dit-ts-color-border);
}

/* ==========================================================================
   Utility Class 2: Accent Pullquote
   Apply to: core/pullquote with className="dit-ts-pullquote-accent"
   ========================================================================== */

.dit-ts-pullquote-accent {
    border-left: 4px solid var(--dit-ts-color-accent);
    border-top: none;
    border-bottom: none;
    padding: var(--dit-ts-space-md) var(--dit-ts-space-lg);
    margin: var(--dit-ts-space-lg) 0;
}

.dit-ts-pullquote-accent blockquote {
    font-size: var(--dit-ts-text-xl);
    font-style: italic;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.dit-ts-pullquote-accent cite {
    display: block;
    margin-top: var(--dit-ts-space-sm);
    font-size: var(--dit-ts-text-sm);
    font-style: normal;
    color: var(--dit-ts-color-muted);
}

/* ==========================================================================
   Utility Class 3: Sources Container
   Apply to: core/group with className="dit-ts-sources"
   ========================================================================== */

.dit-ts-sources {
    margin-top: var(--dit-ts-space-lg);
    padding: var(--dit-ts-space-md);
    background: var(--dit-ts-color-surface);
    border-radius: 4px;
    border: 1px solid var(--dit-ts-color-border);
}

.dit-ts-sources h3,
.dit-ts-sources .wp-block-heading {
    font-family: var(--dit-ts-font-ui);
    font-size: var(--dit-ts-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dit-ts-color-muted);
    margin: 0 0 var(--dit-ts-space-sm);
}

/* ==========================================================================
   Utility Class 4: Source Item
   Apply to: core/paragraph with className="dit-ts-source-item"
   ========================================================================== */

.dit-ts-source-item {
    font-size: var(--dit-ts-text-sm);
    margin-bottom: var(--dit-ts-space-xs);
    padding-left: var(--dit-ts-space-md);
    position: relative;
}

.dit-ts-source-item::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--dit-ts-color-muted);
}

/* ==========================================================================
   Utility Class 5: Byline
   Apply to: core/paragraph with className="dit-ts-byline"
   ========================================================================== */

.dit-ts-byline {
    font-size: var(--dit-ts-text-sm);
    color: var(--dit-ts-color-muted);
    margin-bottom: var(--dit-ts-space-lg);
}

.dit-ts-byline a {
    color: inherit;
    font-weight: 500;
}

/* ==========================================================================
   Utility Class 6: Drop Cap Enhancement
   Enhances WordPress built-in .has-drop-cap
   ========================================================================== */

.dit-ts-article .has-drop-cap:not(:focus)::first-letter {
    font-family: var(--dit-ts-font-display);
    font-size: 3.5em;
    font-weight: 400;
    line-height: 0.8;
    margin-right: 0.1em;
    color: var(--dit-ts-color-accent);
    float: left;
}

/* ==========================================================================
   Image Attribution
   ========================================================================== */

.dit-ts-image-credit {
    font-size: var(--dit-ts-text-sm);
    color: var(--dit-ts-color-muted);
    font-style: italic;
    margin-top: var(--dit-ts-space-sm);
    margin-bottom: var(--dit-ts-space-md);
}

/* ==========================================================================
   Verification Badges (Editor Only)
   ========================================================================== */

.dit-ts-unverified-badge,
.dit-ts-report-claims-badge {
    display: inline-block;
    font-family: var(--dit-ts-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    margin-right: var(--dit-ts-space-sm);
    vertical-align: middle;
}

.dit-ts-unverified-badge {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.dit-ts-report-claims-badge {
    background: #fce7f3;
    color: #9d174d;
    border: 1px solid #f9a8d4;
}

/* ==========================================================================
   Editor Parity
   Ensures block editor matches frontend
   ========================================================================== */

.editor-styles-wrapper .dit-ts-article {
    font-family: var(--dit-ts-font-body);
    font-size: var(--dit-ts-text-base);
    line-height: 1.6;
    color: var(--dit-ts-color-text);
}

.editor-styles-wrapper .dit-ts-dek {
    font-size: var(--dit-ts-text-lg);
    font-style: italic;
    color: var(--dit-ts-color-muted);
}

.editor-styles-wrapper .dit-ts-pullquote-accent {
    border-left: 4px solid var(--dit-ts-color-accent);
}

.editor-styles-wrapper .dit-ts-sources {
    background: var(--dit-ts-color-surface);
    border: 1px solid var(--dit-ts-color-border);
}

.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter {
    color: var(--dit-ts-color-accent);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 600px) {
    .dit-ts-dek {
        font-size: 1.1em;
    }

    .dit-ts-sources {
        padding: var(--dit-ts-space-sm);
    }

    .dit-ts-article .has-drop-cap:not(:focus)::first-letter {
        font-size: 2.5em;
    }

    .dit-ts-pullquote-accent blockquote {
        font-size: var(--dit-ts-text-lg);
    }
}