/* ==========================================================================
   Olverin theme: single post
   Authored by Olverin Ventures for the OlverinEcom theme.
   Templates: single.php, post-format/single*.php, comments.php and the
   comment list callback in functions.php. Enqueued before base.css, so
   every rule here is scoped to .blog-single-post / .single-post /
   .post-comments to keep it specific enough. Measured at 1440 and 375.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Article frame: post-format/single.php (article.klb-article.single-post)
   -------------------------------------------------------------------------- */
.blog-single-post {
  position: relative;
  width: 100%;
}
.blog-single-post .single-post {
  position: relative;
  margin-bottom: 20px;
}

/* Header: category, title (52px desktop / 28px phones), meta */
.single-post .entry-header {
  margin-bottom: 20px;
}
.single-post .entry-header .entry-category {
  margin-bottom: 7px;
  line-height: 24px;
}
.single-post .entry-header .entry-category a {
  display: inline-flex;
  align-items: center;
  color: var(--olv-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.single-post .entry-header .entry-category a:hover {
  color: var(--olv-text);
}
.single-post .entry-header .entry-title {
  margin-bottom: 10px;
  font-size: 28px;
  line-height: 1.2;
}
.single-post .entry-header .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.single-post .entry-header .entry-meta > * {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1;
}
.single-post .entry-header .entry-meta > *::before {
  content: "\2022";
  position: relative;
  top: -1px;
  display: block;
  margin: 0 9px;
  font-size: 14px;
  color: var(--olv-text);
}
.single-post .entry-header .entry-meta > *:first-child::before {
  display: none;
}
.single-post .entry-header .entry-meta a {
  color: inherit;
}
.single-post .entry-header .entry-meta a:hover {
  color: var(--olv-primary);
}
.single-post .entry-header .sticky-post i {
  margin-right: 4px;
  font-size: 12px;
}

/* Featured image */
.single-post .entry-media {
  position: relative;
  margin-bottom: 20px;
}
.single-post .entry-media a {
  display: block;
  overflow: hidden;
  border-radius: var(--olv-radius);
}
.single-post .entry-media img {
  display: block;
  width: 100%;
  height: auto;
}
.single-post .entry-media.embed-responsive {
  padding-top: 56.25%;
  overflow: hidden;
}
.single-post .entry-media.embed-responsive iframe,
.single-post .entry-media.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.single-post figure.entry-media {
  margin: 0 0 20px;
}
.single-post .entry-media .blog-gallery {
  position: relative;
  overflow: hidden;
}
.single-post .entry-media .blog-gallery a {
  display: block;
}
.single-post .entry-media .mejs-container {
  width: 100% !important;
}

@media (min-width: 992px) {
  .single-post .entry-header {
    margin-bottom: 40px;
  }
  .single-post .entry-header .entry-title {
    margin-bottom: 20px;
    font-size: 52px;
  }
  .single-post .entry-media {
    margin-bottom: 40px;
  }
  .single-post figure.entry-media {
    margin-bottom: 40px;
  }
}

/* --------------------------------------------------------------------------
   Content typography: .entry-content > .klb-post (also used by page.php and
   comment bodies). Body 16px / 1.6, paragraphs 16px apart.
   -------------------------------------------------------------------------- */
.klb-post {
  position: relative;
  font-size: 16px;
  line-height: 1.6;
}
.klb-post::before,
.klb-post::after {
  content: "";
  display: table;
  clear: both;
}
.klb-post p {
  margin-bottom: 16px;
}
.klb-post > *:last-child {
  margin-bottom: 0;
}
.klb-post h1, .klb-post h2, .klb-post h3,
.klb-post h4, .klb-post h5, .klb-post h6 {
  margin: 30px 0 15px;
}
.klb-post h1:first-child, .klb-post h2:first-child, .klb-post h3:first-child,
.klb-post h4:first-child, .klb-post h5:first-child, .klb-post h6:first-child {
  margin-top: 0;
}
.klb-post h2 { font-size: 30px; }
.klb-post h3 { font-size: 24px; }
.klb-post h4 { font-size: 20px; }
.klb-post h5 { font-size: 17px; }
.klb-post h6 { font-size: 15px; }
.klb-post a:not(.button):not(.btn):not(.wp-block-button__link) {
  color: var(--olv-primary);
  text-decoration: underline;
  text-decoration-color: rgba(var(--olv-primary-rgb), 0.4);
  text-underline-offset: 2px;
}
.klb-post a:not(.button):not(.btn):not(.wp-block-button__link):hover {
  text-decoration-color: currentColor;
}

/* Blockquote: 4px light-gray rule, 20/30/12/50 padding, 30px vertical gap */
.klb-post blockquote,
.klb-post .wp-block-quote {
  margin: 15px 0 10px;
  padding: 20px 30px 12px 30px;
  border: 0;
  border-left: 4px solid #ced4da;
  background: none;
  font-family: var(--olv-font-body);
  font-size: 16px;
  font-style: normal;
  line-height: 1.6;
}
.klb-post blockquote p,
.klb-post .wp-block-quote p {
  margin-bottom: 16px;
}
.klb-post blockquote cite,
.klb-post .wp-block-quote cite {
  display: block;
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  opacity: 0.7;
}
.klb-post .wp-block-quote.is-style-large,
.klb-post .wp-block-quote.is-style-plain {
  padding-left: 30px;
}
.klb-post .wp-block-pullquote {
  border-top-color: var(--olv-border);
  border-bottom-color: var(--olv-border);
}
@media (min-width: 992px) {
  .klb-post blockquote,
  .klb-post .wp-block-quote {
    margin: 30px 0;
    padding-left: 50px;
  }
}

/* Lists */
.klb-post ul,
.klb-post ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.klb-post ul:not(.wp-block-gallery) {
  list-style: disc;
}
.klb-post ol {
  list-style: decimal;
}
.klb-post li {
  margin-bottom: 6px;
}
.klb-post li > ul,
.klb-post li > ol {
  margin: 6px 0 0;
}
.klb-post ul.wp-block-gallery,
.klb-post ul.wp-block-list.is-style-checkmark-list {
  padding-left: 0;
  list-style: none;
}

/* Tables */
.klb-post table {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid var(--olv-border);
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.klb-post th,
.klb-post td {
  padding: 10px 14px;
  border: 1px solid var(--olv-border);
  text-align: left;
  vertical-align: top;
}
.klb-post thead th {
  background-color: var(--olv-bg-gray);
  font-weight: 600;
}
.klb-post .wp-block-table figcaption {
  margin-top: 8px;
}

/* Images, figures, galleries, embeds */
.klb-post img {
  max-width: 100%;
  height: auto;
}
.klb-post figure {
  margin: 0 0 20px;
}
.klb-post .wp-block-image,
.klb-post .wp-caption {
  margin-bottom: 20px;
}
.klb-post .wp-block-image img,
.klb-post .wp-caption img {
  display: block;
  border-radius: var(--olv-radius);
}
.klb-post .wp-block-image.alignleft,
.klb-post .wp-block-image.alignright {
  margin-bottom: 10px;
}
.klb-post figcaption,
.klb-post .wp-caption-text {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  opacity: 0.7;
}
.klb-post .wp-block-gallery {
  margin-bottom: 20px;
}
.klb-post .wp-block-gallery figure {
  margin-bottom: 0;
}
.klb-post .gallery {
  margin-bottom: 20px;
}
.klb-post .wp-block-embed,
.klb-post .wp-block-video,
.klb-post .wp-block-audio {
  margin-bottom: 20px;
}
.klb-post .wp-block-embed iframe,
.klb-post .wp-block-video video {
  display: block;
  width: 100%;
}
.klb-post .wp-block-audio audio {
  width: 100%;
}
.klb-post hr,
.klb-post .wp-block-separator {
  margin: 30px 0;
}
.klb-post pre {
  margin-bottom: 20px;
}
.klb-post .wp-block-code {
  padding: 16px 20px;
  border: 0;
}
.klb-post .wp-block-columns {
  margin-bottom: 20px;
}
.klb-post .wp-block-button__link {
  border-radius: var(--olv-radius-form);
}
.klb-post .alignleft {
  float: left;
  margin: 6px 24px 16px 0;
}
.klb-post .alignright {
  float: right;
  margin: 6px 0 16px 24px;
}
.klb-post .aligncenter {
  display: block;
  margin: 0 auto 20px;
}
.klb-post > .wp-block-image.alignwide,
.klb-post > .wp-block-image.alignfull {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: auto;
}
.klb-post > .wp-block-image.alignfull img {
  width: 100%;
}
@media (max-width: 575.98px) {
  .klb-post .alignleft,
  .klb-post .alignright {
    float: none;
    display: block;
    margin: 0 0 16px;
  }
}

/* Tags under the content (the_tags() inside .entry-footer/.entry-tags when
   present in child templates; post-format/single.php prints them in meta) */
.single-post .entry-footer,
.single-post .entry-tags-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--olv-border);
  font-size: 13px;
}
.single-post .entry-footer a,
.single-post .entry-tags-list a {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--olv-border-15);
  border-radius: var(--olv-radius-form);
  font-size: 12px;
  font-weight: 500;
}
.single-post .entry-footer a:hover,
.single-post .entry-tags-list a:hover {
  border-color: var(--olv-text);
  background-color: var(--olv-text);
  color: var(--olv-white);
}

/* Author box + previous/next navigation (rendered by plugins / child themes
   with the classic WordPress classes) */
.blog-single-post .author-box,
.blog-single-post .entry-author {
  display: flex;
  gap: 20px;
  margin: 40px 0;
  padding: 24px;
  border: 1px solid var(--olv-border);
  border-radius: var(--olv-radius);
}
.blog-single-post .author-box .avatar,
.blog-single-post .entry-author .avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}
.blog-single-post .author-box .author-name,
.blog-single-post .entry-author .author-name {
  margin-bottom: 6px;
  font-family: var(--olv-font-heading);
  font-size: 18px;
  font-weight: 600;
}
.blog-single-post .author-box p,
.blog-single-post .entry-author p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.8;
}
.blog-single-post .post-navigation,
.blog-single-post .navigation.post-navigation {
  margin: 40px 0;
  padding: 20px 0;
  border-top: 1px solid var(--olv-border);
  border-bottom: 1px solid var(--olv-border);
}
.blog-single-post .post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.blog-single-post .post-navigation .nav-links > * {
  flex: 1 1 0%;
  font-family: var(--olv-font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.blog-single-post .post-navigation .nav-next {
  text-align: right;
}
.blog-single-post .post-navigation a {
  color: inherit;
}
.blog-single-post .post-navigation a:hover {
  color: var(--olv-primary);
}
.blog-single-post .related-posts {
  margin-top: 40px;
}
.blog-single-post .related-posts > .entry-title {
  margin-bottom: 20px;
  font-size: 24px;
}
.blog-single-post .related-posts .blog-posts > .klb-article {
  margin-bottom: 30px;
}
.blog-single-post .related-posts .entry-title {
  font-size: 20px;
}

/* --------------------------------------------------------------------------
   Comments: comments.php (.post-comments) + callback list items
   -------------------------------------------------------------------------- */
.post-comments {
  position: relative;
  width: 100%;
  padding-top: 30px;
  border-top: 1px solid #dfe2e6;
}
.post-comments > .entry-title {
  margin-bottom: 20px;
  font-size: 24px;
}
.post-comments .no-comment-list {
  height: 0;
}
.post-comments .nocomments {
  margin: 0 0 20px;
  font-size: 14px;
  opacity: 0.7;
}
.post-comments .alert {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid var(--olv-border-15);
  border-radius: var(--olv-radius-form);
  font-size: 14px;
}

/* List */
.post-comments .comment-list,
.post-comments .comment-list ol.children {
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-comments .comment-list ol.children {
  padding-left: 30px;
}
.post-comments .comment-list > li {
  margin-bottom: 20px;
}
.post-comments .comment-list li.pingback,
.post-comments .comment-list li.trackback {
  padding: 12px 16px;
  border: 1px solid var(--olv-border);
  font-size: 14px;
}
.post-comments .klb-comment-body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--olv-border);
  border-radius: var(--olv-radius);
}
.post-comments .klb-comment-body .vcard {
  flex-shrink: 0;
}
.post-comments .klb-comment-body .avatar {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.post-comments .comment-right-side {
  flex: 1 1 0%;
  min-width: 0;
}
.post-comments .comment-author {
  font-family: var(--olv-font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}
.post-comments .comment-author .fn {
  font-weight: 600;
}
.post-comments .comment-author a {
  color: inherit;
}
.post-comments .comment-metadata {
  margin: 4px 0 12px;
  font-size: 12px;
  opacity: 0.6;
}
.post-comments .comment-content .klb-post {
  font-size: 14px;
  line-height: 1.6;
}
.post-comments .comment-content .klb-post em {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.7;
}
.post-comments .reply {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
}
.post-comments .reply a {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--olv-border-15);
  border-radius: var(--olv-radius-form);
}
.post-comments .reply a:hover {
  border-color: var(--olv-primary);
  background-color: var(--olv-primary);
  color: var(--olv-white);
}
.post-comments .bypostauthor > .comment-body .klb-comment-body {
  background-color: var(--olv-bg-gray);
}
.post-comments .comment-navigation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
}
.post-comments .comment-navigation .assistive-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Form (.post-comments-form > #respond.comment-respond > form.comment-form) */
.post-comments .post-comments-form {
  margin-top: 30px;
}
.post-comments .comment-list + .post-comments-form,
.post-comments .comment-navigation + .post-comments-form {
  padding-top: 30px;
  border-top: 1px solid #dfe2e6;
}
.post-comments .no-comment-list + .post-comments-form {
  margin-top: 0;
}
.post-comments .comment-reply-title {
  margin-bottom: 5px;
  font-size: 24px;
  line-height: 1.2;
}
.post-comments .comment-reply-title small {
  margin-left: 6px;
  font-size: 21px;
}
.post-comments .comment-reply-title small a {
  color: var(--olv-primary);
}
.post-comments .comment-form {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
.post-comments .comment-form > p {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin-bottom: 16px;
  padding-right: 5px;
  padding-left: 5px;
}
.post-comments .comment-form .comment-notes,
.post-comments .comment-form .logged-in-as {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.post-comments .comment-form .logged-in-as a {
  color: var(--olv-primary);
}
.post-comments .comment-form > p > label {
  width: 100%;
  margin-bottom: 5px;
  font-size: 13px;
  line-height: 1.5;
}
.post-comments .comment-form > p > input[type="text"],
.post-comments .comment-form > p > input[type="email"],
.post-comments .comment-form > p > input[type="url"],
.post-comments .comment-form > p > textarea {
  width: 100%;
  height: 42px;
  border-color: transparent;
  background-color: #f1f3f5;
}
.post-comments .comment-form > p > textarea {
  height: auto;
  min-height: 150px;
}
.post-comments .comment-form .comment-form-cookies-consent {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.post-comments .comment-form .comment-form-cookies-consent input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin: 0 5px 0 0;
}
.post-comments .comment-form .comment-form-cookies-consent label {
  width: auto;
  margin: 0;
  font-size: 13px;
}
.post-comments .comment-form .form-submit {
  margin-bottom: 0;
}
.post-comments .comment-form .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--olv-btn-h);
  min-height: var(--olv-btn-h);
  padding: 0 36px;
  border: 0;
  border-radius: var(--olv-radius-form);
  background-color: var(--olv-primary);
  color: var(--olv-white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.post-comments .comment-form .submit:hover {
  background-color: var(--olv-text);
  color: var(--olv-white);
}
@media (min-width: 768px) {
  .post-comments .comment-form .comment-form-author,
  .post-comments .comment-form .comment-form-email {
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
  }
  .post-comments .comment-form > p > input[type="text"],
  .post-comments .comment-form > p > input[type="email"],
  .post-comments .comment-form > p > input[type="url"] {
    height: var(--olv-input-h);
  }
}