/**
 * @file
 * Steel subtheme comment styles — sidebar layout.
 */


/* Comment wrapper */
.comment-wrapper {
  margin-top: 2rem;
}
.comment-wrapper h2 {
  color: var(--mt-color-bright);
  font-size: 1.75rem;
  padding: 1rem 1rem;
  margin-bottom: 2rem;
  background-color: var(--mt-color-primary);
  border-radius: var(--mt-image-border-radius);
}
h2.comment-form__title {
  background-color: transparent;
  color: var(--mt-color-primary);
  font-size: 1.75rem;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

/* Comment container */
.comment {
  margin: 0 0 1.5rem 0;
  position: relative;
  border-bottom: 1px solid var(--mt-form-border);
}
.field--name-comment .mt-style-custom-all {
  border-radius: 0;
}
.comment + .comment {
  padding-top: 1.5rem;
}
.region--default-background .comment {
  padding: 1.875rem;
}

/* Sidebar + main flex layout */
.comment__layout {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Sidebar: avatar, author name, date */
.comment__sidebar {
  flex: 0 0 110px;
  width: 110px;
  padding-right: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 1.18rem;
}

/* Circle clip lives on the container; intermediate Drupal wrappers are sized to match */
.comment__avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0.625rem;
  flex-shrink: 0;
}
.comment__avatar .profile,
.comment__avatar .field--name-user-picture,
.comment__avatar .field__item,
.comment__avatar a {
  display: block;
  width: 70px;
  height: 70px;
}
.comment__avatar img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 0; /* cancel global img border-radius from image-shapes.css */
}

.comment__meta {
  font-size: 0.8125rem;
  line-height: 1.4;
  word-break: break-word;
}
.comment__author {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.2rem;
}
.comment__author .username {
  text-transform: capitalize;
  text-decoration: none;
}
.comment__author .username:hover,
.comment__author .username:focus {
  color: var(--mt-color-secondary-dark);
  text-decoration: none;
}
.comment__date {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* Signature — below comment body */
.comment__signature {
  font-size: 0.85rem;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}
.comment__signature strong {
  font-weight: 600;
}

/* Main content area */
.comment__main {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 1.25rem;
}

.comment h3.title {
  margin: 0 0 0 0;
  font-size: 1.25rem;
}
.comment h3.title a {
  color: var(--mt-link-color);
  text-decoration: none;
}
.comment h3.title a:hover,
.comment h3.title a:focus {
  color: var(--mt-color-secondary-dark);
  text-decoration: none;
}

.comment__content .field--name-comment-body {
  font-size: 1.1rem;
  line-height: 1.66;
  padding-bottom: 0.75rem;
  color: var(--mt-color-dark);
  min-height: 6rem;
}

/* Action links */
.comment ul.links.inline {
  margin-right: -0.3125rem;
  margin-left: -0.3125rem;
  display: inline-block;
  padding-left: 0;
  margin-bottom: .15rem;
}
/*.comment ul.links.inline li {
  padding-right: 5px;
}*/

/* Comment footer: edit/delete links left, flags right */
.comment__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
}
.comment--unpublished ul.links.inline {
  margin-bottom: .25rem;
}
.comment--unpublished {
  background-color: #9298a066;
  border-radius: var(--mt-rounded-radius);
}

.comment ul.links li a {
  background: transparent;
  /*font-size: 0.9rem;*/
  padding: 0 0.125rem;
  margin: 0;
  font-weight: 400;
  display: inline;
  min-width: 0;
  text-align: left;
  border: none;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
}
.comment ul.links li a:hover,
.comment ul.links li a:focus {
  text-decoration: underline;
}
.unpubcomms-link i.las.la-toggle-on,
.unpubcomms-link i.las.la-toggle-off {
  position: relative;
  top: 2px;
}
/* Jump-to-comment-form link — bottom of the sidebar column */
.comment__sidebar .jump-to-comment-form {
  display: inline-block;
  margin-top: auto;
  padding-top: 0;
  font-size: 1.1rem;
  color: var(--mt-color-primary);
  position: relative;
  top: -8px;
}
.comment__sidebar .jump-to-comment-form:hover,
.comment__sidebar .jump-to-comment-form:focus {
  color: var(--mt-color-secondary-light);
}
.user-logged-in .comment ul.links li a {
  padding: 0 1.1rem 0 0;
}
.comment ul.links li:has(a[href*="/delete"]) {
  display: none;
}

/* New comment indicator */
.new-indicator:not(.hidden),
#block-steel-views-block-pm-list-block-1 .marker,
.fnewcom {
  display: inline-block;
  margin-right: 0.625rem;
  padding: 0.1rem 0.3rem 0.1rem 0.2rem;
  background-color: var(--mt-color-bright-contrast);
  border-radius: var(--mt-image-border-radius);
  color: var(--mt-color-default-light);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  vertical-align: middle;
}
.new-indicator:not(.hidden)::before,
#block-steel-views-block-pm-list-block-1 .marker::before,
.fnewcom::before {
  font-family: 'Line Awesome Free';
  font-weight: 900;
  content: "\f005";
  margin-right: 0.25rem;
  font-size: .75rem;
  position: relative;
  top: -1px;
}
.fnewcom {
  padding: 0 0.3rem 0 0.2rem;
}

/* Unpublished comment indicator */
.comment--unpublished .comment__footer {
  background-color: var(--mt-color-bright-contrast);
  border-radius: var(--mt-image-border-radius);
  padding-left: 1rem;
  padding-right: 1rem;
}
.comment--unpublished .comment__footer a {
  color: var(--mt-color-default-light);
}

/* Responsive: stack on small screens */
@media (max-width: 575px) {
  .comment__layout {
    flex-direction: column;
    gap: 0.75rem;
  }
  .comment__sidebar {
    flex-direction: row;
    width: 100%;
    padding-right: 0;
    padding-bottom: 0.75rem;
    align-items: center;
    text-align: left;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
  .comment__avatar {
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .comment__sidebar .comment__meta {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
  }
  .comment__sidebar .comment__badges {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .comment__main {
    padding-left: 0;
    border-left: none;
    width: 100%;
  }
  .comment__sidebar .jump-to-comment-form {
    margin-top: 0;
    margin-left: auto;
    top: 0;
  }
}
/* blockquote tweaks for comments */
.comment__main blockquote::before,
.ck-content blockquote::before {
  font-size: 3rem;
  font-weight: 600;
  top: .5rem;
  left: -.3rem;
}
.comment__main blockquote,
.ck-content blockquote {
  padding-top: 1.5rem !important;
  padding-left: 2.6rem !important;
  font-weight: 400 !important;
}