/* =========================================================================
   KZ Blog Typography
   Scope: single posts (.single-post) + blog/archive listings.
   Nothing here touches service pages, the homepage, header or footer.

   Font sizes are in px on purpose. Astra rescales the root
   (html { font-size: 93.75% } tablet, 91.2% phone), so rem values would
   silently shrink ~9% on phones and miss their target size.
   ========================================================================= */

:root {
  --kz-brand: #028695;
  --kz-brand-deep: #016270;
  --kz-brand-tint: #e8f5f6;
  --kz-gold: #c9a227;
  --kz-gold-tint: #faf6ea;
  --kz-ink: #1b2733;
  --kz-ink-soft: #475569;
  --kz-ink-mute: #7c8896;
  --kz-line: #e6ebef;

  --kz-measure: 640px;
  --kz-text: 18px;
  --kz-text-sm: 17px;
  --kz-leading: 2;
  --kz-h2: 30px;
  --kz-h3: 23px;
  --kz-h4: 19px;
  --kz-gap-h2: 56px;
  --kz-gap-h3: 40px;
  --kz-gap-h4: 32px;
  --kz-ease: cubic-bezier(.16, 1, .3, 1);
}

/* -------------------------------------------------------------------------
   1. The reading column
   168 characters per line was the single worst readability problem.
   ------------------------------------------------------------------------- */
.single-post .elementor-widget-theme-post-content > .elementor-widget-container {
  max-width: var(--kz-measure);
  margin-inline: auto;
  font-size: var(--kz-text);
  line-height: var(--kz-leading);
  color: var(--kz-ink);
}

/* -------------------------------------------------------------------------
   2. Body copy
   ------------------------------------------------------------------------- */
.single-post .elementor-widget-theme-post-content p {
  font-size: var(--kz-text);
  line-height: var(--kz-leading);
  color: var(--kz-ink);
  margin: 0 0 1.4em;
}

.single-post .elementor-widget-theme-post-content strong,
.single-post .elementor-widget-theme-post-content b {
  font-weight: 700;
  color: var(--kz-ink);
}

.single-post .elementor-widget-theme-post-content a {
  color: var(--kz-brand-deep);
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  transition: color .2s var(--kz-ease);
}

.single-post .elementor-widget-theme-post-content a:hover,
.single-post .elementor-widget-theme-post-content a:focus-visible {
  color: var(--kz-gold);
}

/* -------------------------------------------------------------------------
   3. Headings
   Sizes were already sane. Weight 400 and zero margins were the problem:
   the headings carried no visual weight and no section separation.
   ------------------------------------------------------------------------- */
.single-post .elementor-widget-theme-post-content h2 {
  font-size: var(--kz-h2);
  font-weight: 800;
  line-height: 1.4;
  color: var(--kz-brand-deep);
  margin: var(--kz-gap-h2) 0 16px;
  scroll-margin-top: 80px;
}

/* a short gold rule above each H2 makes sections scannable at a glance */
.single-post .elementor-widget-theme-post-content h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--kz-gold);
  margin-block-end: 16px;
}

.single-post .elementor-widget-theme-post-content h2 strong,
.single-post .elementor-widget-theme-post-content h2 b,
.single-post .elementor-widget-theme-post-content h3 strong,
.single-post .elementor-widget-theme-post-content h3 b,
.single-post .elementor-widget-theme-post-content h4 strong,
.single-post .elementor-widget-theme-post-content h4 b {
  font-weight: inherit;
  font-size: inherit;
}

.single-post .elementor-widget-theme-post-content h3 {
  font-size: var(--kz-h3);
  font-weight: 700;
  line-height: 1.5;
  color: var(--kz-ink);
  margin: var(--kz-gap-h3) 0 14px;
  scroll-margin-top: 80px;
}

.single-post .elementor-widget-theme-post-content h4 {
  font-size: var(--kz-h4);
  font-weight: 700;
  line-height: 1.6;
  color: var(--kz-ink-soft);
  margin: var(--kz-gap-h4) 0 10px;
}

.single-post .elementor-widget-theme-post-content h4 em {
  font-style: normal;
  color: var(--kz-brand-deep);
}

/* -------------------------------------------------------------------------
   4. Lists
   ------------------------------------------------------------------------- */
.single-post .elementor-widget-theme-post-content ul,
.single-post .elementor-widget-theme-post-content ol {
  margin: 0 0 1.6em;
  padding-inline-start: 0;
  list-style: none;
}

.single-post .elementor-widget-theme-post-content li {
  position: relative;
  padding-inline-start: 30px;
  margin-block-end: 12px;
  font-size: var(--kz-text);
  line-height: var(--kz-leading);
}

.single-post .elementor-widget-theme-post-content li p {
  margin: 0;
}

.single-post .elementor-widget-theme-post-content ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  inset-block-start: .85em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kz-brand);
}

.single-post .elementor-widget-theme-post-content ol {
  counter-reset: kz-n;
}

.single-post .elementor-widget-theme-post-content ol > li {
  counter-increment: kz-n;
  padding-inline-start: 42px;
}

.single-post .elementor-widget-theme-post-content ol > li::before {
  content: counter(kz-n);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .35em;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kz-brand-tint);
  color: var(--kz-brand-deep);
  font-size: 14px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
}

/* -------------------------------------------------------------------------
   5. Quotes and emphasis blocks
   ------------------------------------------------------------------------- */
.single-post .elementor-widget-theme-post-content blockquote {
  margin: 36px 0;
  padding: 18px 22px;
  background: var(--kz-gold-tint);
  border: 1px solid #eee1c2;
  border-inline-start: 4px solid var(--kz-gold);
  border-radius: 12px;
}

.single-post .elementor-widget-theme-post-content blockquote p {
  margin: 0;
  font-size: var(--kz-text-sm);
  line-height: 1.85;
}

.single-post .elementor-widget-theme-post-content blockquote em {
  font-style: normal;
}

/* Centred paragraphs are emphasis sentences hardcoded in the content.
   Long centred Arabic is hard to read, so promote them to a callout instead.
   Paragraphs that only hold an image keep their centring. */
.single-post .elementor-widget-theme-post-content p[style*="text-align: center"]:not(:has(img)):not(:has(iframe)) {
  text-align: start !important;
  background: var(--kz-brand-tint);
  border-radius: 12px;
  padding: 18px 22px;
  color: var(--kz-brand-deep);
  font-size: var(--kz-text-sm);
  line-height: 1.85;
}

.single-post .elementor-widget-theme-post-content p[style*="text-align: center"]:not(:has(img)):not(:has(iframe)) strong {
  color: inherit;
}

/* -------------------------------------------------------------------------
   6. Figures and images
   ------------------------------------------------------------------------- */
.single-post .elementor-widget-theme-post-content figure,
.single-post .elementor-widget-theme-post-content .wp-caption {
  margin: 40px auto;
  max-width: 100%;
}

.single-post .elementor-widget-theme-post-content img {
  height: auto;
  border-radius: 14px;
}

.single-post .elementor-widget-theme-post-content figcaption,
.single-post .elementor-widget-theme-post-content .wp-caption-text {
  margin-block-start: 12px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--kz-ink-mute);
}

/* -------------------------------------------------------------------------
   7. Tables — wrapped by the plugin so the page never scrolls sideways
   ------------------------------------------------------------------------- */
.kz-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 32px 0;
  border: 1px solid var(--kz-line);
  border-radius: 12px;
}

.kz-table-scroll table {
  margin: 0;
  border-collapse: collapse;
  min-width: 520px;
  width: 100%;
}

.kz-table-scroll th,
.kz-table-scroll td {
  padding: 12px 16px;
  border-block-end: 1px solid var(--kz-line);
  font-size: 16px;
  line-height: 1.7;
  text-align: start;
}

.kz-table-scroll th {
  background: var(--kz-brand-tint);
  color: var(--kz-brand-deep);
  font-weight: 800;
}

/* -------------------------------------------------------------------------
   8. Table of contents widget
   ------------------------------------------------------------------------- */
.single-post .elementor-widget-table-of-contents .elementor-toc__header {
  border-block-end: 1px solid var(--kz-line);
}

.single-post .elementor-widget-table-of-contents .elementor-toc__header-title {
  font-weight: 800;
  color: var(--kz-ink-mute);
  font-size: 16px;
}

.single-post .elementor-widget-table-of-contents .elementor-toc__list-item {
  line-height: 1.7;
}

.single-post .elementor-widget-table-of-contents .elementor-toc__list-item-text:hover {
  color: var(--kz-brand-deep);
}

/* -------------------------------------------------------------------------
   9. Post title
   ------------------------------------------------------------------------- */
.single-post .elementor-widget-theme-post-title .elementor-heading-title {
  font-weight: 800;
  line-height: 1.35;
  color: var(--kz-ink);
  max-width: 22ch;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   10. Blog + archive cards
   ------------------------------------------------------------------------- */
.elementor-posts .elementor-post__title,
.elementor-posts .elementor-post__title a {
  font-weight: 700;
  line-height: 1.55;
  color: var(--kz-ink);
  transition: color .2s var(--kz-ease);
}

.elementor-posts .elementor-post:hover .elementor-post__title a {
  color: var(--kz-brand-deep);
}

.elementor-posts .elementor-post__card {
  transition: transform .25s var(--kz-ease), box-shadow .25s var(--kz-ease);
}

.elementor-posts .elementor-post__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -20px rgba(2, 60, 70, .5);
}

/* -------------------------------------------------------------------------
   11. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --kz-measure: 590px;
  }
}

@media (max-width: 780px) {
  :root {
    --kz-text: 17px;
    --kz-text-sm: 16px;
    --kz-leading: 1.95;
    --kz-h2: 24px;
    --kz-h3: 21px;
    --kz-h4: 17px;
    --kz-gap-h2: 44px;
    --kz-gap-h3: 32px;
    --kz-gap-h4: 24px;
  }

  .single-post .elementor-widget-theme-post-content > .elementor-widget-container {
    max-width: none;
  }

  .single-post .elementor-widget-theme-post-content blockquote,
  .single-post .elementor-widget-theme-post-content p[style*="text-align: center"]:not(:has(img)):not(:has(iframe)) {
    padding: 16px 18px;
  }

  .single-post .elementor-widget-theme-post-content figure,
  .single-post .elementor-widget-theme-post-content .wp-caption {
    margin-block: 28px;
  }

  .kz-table-scroll table {
    min-width: 440px;
  }
}

@media (max-width: 400px) {
  .single-post .elementor-widget-theme-post-content li {
    padding-inline-start: 26px;
  }

  .single-post .elementor-widget-theme-post-content ol > li {
    padding-inline-start: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-post .elementor-widget-theme-post-content a,
  .elementor-posts .elementor-post__card,
  .elementor-posts .elementor-post__title a {
    transition: none;
  }
}