/*
 * Rich-text content on blog and service pages (plan 06 Design section 4).
 * Linked only by the pages that print Content_renderer output (header.php,
 * $sg_content_css). The embed size comes from these classes, never from
 * inline styles: Content_renderer writes
 * <div class="sg-embed sg-embed--16x9"><iframe ...></iframe></div>.
 */

/* Responsive embeds (YouTube, Vimeo) */
.sg-embed {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    margin: 0 0 1.5rem;
    background: #000;
}
.sg-embed--16x9 { padding-bottom: 56.25%; }
.sg-embed--4x3 { padding-bottom: 75%; }
.sg-embed--1x1 { padding-bottom: 100%; }
.sg-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
figure.media { margin: 0 0 1.5rem; }

/* Rich-text blocks keep the paragraph rhythm the old <p> wrappers gave */
.blog-details-text > :last-child,
.sg-rich-text > :last-child { margin-bottom: 0; }
.blog-details-text table,
.sg-rich-text table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; }
.blog-details-text th, .blog-details-text td,
.sg-rich-text th, .sg-rich-text td { border: 1px solid #dee2e6; padding: .5rem .75rem; vertical-align: top; }
.blog-details-text figure.table,
.sg-rich-text figure.table { margin: 0 0 1.5rem; overflow-x: auto; }
.blog-details-text img,
.sg-rich-text img { max-width: 100%; height: auto; }

/* Table of contents (partials/toc.php) */
.toc {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid #0e3a5b;
    background: #f5f7fa;
    border-radius: 4px;
}
.toc .toc-title {
    margin: 0 0 .5rem;
    font-weight: 700;
}
.toc ol {
    margin: 0;
    padding-left: 1.25rem;
}
.toc ol ol { margin-top: .25rem; }
.toc li { margin: .25rem 0; }
.toc a { text-decoration: none; }
.toc a:hover, .toc a:focus { text-decoration: underline; }

/* Anchored headings clear the sticky header */
.blog-details-text h2[id], .blog-details-text h3[id],
.sg-rich-text h2[id], .sg-rich-text h3[id] { scroll-margin-top: 120px; }

/* Blog listing and post (plan 06 blog-public): category navigation,
   pagination, card meta, tags, related posts and services, FAQs. */
.sg-category-nav__list,
.sg-pagination__list,
.sg-post-tags ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.sg-category-nav__list { justify-content: center; }
.sg-category-nav__list a,
.sg-pagination__list a,
.sg-pagination__current,
.sg-post-tags a {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    color: #0e3a5b;
    line-height: 1.4;
    text-decoration: none;
}
.sg-category-nav__list a:hover,
.sg-pagination__list a:hover,
.sg-post-tags a:hover { background: #f5f7fa; }
.sg-pagination { margin-top: 2rem; }
.sg-pagination__list { justify-content: center; align-items: center; }
.sg-pagination__current { background: #7861aa; border-color: #7861aa; color: #fff; }
.sg-pagination__gap { padding: 0 .25rem; color: #999; }
.sg-card-meta { margin: .5rem 0 0; font-size: 14px; color: #6c757d; display: flex; flex-wrap: wrap; gap: .75rem; }
.sg-card-meta a { color: #7861aa; }
.blog-img img { max-width: 100%; height: auto; }
.blog-details-post .blog-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.sg-post-tags { margin: 2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sg-post-tags__label { font-weight: 600; }
.sg-related-posts,
.sg-related-services,
.sg-post-faqs { margin: 2.5rem 0 0; }
.sg-related__title,
.sg-post-faqs__title { font-size: 1.5rem; margin: 0 0 1rem; }
.sg-related__item { margin-bottom: 1.5rem; }
.sg-related__link { display: block; color: inherit; text-decoration: none; }
.sg-related__img img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.sg-related__name { font-size: 1rem; line-height: 1.4; margin: .5rem 0 .25rem; }
.sg-related__date { font-size: 13px; color: #6c757d; }
.sg-post-faqs__item { border-bottom: 1px solid #dee2e6; padding: .75rem 0; }
.sg-post-faqs__item summary { cursor: pointer; font-weight: 600; }
.sg-post-faqs__answer { margin-top: .5rem; }
/* Blog archives (category, tag, author) and the latest_blogs block. */
.sg-archive-description { max-width: 860px; }
.sg-archive-trail .breadcrumb { margin-bottom: 0; }
.sg-author-box { padding: 2rem 0 0; }
.sg-author-box__inner { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.sg-author-box__photo img { width: 160px; height: 160px; max-width: 100%; object-fit: cover; border-radius: 50%; }
.sg-author-box__text { flex: 1 1 280px; min-width: 0; }
.sg-author-box__text h1 { font-size: 2rem; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.sg-author-box__job,
.sg-author-box__credentials { margin: 0 0 .25rem; color: #6c757d; }
.sg-author-box__bio { margin-top: 1rem; }
.sg-author-box__links { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sg-author-box__links a { display: inline-block; padding: .25rem .75rem; border: 1px solid #dee2e6; border-radius: 4px; color: #7861aa; }
.sg-latest-blogs__title { font-size: 1.25rem; line-height: 1.4; margin: .5rem 0 .25rem; }
.sg-latest-blogs__more { margin-top: 1.5rem; text-align: center; }