/* =========================================================
   SINGLE POST (Insights) — content typography & blocks
   File: assets/css/module-css/single-post.css
   ========================================================= */

/* Paragraph spacing */
body.single-post .blog-details-content .text-box p{
  margin: 0 0 18px;
}
body.single-post .blog-details-content .text-box p:last-child{
  margin-bottom: 0;
}

/* Headings spacing (common) */
body.single-post .blog-details-content .text-box h2,
body.single-post .blog-details-content .text-box h3,
body.single-post .blog-details-content .text-box h4,
body.single-post .blog-details-content .text-box h5,
body.single-post .blog-details-content .text-box h6{
  margin: 26px 0 12px;
  line-height: 1.25;
}

/* REQUIRED SIZES (your spec): H2=30, H3=26, H4=22 */
body.single-post .blog-details-content .text-box h2{
  font-size: 30px;
  line-height: 36px;
}
body.single-post .blog-details-content .text-box h3{
  font-size: 26px;
  line-height: 32px;
}
body.single-post .blog-details-content .text-box h4{
  font-size: 22px;
  line-height: 30px;
}

/* Lists */
body.single-post .blog-details-content .text-box ul,
body.single-post .blog-details-content .text-box ol{
  margin: 0 0 18px;
  padding-left: 22px;
}
body.single-post .blog-details-content .text-box li{
  margin: 0 0 10px;
}
body.single-post .blog-details-content .text-box ul li{
  list-style: disc;
}
body.single-post .blog-details-content .text-box ol li{
  list-style: decimal;
}

/* Make bullets black (like headings) */
body.single-post .blog-details-content .text-box ul li::marker,
body.single-post .blog-details-content .text-box ol li::marker{
  color: var(--title-color);
}

/* Quote — normalize WP/Gutenberg and style */
body.single-post .blog-details-content .text-box blockquote,
body.single-post .blog-details-content .text-box .wp-block-quote{
  position: relative;
  display: block;
  margin: 22px 0;
  padding: 42px 80px 42px 40px;  /* template-like spacing */
  border-radius: 10px;
  background: var(--secondary-color);
  border: none;
}

/* Flatten nested quotes (fix "wrapped 3 times") */
body.single-post .blog-details-content .text-box blockquote blockquote,
body.single-post .blog-details-content .text-box .wp-block-quote blockquote{
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

/* Quote text */
body.single-post .blog-details-content .text-box blockquote p,
body.single-post .blog-details-content .text-box .wp-block-quote p{
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
}

/* Quote author (cite) */
body.single-post .blog-details-content .text-box blockquote cite,
body.single-post .blog-details-content .text-box .wp-block-quote cite{
  position: relative;
  display: inline-block;
  margin-top: 12px;
  padding-left: 42px;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
  font-weight: 700;
  font-style: normal;
}
body.single-post .blog-details-content .text-box blockquote cite:before,
body.single-post .blog-details-content .text-box .wp-block-quote cite:before{
  position: absolute;
  content: '';
  background: #fff;
  width: 30px;
  height: 2px;
  left: 0;
  top: 14px;
  border-radius: 15px;
  opacity: 0.2;
}

/* Media */
body.single-post .blog-details-content .text-box img{
  max-width: 100%;
  height: auto;
  display: block;
}
body.single-post .blog-details-content .text-box figure{
  margin: 18px 0;
}

/* Gallery (Gutenberg + classic) — 2 columns like template */
body.single-post .blog-details-content .text-box .wp-block-gallery,
body.single-post .blog-details-content .text-box .gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin: 22px 0 30px;
}
body.single-post .blog-details-content .text-box .wp-block-gallery .wp-block-image img,
body.single-post .blog-details-content .text-box .gallery img{
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* Cookies consent spacing */
body.single-post .comment-box .comment-form-cookies-consent{
  margin: 0 0 20px;
}
body.single-post .comment-box .comment-form-cookies-consent label{
  margin: 0;
}

body.single-post .blog-details-content blockquote .icon-box{
  margin-bottom: 10px;
}

body.single-post .blog-details-content blockquote .icon-box i{
  font-size: 70px;
  line-height: 60px;
  display: inline-block;
}

/* Gallery images: equal height like template */
body.single-post .blog-details-content .two-column .image-box{
  height: 280px;              /* можна змінити під дизайн */
  overflow: hidden;
}

body.single-post .blog-details-content .two-column .image-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   Comments form — Name & Email side by side
   ========================================================= */

/* Wrapper row already exists from comment_form */
body.single-post .comment-box .comment-form .row{
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Each field column */
body.single-post .comment-box .comment-form .single-column{
  padding-left: 15px;
  padding-right: 15px;
}

/* Name + Email = 50% on desktop */
body.single-post .comment-box .comment-form .single-column.col-lg-6{
  flex: 0 0 50%;
  max-width: 50%;
}

/* Comment textarea = full width */
body.single-post .comment-box .comment-form .single-column.col-lg-12{
  flex: 0 0 100%;
  max-width: 100%;
}

/* Mobile: stack fields */
@media (max-width: 767px){
  body.single-post .comment-box .comment-form .single-column.col-lg-6{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* =========================================================
   WP Comment Form: make Name + Email 2 columns
   (WP wraps fields in <p class="comment-form-...">)
   ========================================================= */

body.single-post .comment-box form.comment-form .row.clearfix{
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Make WP <p> wrappers act like columns */
body.single-post .comment-box form.comment-form .row.clearfix > p{
  margin: 0 0 20px;          /* spacing between rows */
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

/* Name + Email side-by-side */
body.single-post .comment-box form.comment-form .row.clearfix > p.comment-form-author,
body.single-post .comment-box form.comment-form .row.clearfix > p.comment-form-email{
  flex: 0 0 50%;
  max-width: 50%;
}

/* Comment textarea full width */
body.single-post .comment-box form.comment-form .row.clearfix > p.comment-form-comment{
  flex: 0 0 100%;
  max-width: 100%;
}

/* If your custom markup is inside those <p>, remove extra spacing */
body.single-post .comment-box form.comment-form .row.clearfix > p > .single-column{
  margin: 0;
  padding: 0;
}

/* Mobile: stack */
@media (max-width: 767px){
  body.single-post .comment-box form.comment-form .row.clearfix > p.comment-form-author,
  body.single-post .comment-box form.comment-form .row.clearfix > p.comment-form-email{
    flex: 0 0 100%;
    max-width: 100%;
  }
}