/* =====================================================================
 * 02 — TYPOGRAPHY
 * Преміальна типографічна система. Sacred elegance.
 * Headings: Cormorant Garamond (serif), Body: Inter (sans).
 * ===================================================================== */

/* ---------- BODY DEFAULTS (тільки якщо не Elementor-сторінка) ---------- */
body.sm-premium {
    font-family: var(--sm-font-body) !important;
    font-size: var(--sm-text-base);
    line-height: var(--sm-leading-relaxed);
    color: var(--sm-charcoal);
    font-weight: 400;
}

/* ---------- HEADINGS ---------- */
.sm-premium h1,
.sm-premium h2,
.sm-premium h3,
.sm-premium h4,
.sm-premium h5,
.sm-premium h6,
.sm-premium .h1,
.sm-premium .h2,
.sm-premium .h3,
.sm-premium .entry-title,
.sm-premium .post-title,
.sm-premium .widget-title {
    font-family: var(--sm-font-headings) !important;
    font-weight: 600;
    color: var(--sm-blue);
    line-height: var(--sm-leading-tight);
    letter-spacing: var(--sm-tracking-tight);
    margin: 0 0 var(--sm-space-4);
}

.sm-premium h1, .sm-premium .h1 {
    font-size: var(--sm-text-4xl);
    font-weight: 600;
    line-height: 1.15;
}

.sm-premium h2, .sm-premium .h2 {
    font-size: var(--sm-text-3xl);
    font-weight: 600;
}

.sm-premium h3, .sm-premium .h3 {
    font-size: var(--sm-text-2xl);
    font-weight: 600;
}

.sm-premium h4, .sm-premium .h4 {
    font-size: var(--sm-text-xl);
    font-weight: 600;
}

.sm-premium h5 {
    font-size: var(--sm-text-lg);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sm-tracking-wider);
}

.sm-premium h6 {
    font-size: var(--sm-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sm-tracking-wider);
    color: var(--sm-gold);
}

/* ---------- ВИЗУАЛЬНА ВАГА ЗАГОЛОВКІВ ---------- */
.sm-premium h1 {
    /* H1 з тонким золотим підкресленням */
    position: relative;
}

.sm-premium .entry-title,
.sm-premium .post-title {
    margin-bottom: var(--sm-space-3);
}

/* ---------- PARAGRAPHS ---------- */
.sm-premium p {
    margin: 0 0 var(--sm-space-5);
    line-height: var(--sm-leading-relaxed);
}

.sm-premium p.lead,
.sm-premium .lead p {
    font-size: var(--sm-text-lg);
    line-height: var(--sm-leading-normal);
    color: var(--sm-charcoal-soft);
    font-weight: 400;
}

/* Перший абзац у статті — більший, як у редакційних виданнях */
.sm-premium .entry-content > p:first-of-type,
.sm-premium .post-content > p:first-of-type {
    font-size: var(--sm-text-lg);
    line-height: var(--sm-leading-normal);
}

/* Drop cap — буквиця в першому абзаці single post (опціонально) */
.sm-premium.single .entry-content > p:first-of-type::first-letter {
    font-family: var(--sm-font-headings);
    float: left;
    font-size: 4em;
    line-height: 0.85;
    margin: 0.05em 0.1em 0 0;
    color: var(--sm-blue);
    font-weight: 600;
}

/* ---------- LINKS ---------- */
.sm-premium .entry-content a,
.sm-premium .post-content a,
.sm-premium .article-content a {
    color: var(--sm-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--sm-gold-soft);
    transition: color var(--sm-transition-base), border-color var(--sm-transition-base);
}

.sm-premium .entry-content a:hover,
.sm-premium .post-content a:hover,
.sm-premium .article-content a:hover {
    color: var(--sm-gold-deep);
    border-bottom-color: var(--sm-gold);
}

/* ---------- LISTS ---------- */
.sm-premium .entry-content ul,
.sm-premium .entry-content ol,
.sm-premium .post-content ul,
.sm-premium .post-content ol {
    margin: 0 0 var(--sm-space-5) var(--sm-space-5);
    padding-left: var(--sm-space-3);
}

.sm-premium .entry-content li,
.sm-premium .post-content li {
    margin-bottom: var(--sm-space-2);
    line-height: var(--sm-leading-relaxed);
}

.sm-premium .entry-content ul li::marker {
    color: var(--sm-gold);
}

/* ---------- BLOCKQUOTES (Послання Цариці Миру!) ---------- */
.sm-premium blockquote,
.sm-premium .entry-content blockquote,
.sm-premium .post-content blockquote {
    font-family: var(--sm-font-quotes);
    font-style: italic;
    font-size: var(--sm-text-xl);
    line-height: var(--sm-leading-snug);
    color: var(--sm-blue-deep);
    background: var(--sm-gold-light);
    border: none;
    border-left: 3px solid var(--sm-gold);
    padding: var(--sm-space-6) var(--sm-space-6) var(--sm-space-6) var(--sm-space-7);
    margin: var(--sm-space-6) 0;
    position: relative;
    border-radius: var(--sm-radius-md);
}

.sm-premium blockquote::before {
    content: '\201C'; /* unicode для відкриваючої лапки */
    font-family: var(--sm-font-quotes);
    font-size: 6em;
    line-height: 1;
    color: var(--sm-gold);
    position: absolute;
    top: -0.05em;
    left: 0.15em;
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
}

.sm-premium blockquote p:last-child {
    margin-bottom: 0;
}

.sm-premium blockquote cite {
    display: block;
    font-style: normal;
    font-family: var(--sm-font-meta);
    font-size: var(--sm-text-sm);
    color: var(--sm-gold-deep);
    margin-top: var(--sm-space-3);
    text-transform: uppercase;
    letter-spacing: var(--sm-tracking-wider);
    font-weight: 500;
}

.sm-premium blockquote cite::before {
    content: '— ';
}

/* ---------- SMALL TEXT, META ---------- */
.sm-premium small,
.sm-premium .small,
.sm-premium .post-meta,
.sm-premium .entry-meta,
.sm-premium time,
.sm-premium .post-date,
.sm-premium .post-author {
    font-family: var(--sm-font-meta);
    font-size: var(--sm-text-sm);
    color: var(--sm-gold-deep);
    font-style: italic;
    letter-spacing: var(--sm-tracking-wide);
}

/* ---------- CATEGORY / BADGES ---------- */
.sm-premium .post-category,
.sm-premium .cat-links,
.sm-premium .category,
.sm-premium .badge {
    display: inline-block;
    font-family: var(--sm-font-body);
    font-size: var(--sm-text-xs);
    font-weight: 600;
    color: var(--sm-gold-deep);
    text-transform: uppercase;
    letter-spacing: var(--sm-tracking-widest);
    padding: 4px 12px;
    background: var(--sm-gold-light);
    border-radius: var(--sm-radius-full);
    text-decoration: none;
}

.sm-premium .post-category:hover,
.sm-premium .cat-links:hover {
    background: var(--sm-gold);
    color: var(--sm-white);
}

/* ---------- KBD, CODE, PRE ---------- */
.sm-premium code,
.sm-premium kbd {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.9em;
    background: var(--sm-cream-deep);
    padding: 2px 6px;
    border-radius: var(--sm-radius-sm);
    color: var(--sm-blue);
}

.sm-premium pre {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;
    font-size: var(--sm-text-sm);
    background: var(--sm-charcoal);
    color: var(--sm-cream);
    padding: var(--sm-space-5);
    border-radius: var(--sm-radius-md);
    overflow-x: auto;
    line-height: var(--sm-leading-snug);
    margin: var(--sm-space-5) 0;
}

/* ---------- HORIZONTAL RULE — золота лінія, як у книгах ---------- */
.sm-premium hr,
.sm-premium .divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sm-gold), transparent);
    margin: var(--sm-space-7) 0;
    overflow: visible;
}

.sm-premium hr.sm-divider-gold-thick {
    height: 2px;
    background: var(--sm-gold);
}

.sm-premium hr.sm-divider-symbol {
    background: none;
    text-align: center;
    height: auto;
}

.sm-premium hr.sm-divider-symbol::before {
    content: '✦';
    font-family: var(--sm-font-headings);
    font-size: var(--sm-text-xl);
    color: var(--sm-gold);
    background: var(--sm-cream);
    padding: 0 var(--sm-space-4);
}

/* ---------- SELECTION ---------- */
.sm-premium ::selection {
    background: var(--sm-gold);
    color: var(--sm-white);
}

/* ---------- RESPONSIVE TYPE (mobile-first зменшення) ---------- */
@media (max-width: 768px) {
    .sm-premium h1, .sm-premium .h1 { font-size: 32px; }
    .sm-premium h2, .sm-premium .h2 { font-size: 26px; }
    .sm-premium h3, .sm-premium .h3 { font-size: 22px; }
    .sm-premium h4, .sm-premium .h4 { font-size: 19px; }
    .sm-premium body { font-size: 16px; }
    .sm-premium blockquote { font-size: var(--sm-text-lg); padding: var(--sm-space-5); }
    .sm-premium .entry-content > p:first-of-type::first-letter { font-size: 3.5em; }
}