/*
 * Single blog post (components/site/PostView.tsx). Same language as the Contact, About and Donate pages: Poppins
 * headings, Roboto text, the logo's blue #006DB8 (buttons in its gradient), green #8BC34A accents, white rounded cards.
 * !important where the Alone theme styles h1/h2/h3/a/ul/blockquote/table globally.
 */
.zzp, .zzp-related {
  --b: #006db8; --b-d: #005592; --b-50: #e8f2fb; --navy: #006db8; --g: #8bc34a; --g-d: #5b8a1f;
  --t: #344054; --m: #5d6b7e; --line: #e4e7ec; --bg: #f3f8fd;
  font-family: "Roboto", system-ui, sans-serif; color: var(--t);
}
.zzp *, .zzp *::before, .zzp *::after, .zzp-related *, .zzp-related *::before, .zzp-related *::after { box-sizing: border-box; }

.zzp { display: block; padding: 0 16px 72px; background: linear-gradient(180deg, var(--bg) 0, #fff 440px); }

/* ---------- header ---------- */
.zzp-head { max-width: 840px; margin: 0 auto; padding: 56px 0 36px; text-align: center; }
.zzp-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 0 0 22px; font-size: 14px; color: var(--m); }
.zzp-crumbs a { color: var(--m) !important; text-decoration: none !important; }
.zzp-crumbs a:hover, .zzp-crumbs a:focus-visible { color: var(--b) !important; text-decoration: underline !important; }
.zzp-crumbs a:last-child { color: var(--navy) !important; font-weight: 500; }
.zzp-crumbs span { color: #98a2b3; }

.zzp .zzp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px !important; padding: 0 !important; list-style: none !important; }
.zzp .zzp-chips li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.zzp .zzp-chip {
  display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--b-50); color: var(--b-d) !important;
  font: 600 12px/1 "Poppins", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.zzp .zzp-chip:hover, .zzp .zzp-chip:focus-visible { background: var(--b); color: #fff !important; }

.zzp .zzp-title {
  margin: 0 !important; font: 600 46px/1.15 "Poppins", sans-serif !important; letter-spacing: -0.01em;
  color: var(--navy) !important; text-transform: none !important; text-wrap: balance; overflow-wrap: anywhere;
}
.zzp .zzp-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 20px 0 0 !important; font-size: 15px; color: var(--m); }
.zzp-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.zzp-meta svg { color: var(--b); }
.zzp-meta .zzp-dot { width: 4px; height: 4px; border-radius: 50%; background: #98a2b3; }

/* ---------- featured image ---------- */
.zzp-hero { max-width: 1040px; margin: 0 auto 48px !important; padding: 0; }
.zzp-hero img {
  display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 24px;
  box-shadow: 0 24px 48px -24px rgb(0 85 146 / 0.35);
}

/* ---------- layout: reading column, "On this page" sidebar from 1200px ---------- */
.zzp-layout { max-width: 712px; margin: 0 auto; }
.zzp-main { min-width: 0; }
.zzp-toc { display: none; }
@media (min-width: 1200px) {
  .zzp-layout--toc { display: grid; grid-template-columns: 236px minmax(0, 712px); gap: 64px; max-width: 1040px; }
  .zzp-toc { display: block; position: sticky; top: 126px; align-self: start; max-height: calc(100vh - 150px); overflow-y: auto; padding: 4px 4px 4px 0; }
  .zzp-toc-m { display: none; }
}
.zzp .zzp-toc__title { margin: 0 0 14px !important; font: 600 12px/1 "Poppins", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m); }
.zzp .zzp-toc__list { margin: 0 !important; padding: 0 !important; list-style: none !important; border-left: 2px solid var(--line); }
.zzp .zzp-toc__list li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.zzp .zzp-toc__list li::before { display: none !important; }
.zzp .zzp-toc__list a {
  display: block; margin-left: -2px; padding: 8px 0 8px 16px; border-left: 2px solid transparent;
  font-size: 14.5px; line-height: 1.45; color: var(--m) !important; text-decoration: none !important; transition: color 0.2s ease, border-color 0.2s ease;
}
.zzp .zzp-toc__list a:hover, .zzp .zzp-toc__list a:focus-visible { color: var(--navy) !important; border-left-color: #98a2b3; }
.zzp .zzp-toc__list a[aria-current] { color: var(--b) !important; border-left-color: var(--b); font-weight: 500; }

/* small screens: collapsible contents above the article */
.zzp-toc-m { margin: 0 0 32px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.zzp-toc-m summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none;
  font: 600 13px/1 "Poppins", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
}
.zzp-toc-m summary::-webkit-details-marker { display: none; }
.zzp-toc-m summary svg { color: var(--b); transition: transform 0.2s ease; }
.zzp-toc-m[open] summary svg { transform: rotate(180deg); }
.zzp-toc-m summary:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; border-radius: 16px; }
.zzp .zzp-toc-m .zzp-toc__list { margin: 0 18px 16px !important; }

/* ---------- article text ---------- */
.zzp-body { font-size: 18px; line-height: 1.75; color: var(--t); overflow-wrap: break-word; }
.zzp .zzp-body > :first-child { margin-top: 0 !important; }
.zzp .zzp-body p { margin: 0 0 1.25em !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
/* lead paragraph */
.zzp .zzp-body > p:first-of-type { margin-bottom: 1.4em !important; font-size: 21px !important; line-height: 1.6 !important; color: #1d2939 !important; }
/* the text after a donation form (components/site/PostView.tsx): no second lead paragraph */
.zzp .zzp-body--more > p:first-of-type:not(.zz-text-lg, .zz-text-sm) { margin-bottom: 1.25em !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
/* a donation form in the text (components/donate/GiftForm.tsx) */
.zzp .zzp-gift { margin: 2.6em 0; }
.zzp .zzp-body h1, .zzp .zzp-body h2, .zzp .zzp-body h3, .zzp .zzp-body h4, .zzp .zzp-body h5, .zzp .zzp-body h6 {
  font-family: "Poppins", sans-serif !important; color: var(--navy) !important; text-transform: none !important; letter-spacing: -0.005em; scroll-margin-top: 130px;
}
.zzp .zzp-body h1, .zzp .zzp-body h2 { margin: 2.6em 0 0.65em !important; font-size: 30px !important; font-weight: 600 !important; line-height: 1.25 !important; }
/* brand accent above each section heading */
.zzp .zzp-body h3 { margin: 1.9em 0 0.5em !important; font-size: 23px !important; font-weight: 600 !important; line-height: 1.3 !important; }
.zzp .zzp-body h4, .zzp .zzp-body h5, .zzp .zzp-body h6 { margin: 1.6em 0 0.4em !important; font-size: 19px !important; font-weight: 600 !important; line-height: 1.35 !important; }
.zzp .zzp-body a { color: var(--b) !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zzp .zzp-body a:hover, .zzp .zzp-body a:focus-visible { color: var(--b-d) !important; text-decoration-thickness: 2px; }
.zzp .zzp-body strong, .zzp .zzp-body b { color: #1d2939; font-weight: 600; }

/* lists: check marks, numbered circles, dots when nested */
.zzp .zzp-body ul, .zzp .zzp-body ol { margin: 0 0 1.5em !important; padding: 0 !important; list-style: none !important; }
.zzp .zzp-body ol { counter-reset: zzp-ol; }
.zzp .zzp-body li { position: relative; margin: 0 0 0.6em !important; padding: 0 0 0 2.1em !important; list-style: none !important; line-height: inherit; font-size: inherit; }
.zzp .zzp-body ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 22px; height: 22px; border-radius: 50%;
  background: #eaf5dc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7a16' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.zzp .zzp-body ol > li { counter-increment: zzp-ol; }
.zzp .zzp-body ol > li::before {
  content: counter(zzp-ol); position: absolute; left: 0; top: 0.3em; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--b-50); color: var(--b-d); font: 600 12px/1 "Poppins", sans-serif;
}
.zzp .zzp-body li li { padding-left: 1.4em !important; }
.zzp .zzp-body li ul > li::before { top: 0.66em; left: 0.3em; width: 7px; height: 7px; background: var(--g); }
.zzp .zzp-body li > ul, .zzp .zzp-body li > ol { margin: 0.6em 0 0 !important; }

/* pull quotes */
.zzp .zzp-body blockquote {
  position: relative; margin: 2.4em 0 !important; padding: 28px 28px 26px 72px !important; border: 0 !important; border-left: 4px solid var(--g) !important;
  border-radius: 0 20px 20px 0; background: linear-gradient(135deg, #f5f9ee, #eef5fb); color: var(--navy);
  font: 500 21px/1.55 "Poppins", sans-serif; font-style: normal;
}
.zzp .zzp-body blockquote::before {
  content: "\201C" !important; display: block !important; position: absolute; left: 22px; top: 12px; margin: 0 !important;
  font: 700 64px/1 Georgia, serif; color: var(--g); background: none !important; width: auto !important; height: auto !important;
}
.zzp .zzp-body blockquote p { font: inherit !important; color: inherit !important; }
.zzp .zzp-body blockquote p:last-child { margin-bottom: 0 !important; }
.zzp .zzp-body blockquote cite { display: block; margin-top: 10px; font: 400 15px/1.4 "Roboto", sans-serif; font-style: normal; color: var(--m); }

/* images and figures */
.zzp .zzp-body img { max-width: 100%; height: auto; border-radius: 16px; }
.zzp .zzp-body figure { max-width: 100%; margin: 2.2em 0 !important; }
.zzp .zzp-body figure img { display: block; margin: 0 auto; box-shadow: 0 16px 36px -22px rgb(0 85 146 / 0.4); }
.zzp .zzp-body figcaption, .zzp .zzp-body .zz-caption, .zzp .zzp-body .wp-caption-text, .zzp .zzp-body .wp-element-caption {
  margin-top: 12px !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--m) !important; text-align: center;
}
.zzp .zzp-body iframe, .zzp .zzp-body video { max-width: 100%; border: 0; border-radius: 16px; }
.zzp .zzp-body hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--line); }
.zzp .zzp-body code { padding: 2px 6px; border-radius: 6px; background: #f2f4f7; font-size: 0.9em; }

/* buttons in the content (WordPress button blocks, Elementor / CMS button widgets): the site's primary pill */
.zzp .zzp-body .wp-block-buttons, .zzp .zzp-body .elementor-button-wrapper {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 2em 0 !important; text-align: center;
}
.zzp .zzp-body .wp-block-button { margin: 0 !important; padding: 0 !important; }
.zzp .zzp-body a.wp-block-button__link, .zzp .zzp-body a.wp-element-button, .zzp .zzp-body a.elementor-button, .zzp .zzp-body .wp-block-button > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 14px 32px !important;
  border: 0 !important; border-radius: 999px !important; background: var(--b) !important; color: #fff !important;
  font: 600 16px/1.2 "Poppins", sans-serif !important; letter-spacing: 0; text-align: center; text-decoration: none !important; text-transform: none !important;
  box-shadow: 0 12px 24px -14px rgb(0 109 184 / 0.75); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.zzp .zzp-body a.wp-block-button__link:hover, .zzp .zzp-body a.wp-element-button:hover, .zzp .zzp-body a.elementor-button:hover, .zzp .zzp-body .wp-block-button > a:hover,
.zzp .zzp-body a.wp-block-button__link:focus-visible, .zzp .zzp-body a.wp-element-button:focus-visible, .zzp .zzp-body a.elementor-button:focus-visible, .zzp .zzp-body .wp-block-button > a:focus-visible {
  background: var(--navy) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgb(0 85 146 / 0.7);
}
.zzp .zzp-body a.wp-block-button__link:focus-visible, .zzp .zzp-body a.wp-element-button:focus-visible, .zzp .zzp-body a.elementor-button:focus-visible, .zzp .zzp-body .wp-block-button > a:focus-visible {
  outline: 3px solid var(--g); outline-offset: 3px;
}
.zzp .zzp-body .elementor-button-content-wrapper, .zzp .zzp-body .elementor-button-text { display: inline; color: inherit !important; font: inherit !important; }

/* ---------- what the CMS post editor writes (Zamzam-CMS components/content/rich-text.tsx) ---------- */
/* featured image after the intro (lib/cms/postView.ts) */
.zzp .zzp-body .zzp-feature { margin: 2em 0 2.2em !important; }
.zzp .zzp-body .zzp-feature img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 40px -24px rgb(0 85 146 / 0.4); }
.zzp-hero figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--m); text-align: center; }

/* text sizes (a paragraph style), after the lead-paragraph rule so they win on a first paragraph too */
.zzp .zzp-body p.zz-text-lg, .zzp .zzp-body > p.zz-text-lg { font-size: 21px !important; line-height: 1.6 !important; color: #1d2939 !important; }
.zzp .zzp-body p.zz-text-sm, .zzp .zzp-body > p.zz-text-sm { font-size: 15px !important; line-height: 1.6 !important; color: var(--m) !important; }

/* alignment (zz-align-*; imported posts' classes are mapped to these by lib/cms/postView.ts cleanBody) */
.zzp .zzp-body .zz-align-left, .zzp .zzp-body .has-text-align-left { text-align: left !important; }
.zzp .zzp-body .zz-align-center, .zzp .zzp-body .has-text-align-center { text-align: center !important; }
.zzp .zzp-body .zz-align-right, .zzp .zzp-body .has-text-align-right { text-align: right !important; }
.zzp .zzp-body blockquote.zz-align-center, .zzp .zzp-body blockquote.has-text-align-center { padding-right: 72px !important; }
/* an aligned image without a figure (older imported posts) */
.zzp .zzp-body img.zz-img-center { display: block; margin: 1.6em auto; }
@media (min-width: 700px) {
  .zzp .zzp-body img.zz-img-left { float: left; max-width: 46%; margin: 0.4em 28px 1.2em 0; }
  .zzp .zzp-body img.zz-img-right { float: right; max-width: 46%; margin: 0.4em 0 1.2em 28px; }
}

/* images: small / medium / full width of the text column; left, centre or right */
.zzp .zzp-body .zz-fig { width: 100%; margin: 2.2em auto !important; }
.zzp .zzp-body .zz-fig img { display: block; width: 100%; height: auto; border-radius: 16px; }
.zzp .zzp-body .zz-fig--small { max-width: 320px; }
.zzp .zzp-body .zz-fig--medium { max-width: 480px; }
.zzp .zzp-body .zz-fig--left { margin-left: 0 !important; }
.zzp .zzp-body .zz-fig--right { margin-right: 0 !important; }
.zzp .zzp-body .zz-fig--left figcaption { text-align: left; }
.zzp .zzp-body .zz-fig--right figcaption { text-align: right; }
@media (min-width: 768px) {
  /* small and medium images beside the text on wider screens */
  .zzp .zzp-body .zz-fig--small.zz-fig--left, .zzp .zzp-body .zz-fig--medium.zz-fig--left { float: left; width: 46%; margin: 0.4em 28px 1.2em 0 !important; }
  .zzp .zzp-body .zz-fig--small.zz-fig--right, .zzp .zzp-body .zz-fig--medium.zz-fig--right { float: right; width: 46%; margin: 0.4em 0 1.2em 28px !important; }
  .zzp .zzp-body .zz-fig--small.zz-fig--left, .zzp .zzp-body .zz-fig--small.zz-fig--right { width: 38%; }
  .zzp .zzp-body h2, .zzp .zzp-body h3, .zzp .zzp-body hr, .zzp .zzp-body .zz-btns, .zzp .zzp-body .zz-fig--full, .zzp .zzp-body .zz-fig--center, .zzp .zzp-body .zzp-feature { clear: both; }
}
.zzp-body::after { content: ""; display: block; clear: both; }

/* divider */
.zzp .zzp-body hr.zz-divider { height: 0; margin: 2.6em auto; border: 0; border-top: 2px solid var(--line); }

/* buttons: primary (blue pill) or outline; left or centred */
.zzp .zzp-body .zz-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 2em 0 !important; padding: 0 !important; }
.zzp .zzp-body .zz-btns--left { justify-content: flex-start; }
.zzp .zzp-body a.zz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; max-width: 100%; padding: 13px 30px !important;
  border: 2px solid var(--b) !important; border-radius: 999px !important; background: var(--b) !important; color: #fff !important;
  font: 600 16px/1.2 "Poppins", sans-serif !important; text-align: center; text-decoration: none !important; text-transform: none !important; overflow-wrap: anywhere;
  box-shadow: 0 12px 24px -14px rgb(0 109 184 / 0.75); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.zzp .zzp-body a.zz-btn:hover, .zzp .zzp-body a.zz-btn:focus-visible { border-color: var(--navy) !important; background: var(--navy) !important; color: #fff !important; transform: translateY(-2px); }
.zzp .zzp-body a.zz-btn--outline { background: #fff !important; color: var(--b-d) !important; box-shadow: none; }
.zzp .zzp-body a.zz-btn--outline:hover, .zzp .zzp-body a.zz-btn--outline:focus-visible { border-color: var(--b) !important; background: var(--b) !important; color: #fff !important; }
.zzp .zzp-body a.zz-btn:focus-visible { outline: 3px solid var(--g); outline-offset: 3px; }
.zzp .zzp-body u { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* FAQ: questions as accordions (<details>, lib/cms/postView.ts) */

/* tables scroll inside their own box on small screens */
.zzp .zzp-body .zz-table, .zzp .zzp-body .wp-block-table, .zzp .zzp-body table { display: block; max-width: 100%; overflow-x: auto; }
.zzp .zzp-body table { width: 100%; margin: 2em 0 !important; border: 0 !important; border-collapse: collapse; font-size: 16px; line-height: 1.5; box-shadow: 0 0 0 1px var(--line); border-radius: 12px; }
.zzp .zzp-body .zz-table table, .zzp .zzp-body .wp-block-table table { display: table; margin: 0 !important; }
.zzp .zzp-body .zz-table, .zzp .zzp-body .wp-block-table { margin: 2em 0 !important; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.zzp .zzp-body th, .zzp .zzp-body td { padding: 12px 16px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; text-align: left; vertical-align: top; }
.zzp .zzp-body th, .zzp .zzp-body thead td { background: var(--bg); color: var(--navy); font-weight: 600; }
.zzp .zzp-body tr:last-child td { border-bottom: 0 !important; }

/* ---------- share + donate ---------- */
.zzp-foot { max-width: 712px; margin: 48px auto 0; }
.zzp-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.zzp-share__label { font: 600 14px/1 "Poppins", sans-serif; color: var(--navy); }
.zzp .zzp-share ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.zzp .zzp-share li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.zzp .zzp-share a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--navy) !important;
  box-shadow: 0 0 0 1px var(--line); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.zzp .zzp-share a:hover, .zzp .zzp-share a:focus-visible { background: var(--b); color: #fff !important; transform: translateY(-2px); }

.zzp-cta {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-top: 32px; padding: 28px 30px; border-radius: 24px;
  background: linear-gradient(135deg, #0b7ac4 0%, #006db8 50%, #005592 100%); color: #fff; box-shadow: 0 24px 48px -20px rgb(0 85 146 / 0.45);
}
.zzp-cta__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgb(255 255 255 / 0.14); color: #fff; }
.zzp-cta__icon svg { width: 24px; height: 24px; }
.zzp .zzp-cta h2 { margin: 0 0 6px !important; font: 600 21px/1.3 "Poppins", sans-serif !important; color: #fff !important; text-transform: none !important; }
.zzp .zzp-cta p { margin: 0 !important; font-size: 15px; line-height: 1.55; color: rgb(255 255 255 / 0.88); }
.zzp .zzp-cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; background: #fff; color: var(--navy) !important;
  font: 600 15px/1 "Poppins", sans-serif; white-space: nowrap; text-decoration: none !important;
  box-shadow: 0 10px 22px -12px rgb(0 0 0 / 0.45); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.zzp .zzp-cta__btn svg { width: 17px; height: 17px; color: #e0393e; transition: color 0.2s ease; }
/* green with navy text: 6.9:1 */
.zzp .zzp-cta__btn:hover, .zzp .zzp-cta__btn:focus-visible { background: var(--g); color: var(--navy) !important; transform: translateY(-1px); }
.zzp .zzp-cta__btn:hover svg, .zzp .zzp-cta__btn:focus-visible svg { color: var(--navy); }
.zzp .zzp-cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  html:has(.zzp) { scroll-behavior: smooth; }
}

/* ---------- related posts ---------- */
.zzp-related { padding: 64px 16px 88px; background: var(--bg); }
.zzp-related__wrap { max-width: 1200px; margin: 0 auto; }
.zzp-related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.zzp-related .zzp-related__head h2 { margin: 0 !important; font: 600 32px/1.2 "Poppins", sans-serif !important; color: var(--navy) !important; text-transform: none !important; }
.zzp-related__head a { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1 "Poppins", sans-serif; color: var(--b) !important; text-decoration: none !important; }
.zzp-related__head a:hover, .zzp-related__head a:focus-visible { color: var(--b-d) !important; text-decoration: underline !important; }
.zzp-related .zzp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.zzp-related .zzp-card {
  position: relative; display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: hidden;
  border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(16 24 40 / 0.04); transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.zzp-related .zzp-card:hover, .zzp-related .zzp-card:focus-within { box-shadow: 0 0 0 1px #c7dcf0, 0 18px 36px -16px rgb(0 85 146 / 0.25); transform: translateY(-3px); }
.zzp-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--b-50); }
.zzp-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.zzp-card:hover .zzp-card__media img { transform: scale(1.04); }
.zzp-card__ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--b-50), #eef6e3); }
.zzp-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.zzp-card__cat { align-self: flex-start; font: 600 11.5px/1 "Poppins", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-d); }
.zzp-related .zzp-card h3 { margin: 0 !important; font: 600 19px/1.35 "Poppins", sans-serif !important; color: var(--navy) !important; text-transform: none !important; }
.zzp-related .zzp-card h3 a { color: inherit !important; text-decoration: none !important; }
/* the whole card is the link */
.zzp-related .zzp-card h3 a::after { content: ""; position: absolute; inset: 0; }
.zzp-related .zzp-card h3 a:focus-visible { outline: none; }
.zzp-related .zzp-card:focus-within { outline: 2px solid var(--b); outline-offset: 2px; }
.zzp-card__date { margin-top: auto; font-size: 14px; color: var(--m); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .zzp .zzp-title { font-size: 38px !important; }
  .zzp-related .zzp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .zzp-head { padding: 32px 0 24px; }
  .zzp-crumbs { margin-bottom: 16px; font-size: 13px; }
  .zzp .zzp-title { font-size: 29px !important; line-height: 1.22 !important; }
  .zzp .zzp-meta { margin-top: 14px !important; font-size: 14px; }
  .zzp-hero { margin-bottom: 32px !important; }
  .zzp-hero img { border-radius: 16px; }
  .zzp-body { font-size: 17px; line-height: 1.7; }
  .zzp .zzp-body > p:first-of-type { font-size: 19px !important; }
  .zzp .zzp-body--more > p:first-of-type:not(.zz-text-lg, .zz-text-sm) { font-size: inherit !important; }
  .zzp .zzp-body h1, .zzp .zzp-body h2, .zzp .zzp-body h3 { scroll-margin-top: 96px; }
  .zzp .zzp-body blockquote { padding: 56px 20px 20px 22px !important; font-size: 18px; }
  .zzp .zzp-body blockquote::before { left: 18px; top: 10px; font-size: 54px; }
  
  
  .zzp .zzp-body a.wp-block-button__link, .zzp .zzp-body a.wp-element-button, .zzp .zzp-body a.elementor-button, .zzp .zzp-body .wp-block-button > a { padding: 14px 24px !important; }
  .zzp .zzp-body h1, .zzp .zzp-body h2 { font-size: 24px !important; }
  .zzp .zzp-body h3 { font-size: 20px !important; }
  .zzp-foot { margin-top: 36px; }
  .zzp .zzp-body .zzp-feature img { border-radius: 16px; }
  .zzp .zzp-body p.zz-text-lg, .zzp .zzp-body > p.zz-text-lg { font-size: 19px !important; }
  .zzp .zzp-body p.zz-text-sm, .zzp .zzp-body > p.zz-text-sm { font-size: 15px !important; }
  .zzp .zzp-body a.zz-btn { width: 100%; padding: 13px 22px !important; }
  .zzp .zzp-body blockquote.has-text-align-center { padding-right: 20px !important; }
  .zzp-cta { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; text-align: left; }
  .zzp .zzp-cta__btn { width: 100%; }
  .zzp-related { padding: 48px 16px 64px; }
  .zzp-related .zzp-related__head h2 { font-size: 26px !important; }
  .zzp-related .zzp-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .zzp *, .zzp-related * { transition: none !important; }
}