/* ========================================
   CUSTOMIZE APPEARANCE FOR HASHOVER
   ======================================== */

/* Font family: UI elements */
#hashover button, .hashover a:link,
#hashover a.hashover-comment-reply, #hashover a.hashover-edit,
#hashover a.hashover-like, #hashover a.hashover-top,
#hashover .hashover-date-permalink, #hashover label,
#hashover span.hashover-formatting {
  font-family: var(--font-ui);
}

/* Font family: body/comment elements */
.hashover .hashover-dashed-title,
.hashover .hashover-comment-name,
.hashover .hashover-comment .hashover-comment-name,
.hashover .hashover-content,
.hashover-form-section textarea,
.hashover-textarea.hashover-reply-textarea,
#hashover .hashover-form-section textarea,
#hashover .hashover-form-section input[type="text"],
#hashover .hashover-form-section input[type="email"],
#hashover .hashover-form-section input[type="password"],
#hashover .hashover-form-section input[type="url"],
#hashover .hashover-comment-body p {
  font-family: var(--font-body);
}

/* Font size: large */
.hashover .hashover-title,
.hashover .hashover-count,
.hashover .hashover-ip,
.hashover .hashover-dashed-title {
  font-size: var(--font-comment-size-LG);
  color: var(--charcoal);
}

/* Font size: medium inputs */
.hashover input,
.hashover textarea,
.hashover select {
  font-family: var(--font-ui);
  font-size: var(--font-ui-size-MD);
}

/* Font size: small UI links */
#hashover label,
#hashover a.hashover-comment-reply,
#hashover a.hashover-like,
#hashover span.hashover-formatting {
  font-size: var(--font-ui-size-SM);
  color: var(--rich-black);
}

/* Comment colors */
.hashover .hashover-comment > .hashover-header,
.hashover .hashover-form .hashover-inputs { background-color: var(--teal); }
.hashover .hashover-comment .hashover-comment-name { color: var(--ivory); }
.hashover .hashover-comment .hashover-content { font-size: var(--font-comment-size-MD); color: var(--charcoal); }

/* Inputs and textareas */
.hashover-form-section textarea,
.hashover-textarea.hashover-reply-textarea,
#hashover .hashover-form-section input[type="text"],
#hashover .hashover-form-section input[type="email"],
#hashover .hashover-form-section input[type="password"],
#hashover .hashover-form-section input[type="url"] {
  font-size: var(--font-comment-size-MD);
  line-height: 1.7;
  color: var(--charcoal);
  background: white;
  border: 2px solid rgba(43, 45, 47, 0.15);
  width: 100%;
}

/* Icon placeholders */
#hashover .hashover-name-input::before,
#hashover .hashover-password-input::before,
#hashover .hashover-email-input::before,
#hashover .hashover-website-input::before {
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.hashover-form-section textarea,
.hashover-textarea.hashover-reply-textarea { resize: vertical; }

#hashover .hashover-form-section textarea:focus,
#hashover .hashover-form-section input:focus {
  outline: none;
  /* border-color: var(--teal); */
  border-color: var(--crimson-dark) !important;
}

/* Reply header */
.hashover .hashover-reply .hashover-avatar:after { border-right-color: var(--teal); }
.hashover .hashover-reply .hashover-header { padding: 3px 12px; vertical-align: middle; }
.hashover .hashover-reply .hashover-comment-name { font-weight: normal; font-size: var(--font-comment-size-MD); }

/* Submit button */
#hashover .hashover-submit,
#hashover .hashover-post-button {
  font-size: var(--font-ui-size-MD);
  letter-spacing: 0.05em;
  background: var(--teal);
  color: var(--ivory);
  border: none;
  padding: 10px 28px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#hashover .hashover-submit:hover,
#hashover .hashover-post-button:hover { background: var(--teal-dark); }

/* Comment meta */
#hashover .hashover-date-permalink {
  font-size: var(--font-ui-size-SM);
  color: var(--slate);
}
#hashover .hashover-thread-link {
  color: var(--slate-light);
}

#hashover .hashover-comment-body p {
  font-size: var(--font-comment-size-MD);
  line-height: 1.7;
  color: var(--charcoal);
}

#hashover .hashover-more-link {
  font-size: var(--font-ui-size-MD);
}