/* Content pages: blog, blog post, FAQ, CMS pages (about/terms/privacy/custom), contact. */
.site-shell .content-page__title { font-size: 22px; margin-bottom: 18px; }
.site-shell .content-page__empty { padding: 44px 20px; border: 1px solid var(--st-border); border-radius: 6px; }

.site-shell .blog-card__summary { font-size: 12.5px; line-height: 1.9; }
.site-shell .blog-card__date { font-size: 12px; margin-top: auto; }

.site-shell .blog-post-not-found__title,
.site-shell .contact-not-found__title,
.site-shell .cms-not-found__title { font-weight: 700; }

.site-shell .cms-page,
.site-shell .blog-post { max-width: 840px; margin: 0 auto; }
.site-shell .cms-page__title { font-size: 24px; margin-bottom: 18px; }
.site-shell .cms-page__content { line-height: 2.1; font-size: 15px; color: var(--st-text-2); }

.site-shell .blog-post__title { font-size: 26px; line-height: 1.7; }
.site-shell .blog-post__date { margin: 10px 0 20px; }
.site-shell .blog-post__cover { width: 100%; height: auto; border-radius: 12px; margin-bottom: 22px; }

.site-shell .faq-list { width: 100%; max-width: none; }

/* The standalone FAQ uses the homepage interaction at the content page's full width: a soft row,
   a circular disclosure control and an inset answer panel. Tokens keep the same hierarchy in dark
   mode instead of hard-coding the homepage's light-only colours. */
.site-shell .content-faq { gap: 20px; }
.site-shell .content-faq__item { overflow: hidden; border: 0; border-radius: 10px; background: var(--st-surface-2); box-shadow: none; }
.site-shell .content-faq__item .st-faq__trigger { min-height: 80px; padding: 12px 30px 12px 16px; gap: 16px; font-size: 16px; }
.site-shell .content-faq__item .st-faq__trigger > span { margin-inline-end: auto; }
.site-shell .content-faq__item .st-faq__trigger > svg { width: 48px; height: 48px; padding: 13px; border-radius: 50%; flex: 0 0 48px; background: var(--st-primary-soft); color: var(--st-text-2); transition: transform .25s ease, background .2s ease, color .2s ease; }
.site-shell .content-faq__item .st-faq__trigger[aria-expanded="true"] > svg { transform: rotate(180deg); background: var(--st-primary); color: var(--st-on-primary); }
.site-shell .content-faq__item .st-faq__trigger:hover > svg { background: var(--st-primary-soft); color: var(--st-primary); }
.site-shell .content-faq__item .st-faq__a { margin: 0 30px 24px; padding: 24px 28px; border-radius: 6px; background: var(--st-surface); color: var(--st-text-2); font-size: 14px; line-height: 2; }

.site-shell .contact-details { margin-top: 22px; }
.site-shell .contact-details__title { font-size: 16px; margin-bottom: 14px; }
.site-shell .contact-details__list { gap: 10px; font-size: 13.5px; }
.site-shell .contact-details__row { display: flex; align-items: center; gap: 8px; }
.site-shell .contact-details__row--start { align-items: flex-start; }
.site-shell .contact-details__socials { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.site-shell .contact-details__social { display: flex; align-items: center; gap: 6px; }

@media (max-width: 767px) {
    .site-shell .content-page__title,
    .site-shell .cms-page__title { font-size: 20px; }
    .site-shell .blog-post__title { font-size: 22px; }
    .site-shell .content-faq { gap: 12px; }
    .site-shell .content-faq__item { border-radius: 6px; }
    .site-shell .content-faq__item .st-faq__trigger { min-height: 58px; padding: 8px 14px 8px 10px; gap: 10px; font-size: 13px; }
    .site-shell .content-faq__item .st-faq__trigger > svg { width: 34px; height: 34px; padding: 9px; flex-basis: 34px; }
    .site-shell .content-faq__item .st-faq__a { margin: 0 14px 14px; padding: 16px; font-size: 13px; }
}