/* =========================================================
   Single post — Article hero
   ========================================================= */
.section-header {
  background: #F8EFF3;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 100px 20px 60px;
}

.section-header .section-inner {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 32px;
}

.section-header .section-inner .post-date {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  color: #797979;
}

.section-header .section-inner .post-date .post-date__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: #797979;
}

.section-header .section-inner .post-date .post-date__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.section-header .section-inner .post-date .post-date__label {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 1.28px;
  text-transform: uppercase;
}

.section-header .section-inner .post-title,
.section-header .section-inner h1 {
  margin: 0;
  color: #000;
  font-family: "Noto Sans", sans-serif;
  font-size: 50px;
  font-style: italic;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: 0;
  text-transform: capitalize;
  font-variation-settings: 'wdth' 100;
}

/* Doctor / author block */
.section-header .section-inner .doctor-section {
  display: flex;
  flex-flow: row nowrap;
  gap: 20px;
  align-items: center;
  margin-top: 0;
}

.section-header .section-inner .doctor-section .doctor-img-wrap {
  width: 62px;
  height: 62px;
  max-width: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
  display: block;
}

.section-header .section-inner .doctor-section .doctor-img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

.section-header .section-inner .doctor-section .doctor-details {
  display: flex;
  flex-flow: column nowrap;
  gap: 6px;
}

.section-header .section-inner .doctor-section .doctor-details .doctor-name,
.section-header .section-inner .doctor-section .doctor-details h6 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #000;
  font-family: "Noto Sans", sans-serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 600;
  line-height: 32px;
  text-transform: capitalize;
  font-variation-settings: 'wdth' 100;
}

.section-header .section-inner .doctor-section .doctor-details .doctor-name a,
.section-header .section-inner .doctor-section .doctor-details h6 a {
  color: inherit;
  font: inherit;
  text-decoration: none;
  font-style: inherit;
}

.section-header .section-inner .doctor-section .doctor-details .doctor-verified {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.section-header .section-inner .doctor-section .doctor-details .doctor-verified svg {
  width: 100%;
  height: 100%;
  display: block;
}

.section-header .section-inner .doctor-section .doctor-details label {
  margin: 0;
  color: #701446;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 1.12px;
  text-transform: uppercase;
}

/* =========================================================
   Featured image
   ========================================================= */
.section-featured-image {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 0 20px;
  box-sizing: border-box;
}

.section-featured-image:before {
  content: '';
  width: 100%;
  height: 40%;
  background: #F8EFF3;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.section-featured-image .section-inner {
  width: 100%;
}

.section-featured-image .section-inner img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 16px;
}

/* =========================================================
   Single post body (content + TOC sidebar)
   ========================================================= */
section.single-post {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 60px 20px 100px;
  background: #fff;
}

section.single-post .section-inner {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  gap: 80px;
  align-items: flex-start;
}

/* TOC sidebar */
section.single-post .section-inner .post-toc {
  width: 360px;
  flex-shrink: 0;
  background: #EFF1F2;
  border-radius: 20px;
  padding: 32px;
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  order: 2;
}

section.single-post .section-inner .post-toc .post-toc__title {
  margin: 0 0 24px;
  color: #0B0030;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 1.28px;
  text-transform: uppercase;
}

section.single-post .section-inner .post-toc .post-toc__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 0;
  width: 100%;
}

section.single-post .section-inner .post-toc .post-toc__item {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #CCCCCC;
  margin: 0;
}

section.single-post .section-inner .post-toc .post-toc__items .post-toc__item:first-child {
  padding-top: 0;
}

section.single-post .section-inner .post-toc .post-toc__items .post-toc__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

section.single-post .section-inner .post-toc .post-toc__bullet {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

section.single-post .section-inner .post-toc .post-toc__bullet svg {
  width: 100%;
  height: 100%;
  display: block;
}

section.single-post .section-inner .post-toc .post-toc__link {
  flex: 1 1 0;
  min-width: 0;
  color: #020202;
  font-family: "Lato", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-decoration: none;
  cursor: pointer;
}

section.single-post .section-inner .post-toc .post-toc__item:hover .post-toc__link {
  color: #701446;
}

/* H3 sub-items indented under their parent H2 */
section.single-post .section-inner .post-toc .post-toc__item--h3 {
  padding-left: 42px;
}

/* Post content column */
section.single-post .section-inner .post-content {
  flex: 1 1 0;
  min-width: 0;
  order: 1;
}


/* Reset post-content typography to match Figma */
section.single-post .section-inner .post-content>* {
  margin-top: 24px;
}

section.single-post .section-inner .post-content.wysiwyg-content p,
section.single-post .section-inner .post-content.wysiwyg-content ul,
section.single-post .section-inner .post-content.wysiwyg-content ol {
  margin-top: 12px;
  margin-bottom: 0;
}

section.single-post .section-inner .post-content.wysiwyg-content h2,
section.single-post .section-inner .post-content.wysiwyg-content h3,
section.single-post .section-inner .post-content.wysiwyg-content h4,
section.single-post .section-inner .post-content.wysiwyg-content h5,
section.single-post .section-inner .post-content.wysiwyg-content h6 {
  margin-top: 32px;
  margin-bottom: 0;
}

section.single-post .section-inner .post-content>*:first-child {
  margin-top: 0;
}

section.single-post .section-inner .post-content p,
section.single-post .section-inner .post-content li {
  color: #383838;
  font-family: "Lato", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  margin: 0;
}

section.single-post .section-inner .post-content strong {
  font-weight: 700;
}

section.single-post .section-inner .post-content a {
  color: #701446;
  text-decoration: underline;
}

/* Headings */
section.single-post .section-inner .post-content h1,
section.single-post .section-inner .post-content h2,
section.single-post .section-inner .post-content h3,
section.single-post .section-inner .post-content h4,
section.single-post .section-inner .post-content h5 {
  margin: 40px 0 24px;
  color: #000;
  font-family: "Noto Sans", sans-serif;
  font-style: italic;
  font-weight: 600;
  text-transform: capitalize;
  font-variation-settings: 'wdth' 100;
}

section.single-post .section-inner .post-content h2 {
  font-size: 44px;
  line-height: 56px;
  margin-top: 60px;
}

section.single-post .section-inner .post-content h3 {
  font-size: 36px;
  line-height: 48px;
}

section.single-post .section-inner .post-content h4 {
  font-size: 30px;
  line-height: 42px;
  font-weight: 700;
}

section.single-post .section-inner .post-content h5 {
  font-size: 24px;
  line-height: 32px;
}

section.single-post .section-inner .post-content h6 {
  margin: 32px 0 16px;
  color: #000;
  font-family: "Lato", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
}

section.single-post .section-inner .post-content>*:first-child,
section.single-post .section-inner .post-content h1:first-child,
section.single-post .section-inner .post-content h2:first-child,
section.single-post .section-inner .post-content h3:first-child {
  margin-top: 0;
}

/* Lists */
section.single-post .section-inner .post-content ul,
section.single-post .section-inner .post-content ol {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

section.single-post .section-inner .post-content ul li,
section.single-post .section-inner .post-content ol li {
  position: relative;
  padding-left: 32px;
  margin: 6px 0;
  color: #000;
  text-align: left;
}

section.single-post .section-inner .post-content ul li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  background: #701446;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(112, 20, 70, 0.18);
}

section.single-post .section-inner .post-content ol {
  counter-reset: post-ol;
}

section.single-post .section-inner .post-content ol li {
  counter-increment: post-ol;
}

section.single-post .section-inner .post-content ol li:before {
  content: counter(post-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: #701446;
  font-weight: 700;
  font-family: "Lato", sans-serif;
  font-size: 18px;
  line-height: 26px;
}

/* Indented sub-section block (eg. duplex ultrasound H6 block) */
section.single-post .section-inner .post-content .post-section-indent,
section.single-post .section-inner .post-content blockquote+p,
section.single-post .section-inner .post-content .wp-block-group.is-indented {
  padding-left: 40px;
}

/* Blockquote / pull-quote */
section.single-post .section-inner .post-content blockquote {
  margin: 24px 0;
  background: #F8EFF3;
  padding: 12px 16px 12px 36px;
  position: relative;
  border-radius: 2px;
}

section.single-post .section-inner .post-content blockquote:before {
  content: '';
  width: 4px;
  height: calc(100% - 24px);
  background: #701446;
  position: absolute;
  top: 12px;
  left: 16px;
  border-radius: 2px;
}

section.single-post .section-inner .post-content blockquote *,
section.single-post .section-inner .post-content blockquote p {
  color: #000;
  font-family: "Lato", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-align: left;
  margin: 0;
}

section.single-post .section-inner .post-content blockquote :first-child {
  margin-top: 0;
}

/* Figures and images inside content */
section.single-post .section-inner .post-content figure {
  margin: 32px 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: 12px;
  max-width: 500px;
  width: 100%;
}

section.single-post .section-inner .post-content figure img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border: 1.2px solid #D5D5D5;
}

section.single-post .section-inner .post-content figure figcaption {
  width: 100%;
  color: #383838;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 1.28px;
  text-transform: uppercase;
  text-align: center;
}

section.single-post .section-inner .post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* =========================================================
   Responsive — Tablet
   ========================================================= */
@media (max-width: 1279px) {
  .section-header {
    padding: 80px 20px 50px;
  }

  .section-header .section-inner .post-title,
  .section-header .section-inner h1 {
    font-size: 44px;
    line-height: 54px;
  }

  section.single-post {
    padding: 50px 20px 80px;
  }

  section.single-post .section-inner {
    gap: 48px;
  }

  section.single-post .section-inner .post-toc {
    width: 300px;
    padding: 28px;
  }

  section.single-post .section-inner .post-content h2 {
    font-size: 38px;
    line-height: 50px;
  }

  section.single-post .section-inner .post-content h3 {
    font-size: 32px;
    line-height: 44px;
  }
}

/* =========================================================
   Responsive — Mobile
   ========================================================= */
@media (max-width: 767px) {

  /* Header */
  .section-header {
    padding: 40px 20px;
  }

  .section-header .section-inner {
    gap: 32px;
  }

  .section-header .section-inner .post-title,
  .section-header .section-inner h1 {
    font-size: 42px;
    line-height: 50px;
  }

  .section-header .section-inner .doctor-section {
    gap: 12px;
    align-items: flex-start;
  }

  .section-header .section-inner .doctor-section .doctor-details {
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
  }

  .section-header .section-inner .doctor-section .doctor-details .doctor-name,
  .section-header .section-inner .doctor-section .doctor-details h6 {
    font-size: 20px;
    line-height: 28px;
    gap: 0;
  }

  .section-header .section-inner .doctor-section .doctor-details .doctor-verified {
    width: 16px;
    height: 16px;
  }

  .section-header .section-inner .doctor-section .doctor-details label {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.72px;
  }

  /* Featured image — full-width with drop shadow */
  .section-featured-image {
    padding: 0;
  }

  .section-featured-image:before {
    display: none;
  }

  .section-featured-image .section-inner {
    box-shadow: -5px 10px 12.5px rgba(114, 128, 155, 0.1);
  }

  .section-featured-image .section-inner img {
    border-radius: 0;
    height: 200px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
  }

  /* Body — single column with TOC on top */
  section.single-post {
    padding: 40px 20px;
  }

  section.single-post .section-inner {
    flex-flow: column nowrap;
    gap: 40px;
  }

  section.single-post .section-inner .post-toc {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    position: static;
    order: 1;
  }

  section.single-post .section-inner .post-toc .post-toc__title {
    margin-bottom: 16px;
  }

  section.single-post .section-inner .post-toc .post-toc__item {
    gap: 12px;
    padding: 12px 0;
  }

  section.single-post .section-inner .post-toc .post-toc__bullet {
    width: 26px;
    height: 26px;
  }

  section.single-post .section-inner .post-toc .post-toc__link {
    font-size: 16px;
    line-height: 24px;
  }

  section.single-post .section-inner .post-toc .post-toc__item--h3 {
    padding-left: 32px;
  }

  section.single-post .section-inner .post-content {
    order: 2;
  }

  /* Mobile content typography */
  section.single-post .section-inner .post-content>* {
    margin-top: 20px;
  }

  section.single-post .section-inner .post-content p,
  section.single-post .section-inner .post-content li {
    font-size: 16px;
    line-height: 24px;
  }

  section.single-post .section-inner .post-content h2 {
    font-size: 34px;
    line-height: 46px;
    margin-top: 32px;
  }

  section.single-post .section-inner .post-content h3 {
    font-size: 30px;
    line-height: 42px;
    margin-top: 32px;
  }

  section.single-post .section-inner .post-content h4 {
    font-size: 24px;
    line-height: 36px;
    margin-top: 32px;
  }

  section.single-post .section-inner .post-content h5 {
    font-size: 20px;
    line-height: 28px;
    margin-top: 32px;
  }

  section.single-post .section-inner .post-content h6 {
    font-size: 16px;
    line-height: 24px;
  }

  section.single-post .section-inner .post-content .post-section-indent {
    padding-left: 20px;
  }

  section.single-post .section-inner .post-content blockquote * {
    font-size: 16px;
    line-height: 24px;
  }

  section.single-post .section-inner .post-content figure figcaption {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: none;
  }
}

/* =========================================================
   Single-post horizontal padding — mobile-first overrides
   (placed after the max-width queries so they take precedence)
   ========================================================= */
@media (min-width: 768px) {
  .section-header,
  .section-featured-image,
  section.single-post {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1024px) {
  .section-header,
  .section-featured-image,
  section.single-post {
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media (min-width: 1280px) {
  .section-header,
  .section-featured-image,
  section.single-post {
    padding-left: 11%;
    padding-right: 11%;
  }
}

/* =========================================================
   Related posts (kept from previous template)
   ========================================================= */
.section-related-posts {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 80px 20px;
  background: #fff;
}

.section-related-posts .section-inner {
  width: 100%;
  max-width: 1240px;
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
}

.section-related-posts .section-inner .column {
  width: 100%;
}

.section-related-posts .section-inner .column-header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.section-related-posts .section-inner .column-header h2 {
  margin: 0;
  color: #000;
  font-family: "Noto Sans", sans-serif;
  font-size: 44px;
  font-style: italic;
  font-weight: 600;
  line-height: 56px;
  text-transform: capitalize;
}

.section-related-posts .section-inner .column-header .button {
  border-radius: 200px;
  border: 1px solid #701446;
  padding: 16px 32px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 10px;
  color: #701446;
  text-align: center;
  font-family: "Lato", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.section-related-posts .section-inner .column-header .button .icon {
  width: 20px;
  height: 20px;
}

.section-related-posts .section-inner .column-header .button .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.section-related-posts .section-inner .column-header .button:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

.section-related-posts .section-inner .column-header .button:hover svg path {
  fill: #fff;
}

.section-related-posts .section-inner .column-posts .related-posts {
  display: flex;
  flex-flow: row wrap;
  gap: 35px;
  align-items: stretch;
}

.section-related-posts .section-inner .column-posts .related-posts .related-post {
  width: 100%;
  max-width: calc(33.33% - (35px * 2 / 3));
  display: flex;
  flex-flow: column nowrap;
  gap: 0;
  text-decoration: none;
}

.section-related-posts .section-inner .column-posts .related-posts .related-post .related-post-image {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  height: 240px;
  min-height: 240px;
  overflow: hidden;
  border-radius: 16px;
}

.section-related-posts .section-inner .column-posts .related-posts .related-post .related-post-image img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  transition: transform 0.3s ease-in-out;
}

.section-related-posts .section-inner .column-posts .related-posts .related-post .related-post-image img:hover {
  transform: scale(1.05);
}

.section-related-posts .section-inner .column-posts .related-posts .related-post .related-post-content {
  display: flex;
  flex-flow: column nowrap;
  gap: 6px;
}

.section-related-posts .section-inner .column-posts .related-posts .related-post .related-post-content .article-category {
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
  align-items: center;
  font-family: "Lato", sans-serif;
  letter-spacing: 1.4px;
  color: #014EBF;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  margin: 0;
}

.section-related-posts .section-inner .column-posts .related-posts .related-post .related-post-content h3 {
  margin: 0;
  text-decoration: none;
  color: #000;
  font-family: "Lato", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  text-transform: capitalize;
}

.section-related-posts .section-inner .column-posts .related-posts .related-post .related-post-content h3>a {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
}

.section-related-posts .section-inner .column-posts .related-posts .related-post .related-post-content .related-post-excerpt {
  color: #6A6A6A;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.section-related-posts .section-inner .column-posts .related-posts .related-post .related-details {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}

.section-related-posts .section-inner .column-posts .related-posts .related-post .related-details>a {
  display: flex;
  gap: 10px;
  color: #023538;
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  margin-top: 20px;
}

@media (max-width: 1279px) {
  .section-related-posts {
    padding: 60px 20px 40px;
  }

  .section-related-posts .section-inner {
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .section-related-posts {
    padding: 40px 20px;
    order: 5;
  }

  .section-related-posts .section-inner {
    gap: 32px;
  }

  .section-related-posts .section-inner .column-header {
    flex-flow: column nowrap;
    gap: 12px;
  }

  .section-related-posts .section-inner .column-header h2 {
    text-align: center;
    font-size: 34px;
    line-height: 46px;
  }

  .section-related-posts .section-inner .column-header .button {
    width: 100%;
    justify-content: center;
  }

  .section-related-posts .section-inner .column-posts .related-posts .related-post {
    max-width: 100%;
  }

  .section-related-posts .section-inner .column-posts .related-posts .related-post .related-post-content h3 {
    font-size: 20px;
    line-height: 28px;
  }
}

/* =========================================================
   Contact form (kept from previous template)
   ========================================================= */
.single-post .section-contact-form .section-inner .column-form .wpcf7 form .form__footer .whatsapp-phone-wrap .whatsapp-phone-icon p .whatsapp-phone-icon-wrap svg circle {
  fill: #fff;
}

.single-post .section-contact-form .section-inner .column-form .wpcf7 form .form__footer .whatsapp-phone-wrap .whatsapp-phone-icon p .whatsapp-phone-icon-wrap svg path {
  fill: #00313E;
}

.section-contact-form .section-inner .column-form .wpcf7 form .form__footer .button-wrap p .wpcf7-submit {
  background: #fff;
  color: #00313E;
  border-color: #fff;
}