/* =============================================================================
   Intuitive Stack — Blog / Insights custom styles (niche.css)
   All blog-specific overrides. Never modify Crafto core files.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CSS custom properties (blog-scoped)
   ----------------------------------------------------------------------------- */

:root {
 --is-blue: #35A8D4;
 --is-gray: #395F6F;
 --is-orange: #F7941D;
 --is-raspberry: #CC3366;
 --is-apple: #7CB042;
 --is-purple: #6E4D87;
 --is-coffee: #704E2E;
 --is-black: #0A0203;
 --is-light-gray: #9AB2BE;
 --is-cement: #E6DDD1;
 --is-yellow: #F5D22E;
 --is-white: #FFFFFF;

 --font-ui: 'Roboto', sans-serif;
 --font-body: 'Crimson Text', Georgia, serif;

 --post-body-max: 720px;
 --card-radius: 6px;
 --transition: 0.2s ease;

 /* Font size scale (base = 16px root)
    2xl  1.625rem  26px  headings / CTA strip
    xl   1.375rem  22px  body text, li, dd, related-posts title, newsletter title
    lg   1.25rem   20px  h3, shortdesc, blockquote, author bio text
    md   1.125rem  18px  card title, card excerpt, table, author bio name, sidebar CTA title
    base 1rem      16px  share label, sidebar CTA desc/btn, categories list
    sm   0.9375rem 15px  nav, TOC links, share btn, callout body
    xs   0.875rem  14px  meta, figcaption, code, form controls, post header
    2xs  0.8125rem 13px  breadcrumb, TOC title, categories title, tags label
    3xs  0.75rem   12px  tag pill, callout label, counts
    4xs  0.6875rem 11px  prism language label                               */
}

/* -----------------------------------------------------------------------------
   2. Typography
   ----------------------------------------------------------------------------- */

body {
 font-family: var(--font-body);
 color: var(--is-black);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
nav,
.nav,
.btn,
label,
.post-card__meta,
.post-card__category,
.tag-pill,
.breadcrumb,
.blog-hero,
.category-filter {
 font-family: var(--font-ui);
}

/* Page title */
h1.blog-page-title {
 font-family: var(--font-ui);
 font-weight: 100;
 font-size: 3rem;
 line-height: 1.1;
 color: var(--is-gray);
}

/* Post title (h1 inside article) */
.post__header h1,
article.topic h1.title {
 font-family: var(--font-ui);
 font-weight: 100;
 font-size: 2.875rem;
 line-height: 1.15;
 color: var(--is-gray);
 margin-bottom: 0.5rem;
}

/* Section headings */
.post__body h2,
article.topic .body h2,
article.topic .body .section > h2.title {
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 1.875rem;
 color: var(--is-gray);
 margin-top: 2.25rem;
 margin-bottom: 0.75rem;
}

/* Subsection headings */
.post__body h3,
article.topic .body h3,
article.topic .body .sectiondiv > h3.title {
 font-family: var(--font-ui);
 font-weight: 500;
 font-style: italic;
 font-size: 1.25rem;
 color: var(--is-blue);
 margin-top: 1.75rem;
 margin-bottom: 0.5rem;
}

/* Body text */
.post__body p,
article.topic .body p.p,
article.topic p.shortdesc {
 font-family: var(--font-body);
 font-size: 1.375rem;
 line-height: 1.75;
 color: var(--is-black);
}

article.topic p.shortdesc {
 font-size: 1.25rem;
 color: var(--is-gray);
 margin-bottom: 1.75rem;
}

/* Caption / footnote */
figcaption,
.post__body figcaption,
article.topic .figcap {
 font-family: var(--font-body);
 font-style: italic;
 font-size: 0.875rem;
 color: var(--is-light-gray);
 margin-top: 0.4rem;
 text-align: center;
}

/* Blockquotes */
.post__body blockquote,
article.topic .body blockquote.lq {
 border-left: 4px solid var(--is-blue);
 padding: 0.75rem 1.5rem;
 margin: 1.75rem 0;
 font-family: var(--font-ui);
 font-weight: 500;
 font-style: italic;
 font-size: 1.25rem;
 color: var(--is-gray);
 background: transparent;
}

.post__body blockquote cite,
article.topic .body blockquote.lq cite {
 display: block;
 margin-top: 0.5rem;
 font-size: 0.875rem;
 font-weight: 400;
 color: var(--is-light-gray);
}

/* Inline code */
.post__body code,
article.topic .body code.codeph {
 font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 font-size: 0.875rem;
 background: var(--is-cement);
 color: var(--is-gray);
 padding: 2px 6px;
 border-radius: 3px;
}

/* Code blocks — Prism.js overrides */
.post__body pre,
article.topic .body pre.codeblock {
 background: var(--is-gray) !important;
 border-radius: var(--card-radius);
 padding: 1.25rem 1.5rem;
 overflow-x: auto;
 margin: 1.5rem 0;
 position: relative;
}

.post__body pre code,
article.topic .body pre.codeblock code {
 background: transparent !important;
 color: #e8eff4;
 padding: 0;
 font-size: 0.8125rem;
 line-height: 1.6;
}

/* Prism language label */
.post__body pre[class *= "language-"]::before,
article.topic .body pre.codeblock::before {
 content: attr(data-language);
 position: absolute;
 top: 8px;
 right: 12px;
 font-family: var(--font-ui);
 font-size: 0.6875rem;
 font-weight: 500;
 color: var(--is-light-gray);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

/* Lists */
article.topic .body ul.ul,
article.topic .body ol.ol {
 padding-left: 1.5rem;
 margin-bottom: 1rem;
}

article.topic .body ul.ul {
 list-style: disc;
}
article.topic .body ol.ol {
 list-style: decimal;
}

article.topic .body ul.ul li.li,
article.topic .body ol.ol li.li {
 font-family: var(--font-body);
 font-size: 1.375rem;
 line-height: 1.75;
 color: var(--is-black);
 margin-bottom: 0.35rem;
}

article ul li {
 list-style: disc;
}

article.topic .body ul.ul li.li p.p,
article.topic .body ol.ol li.li p.p {
 margin-bottom: 0;
}

/* Definition lists */
article.topic .body dl.dl {
 margin-bottom: 1rem;
}

article.topic .body dl.dl dt.dlterm {
 font-family: var(--font-ui);
 font-weight: 500;
 color: var(--is-gray);
 margin-top: 0.75rem;
}

article.topic .body dl.dl dd.dd {
 font-family: var(--font-body);
 font-size: 1.375rem;
 margin-left: 1.5rem;
 color: var(--is-black);
}

/* Tables */
article.topic .body table.simpletable {
 width: 100%;
 border-collapse: collapse;
 margin: 1.5rem 0;
 font-size: 1.125rem;
}

article.topic .body table.simpletable th.stentry {
 background: var(--is-gray);
 color: white;
 font-family: var(--font-ui);
 font-weight: 500;
 padding: 10px 14px;
 text-align: left;
}

article.topic .body table.simpletable td.stentry {
 padding: 9px 14px;
 border-bottom: 1px solid var(--is-cement);
 font-family: var(--font-body);
 color: var(--is-black);
}

article.topic .body table.simpletable tr.strow:nth-child(even) td.stentry {
 background: #f8fbfc;
}

/* Abbreviations */
abbr.term,
abbr[title] {
 text-decoration: underline dotted var(--is-light-gray);
 cursor: help;
}

/* Internal cross-references */
a.xref {
 color: var(--is-blue);
 text-decoration: underline;
 text-decoration-color: transparent;
 transition: text-decoration-color var(--transition);
}

a.xref:hover {
 text-decoration-color: var(--is-blue);
}

/* External cross-references */
a.xref.external::after {
 content: "\2197";
 font-size: 0.75em;
 margin-left: 0.2em;
 vertical-align: super;
 opacity: 0.65;
}

/* -----------------------------------------------------------------------------
   3. Callout / note boxes
   ----------------------------------------------------------------------------- */

.callout,
.note-tip,
.note-note,
.note-important {
 border-radius: var(--card-radius);
 padding: 1rem 1.25rem 1rem 1.5rem;
 margin: 1.75rem 0;
 font-family: var(--font-ui);
 font-size: 0.9375rem;
 position: relative;
}

.callout--tip,
.note-tip {
 background: var(--is-blue);
 color: white;
}

.callout--note,
.note-note {
 background: var(--is-cement);
 color: var(--is-gray);
}

.callout--important,
.note-important {
 background: var(--is-raspberry);
 color: white;
}

.callout__label {
 font-weight: 500;
 font-size: 0.75rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 display: block;
 margin-bottom: 0.4rem;
 opacity: 0.85;
}

/* Alert-style blockquotes rendered from > [!TIP] etc. */
blockquote.callout-tip,
blockquote.callout-note,
blockquote.callout-important {
 border-left: none;
 font-style: normal;
 font-weight: 400;
}

blockquote.callout-tip {
 background: var(--is-blue);
 color: white;
}
blockquote.callout-note {
 background: var(--is-cement);
 color: var(--is-gray);
}
blockquote.callout-important {
 background: var(--is-raspberry);
 color: white;
}

/* -----------------------------------------------------------------------------
   4. Blog header (sticky, white)
   ----------------------------------------------------------------------------- */

.blog-header {
 position: sticky;
 top: 0;
 z-index: 1000;
 background: white;
 border-bottom: 1px solid var(--is-cement);
 padding: 0;
}

.blog-header .navbar {
 padding: 14px 0;
}

.blog-header .navbar-brand img {
 height: 36px;
 width: auto;
}

.blog-header .nav-link {
 font-family: var(--font-ui);
 font-weight: 400;
 font-size: 0.9375rem;
 color: var(--is-gray) !important;
 padding: 6px 14px !important;
 transition: color var(--transition);
}

.blog-header .nav-link:hover,
.blog-header .nav-link.active {
 color: var(--is-blue) !important;
}

.blog-header .nav-link.active {
 font-weight: 500;
}

/* -----------------------------------------------------------------------------
   5. Blog hero strip
   ----------------------------------------------------------------------------- */

.blog-hero {
 background: white;
 padding: 64px 0 40px;
 border-bottom: 1px solid var(--is-cement);
}

.blog-hero__title {
 font-family: var(--font-ui);
 font-weight: 100;
 font-size: 4rem;
 color: var(--is-gray);
 margin-bottom: 12px;
 line-height: 1.05;
}

.blog-hero__desc {
 font-family: var(--font-body);
 font-size: 1.125rem;
 color: var(--is-light-gray);
 max-width: 640px;
 margin: 0;
 line-height: 1.55;
}

/* -----------------------------------------------------------------------------
   6. Category filter tabs
   ----------------------------------------------------------------------------- */

.category-filter {
 background: white;
 padding: 24px 0 0;
 border-bottom: 1px solid var(--is-cement);
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

.category-filter__list {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 gap: 4px;
 flex-wrap: nowrap;
 white-space: nowrap;
}

.category-filter__item {
 display: inline-block;
}

.category-filter__btn {
 font-family: var(--font-ui);
 font-size: 0.8125rem;
 font-weight: 500;
 color: var(--is-gray);
 background: transparent;
 border: none;
 padding: 8px 16px 10px;
 border-bottom: 3px solid transparent;
 cursor: pointer;
 transition: color var(--transition), border-color var(--transition);
 text-decoration: none;
 display: block;
}

.category-filter__btn:hover {
 color: var(--is-blue);
}

.category-filter__btn.is-active,
.category-filter__btn[aria-selected = "true"] {
 color: var(--is-blue);
 border-bottom-color: var(--is-blue);
 font-weight: 500;
}

/* -----------------------------------------------------------------------------
   7. Post card grid
   ----------------------------------------------------------------------------- */

.post-grid {
 padding: 48px 0 64px;
}

/* Category pill */
.post-card__category,
.tag-pill {
 display: inline-block;
 font-family: var(--font-ui);
 font-size: 0.75rem;
 font-weight: 500;
 background: var(--is-blue);
 color: white;
 padding: 3px 10px;
 border-radius: 20px;
 text-decoration: none;
 letter-spacing: 0.02em;
 line-height: 1.5;
}

.tag-pill--gray {
 background: transparent;
 color: var(--is-gray);
 border: 1px solid var(--is-gray);
}

/* Card */
article.post-card {
 background: white;
 border: 1px solid var(--is-cement);
 border-radius: var(--card-radius);
 overflow: hidden;
 display: flex;
 flex-direction: column;
 height: 100%;
 transition: border-color var(--transition);
}

article.post-card:hover {
 border-color: var(--is-blue);
}

.post-card__image {
 aspect-ratio: 16/9;
 overflow: hidden;
 background: var(--is-cement);
}

.post-card__image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 0.35s ease;
}

article.post-card:hover .post-card__image img {
 transform: scale(1.03);
}

.post-card__body {
 padding: 20px 22px 24px;
 display: flex;
 flex-direction: column;
 flex: 1;
}

.post-card__title {
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 1.125rem;
 color: var(--is-gray);
 margin: 10px 0 8px;
 line-height: 1.35;
 text-decoration: none;
 display: block;
}

.post-card__title:hover {
 color: var(--is-blue);
}

.post-card__excerpt {
 font-family: var(--font-body);
 font-size: 1.125rem;
 color: var(--is-black);
 line-height: 1.6;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
 flex: 1;
 margin: 0 0 14px;
}

.post-card__meta {
 display: flex;
 align-items: center;
 gap: 8px;
 font-family: var(--font-ui);
 font-size: 0.8125rem;
 color: var(--is-light-gray);
 margin-top: auto;
 flex-wrap: wrap;
}

.post-card__avatar {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 object-fit: cover;
 flex-shrink: 0;
}

.post-card__meta .separator {
 color: var(--is-cement);
}

/* -----------------------------------------------------------------------------
   8. Single post layout
   ----------------------------------------------------------------------------- */

.post-layout {
 padding: 100px 0 80px;
}

.post-layout__content {
 max-width: var(--post-body-max);
 margin: 0 auto;
}

/* Breadcrumb */
.post-breadcrumb {
 font-family: var(--font-ui);
 font-size: 0.8125rem;
 color: var(--is-light-gray);
 margin-bottom: 20px;
}

.post-breadcrumb a {
 color: var(--is-light-gray);
 text-decoration: none;
}

.post-breadcrumb a:hover {
 color: var(--is-blue);
}

.post-breadcrumb .separator {
 margin: 0 6px;
}

/* Normalize address element used for author byline */
.post__header-meta address {
 font-style: normal;
 display: inline;
}

/* Post header meta row */
.post__header-meta {
 display: flex;
 align-items: center;
 gap: 10px;
 font-family: var(--font-ui);
 font-size: 0.875rem;
 color: var(--is-light-gray);
 margin: 14px 0 24px;
 flex-wrap: wrap;
}

.post__header-meta .avatar {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 object-fit: cover;
 flex-shrink: 0;
}

.post__header-meta .author-name {
 color: var(--is-gray);
 font-weight: 500;
}

/* Featured image */
.post__featured-image {
 margin: 0 0 2.25rem;
}

.post__featured-image img {
 width: 100%;
 border-radius: var(--card-radius);
 display: block;
}

/* Featured image credit */
figure p.post__image-credit {
 font-family: var(--font-ui);
 font-size: 0.5rem;
 color: var(--is-light-gray);
 text-align: right;
 margin-top: 0.3rem;
 margin-bottom: 0;
 font-style: italic;
}

.post__image-credit a,
.post__image-credit a.xref {
 color: var(--is-light-gray);
 text-decoration: underline;
 text-decoration-color: var(--is-light-gray);
}

/* Post body wrapper */
.post__body {
 margin-top: 0.5rem;
}

/* Tags row */
.post__tags {
 margin-top: 2.5rem;
 padding-top: 1.5rem;
 border-top: 1px solid var(--is-cement);
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
}

.post__tags-label {
 font-family: var(--font-ui);
 font-size: 0.8125rem;
 color: var(--is-light-gray);
 margin-right: 4px;
}

/* Author bio box */
.author-bio {
 background: var(--is-cement);
 border-radius: var(--card-radius);
 padding: 28px 32px;
 display: flex;
 gap: 24px;
 align-items: flex-start;
 margin-top: 2.5rem;
}

.author-bio__avatar {
 width: 72px;
 height: 72px;
 border-radius: 50%;
 object-fit: cover;
 flex-shrink: 0;
}

.author-bio__name {
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 1.125rem;
 color: var(--is-gray);
 margin-bottom: 6px;
}

.author-bio__text {
 font-family: var(--font-body);
 font-size: 1.25rem;
 color: var(--is-black);
 line-height: 1.65;
 margin: 0;
}

.author-bio__linkedin {
 display: inline-block;
 margin-top: 10px;
 font-family: var(--font-ui);
 font-size: 0.8125rem;
 color: var(--is-blue);
 text-decoration: none;
}

.author-bio__linkedin:hover {
 text-decoration: underline;
}

/* Social share row */
.post__share {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-top: 2rem;
 padding-top: 1.5rem;
 border-top: 1px solid var(--is-cement);
 font-family: var(--font-ui);
 font-size: 1rem;
 color: var(--is-light-gray);
}

.share-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 7px 14px;
 border: 1px solid var(--is-cement);
 border-radius: 20px;
 font-family: var(--font-ui);
 font-size: 0.9375rem;
 font-weight: 500;
 color: var(--is-gray);
 text-decoration: none;
 transition: border-color var(--transition), color var(--transition);
 background: white;
 cursor: pointer;
}

.share-btn:hover {
 border-color: var(--is-blue);
 color: var(--is-blue);
}

/* Related posts */
.related-posts {
 padding: 48px 0;
 border-top: 1px solid var(--is-cement);
}

.related-posts__title {
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 1.375rem;
 color: var(--is-gray);
 margin-bottom: 28px;
}

/* -----------------------------------------------------------------------------
   9. Sidebar
   ----------------------------------------------------------------------------- */

.blog-sidebar {
 padding-left: 2rem;
}

@media (max-width : 991px) {
 .blog-sidebar {
  padding-left: 0;
  margin-top: 3rem;
 }
}

/* Sticky TOC */
.sidebar-toc {
 position: sticky;
 top: 80px;
 background: white;
 border: 1px solid var(--is-cement);
 border-radius: var(--card-radius);
 padding: 20px 22px;
 margin-bottom: 24px;
}

.sidebar-toc__title {
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 0.8125rem;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--is-light-gray);
 margin-bottom: 12px;
}

.sidebar-toc__list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.sidebar-toc__list li {
 margin-bottom: 6px;
}

.sidebar-toc__list a {
 font-family: var(--font-ui);
 font-size: 0.9375rem;
 color: var(--is-gray);
 text-decoration: none;
 line-height: 1.4;
 display: block;
 padding: 2px 0;
 transition: color var(--transition);
}

.sidebar-toc__list a:hover,
.sidebar-toc__list a.is-active {
 color: var(--is-blue);
}

.sidebar-toc__list .toc-h3 {
 padding-left: 12px;
}

/* Sidebar CTA blocks */
.sidebar-cta {
 border-radius: var(--card-radius);
 padding: 22px 22px;
 margin-bottom: 20px;
}

.sidebar-cta--newsletter {
 background: var(--is-cement);
}

.sidebar-cta--newsletter .sidebar-cta__title {
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 1.25rem;
 color: var(--is-gray);
 margin-bottom: 6px;
}

.sidebar-cta--newsletter .sidebar-cta__desc {
 font-family: var(--font-body);
 font-size: 1rem;
 color: var(--is-black);
 line-height: 1.55;
 margin-bottom: 14px;
}

.sidebar-cta--schedule {
 background: var(--is-blue);
}

.sidebar-cta--schedule .sidebar-cta__title {
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 1.125rem;
 color: white;
 margin-bottom: 6px;
}

.sidebar-cta--schedule .sidebar-cta__desc {
 font-family: var(--font-ui);
 font-size: 1rem;
 color: rgba(255, 255, 255, 0.88);
 margin-bottom: 14px;
 line-height: 1.45;
}

.sidebar-cta--schedule .btn-cta-white {
 background: white;
 color: var(--is-blue);
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 1rem;
 border-radius: 20px;
 padding: 8px 18px;
 text-decoration: none;
 display: inline-block;
 transition: background var(--transition), color var(--transition);
}

.sidebar-cta--schedule .btn-cta-white:hover {
 background: var(--is-gray);
 color: white;
}

/* Category list sidebar */
.sidebar-categories {
 background: white;
 border: 1px solid var(--is-cement);
 border-radius: var(--card-radius);
 padding: 20px 22px;
 margin-bottom: 20px;
}

.sidebar-categories__title {
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 0.8125rem;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--is-light-gray);
 margin-bottom: 12px;
}

.sidebar-categories__list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.sidebar-categories__list li {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 5px 0;
 border-bottom: 1px solid var(--is-cement);
}

.sidebar-categories__list li:last-child {
 border-bottom: none;
}

.sidebar-categories__list a {
 font-family: var(--font-ui);
 font-size: 1rem;
 color: var(--is-gray);
 text-decoration: none;
}

.sidebar-categories__list a:hover {
 color: var(--is-blue);
}

.sidebar-categories__count {
 font-family: var(--font-ui);
 font-size: 0.75rem;
 color: var(--is-light-gray);
 background: var(--is-cement);
 padding: 2px 7px;
 border-radius: 10px;
}

/* -----------------------------------------------------------------------------
   10. Inline CTA strip (between sections on index)
   ----------------------------------------------------------------------------- */

.cta-strip {
 background: var(--is-gray);
 padding: 48px 0;
 text-align: center;
}

.cta-strip__heading {
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 1.625rem;
 color: white;
 margin-bottom: 8px;
}

.cta-strip__desc {
 font-family: var(--font-ui);
 font-size: 1rem;
 color: rgba(255, 255, 255, 0.8);
 margin-bottom: 24px;
}

/* -----------------------------------------------------------------------------
   11. Newsletter CTA block (standalone)
   ----------------------------------------------------------------------------- */

.newsletter-block {
 background: var(--is-cement);
 border-radius: var(--card-radius);
 padding: 28px 32px;
}

.newsletter-block__title {
 font-family: var(--font-ui);
 font-weight: 500;
 font-size: 1.375rem;
 color: var(--is-gray);
 margin-bottom: 6px;
}

.newsletter-block__desc {
 font-family: var(--font-body);
 font-size: 0.9375rem;
 color: var(--is-black);
 margin-bottom: 18px;
 line-height: 1.55;
}

.newsletter-block .form-control {
 border: 1px solid var(--is-light-gray);
 border-radius: 4px;
 padding: 9px 12px;
 font-family: var(--font-ui);
 font-size: 0.875rem;
}

.newsletter-block .form-control:focus {
 border-color: var(--is-blue);
 box-shadow: 0 0 0 3px rgba(53, 168, 212, 0.15);
 outline: none;
}

/* -----------------------------------------------------------------------------
   12. HDITA semantic class styling (post body)
       Applied as primary selectors for content inside .post__body / article.topic
   ----------------------------------------------------------------------------- */

/* Sections get subtle top spacing */
article.topic .body .section {
 margin-top: 0rem;
 margin-bottom: 0rem;
 padding-top: 0rem;
 padding-bottom: 0rem;
}

/* Section divs (h3 groupings) */
article.topic .body .sectiondiv {
 margin-top: 0.5rem;
}

/* Figures */
article.topic .body figure.fig {
 margin: 1.75rem 0;
 text-align: center;
}

article.topic .body figure.fig img {
 max-width: 100%;
 border-radius: var(--card-radius);
 display: inline-block;
}

/* Strong / emphasis */
article.topic .body strong.b {
 font-weight: 700;
}

article.topic .body em.i {
 font-style: italic;
}

/* Cite */
article.topic .body cite.cite {
 font-style: italic;
 color: var(--is-light-gray);
 font-size: 0.875rem;
}

/* dfn */
article.topic .body dfn {
 font-weight: 600;
 font-style: normal;
 color: var(--is-gray);
}

/* -----------------------------------------------------------------------------
   13. Responsive overrides
   ----------------------------------------------------------------------------- */

@media (max-width : 1199px) {
 .blog-sidebar {
  padding-left: 1.25rem;
 }
}

@media (max-width : 767px) {
 .blog-hero {
  padding: 40px 0 28px;
 }

 .post-layout {
  padding: 32px 0 60px;
 }

 .author-bio {
  flex-direction: column;
  gap: 16px;
 }

 .post__share {
  flex-wrap: wrap;
 }
}

@media (max-width : 575px) {
 .post-card__body {
  padding: 16px 18px 20px;
 }
}