/* Gatsby-specific additions to the new theme (site.css / fx.css are the theme files, unchanged).
   Mostly styles the HTML that gatsby-transformer-remark produces for blog posts so it matches
   the theme's article layout (.rich). */

/* Gatsby wrappers must not create their own scroll/stacking context */
#___gatsby,#gatsby-focus-wrapper{display:contents}

/* markdown images (gatsby-remark-images) */
.rich .gatsby-resp-image-wrapper{margin:28px 0!important;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.rich .gatsby-resp-image-image{border-radius:0}
.rich .gatsby-resp-image-figure{margin:28px 0}
.rich .gatsby-resp-image-figure .gatsby-resp-image-wrapper{margin:0!important}
.rich .gatsby-resp-image-figcaption{display:none}
.rich p>.gatsby-resp-image-wrapper:only-child{margin:0!important}
.rich p:has(>.gatsby-resp-image-wrapper:only-child),.rich p:has(>a>.gatsby-resp-image-wrapper:only-child){margin-top:28px;margin-bottom:28px}

/* image links in markdown (CTA banners) behave like the theme's .cta-banner */
.rich a:has(>.gatsby-resp-image-wrapper){display:block;border-radius:16px;overflow:hidden;box-shadow:var(--sh1);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s}
.rich a:has(>.gatsby-resp-image-wrapper):hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.rich a>.gatsby-resp-image-wrapper{margin:0!important;border:0}

/* heading anchor icons from gatsby-remark-autolink-headers: only on hover */
.rich h2 .anchor,.rich h2 .custom-class{margin-left:8px;opacity:0;text-decoration:none;transition:opacity .2s;vertical-align:middle}
.rich h2:hover .anchor,.rich h2:hover .custom-class,.rich h2 .anchor:focus,.rich h2 .custom-class:focus{opacity:.6}
.rich h2 .anchor svg,.rich h2 .custom-class svg{fill:currentColor;width:16px;height:16px}
.rich h2 .anchor.before{position:static;padding:0;transform:none}

/* leftover markup from the previous site inside markdown */
.rich .fa{display:none}
.rich .readmore-section{display:block;padding:16px 20px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.rich .table-of-contents{display:none}

/* code */
.rich code{font:500 .9em var(--fm);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.1em .35em}
.rich pre{overflow-x:auto;padding:18px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:15px;line-height:1.6}
.rich pre code{background:none;border:0;padding:0}

/* author photo on the post page comes from the markdown (any size) */
.author .av2{object-fit:cover;border-radius:50%}