/**
 * OrangoSEO blog embed — load blog-embed.css, then optionally set --os-blog-* variables
 * on :root or any ancestor of [data-os-blog] to match your site brand.
 */
.os-blog-widget {
    font-family: var(--os-blog-font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    color: var(--os-blog-text, #1c1410);
    max-width: var(--os-blog-max-width, 42rem);
}

.os-blog-title {
    font-size: var(--os-blog-heading-size, 1.5rem);
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--os-blog-text, #1c1410);
}

.os-blog-list {
    display: flex;
    flex-direction: column;
    gap: var(--os-blog-gap, 1rem);
}

.os-blog-post {
    background: var(--os-blog-surface, #ffffff);
    border: 1px solid var(--os-blog-border, #fed7aa);
    border-radius: var(--os-blog-radius, 1rem);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--os-blog-shadow, 0 8px 24px rgba(234, 88, 12, 0.08));
}

.os-blog-date {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--os-blog-accent, #ea580c);
    margin-bottom: 0.35rem;
}

.os-blog-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--os-blog-category-text, #9a3412);
    background: var(--os-blog-category-bg, #ffedd5);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    margin-bottom: 0.5rem;
}

.os-blog-post-title {
    font-size: var(--os-blog-post-title-size, 1.25rem);
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--os-blog-text, #1c1410);
}

.os-blog-post-link {
    color: inherit;
    text-decoration: none;
}

.os-blog-post-link:hover {
    color: var(--os-blog-accent, #ea580c);
}

.os-blog-excerpt {
    color: var(--os-blog-muted, #6b5b50);
    margin: 0 0 0.75rem;
    line-height: 1.6;
}

.os-blog-read-more-wrap {
    margin: 0;
}

.os-blog-read-more {
    color: var(--os-blog-accent, #ea580c);
    font-weight: 600;
    text-decoration: none;
}

.os-blog-read-more:hover {
    color: var(--os-blog-accent-hover, #c2410c);
    text-decoration: underline;
}

.os-blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.os-blog-page-btn {
    appearance: none;
    border: 1px solid var(--os-blog-border, #fed7aa);
    background: var(--os-blog-surface, #ffffff);
    color: var(--os-blog-text, #1c1410);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.os-blog-page-btn:hover:not(.os-blog-page-btn-disabled) {
    border-color: var(--os-blog-accent, #ea580c);
    color: var(--os-blog-accent, #ea580c);
}

.os-blog-page-btn-disabled {
    opacity: 0.45;
    cursor: default;
}

.os-blog-page-status {
    font-size: 0.875rem;
    color: var(--os-blog-muted, #6b5b50);
}

.os-blog-back-wrap {
    margin: 0 0 1rem;
}

.os-blog-back {
    color: var(--os-blog-accent, #ea580c);
    font-weight: 600;
    text-decoration: none;
}

.os-blog-back:hover {
    color: var(--os-blog-accent-hover, #c2410c);
    text-decoration: underline;
}

.os-blog-widget-single .os-blog-post-title {
    font-size: var(--os-blog-single-title-size, 1.75rem);
}

.os-blog-body p {
    color: var(--os-blog-muted, #6b5b50);
    line-height: 1.65;
    margin: 0 0 1rem;
}

.os-blog-body p:last-child {
    margin-bottom: 0;
}

.os-blog-body a {
    color: var(--os-blog-accent, #ea580c);
    font-weight: 500;
}

.os-blog-body a:hover {
    color: var(--os-blog-accent-hover, #c2410c);
}

.os-blog-empty,
.os-blog-error {
    color: var(--os-blog-muted, #6b7280);
    margin: 0;
}

.os-blog-error {
    color: var(--os-blog-error, #b91c1c);
}

.os-blog-loading {
    opacity: 0.6;
}

/* Admin embed-code page only */
.blog-embed-snippet {
    background: #111827;
    color: #f9fafb;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
}

.blog-admin-page code {
    font-size: 0.875em;
}