/* Additions to Mona's existing design system. No global resets or legacy component overrides.
   Involve, container widths, headings, cards, tabs and buttons come from the theme bundles. */
.blog-icon { display: inline-block; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; vertical-align: middle; }
.blog-icon-label { display: inline-flex; align-items: center; gap: .8rem; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; margin-top: 2.5rem; color: var(--ui-c-dark-gray); font-size: 1.4rem; line-height: 2.2rem; }
.blog-meta .blog-icon { width: 1.8rem; height: 1.8rem; color: var(--ui-c-orange); }
.blog-category-label { color: var(--ui-c-orange); text-decoration: none; }
.blog-category-label:hover { text-decoration: underline; text-underline-offset: .4rem; }
.blog-meta > .blog-category-label { padding: .5rem 1rem; background: var(--ui-c-cream); border-radius: var(--ui-small-border-size); }
.blog-bylines { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 3rem; margin-top: 1.5rem; }
.blog-byline { min-width: 0; margin: 0; font-size: 1.6rem; line-height: 2.4rem; overflow-wrap: anywhere; }
.blog-byline a { color: inherit; text-underline-offset: .4rem; text-decoration-color: var(--ui-c-orange); }
.blog-byline--verified { display: flex; align-items: flex-start; gap: .8rem; }
.blog-byline--verified > .blog-icon { color: var(--ui-c-lilac); width: 2rem; height: 2.4rem; }
.blog-hero { margin: 4rem 0 0; }
.blog-hero__image { display: block; max-width: 100%; height: auto; max-height: 60rem; object-fit: contain; }
.blog-hero figcaption, .blog-article-content figcaption { margin-top: 1rem; color: var(--ui-c-dark-gray); font-size: 1.4rem; line-height: 2.2rem; }
.blog-article-content { overflow-wrap: anywhere; }
.blog-article-content :is(h2,h3), .blog-block, .blog-toc { scroll-margin-top: calc(var(--header-height, 12rem) + 3rem); }
.blog-article-content figure { margin-left: 0; margin-right: 0; }
.blog-article-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 3rem 0; font-size: 1.6rem; line-height: 2.4rem; }
.blog-article-content :is(th,td) { border: 1px solid var(--ui-c-orange); padding: 1.5rem 2rem; min-width: 14rem; text-align: left; }
.blog-article-content th { background: var(--ui-c-cream); font-weight: 500; }
.blog-article-content .blog-quote { position:relative; margin:4rem 0; padding:3rem 3.5rem 3rem 7.5rem; border-left:3px solid var(--ui-c-lilac); border-radius:0 1.2rem 1.2rem 0; background:var(--ui-c-cream); }
.blog-quote__icon { position:absolute; left:2.5rem; top:3.1rem; color:var(--ui-c-lilac); }
.blog-article-content .blog-quote blockquote { margin:0; padding:0; border:0; background:none; }
.blog-article-content .blog-quote blockquote p { margin:0; font-size:2.2rem; line-height:3.4rem; font-style:normal; }
.blog-article-content .blog-quote figcaption { display:flex; flex-direction:column; gap:.6rem; margin-top:2rem; font-size:1.4rem; line-height:2.2rem; }
.blog-quote__author { color:var(--ui-c-black); font-weight:500; }
.blog-quote a { align-self:flex-start; color:var(--ui-c-lilac); text-underline-offset:.3rem; }
.blog-table { margin:4rem 0; min-width:0; }
.blog-table__scroll { max-width:100%; overflow:auto; border:1px solid var(--ui-c-orange); border-radius:1rem; }
.blog-table__scroll:focus-visible { outline:2px solid var(--ui-c-lilac); outline-offset:4px; }
.blog-article-content .blog-table table { display:table; width:100%; max-width:none; margin:0; border:0; }
.blog-article-content .blog-table caption { text-align:left; padding:1.8rem 2rem; font-size:1.8rem; line-height:2.8rem; font-weight:500; color:var(--ui-c-black); background:var(--ui-c-cream); }
.blog-article-content .blog-table :is(th,td) { min-width:16rem; max-width:40rem; border-width:0 1px 1px 0; white-space:normal; }
.blog-article-content .blog-table tr > :last-child { border-right:0; }
.blog-article-content .blog-table tbody tr:last-child > * { border-bottom:0; }
@media(max-width:575px) { .blog-article-content .blog-quote { padding:6.5rem 2rem 2.5rem; } .blog-quote__icon { top:2rem; left:2rem; width:2.8rem; height:2.8rem; } .blog-article-content .blog-quote blockquote p { font-size:1.9rem; line-height:2.9rem; } }
.blog-summary { display: grid; grid-template-columns: 1fr 2fr; align-items: start; gap: 2rem 4rem; margin: 4rem 0; padding: 3rem; background: var(--ui-c-cream); border-radius: var(--ui-default-border-size); }
.blog-article-content .blog-block-title { display: flex; align-items: center; gap: 1rem; margin: 0; color: var(--ui-c-black); font-size: 2rem; line-height: 3rem; font-weight: 500; }
.blog-block-title > .blog-icon { color: var(--ui-c-orange); }
.blog-article-content .blog-summary ul { margin: 0; padding: 0; list-style: none; }
.blog-article-content .blog-summary li { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.6rem; line-height: 2.4rem; }
.blog-article-content .blog-summary li + li { margin-top: 1.5rem; }
.blog-summary li > .blog-icon { width: 1.8rem; height: 2.4rem; color: var(--ui-c-orange); }
.blog-toc { margin: 4rem 0; padding: 3rem 0; border-top: 1px solid var(--ui-c-orange); border-bottom: 1px solid var(--ui-c-orange); }
.blog-article-content .blog-toc__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem 4rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: blog-section; }
.blog-article-content .blog-toc li { display: flex; gap: 1.5rem; margin: 0; font-size: 1.6rem; line-height: 2.4rem; }
.blog-toc__list > li { counter-increment: blog-section; }
.blog-toc__list > li::before { content: counter(blog-section, decimal-leading-zero); color: var(--ui-c-orange); font-size: 1.4rem; min-width: 2rem; }
.blog-article-content .blog-toc__children { margin: 1rem 0 0; padding: 0 0 0 1.5rem; border-left: 1px solid var(--ui-c-orange); list-style: none; }
.blog-article-content .blog-toc__children li + li { margin-top: 1rem; }
.blog-article-content .blog-toc__children a { font-size: 1.4rem; line-height: 2.2rem; }
.blog-toc a { color: var(--ui-c-black); text-decoration: none; text-underline-offset: .4rem; }
.blog-toc a:hover { color: var(--ui-c-orange); text-decoration: underline; }
.blog-block { margin-top: 6rem; font-size: 1.6rem; line-height: 2.4rem; overflow-wrap: anywhere; }
.blog-block > h2 { margin: 0 0 3rem; font-size: 3.2rem; line-height: 4.2rem; font-weight: 500; }
.blog-services-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
.blog-service-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; padding: 3rem; background: var(--ui-c-cream); border-radius: var(--ui-default-border-size); }
.blog-service-card h3 { font-size: 2rem; line-height: 3rem; font-weight: 500; }
.blog-service-card :is(h3,p) { margin: 0; }
.blog-service-card h3 a { color: inherit; text-decoration: none; }
.blog-service-card__link { margin-top: auto; }
.blog-service-card__link > .blog-icon { color: var(--ui-c-orange); }
.blog-service-card__link:hover > .blog-icon { color: var(--ui-c-lilac); }
.blog-sources ol { margin: 0; padding-left: 2rem; }
.blog-sources li { padding-left: 1rem; }
.blog-sources li + li { margin-top: 2rem; }
.blog-sources li::marker { color: var(--ui-c-orange); }
.blog-sources a { color: inherit; text-underline-offset: .4rem; text-decoration-color: var(--ui-c-orange); }
.blog-sources a > .blog-icon { width: 1.6rem; height: 1.6rem; margin-left: .6rem; color: var(--ui-c-orange); }
.blog-source-date { display: block; margin-top: .5rem; color: var(--ui-c-dark-gray); font-size: 1.4rem; line-height: 2.2rem; }
.blog-faq details { border: 1px solid var(--ui-c-cream); border-radius: var(--ui-small-border-size); background: var(--ui-c-cream); transition: border-color .2s, background-color .2s; }
.blog-faq details + details { margin-top: 1rem; }
.blog-faq details[open] { border-color: var(--ui-c-orange); background: var(--ui-c-white); }
.blog-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; font-size: 2rem; line-height: 3rem; cursor: pointer; list-style: none; }
.blog-faq summary::-webkit-details-marker, .blog-share summary::-webkit-details-marker { display: none; }
.blog-faq summary::marker, .blog-share summary::marker { content: ''; }
.blog-faq__toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 3.6rem; height: 3.6rem; border: 1px solid var(--ui-c-orange); border-radius: 50%; color: var(--ui-c-orange); }
.blog-faq__toggle .blog-icon { transition: transform .2s; }
.blog-faq details[open] summary { color: var(--ui-c-orange); }
.blog-faq details[open] .blog-faq__toggle .blog-icon { transform: rotate(45deg); }
.blog-faq__answer { padding: 0 7.6rem 3rem 2rem; }
.blog-people { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; align-items: stretch; }
.blog-people__item { min-width: 0; scroll-margin-top: calc(var(--header-height, 12rem) + 3rem); }
.blog-people .blog-person { box-sizing: border-box; width: 100%; height: 100%; }
.blog-person { align-items: flex-start; gap: 2rem; }
.blog-person > div { min-width: 0; }
.blog-person > img { flex-shrink: 0; }
.blog-person__role { color: var(--ui-c-dark-gray); font-size: 1.4rem; line-height: 2.2rem; }
.blog-person__name a { color: inherit; text-decoration: none; }
.blog-person__name a:hover { text-decoration: underline; text-underline-offset: .4rem; }
.blog-person__bio { margin-top: 1.5rem; max-width: 80rem; }
.blog-person .blog-text-link { margin: 1.5rem 2rem 0 0; }
.blog-text-link { display: inline-flex; align-items: center; gap: 1rem; color: var(--ui-c-black); text-decoration: none; font: inherit; cursor: pointer; }
.blog-text-link:hover { color: var(--ui-c-lilac); }
.blog-text-link > .blog-icon { width: 2rem; height: 2rem; color: var(--ui-c-orange); }
button.blog-text-link { border: 0; padding: 0; background: none; text-align: left; }
.blog-disclaimer { display: flex; align-items: flex-start; gap: 1.5rem; margin-top: 4rem; padding: 2rem 0; border-top: 1px solid var(--ui-c-cream); color: var(--ui-c-dark-gray); font-size: 1.4rem; line-height: 2.2rem; }
.blog-disclaimer > .blog-icon { color: var(--ui-c-orange); width: 2rem; height: 2rem; }
.blog-disclaimer p { margin: 0; }
.blog-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; margin-top: 3rem; font-size: 1.6rem; line-height: 2.4rem; }
.blog-action { gap: 1.5rem; cursor: pointer; list-style: none; }
.blog-action > .blog-icon { position: relative; width: 2rem; height: 2rem; }
.blog-action.btn--theme--green > .blog-icon { color: var(--ui-c-white); }
.blog-action.btn--theme--transparent:hover > .blog-icon { color: var(--ui-c-white); }
.blog-share { --share-trigger-width: 24rem; display: flow-root; width: max-content; max-width: 100%; }
.blog-share > summary { float: left; width: var(--share-trigger-width); min-width: 0; }
.blog-share__trigger { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.5rem; height: 5.6rem; padding: 1rem 2rem; border: 1px solid var(--ui-c-black); border-radius: 5rem; color: var(--ui-c-black); background: transparent; font: inherit; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.blog-share__trigger > .blog-icon { width: 2rem; height: 2rem; }
.blog-share[open] > .blog-share__trigger { color: var(--ui-c-lilac); border-color: var(--ui-c-lilac); background: var(--ui-c-cream); }
.blog-share__options { display: flex; align-items: center; gap: .8rem; width: max-content; min-height: 5.6rem; margin-left: calc(var(--share-trigger-width) + 1.5rem); }
.blog-share__circle { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 4.4rem; width: 4.4rem; height: 4.4rem; padding: 0; color: var(--ui-c-lilac); background: transparent; border: 1px solid var(--ui-c-lilac); border-radius: 50%; text-decoration: none; cursor: pointer; transition: color .2s, background-color .2s, transform .2s; }
.blog-share__circle > .blog-icon { width: 2rem; height: 2rem; }
.blog-share__circle:not(:disabled):hover { color: var(--ui-c-white); background: var(--ui-c-lilac); transform: translateY(-2px); }
.blog-share__circle:disabled { color: var(--ui-c-dark-gray); border-color: var(--ui-c-light-gray); cursor: not-allowed; }
.blog-share__copied { display: none; }
.blog-share__circle[data-copied] > .blog-icon { display: none; }
.blog-share__circle[data-copied] .blog-share__copied { display: inline-flex; }
.blog-share__circle[data-copied] { color: var(--ui-c-white); border-color: var(--ui-c-olive); background: var(--ui-c-olive); }
[data-blog-share-status] { flex-basis: 100%; font-size: 1.4rem; color: var(--ui-c-dark-gray); }
/* Catalogue: preserve the original two-column cards and underlined tabs. */
.blog-section-nav { display: flex; align-items: stretch; gap: 5rem; margin: 0; border-bottom: 1px solid var(--ui-c-orange); }
.blog-section-nav .tabs-controls__button { flex: 0 0 auto; white-space: nowrap; pointer-events: auto; }
.blog-topic-nav { display: flex; align-items: baseline; gap: 2rem; margin: 2.5rem 0 0; padding-bottom: 3rem; }
.blog-topic-nav__label { flex: 0 0 auto; font-size: 1.4rem; line-height: 2.2rem; color: var(--ui-c-dark-gray); }
.blog-topic-nav__content { flex: 1; min-width: 0; width: 100%; }
.blog-topic-nav__items { display: flex; flex-wrap: wrap; gap: 1rem; min-width: 0; }
.blog-topic-nav__items > [hidden], .blog-topic-nav__toggle[hidden] { display: none; }
.blog-topic-nav__toggle { display: inline-flex; align-items: center; gap: .8rem; min-height: 4.4rem; margin-top: .8rem; padding: .5rem 0; border: 0; background: transparent; color: var(--ui-c-orange); font: inherit; font-size: 1.4rem; line-height: 2.2rem; cursor: pointer; }
.blog-topic-nav__toggle > .blog-icon { width: 1.8rem; height: 1.8rem; transform: rotate(90deg); }
.blog-topic-nav__toggle[aria-expanded="true"] > .blog-icon { transform: rotate(-90deg); }
.blog-topic-nav__toggle:hover { color: var(--ui-c-lilac); }
.blog-topic-link { display: inline-flex; padding: .8rem 1.5rem; border: 1px solid var(--ui-c-cream); border-radius: 3rem; background: var(--ui-c-cream); color: var(--ui-c-black); font-size: 1.4rem; line-height: 2.2rem; text-decoration: none; transition: color .2s, border-color .2s, background-color .2s; }
.blog-topic-link:hover { border-color: var(--ui-c-orange); color: var(--ui-c-orange); }
.blog-topic-link { align-items: center; gap: .8rem; flex-wrap: wrap; }
.blog-topic-link__section { font-size: 1.1rem; line-height: 1.6rem; color: var(--ui-c-dark-gray); border-left: 1px solid currentColor; padding-left: .8rem; }
.blog-topic-link[aria-current] .blog-topic-link__section { color: inherit; }
.blog-topic-link[aria-current] { background: var(--ui-c-lilac); border-color: var(--ui-c-lilac); color: var(--ui-c-white); }
.blog-topic-nav + .blog-posts, .blog-section-nav + .blog-posts { margin-top: 0; }
.blog-category-intro { max-width: 88rem; margin-top: 2rem; font-size: 1.6rem; line-height: 2.4rem; }
.blog-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; color: var(--ui-c-dark-gray); font-size: 1.4rem; line-height: 2.2rem; }
.blog-card-date { color: var(--ui-c-orange); }
.blog-card-meta .blog-icon { width: 1.6rem; height: 1.6rem; }
.blog-card-author { display: flex; align-items: flex-start; gap: .8rem; margin-top: 2rem; color: var(--ui-c-dark-gray); font-size: 1.4rem; line-height: 2.2rem; }
.blog-card-author > .blog-icon { color: var(--ui-c-lilac); width: 1.8rem; height: 2.2rem; }
.blog-card-author a { color: var(--ui-c-black); text-underline-offset: .4rem; text-decoration-color: var(--ui-c-orange); }
.blog-empty { padding: 4rem 0; font-size: 1.8rem; line-height: 2.6rem; }
/* Same breadcrumb layout and separator as the original, using semantic HTML and SVG. */
.blog-breadcrumbs ol { list-style: none; margin-top: 0; margin-bottom: 0; }
.blog-breadcrumbs li { display: flex; align-items: center; flex-shrink: 0; }
.blog-breadcrumbs .blog-icon { width: 1.5rem; height: 1.5rem; margin: 1rem; }
/* The original related slider remains usable before its lazy bundle loads, or without JS. */
#other-blog-posts[data-loaded] { visibility: visible; opacity: 1; }
.other-blog-posts .swiper:not(.swiper-initialized) .swiper-wrapper { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
.other-blog-posts:has(.swiper:not(.swiper-initialized)) .section-slider__buttons-wrapper { visibility: hidden; }
.blog-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:is(.blog-post-page,.blog-page,.blog-category-page) :is(a,button,summary):focus-visible { outline: 2px solid var(--ui-c-lilac); outline-offset: 5px; }
@media (max-width: 767px) {
    .blog-section-nav { justify-content: space-between; gap: 1rem; }
    .blog-section-nav .tabs-controls__button { font-size: 1.6rem; line-height: 2.4rem; }
    .blog-topic-nav { flex-direction: column; gap: 1rem; margin-top: 2rem; }
    .blog-people { grid-template-columns: minmax(0,1fr); }
    .blog-summary { grid-template-columns: minmax(0,1fr); gap: 2rem; padding: 2rem; }
    .blog-article-content .blog-toc__list { grid-template-columns: minmax(0,1fr); }
    .blog-services-grid { grid-template-columns: minmax(0,1fr); }
    .other-blog-posts .swiper:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: minmax(0,1fr); }
    .blog-meta { gap: 1rem 1.5rem; margin-top: 2rem; }
    .blog-person { gap: 1.5rem; }
}
@media (max-width: 575px) {
    .blog-share { --share-trigger-width: 4.4rem; }
    .blog-share > summary { height: 4.4rem; padding: 0; }
    .blog-share__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    .blog-share__options { min-height: 4.4rem; margin-left: calc(var(--share-trigger-width) + 1rem); }
    .blog-block { margin-top: 4rem; }
    .blog-block > h2 { margin-bottom: 2rem; font-size: 2.8rem; line-height: 3.8rem; }
    .blog-summary, .blog-toc { margin: 3rem 0; }
    .blog-toc { padding: 2rem 0; }
    .blog-service-card { padding: 2rem; }
    .blog-faq summary { padding: 1.5rem; gap: 1.5rem; font-size: 1.8rem; line-height: 2.6rem; }
    .blog-faq__answer { padding: 0 1.5rem 2rem; }
    .blog-disclaimer { margin-top: 3rem; }
    .blog-card-meta { gap: .8rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .blog-faq details, .blog-faq__toggle .blog-icon, .blog-share__circle { transition: none; } }
@media print { .blog-actions { display: none; } .blog-faq details > * { display: block !important; } }