/* Blog post enhancements */
.share-buttons {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}

.share-buttons button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    color: var(--text-primary);
}

/* Newsletter form */
.newsletter-form {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.25rem;
}

.newsletter-form input[type="email"] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    min-width: 220px;
}

.newsletter-form button {
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--primary);
    color: #fff;
}

/* Author box */
.author-box {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: 12px;
    background: var(--bg-glass);
    margin-top: 1.5rem;
}

.author-box .avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
}

.author-box .meta {
    font-size: 0.95rem;
}

/* Pull quotes */
.pull-quote {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--primary);
    background: var(--bg-glass);
    border-radius: 8px;
    font-style: italic;
}

/* Content image helper */
.content-image {
    margin: 1rem 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* Light/Dark adjustments for glass surfaces */
@media (prefers-color-scheme: dark) {
    .author-box,
    .pull-quote,
    .share-buttons button,
    .newsletter-form {
        background: var(--bg-glass-dark);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .newsletter-form {
        flex-direction: column;
    }

    .share-buttons {
        flex-wrap: wrap;
    }
}

.blog-cards,.blog-related{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1024px){.blog-cards,.blog-related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.blog-cards,.blog-related{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post-card .post-meta,.card .post-meta{display:flex;gap:.5rem;align-items:center;font-size:.875rem;color:var(--muted)}
.post-card .post-meta .tag,.card .post-meta .tag{padding:.15rem .5rem;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab,var(--surface)85%,transparent);font-weight:600;font-size:.85rem}
.post-card .post-meta time{opacity:.85;font-size:.85rem}

/* Table of Contents styles (static and dynamic) */
nav.toc,
.table-of-contents {
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-glass);
}

nav.toc strong,
.table-of-contents h2 {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--text-primary);
}

nav.toc ol,
.table-of-contents ul {
    margin: 0;
    padding-left: 1.25rem;
}

nav.toc li,
.table-of-contents li {
    margin: 0.25rem 0;
}

nav.toc a,
.table-of-contents a {
    color: var(--link);
    text-decoration: none;
}

nav.toc a:hover,
.table-of-contents a:hover {
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  nav.toc,
  .table-of-contents {
    background: var(--bg-glass-dark);
  }
}