/*
  ZHM blog post design v4 (ZHM UI kit look), loaded by the ZHM Blog plugin on single posts.

  Two parts:
  1. Page (.zhm-single): everything between the theme header and footer, rendered by
     templates/single-post.php: hero, share and tags, author, closing call to action,
     related posts. The hero runs full width with side padding; everything below it
     sits in one column (--zhm-col). Background bands go full width with
     margin-inline: calc(50% - 50vw); their content stays in the column.
  2. Post content (.zhm-post): the article body. The same rules load in the editor
     canvas, so writers see what readers see.

  Block styles writers can pick (block sidebar > Styles):
    Paragraph: Question box (is-style-zhm-ask), Note (is-style-zhm-note)
    Group:     Key takeaways (is-style-zhm-summary), Call to action (is-style-zhm-cta)
    List:      Checklist (is-style-zhm-checks), Red flags (is-style-zhm-flags), Steps (is-style-zhm-steps)
    Heading:   FAQ section (is-style-faq) - blog.js turns the h3 + answer pairs after it into an accordion
*/

/* ---------- Tokens and base ---------- */

.zhm-single,
.zhm-post {
  font-family: var(--zhm-font-body);
  color: var(--zhm-ink);
}
.zhm-post {
  max-width: var(--zhm-col);
  margin-inline: auto;
}

/* ==========================================================================
   1. Page: hero, share, author, call to action, related posts
   ========================================================================== */

#wrapper_full:has(.zhm-single) { overflow-x: clip; }   /* full-width bands use 100vw (posts and opted-in pages) */
.zhm-single {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
.zhm-single :focus-visible {
  outline: 3px solid var(--zhm-focus);
  outline-offset: 2px;
}

/* ---------- Hero ---------- */

.zhm-single .zhm-hero {
  position: relative;
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
  padding: 170px 20px 68px;
  background:
    radial-gradient(circle at 88% 12%, rgba(64, 123, 190, 0.12), transparent 40%),
    radial-gradient(circle at 6% 90%, rgba(239, 77, 95, 0.08), transparent 35%),
    var(--zhm-mist);
  border-bottom: 1px solid var(--zhm-line);
}
.zhm-single .zhm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(71, 46, 143, 0.13) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 90%);
}
.zhm-single .zhm-hero__inner {
  position: relative;
  max-width: var(--zhm-wide);
  margin-inline: auto;
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) {
  .zhm-single .zhm-hero__inner:has(.zhm-cover) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; }
}
.zhm-single .zhm-hero__text {
  display: grid;
  gap: 18px;
  justify-items: start;
  min-width: 0;
  max-width: 900px;
}
.zhm-single .zhm-hero__text > * { animation: zhm-rise .6s var(--zhm-ease) backwards; }
.zhm-single .zhm-hero__text > :nth-child(2) { animation-delay: .05s; }
.zhm-single .zhm-hero__text > :nth-child(3) { animation-delay: .1s; }
.zhm-single .zhm-hero__text > :nth-child(4) { animation-delay: .15s; }
.zhm-single .zhm-hero__text > :nth-child(5) { animation-delay: .2s; }
.zhm-single h1.zhm-hero__title {
  margin: 0;
  font: 700 clamp(34px, 4.2vw, 52px)/1.1 var(--zhm-font-heading);
  letter-spacing: -0.025em;
  color: var(--zhm-deep);
  text-wrap: balance;
}
.zhm-single p.zhm-hero__dek {
  margin: 0;
  max-width: 58ch;
  font: 400 clamp(17px, 1.5vw, 19px)/1.65 var(--zhm-font-body);
  color: var(--zhm-slate);
  text-wrap: pretty;
}

/* crumbs flow as text, so a long last item wraps under the separator instead of beside it */
.zhm-single .zhm-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 400 14px/1.7 var(--zhm-font-body);
}
.zhm-single .zhm-crumbs li { display: inline; color: var(--zhm-slate); }
.zhm-single .zhm-crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--zhm-field-border); }
.zhm-single .zhm-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--zhm-indigo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.zhm-single .zhm-crumbs a:hover { color: var(--zhm-coral-text); text-decoration-thickness: 2px; }

.zhm-single .zhm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--zhm-radius-pill);
  background: var(--zhm-lavender);
  color: var(--zhm-indigo);
  font: 600 13px/1.2 var(--zhm-font-body);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.zhm-single .zhm-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--zhm-coral); }
.zhm-single .zhm-chip:hover { background: var(--zhm-line); color: var(--zhm-deep); }
.zhm-single .zhm-chip--plain { background: #fff; border: 1px solid var(--zhm-line); font-weight: 500; color: var(--zhm-ink); }
.zhm-single .zhm-chip--plain::before { content: none; }
.zhm-single .zhm-chip--plain:hover { background: var(--zhm-lavender); color: var(--zhm-indigo); }

.zhm-single .zhm-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 4px;
  font: 500 14px/1.4 var(--zhm-font-body);
  color: var(--zhm-slate);
}
.zhm-single .zhm-byline__who { display: flex; align-items: center; gap: 12px; }
.zhm-single .zhm-byline__name { display: block; color: var(--zhm-ink); font-weight: 600; font-size: 15px; }
.zhm-single .zhm-byline__role { display: block; font-size: 13.5px; }
.zhm-single .zhm-byline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.zhm-single .zhm-byline__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.zhm-single .zhm-byline__meta svg { width: 16px; height: 16px; color: var(--zhm-blue-text); }

.zhm-single .zhm-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--zhm-lavender);
}
.zhm-single .zhm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.zhm-single .zhm-avatar--lg { width: 60px; height: 60px; }
.zhm-single .zhm-avatar--brand {
  background: #fff;
  border: 1px solid var(--zhm-line);
  font: 700 15px/1 var(--zhm-font-heading);
  letter-spacing: -0.03em;
  display: flex;
  justify-content: center;
}
.zhm-single .zhm-avatar--lg.zhm-avatar--brand { font-size: 19px; }
.zhm-single .zhm-avatar--brand .z { color: var(--zhm-indigo); }
.zhm-single .zhm-avatar--brand .h { color: var(--zhm-blue); }
.zhm-single .zhm-avatar--brand .m { color: var(--zhm-coral); }

/* cover: the featured image, beside the text on wide screens */
.zhm-single .zhm-cover {
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--zhm-radius-card);
  overflow: hidden;
  background: var(--zhm-lavender);
  box-shadow: var(--zhm-shadow-raised);
  animation: zhm-pop .7s var(--zhm-ease) .1s backwards;
}
.zhm-single .zhm-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Article, share, author ---------- */

.zhm-single .zhm-body { padding-block: 60px 8px; }
/* pages have no bands after the article, so the column needs its own room above the footer */
.zhm-single > .zhm-body:last-child { padding-bottom: 80px; }
.zhm-single .zhm-after {
  max-width: var(--zhm-col);
  margin: 52px auto 0;
  display: grid;
  gap: 28px;
}
.zhm-single .zhm-after__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  border-block: 1px solid var(--zhm-line);
}
.zhm-single .zhm-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zhm-single .zhm-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.zhm-single .zhm-share__label {
  margin-right: 4px;
  font: 600 12px/1 var(--zhm-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zhm-slate);
}
.zhm-single .zhm-icon-btn,
.zhm-single .zhm-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border: 1px solid var(--zhm-line);
  border-radius: var(--zhm-radius-pill);
  background: #fff;
  color: var(--zhm-indigo);
  font: 600 14px/1 var(--zhm-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.zhm-single .zhm-copy { padding: 0 16px; }
.zhm-single .zhm-icon-btn svg,
.zhm-single .zhm-copy svg { width: 18px; height: 18px; flex: none; }
.zhm-single .zhm-icon-btn:hover,
.zhm-single .zhm-copy:hover { background: var(--zhm-lavender); border-color: var(--zhm-indigo); color: var(--zhm-indigo); }
.zhm-single .zhm-icon-btn:active,
.zhm-single .zhm-copy:active { transform: scale(.96); }
.zhm-single .zhm-copy.is-done,
.zhm-single .zhm-copy.is-done:hover { background: var(--zhm-success); border-color: var(--zhm-success); color: #fff; }

.zhm-single .zhm-author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: var(--zhm-box-pad);
  border-radius: var(--zhm-radius-card);
  background: var(--zhm-mist);
  border: 1px solid var(--zhm-line);
}
.zhm-single .zhm-author__body { display: grid; gap: 4px; min-width: 0; }
.zhm-single .zhm-author__body p { margin: 0; }
.zhm-single .zhm-author__label { font: 600 12px/1.4 var(--zhm-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--zhm-slate); }
.zhm-single .zhm-author__name { font: 600 19px/1.3 var(--zhm-font-heading); color: var(--zhm-deep); }
.zhm-single .zhm-author__bio { margin-top: 4px; font: 400 15px/1.6 var(--zhm-font-body); color: var(--zhm-slate); }

/* ---------- Closing call to action ---------- */

.zhm-single .zhm-band { margin-inline: calc(50% - 50vw); padding-inline: 20px; }
.zhm-single .zhm-band__inner { max-width: var(--zhm-col); margin-inline: auto; }
.zhm-single .zhm-band__inner--wide { max-width: var(--zhm-wide); }
.zhm-single .zhm-band--cta { padding-block: 64px 72px; }
.zhm-single .zhm-endcta {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 24px;
  justify-items: start;
  padding: 40px;
  border-radius: var(--zhm-radius-card);
  color: #fff;
  background:
    radial-gradient(circle at 100% 100%, rgba(64, 123, 190, 0.6), transparent 45%),
    radial-gradient(circle at 0% 0%, rgba(239, 77, 95, 0.4), transparent 40%),
    linear-gradient(135deg, var(--zhm-indigo), var(--zhm-deep));
}
.zhm-single .zhm-endcta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000);
  mask-image: linear-gradient(90deg, transparent 40%, #000);
}
.zhm-single .zhm-endcta > * { position: relative; z-index: 1; }
.zhm-single .zhm-endcta__text { display: grid; gap: 12px; }
.zhm-single .zhm-endcta__text p { margin: 0; }
.zhm-single h2.zhm-endcta__title {
  margin: 0;
  max-width: 22ch;
  font: 700 clamp(26px, 3vw, 32px)/1.2 var(--zhm-font-heading);
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.zhm-single p.zhm-endcta__copy { max-width: 52ch; font: 400 16.5px/1.6 var(--zhm-font-body); color: var(--zhm-on-dark-muted); }
.zhm-single .zhm-endcta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.zhm-single .zhm-endcta :focus-visible { outline-color: #fff; }

.zhm-single .zhm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--zhm-btn-h);
  padding: 12px 28px;
  border: 2px solid transparent;
  border-radius: var(--zhm-radius-pill);
  font: 600 15px/20px var(--zhm-font-body);
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.zhm-single .zhm-btn:active { transform: scale(.98); }
.zhm-single .zhm-btn svg { width: 18px; height: 18px; transition: transform .22s var(--zhm-ease); }
.zhm-single .zhm-btn:hover svg { transform: translateX(3px); }
.zhm-single .zhm-btn--inverse { background: #fff; border-color: #fff; color: var(--zhm-indigo); }
.zhm-single .zhm-btn--inverse:hover { background: var(--zhm-lavender); border-color: var(--zhm-lavender); color: var(--zhm-indigo); }
.zhm-single .zhm-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.8); color: #fff; }
.zhm-single .zhm-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }

/* ---------- Related posts ---------- */

.zhm-single .zhm-band--related {
  padding-block: 72px 88px;
  background: var(--zhm-mist);
  border-top: 1px solid var(--zhm-line);
}
.zhm-single .zhm-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 28px;
}
.zhm-single h2.zhm-related__title {
  margin: 0;
  font: 700 clamp(26px, 3vw, 36px)/1.2 var(--zhm-font-heading);
  letter-spacing: -0.02em;
  color: var(--zhm-deep);
}
.zhm-single .zhm-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font: 600 15px/1.3 var(--zhm-font-body);
  color: var(--zhm-indigo);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zhm-single .zhm-more svg { width: 16px; height: 16px; transition: transform .22s var(--zhm-ease); }
.zhm-single .zhm-more:hover { color: var(--zhm-coral-text); }
.zhm-single .zhm-more:hover svg { transform: translateX(3px); }
.zhm-single .zhm-related__nav { display: flex; align-items: center; gap: 10px; }
.zhm-single .zhm-related__nav .zhm-more { margin-right: 8px; }
.zhm-single .zhm-scroll-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--zhm-line);
  border-radius: 50%;
  background: #fff;
  color: var(--zhm-indigo);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .2s ease, transform .12s ease;
}
.zhm-single .zhm-scroll-btn svg { width: 18px; height: 18px; }
.zhm-single .zhm-scroll-btn:hover:not(:disabled) { background: var(--zhm-lavender); border-color: var(--zhm-indigo); }
.zhm-single .zhm-scroll-btn:active:not(:disabled) { transform: scale(.94); }
.zhm-single .zhm-scroll-btn:disabled { opacity: .4; cursor: default; }

.zhm-single .zhm-cards {
  --zhm-card-gap: 24px;
  --zhm-card-w: calc((100% - 2 * var(--zhm-card-gap)) / 3);
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--zhm-card-w);
  gap: var(--zhm-card-gap);
  /* Room inside the clipped row for the hover lift and --zhm-shadow-raised (spills about 25px up,
     60px down, 40px sideways), cancelled by negative margins so the cards keep their place.
     Sideways room stops 6px short of the card gap so the next card never peeks in at either
     edge; the shadow is all but transparent by then. */
  --zhm-card-room: calc(var(--zhm-card-gap) - 6px);
  margin: -26px calc(-1 * var(--zhm-card-room)) -48px;
  padding: 26px var(--zhm-card-room) 64px;
  /* no scrollbar or swipe: blog.js moves the row (prev / next buttons and the timed advance) */
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--zhm-card-room);
}
.zhm-single .zhm-cards > li { display: grid; scroll-snap-align: start; }
@media (max-width: 1023px) {
  .zhm-single .zhm-cards { --zhm-card-w: calc((100% - var(--zhm-card-gap)) / 2); }
}
@media (max-width: 639px) {
  .zhm-single .zhm-cards { --zhm-card-gap: 16px; --zhm-card-w: 86%; }
}
.zhm-single .zhm-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--zhm-radius-card);
  background: #fff;
  border: 1px solid var(--zhm-line);
  transition: transform .32s var(--zhm-ease), box-shadow .32s var(--zhm-ease), border-color .2s ease;
}
.zhm-single .zhm-card:hover,
.zhm-single .zhm-card:focus-within { transform: translateY(-3px); box-shadow: var(--zhm-shadow-raised); border-color: transparent; }
.zhm-single .zhm-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--zhm-deep); }
.zhm-single .zhm-card__img,
.zhm-single .zhm-card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--zhm-ease);
}
.zhm-single .zhm-card__art--0 { background: radial-gradient(circle at 18% 28%, rgba(239, 77, 95, 0.6), transparent 42%), radial-gradient(circle at 82% 72%, rgba(64, 123, 190, 0.75), transparent 48%), linear-gradient(155deg, var(--zhm-indigo), var(--zhm-deep)); }
.zhm-single .zhm-card__art--1 { background: radial-gradient(circle at 78% 22%, rgba(239, 77, 95, 0.5), transparent 40%), radial-gradient(circle at 20% 80%, rgba(241, 237, 252, 0.35), transparent 45%), linear-gradient(155deg, var(--zhm-blue), var(--zhm-indigo)); }
.zhm-single .zhm-card__art--2 { background: radial-gradient(circle at 80% 25%, rgba(64, 123, 190, 0.6), transparent 45%), radial-gradient(circle at 15% 85%, rgba(239, 77, 95, 0.75), transparent 50%), linear-gradient(155deg, var(--zhm-deep), var(--zhm-indigo)); }
.zhm-single .zhm-card:hover .zhm-card__img,
.zhm-single .zhm-card:hover .zhm-card__art,
.zhm-single .zhm-card:focus-within .zhm-card__img { transform: scale(1.05); }
.zhm-single .zhm-card__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  padding: 7px 11px;
  border-radius: var(--zhm-radius-pill);
  background: #fff;
  color: var(--zhm-indigo);
  font: 600 12px/1 var(--zhm-font-body);
}
.zhm-single .zhm-card__body { display: grid; gap: 8px; align-content: start; padding: 20px 22px 22px; }
.zhm-single .zhm-card__body p { margin: 0; }
.zhm-single .zhm-card__meta { display: flex; flex-wrap: wrap; gap: 8px; font: 500 13px/1.4 var(--zhm-font-body); color: var(--zhm-slate); }
.zhm-single h3.zhm-card__title { margin: 0; font: 600 19px/1.3 var(--zhm-font-heading); color: var(--zhm-ink); text-wrap: balance; }
.zhm-single .zhm-card__link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--zhm-ease), color .15s ease;
}
.zhm-single .zhm-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.zhm-single .zhm-card:hover .zhm-card__link,
.zhm-single .zhm-card__link:focus-visible { color: var(--zhm-indigo); background-size: 100% 2px; }
.zhm-single .zhm-card__link:focus-visible { outline: none; }
.zhm-single .zhm-card:focus-within { outline: 3px solid var(--zhm-focus); outline-offset: 2px; }
.zhm-single .zhm-card__excerpt {
  font: 400 14.5px/1.6 var(--zhm-font-body);
  color: var(--zhm-slate);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zhm-single .zhm-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font: 600 14px/1.3 var(--zhm-font-body);
  color: var(--zhm-indigo);
}
.zhm-single .zhm-card__more svg { width: 16px; height: 16px; transition: transform .25s var(--zhm-ease); }
.zhm-single .zhm-card:hover .zhm-card__more svg { transform: translateX(4px); }

/* Room for the theme header. From 993px it floats over the page (122px tall, 97px below
   1200px); at 992px and under the mobile header sits in the flow, so the hero needs little. */
@media (max-width: 1199px) {
  .zhm-single .zhm-hero { padding-top: 145px; }
}
@media (max-width: 992px) {
  .zhm-single .zhm-hero { padding-top: 48px; }
}
@media (max-width: 767px) {
  .zhm-single .zhm-hero { padding: 36px 16px 48px; }
  .zhm-single .zhm-endcta { padding: 28px 22px; }
  .zhm-single .zhm-card__body { padding: 18px 20px 20px; }
  .zhm-single .zhm-related__nav .zhm-more { margin-right: 0; }
  .zhm-single .zhm-band { padding-inline: 16px; }
  .zhm-single .zhm-band--cta { padding-block: 48px; }
  .zhm-single .zhm-band--related { padding-block: 52px 64px; }
  .zhm-single .zhm-share { margin-left: 0; }
  .zhm-single .zhm-author { grid-template-columns: minmax(0, 1fr); }
}

@keyframes zhm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes zhm-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   2. Post content
   ========================================================================== */

/* ---------- Text ---------- */

.zhm-post p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--zhm-ink);
  margin: 0 0 1.15em;
}
/* opening paragraph reads as the intro */
.zhm-post > p:first-child {
  font-size: 19.5px;
  line-height: 1.7;
  color: var(--zhm-deep);
}
.zhm-post h1,
.zhm-post h2 {
  font-family: var(--zhm-font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--zhm-deep);
  text-wrap: balance;
  margin: 2.1em 0 .55em;
}
.zhm-post h3 {
  font-family: var(--zhm-font-heading);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--zhm-ink);
  text-wrap: balance;
  margin: 1.8em 0 .5em;
}
.zhm-post h4,
.zhm-post h5,
.zhm-post h6 {
  font-family: var(--zhm-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--zhm-ink);
  margin: 1.6em 0 .4em;
}
.zhm-post > :first-child { margin-top: 0; }
.zhm-post strong {
  font-weight: 600;
  color: var(--zhm-deep);
}

/* links are underlined so they don't rely on colour alone (WCAG 1.4.1) */
.zhm-post a:not(.wp-block-button__link) {
  color: var(--zhm-indigo);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(71, 46, 143, 0.4);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.zhm-post a:not(.wp-block-button__link):hover {
  color: var(--zhm-coral-text);
  text-decoration-color: currentColor;
}
.zhm-post a:focus-visible,
.zhm-post button:focus-visible {
  outline: 3px solid var(--zhm-focus);
  outline-offset: 2px;
  border-radius: var(--zhm-radius-sm);
}

/* ---------- Lists ---------- */

.zhm-post ul,
.zhm-post ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4em;
  display: grid;
  gap: .5em;
}
.zhm-post li {
  position: relative;
  font-size: 17px;
  line-height: 1.75;
  color: var(--zhm-ink);
  margin: 0;
}
.zhm-post ul > li { padding-left: 1.6em; }
.zhm-post ul > li::before {
  content: "";
  position: absolute;
  left: .3em;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--zhm-blue);
  transform: rotate(45deg);
}
.zhm-post ol { counter-reset: zhm-ol; }
.zhm-post ol > li {
  padding-left: 2.4em;
  counter-increment: zhm-ol;
}
.zhm-post ol > li::before {
  content: counter(zhm-ol);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--zhm-lavender);
  color: var(--zhm-indigo);
  font: 700 13px/26px var(--zhm-font-heading);
  text-align: center;
}

/* List style: Checklist / Red flags. The icon repeats what the text says. */
.zhm-post .wp-block-list.is-style-zhm-checks > li,
.zhm-post .wp-block-list.is-style-zhm-flags > li { padding-left: 2em; }
.zhm-post .wp-block-list.is-style-zhm-checks > li::before,
.zhm-post .wp-block-list.is-style-zhm-flags > li::before {
  content: "";
  left: 0;
  top: .3em;
  width: 20px;
  height: 20px;
  border-radius: 0;
  transform: none;
  -webkit-mask: var(--zhm-icon) center / contain no-repeat;
  mask: var(--zhm-icon) center / contain no-repeat;
}
.zhm-post .wp-block-list.is-style-zhm-checks > li::before {
  background: var(--zhm-success);
  --zhm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E");
}
.zhm-post .wp-block-list.is-style-zhm-flags > li::before {
  background: var(--zhm-error);
  --zhm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V4h9l.4 2H20v10h-7l-.4-2H7v7H5Z'/%3E%3C/svg%3E");
}

/* List style: Steps. Numbered circles joined by a line, for real sequences. */
.zhm-post .wp-block-list.is-style-zhm-steps {
  gap: 0;
  counter-reset: zhm-step;
}
.zhm-post .wp-block-list.is-style-zhm-steps > li {
  padding: 0 0 1.1em 3.1em;
  counter-increment: zhm-step;
}
.zhm-post .wp-block-list.is-style-zhm-steps > li::before {
  content: counter(zhm-step);
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--zhm-indigo);
  color: #fff;
  font: 700 14px/32px var(--zhm-font-heading);
  text-align: center;
  transform: none;
}
.zhm-post .wp-block-list.is-style-zhm-steps > li::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 38px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--zhm-line);
}
.zhm-post .wp-block-list.is-style-zhm-steps > li:last-child { padding-bottom: 0; }
.zhm-post .wp-block-list.is-style-zhm-steps > li:last-child::after { display: none; }

/* ---------- Paragraph styles: Question box, Note ---------- */

.zhm-post p.is-style-zhm-ask,
.zhm-post p.is-style-zhm-note {
  position: relative;
  margin: var(--zhm-box-gap) 0;
  padding: 18px 24px 18px 58px;
  border-radius: var(--zhm-radius-card);
  font-size: 16px;
  line-height: 1.65;
}
.zhm-post p.is-style-zhm-ask {
  background: var(--zhm-info-tint);
  border: 1px solid var(--zhm-info-line);
}
.zhm-post p.is-style-zhm-note {
  background: var(--zhm-mist);
  border: 1px solid var(--zhm-line);
}
.zhm-post p.is-style-zhm-ask::before,
.zhm-post p.is-style-zhm-note::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 20px;
  width: 22px;
  height: 22px;
  -webkit-mask: var(--zhm-icon) center / contain no-repeat;
  mask: var(--zhm-icon) center / contain no-repeat;
}
.zhm-post p.is-style-zhm-ask::before {
  background: var(--zhm-blue-text);
  --zhm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.9A8 8 0 1 1 21 12Z'/%3E%3Cpath d='M9.8 9.5a2.3 2.3 0 0 1 4.4.8c0 1.5-2.2 2-2.2 3.2M12 16.2h.01'/%3E%3C/svg%3E");
}
.zhm-post p.is-style-zhm-note::before {
  background: var(--zhm-indigo);
  --zhm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1.1 1 1.9V16h5v-.2c0-.8.4-1.5 1-1.9A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
}
.zhm-post p.is-style-zhm-ask strong { color: var(--zhm-blue-text); }

/* ---------- Group styles: Key takeaways, Call to action ---------- */

.zhm-post .wp-block-group.is-style-zhm-summary,
.zhm-post .key-takeaways,
.zhm-post .wp-block-group.is-style-zhm-cta {
  margin: var(--zhm-box-gap) 0;
  display: grid;
  gap: 12px;
}
.zhm-post .is-style-zhm-summary > .wp-block-group__inner-container,
.zhm-post .is-style-zhm-cta > .wp-block-group__inner-container {
  display: grid;
  gap: 12px;
}
.zhm-post :is(.is-style-zhm-summary, .key-takeaways) :is(h2, h3, h4, p, ul, ol),
.zhm-post .is-style-zhm-cta :is(h2, h3, h4, p, .wp-block-buttons) { margin: 0; }

.zhm-post .wp-block-group.is-style-zhm-summary,
.zhm-post .key-takeaways {
  padding: var(--zhm-box-pad);
  border-radius: var(--zhm-radius-card);
  background: var(--zhm-mist);
  border: 1px solid var(--zhm-line);
}
.zhm-post :is(.is-style-zhm-summary, .key-takeaways) :is(h2, h3, h4) {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1.2 var(--zhm-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zhm-indigo);
}
.zhm-post :is(.is-style-zhm-summary, .key-takeaways) :is(h2, h3, h4)::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1.1 1 1.9V16h5v-.2c0-.8.4-1.5 1-1.9A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1.1 1 1.9V16h5v-.2c0-.8.4-1.5 1-1.9A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.zhm-post :is(.is-style-zhm-summary, .key-takeaways) p,
.zhm-post :is(.is-style-zhm-summary, .key-takeaways) li { font-size: 16px; line-height: 1.65; }

.zhm-post .wp-block-group.is-style-zhm-cta {
  position: relative;
  overflow: hidden;
  padding: var(--zhm-box-pad);
  border-radius: var(--zhm-radius-card);
  color: #fff;
  background:
    radial-gradient(circle at 100% 100%, rgba(64, 123, 190, 0.55), transparent 45%),
    radial-gradient(circle at 0% 0%, rgba(239, 77, 95, 0.35), transparent 40%),
    linear-gradient(135deg, var(--zhm-indigo), var(--zhm-deep));
}
.zhm-post .is-style-zhm-cta :is(h2, h3, h4) {
  font: 700 26px/1.25 var(--zhm-font-heading);
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 24ch;
}
.zhm-post .is-style-zhm-cta p {
  font-size: 16px;
  color: var(--zhm-on-dark-muted);
  max-width: 48ch;
}
.zhm-post .is-style-zhm-cta a:not(.wp-block-button__link) { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); }
.zhm-post .is-style-zhm-cta .wp-block-buttons { margin-top: 8px; }
.zhm-post .is-style-zhm-cta .wp-block-button__link {
  background: #fff;
  border-color: #fff;
  color: var(--zhm-indigo);
}
.zhm-post .is-style-zhm-cta .wp-block-button__link:hover {
  background: var(--zhm-lavender);
  border-color: var(--zhm-lavender);
  color: var(--zhm-indigo);
}
.zhm-post .is-style-zhm-cta .wp-block-button + .wp-block-button .wp-block-button__link {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
}
.zhm-post .is-style-zhm-cta .wp-block-button + .wp-block-button .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}
.zhm-post .is-style-zhm-cta a:focus-visible { outline-color: #fff; }

/* ---------- Table: column width, scrolls inside its own box on small screens ---------- */

.zhm-post figure.wp-block-table,
.zhm-post .zhm-table-scroll {
  margin: var(--zhm-box-gap) 0;
  overflow-x: auto;
  border: 1px solid var(--zhm-line);
  border-radius: var(--zhm-radius-card);
}
.zhm-post table {
  width: 100%;
  min-width: 640px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}
.zhm-post table th,
.zhm-post table td {
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid var(--zhm-line);
  text-align: left;
  vertical-align: top;
  color: var(--zhm-ink);
}
.zhm-post table thead th {
  background: var(--zhm-lavender);
  color: var(--zhm-deep);
  font-weight: 600;
}
.zhm-post table tbody td:first-child {
  background: var(--zhm-mist);
  color: var(--zhm-deep);
  font-weight: 600;
}
.zhm-post table tbody tr:last-child td { border-bottom: 0; }
.zhm-post figure.wp-block-table figcaption {
  margin: 0;
  padding: 10px 15px;
  font-size: 13.5px;
  color: var(--zhm-slate);
  border-top: 1px solid var(--zhm-line);
}

/* ---------- Quote: testimonial card ---------- */

.zhm-post blockquote {
  position: relative;
  overflow: hidden;
  margin: var(--zhm-box-gap) 0;
  padding: var(--zhm-box-pad);
  border: 0;
  border-radius: var(--zhm-radius-card);
  background: linear-gradient(160deg, var(--zhm-deep) 0%, var(--zhm-indigo) 100%);
  color: #fff;
  font-style: normal;
  quotes: none;
}
.zhm-post blockquote::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 77, 95, 0.4), transparent 65%);
  pointer-events: none;
}
.zhm-post blockquote::after { content: none; }
.zhm-post blockquote p {
  position: relative;
  margin: 0;
  font-family: var(--zhm-font-heading);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  text-wrap: pretty;
}
.zhm-post blockquote cite {
  position: relative;
  display: block;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}
.zhm-post blockquote cite a:not(.wp-block-button__link) {
  color: #fff;
  font-weight: 400;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}
.zhm-post blockquote cite a:not(.wp-block-button__link):hover {
  color: var(--zhm-lavender);
  text-decoration-color: currentColor;
}
.zhm-post blockquote a:focus-visible { outline-color: #fff; }

/* ---------- Buttons: first is primary, the rest are outlined ---------- */

.zhm-post .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.6em 0;
}
.zhm-post .wp-block-button { margin: 0; }
.zhm-post .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--zhm-btn-h);
  padding: 12px 26px;
  border: 2px solid var(--zhm-indigo);
  border-radius: var(--zhm-radius-pill);
  background: var(--zhm-indigo);
  color: #fff;
  font-family: var(--zhm-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.zhm-post .wp-block-button__link:hover {
  background: var(--zhm-deep);
  border-color: var(--zhm-deep);
  color: #fff;
}
.zhm-post .wp-block-button + .wp-block-button .wp-block-button__link {
  background: #fff;
  color: var(--zhm-indigo);
}
.zhm-post .wp-block-button + .wp-block-button .wp-block-button__link:hover {
  background: var(--zhm-lavender);
  border-color: var(--zhm-indigo);
  color: var(--zhm-indigo);
}
.zhm-post .wp-block-button__link:active { transform: scale(.98); }

/* ---------- Images and separators ---------- */

.zhm-post figure.wp-block-image,
.zhm-post .autoseo-infographic-container { margin: var(--zhm-box-gap) 0; }
.zhm-post img {
  max-width: 100%;
  height: auto;
  border-radius: var(--zhm-radius-card);
}
.zhm-post .autoseo-infographic-container img {
  display: block;
  width: 100%;
  border: 1px solid var(--zhm-line);
}
/* spacer blocks: the column keeps its own rhythm, so fixed-height gaps are dropped */
.zhm-post .wp-block-spacer { display: none; }
.zhm-post figure.wp-block-image figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--zhm-slate);
  text-align: center;
}
.zhm-post hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--zhm-line);
}

/* ---------- Table of contents inside AutoSEO posts: folded by blog.js ---------- */

.zhm-post .table-of-contents {
  margin: var(--zhm-box-gap) 0;
  border-radius: var(--zhm-radius-card);
  background: #fff;
  border: 1px solid var(--zhm-line);
}
.zhm-post .table-of-contents > :is(h2, h3) { margin: 0; font-size: inherit; }
.zhm-post .zhm-toc__btn {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 24px;
  background: none;
  border: 0;
  border-radius: var(--zhm-radius-card);
  box-shadow: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font: 600 16px/1.3 var(--zhm-font-heading);
  color: var(--zhm-deep);
  cursor: pointer;
}
.zhm-post .zhm-toc__btn:hover { color: var(--zhm-indigo); background: none; }
.zhm-post .zhm-toc__count { margin-left: auto; font: 500 13.5px/1 var(--zhm-font-body); color: var(--zhm-slate); }
.zhm-post .zhm-toc__chev {
  width: 10px;
  height: 10px;
  flex: none;
  margin: -4px 2px 0 4px;
  border-right: 2px solid var(--zhm-blue-text);
  border-bottom: 2px solid var(--zhm-blue-text);
  transform: rotate(45deg);
  transition: transform .28s var(--zhm-ease), margin .28s var(--zhm-ease);
}
.zhm-post .table-of-contents.is-open .zhm-toc__chev { transform: rotate(225deg); margin-top: 4px; }
.zhm-post .zhm-toc__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .28s var(--zhm-ease), visibility 0s linear .28s;
}
.zhm-post .table-of-contents.is-open .zhm-toc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .28s var(--zhm-ease), visibility 0s;
}
.zhm-post .zhm-toc__inner { min-height: 0; overflow: hidden; }
.zhm-post .table-of-contents ul,
.zhm-post .table-of-contents ol {
  gap: 0;
  margin: 0 24px 18px;
  padding-top: 8px;
  border-top: 1px solid var(--zhm-line);
}
.zhm-post .table-of-contents li { padding-left: 0; font-size: 15px; line-height: 1.5; }
.zhm-post .table-of-contents li::before { content: none; }
.zhm-post .table-of-contents li a:not(.wp-block-button__link) {
  display: block;
  padding: 7px 0;
  font-weight: 500;
  text-decoration: none;
}
.zhm-post .table-of-contents li a:not(.wp-block-button__link):hover { text-decoration: underline; }

/* ---------- FAQ accordion (built by blog.js from h2.faq + h3/answer pairs) ---------- */

.zhm-post .faq-list {
  margin: .4em 0 var(--zhm-box-gap);
  border-top: 1px solid var(--zhm-line);
}
.zhm-post .faq-item { border-bottom: 1px solid var(--zhm-line); }
.zhm-post h3.faq-item__q {
  margin: 0;
  font-size: inherit;
}
.zhm-post .faq-item__btn {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: var(--zhm-radius-sm);
  box-shadow: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font: 600 17px/1.4 var(--zhm-font-heading);
  color: var(--zhm-deep);
  cursor: pointer;
  transition: color .15s ease;
}
.zhm-post .faq-item__btn:hover { color: var(--zhm-indigo); background: none; }
.zhm-post .faq-item__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
}
.zhm-post .faq-item__icon::before,
.zhm-post .faq-item__icon::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--zhm-blue-text);
  transition: transform .32s var(--zhm-spring);
}
.zhm-post .faq-item__icon::after { transform: rotate(90deg); }
.zhm-post .faq-item.is-open .faq-item__icon::before,
.zhm-post .faq-item.is-open .faq-item__icon::after { transform: rotate(180deg); }
.zhm-post .faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .28s var(--zhm-ease), visibility 0s linear .28s;
}
.zhm-post .faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .28s var(--zhm-ease), visibility 0s;
}
.zhm-post .faq-item__inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .28s var(--zhm-ease);
}
.zhm-post .faq-item.is-open .faq-item__inner {
  opacity: 1;
  transform: none;
}
.zhm-post .faq-item__inner p,
.zhm-post .faq-item__inner li {
  font-size: 16px;
  color: var(--zhm-slate);
}
.zhm-post .faq-item__inner > :last-child { margin-bottom: 18px; }

/* ---------- Reading progress bar (added by blog.js) ---------- */

.zhm-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
}
.zhm-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--zhm-indigo), var(--zhm-blue) 60%, var(--zhm-coral));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- Small screens ---------- */

@media (max-width: 767px) {
  .zhm-post p,
  .zhm-post li { font-size: 16.5px; }
  .zhm-post > p:first-child { font-size: 18px; }
  .zhm-post h1,
  .zhm-post h2 { font-size: 25px; }
  .zhm-post h3 { font-size: 19.5px; }
  .zhm-post blockquote p { font-size: 19px; }
  .zhm-post .is-style-zhm-cta :is(h2, h3, h4) { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .zhm-single *,
  .zhm-single *::before,
  .zhm-single *::after,
  .zhm-post *,
  .zhm-post *::before,
  .zhm-post *::after { transition: none !important; animation: none !important; }
  .zhm-single .zhm-card:hover,
  .zhm-single .zhm-card:focus-within { transform: none; }
}