/* Blog post and article styles */

/* Give the reading column more room than the generic .page-layout pages
   (page.php, search.php, archive.php, etc. keep the default 1200px
   container) — only the single blog post gets the wider container. */
.single-post #primary.site-main .container {
    max-width: 1360px;
}

/* .section's default 72px top padding was sized to sit below the old
   standalone breadcrumb bar. That bar is gone now (folded into the
   meta row), so on the single post it left a bare 72px gap under the
   sticky header with nothing to justify it. */
.single-post #primary.site-main {
    padding-top: 32px;
}

.post-full-article {
    padding: 48px;
}

@media (max-width: 768px) {
    .post-full-article {
        padding: 24px;
    }
}

/* Breadcrumb + title + meta read as one centered masthead — narrower
   than the article card itself, echoing the same centered-hero-content
   pattern used on the rest of the site (.hero-content). The article
   body below stays left-aligned/full-width for readability. */
.entry-header {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.post-cat-badges a {
    background: var(--sky-blue);
    color: var(--medical-blue);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.post-meta-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The breadcrumb nav is normally its own full-width bar with vertical
   padding; folded into the meta row here, it needs to sit flush like
   any other meta item. The trailing "current" crumb is dropped since
   it just repeats the post title sitting right above it in the H1. */
.post-meta-top .breadcrumbs {
    padding: 0;
    font-size: 0.9rem;
}

.post-meta-top .breadcrumbs .current,
.post-meta-top .breadcrumbs .sep:has(+ .current) {
    display: none;
}

.author-meta img {
    border-radius: 50%;
}

.post-thumbnail-wrap img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.entry-content {
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Two even cards instead of plain stacked text links — makes the prev/
   next choice feel intentional rather than an afterthought at the end
   of the article. */
.post-navigation-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.nav-prev,
.nav-next {
    min-width: 0;
}

.nav-next {
    grid-column: 2;
}

.nav-prev a,
.nav-next a {
    display: block;
    height: 100%;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.nav-prev a:hover,
.nav-next a:hover {
    border-color: var(--medical-blue);
    box-shadow: var(--shadow-sm);
}

.nav-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 400;
    margin-bottom: 8px;
}

.nav-next .nav-label {
    justify-content: flex-end;
}

.nav-title {
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-dark);
}

.nav-prev a:hover .nav-title,
.nav-next a:hover .nav-title {
    color: var(--medical-blue);
}

@media (max-width: 560px) {
    .post-navigation-links {
        grid-template-columns: 1fr;
    }

    .nav-next {
        grid-column: 1;
    }

    .nav-next .nav-label {
        justify-content: flex-start;
    }
}

.entry-title {
    font-size: 2.1rem;
    line-height: 1.2;
}

.post-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.post-tags a {
    background: var(--bg-section);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.post-tags a:hover {
    background: var(--sky-blue);
    color: var(--medical-blue);
}

.tag-label {
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

.page-links {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.page-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--medical-blue);
    text-decoration: none;
}

.page-links a:hover {
    background: var(--sky-blue);
}

.ad-widget {
    margin-top: 24px;
}

.entry-content p {
    margin-bottom: 20px;
}

/* First child of the article body shouldn't add its own top margin on
   top of .entry-header's mb-24 — otherwise a post that opens with a
   heading (or any block with a margin-top) reads as an oversized gap
   under the meta row. */
.entry-content > *:first-child {
    margin-top: 0;
}

/* Content authors can type a literal H1 into the body (some editors
   still expose it), which would otherwise render at the same sitewide
   hero size as .entry-title right above it. Folded into the same
   content-scoped scale as h2/h3/h4 so it never outsizes the real title. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 32px;
    margin-bottom: 16px;
}

.entry-content h1 {
    font-size: 1.65rem;
}

.entry-content h2 {
    font-size: 1.5rem;
}

.entry-content h3 {
    font-size: 1.25rem;
}

.entry-content h4 {
    font-size: 1.1rem;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 24px;
    padding-left: 24px;
}

.entry-content ul {
    list-style-type: disc;
}

.entry-content ol {
    list-style-type: decimal;
}

.entry-content li {
    margin-bottom: 10px;
    padding-left: 8px;
}

.entry-content blockquote {
    border-left: 4px solid var(--medical-blue);
    padding: 20px 24px;
    background: var(--bg-section);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--text-dark);
    margin: 24px 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* The one section that gets real weight: a white card (not the same
   beige as everything else above it), so the article closes on the
   author rather than fading into another gray box. */
.author-info-box {
    display: flex;
    gap: 24px;
    padding: 28px 32px;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-top: 32px;
}

.author-avatar img {
    border-radius: 50%;
    border: 3px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.author-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--medical-blue);
    margin-bottom: 6px;
}

.author-details h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.author-details p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.author-details .btn-outline-sm {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 600px) {
    .author-info-box {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .author-avatar {
        display: flex;
        justify-content: center;
    }

    .author-eyebrow {
        text-align: center;
    }
}

.recent-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.recent-post-item a:hover {
    color: var(--medical-blue-dark);
}

.sticky-top {
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

/* === COMMENTS (default WP comment_form/wp_list_comments markup) === */
#comments {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.comments-title,
.comment-reply-title {
    font-size: 1.15rem;
    margin-bottom: 20px;
}

.comment-reply-title small {
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.comment-reply-title small a {
    color: var(--medical-blue);
}

.comment-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.comment-list .children {
    list-style: none;
    margin: 20px 0 0;
    padding-left: 48px;
}

.comment {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.comment:last-child {
    border-bottom: none;
}

.comment-body {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px 16px;
}

.comment .avatar {
    grid-row: 1 / span 3;
    border-radius: 50%;
}

.comment-author .fn {
    font-weight: 700;
    font-style: normal;
    color: var(--text-primary);
}

.comment-author .says {
    display: none;
}

.comment-metadata {
    font-size: 0.75rem;
}

.comment-metadata a {
    color: var(--text-muted);
    text-decoration: none;
}

.comment-content p {
    margin: 8px 0 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.comment-content,
.reply {
    grid-column: 2;
}

.reply {
    margin-top: 8px;
}

.comment-reply-link {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--medical-blue);
    text-decoration: none;
}

.comment-reply-link:hover {
    color: var(--medical-blue-dark);
}

.comment-notes,
.logged-in-as,
.form-allowed-tags {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.logged-in-as a {
    color: var(--medical-blue);
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
    margin-bottom: 20px;
}

.comment-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--medical-blue);
    box-shadow: 0 0 0 3px var(--sky-blue);
}

.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.comment-form-cookies-consent label {
    margin: 0;
    font-weight: 400;
}

.form-submit {
    margin: 0;
}

#submit {
    background: var(--medical-blue);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-out;
}

#submit:hover {
    background: var(--medical-blue-dark);
}

@media (max-width: 600px) {
    .comment-list .children {
        padding-left: 20px;
    }
}