/*
Theme Name: NexT
Theme URI: https://github.com/next-theme/hexo-theme-next
Author: NexT Team, WordPress port
Author URI: https://theme-next.js.org
Description: A WordPress port of NexT, the elegant and powerful Hexo theme. Ships all four original schemes (Muse, Mist, Pisces, Gemini), the sliding sidebar with table of contents, motion effects, dark mode and client-side search.
Version: 1.3.0
Requires at least: 6.5
Tested up to: 7.0.3
Requires PHP: 7.4
License: GNU Affero General Public License v3.0
License URI: https://www.gnu.org/licenses/agpl-3.0.html
Text Domain: next
Tags: blog, one-column, two-columns, right-sidebar, left-sidebar, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments, block-styles, wide-blocks, editor-style
*/

/*
 * The bulk of the design lives in assets/css/<scheme>-<sidebar-position>.css,
 * compiled from NexT's original Stylus sources by build/build-css.js.
 *
 * This file only carries the markup WordPress itself generates and NexT never
 * had to deal with: alignment helpers, captions, galleries, comments and the
 * accessibility classes required of every theme.
 */

/* --------------------------------------------------------------------------
 * Accessibility
 * -------------------------------------------------------------------------- */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--content-bg-color);
  clip-path: none;
  color: var(--text-color);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

.skip-link:focus {
  outline: 2px solid var(--link-hover-color);
}

/* --------------------------------------------------------------------------
 * Alignment helpers emitted by the editor
 * -------------------------------------------------------------------------- */

.post-body .alignleft {
  float: left;
  margin: 0.5em 1.5em 1em 0;
}

.post-body .alignright {
  float: right;
  margin: 0.5em 0 1em 1.5em;
}

.post-body .aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.post-body .alignwide {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: auto;
}

.post-body .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: auto;
}

@media (min-width: 768px) {
  .post-body .alignwide,
  .post-body .alignfull {
    margin-left: -20px;
    margin-right: -20px;
    max-width: none;
  }
}

.post-body .wp-caption {
  margin-bottom: 20px;
  max-width: 100%;
}

.post-body .wp-caption img {
  display: block;
  margin: 0 auto;
}

.post-body .wp-caption-text,
.post-body figcaption,
.post-body .wp-element-caption {
  color: var(--blockquote-color);
  font-size: 0.875em;
  margin: 0.5em 0 0;
  text-align: center;
}

.post-body .wp-block-image figcaption {
  margin-bottom: 1em;
}

.post-body .gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px 20px;
}

.post-body .gallery-item {
  margin: 0;
  padding: 5px;
  text-align: center;
}

.post-body .gallery-columns-1 .gallery-item { width: 100%; }
.post-body .gallery-columns-2 .gallery-item { width: 50%; }
.post-body .gallery-columns-3 .gallery-item { width: 33.3333%; }
.post-body .gallery-columns-4 .gallery-item { width: 25%; }
.post-body .gallery-columns-5 .gallery-item { width: 20%; }
.post-body .gallery-columns-6 .gallery-item { width: 16.6666%; }
.post-body .gallery-columns-7 .gallery-item { width: 14.2857%; }
.post-body .gallery-columns-8 .gallery-item { width: 12.5%; }
.post-body .gallery-columns-9 .gallery-item { width: 11.1111%; }

.post-body .sticky-post-flag {
  display: inline-block;
}

/* --------------------------------------------------------------------------
 * Block editor output
 * -------------------------------------------------------------------------- */

.post-body .wp-block-button__link {
  background: var(--btn-default-bg);
  border: 2px solid var(--btn-default-border-color);
  border-radius: 2px;
  color: var(--btn-default-color);
  display: inline-block;
  padding: 0 20px;
  text-decoration: none;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.post-body .wp-block-button__link:hover {
  background: var(--btn-default-hover-bg);
  border-color: var(--btn-default-hover-border-color);
  color: var(--btn-default-hover-color);
}

.post-body .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--card-bg-color);
  margin: 2em auto;
}

.post-body .wp-block-pullquote,
.post-body .wp-block-quote {
  border-left: 4px solid var(--card-bg-color);
  color: var(--blockquote-color);
  margin: 0 0 20px;
  padding: 0 15px;
}

.post-body .wp-block-pullquote {
  border-left: 0;
  text-align: center;
}

.post-body .wp-block-table table {
  width: 100%;
}

.post-body .wp-block-embed__wrapper,
.post-body .wp-block-embed iframe {
  max-width: 100%;
}

.post-body .wp-block-code,
.post-body .wp-block-preformatted {
  overflow: auto;
}

.post-body .wp-block-search .wp-block-search__input {
  background: var(--card-bg-color);
  border: 1px solid var(--card-bg-color);
  border-radius: 4px;
  color: var(--text-color);
  padding: 4px 8px;
}

.post-body .wp-block-search .wp-block-search__button {
  background: var(--btn-default-bg);
  border: 1px solid var(--btn-default-border-color);
  color: var(--btn-default-color);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
 * Password protected posts & the default search form
 * -------------------------------------------------------------------------- */

.post-password-form input[type="password"] {
  background: var(--card-bg-color);
  border: 1px solid var(--card-bg-color);
  border-radius: 4px;
  color: var(--text-color);
  padding: 4px 8px;
}

.search-form {
  display: flex;
  gap: 8px;
  margin: 1em 0;
}

.search-form .search-field {
  background: var(--card-bg-color);
  border: 1px solid var(--card-bg-color);
  border-radius: 4px;
  color: var(--text-color);
  flex: 1;
  padding: 4px 8px;
}

/* --------------------------------------------------------------------------
 * Comments
 *
 * Shared by both systems: WordPress' own comments, laid out as avatar-beside-
 * card rows, and the Twikoo container, which only needs its palette nudged
 * into line since it brings its own markup.
 * -------------------------------------------------------------------------- */

.comments {
  padding-bottom: 20px;
}

.comments-title {
  align-items: center;
  border-bottom: 1px solid var(--card-bg-color);
  display: flex;
  font-size: 1.125em;
  font-weight: 700;
  gap: 8px;
  margin: 0 0 1.25em;
  padding-bottom: 0.5em;
}

.comments-title::before {
  background: var(--brand-color);
  border-radius: 2px;
  content: "";
  display: inline-block;
  height: 1em;
  width: 3px;
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list .children {
  list-style: none;
  margin: 0;
  padding-left: 52px;
}

@media (max-width: 767px) {
  .comment-list .children {
    padding-left: 20px;
  }
}

.comment-item {
  list-style: none;
}

/* Avatar column, then the card. */
.comment-body {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  padding: 14px 0;
}

.comment-avatar {
  flex: 0 0 auto;
  line-height: 0;
}

.comment-avatar .avatar {
  border-radius: 50%;
  height: 40px;
  width: 40px;
}

.comment-main {
  background: var(--card-bg-color);
  border-radius: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px 12px;
}

.comment-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.comment-author {
  font-weight: 700;
}

.comment-badge {
  background: var(--brand-color);
  border-radius: 3px;
  color: #fff;
  font-size: 0.6875em;
  line-height: 1.6;
  padding: 0 6px;
}

.comment-date {
  border-bottom: 0;
  color: var(--blockquote-color);
  font-size: 0.8125em;
  margin-left: auto;
}

.comment-date:hover {
  border-bottom: 0;
  color: var(--link-hover-color);
}

.comment-awaiting-moderation {
  color: var(--blockquote-color);
  display: block;
  font-size: 0.8125em;
  margin: 0 0 8px;
}

.comment-content {
  word-wrap: break-word;
}

.comment-content > :last-child {
  margin-bottom: 0;
}

.comment-content img {
  max-width: 100%;
}

.comment-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.comment-actions a {
  border-bottom: 0;
  color: var(--blockquote-color);
  font-size: 0.8125em;
}

.comment-actions a:hover {
  color: var(--link-hover-color);
}

.comment-pingback .comment-body {
  display: block;
  font-size: 0.875em;
}

.comment-pingback-label {
  color: var(--blockquote-color);
  margin-right: 6px;
}

/* Reply form ---------------------------------------------------------------- */

.comment-respond {
  margin-top: 24px;
}

.comment-list .comment-respond {
  margin-left: 52px;
}

@media (max-width: 767px) {
  .comment-list .comment-respond {
    margin-left: 20px;
  }
}

.comment-reply-title {
  font-size: 1em;
  font-weight: 700;
  margin: 0 0 0.75em;
}

.comment-reply-title small {
  font-weight: 400;
  margin-left: 8px;
}

.comment-form {
  background: var(--card-bg-color);
  border-radius: 8px;
  padding: 14px 16px 4px;
}

.comment-form label {
  color: var(--blockquote-color);
  display: block;
  font-size: 0.8125em;
  margin-bottom: 4px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  background: var(--content-bg-color);
  border: 1px solid transparent;
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--text-color);
  font-family: inherit;
  font-size: 0.9375em;
  padding: 7px 10px;
  transition: border-color 0.2s ease-in-out;
  width: 100%;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  border-color: var(--brand-color);
  outline: none;
}

.comment-form textarea {
  min-height: 110px;
  resize: vertical;
}

/* Name / email / website side by side once there is room. */
@media (min-width: 768px) {
  .comment-form-author,
  .comment-form-email,
  .comment-form-url {
    box-sizing: border-box;
    display: inline-block;
    padding-right: 12px;
    vertical-align: top;
    width: 33.33%;
  }

  .comment-form-url {
    padding-right: 0;
  }
}

.comment-form p {
  margin-bottom: 12px;
}

.comment-form .required {
  color: #f66;
}

.comment-form .form-submit {
  margin-bottom: 14px;
}

.comment-form .form-submit input[type="submit"] {
  background: var(--btn-default-bg);
  border: 2px solid var(--btn-default-border-color);
  border-radius: 2px;
  color: var(--btn-default-color);
  cursor: pointer;
  padding: 5px 20px;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.comment-form .form-submit input[type="submit"]:hover {
  background: var(--btn-default-hover-bg);
  border-color: var(--btn-default-hover-border-color);
  color: var(--btn-default-hover-color);
}

.comment-form-cookies-consent label,
.comment-form .comment-notes {
  color: var(--blockquote-color);
  display: inline;
  font-size: 0.8125em;
}

.comment-navigation {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
}

.no-comments,
.comment-loading,
.comment-error {
  color: var(--blockquote-color);
  font-size: 0.875em;
  text-align: center;
}

.comment-error {
  color: #f66;
}

/* Twikoo -------------------------------------------------------------------- */

.comments-twikoo {
  min-height: 120px;
}

.comments-twikoo .tk-comments {
  font-size: 0.9375em;
}

.comments-twikoo a {
  border-bottom: 0;
}

.comments-twikoo .el-textarea__inner,
.comments-twikoo .el-input__inner {
  background: var(--card-bg-color);
  border-color: var(--card-bg-color);
  color: var(--text-color);
}

.comments-twikoo .el-textarea__inner:focus,
.comments-twikoo .el-input__inner:focus {
  border-color: var(--brand-color);
}

.comments-twikoo .tk-submit-action-icon:hover,
.comments-twikoo .tk-nick,
.comments-twikoo .tk-time {
  color: var(--link-color);
}

.comments-twikoo .el-button--primary {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
}

/* --------------------------------------------------------------------------
 * Sidebar widget area
 * -------------------------------------------------------------------------- */

.sidebar-widgets {
  margin-top: 20px;
  text-align: left;
}

.sidebar-widgets .widget {
  margin-bottom: 20px;
}

.sidebar-widgets .widget-title {
  font-size: 0.9375em;
  font-weight: 700;
  margin: 0 0 8px;
}

.sidebar-widgets ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-widgets li {
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .use-motion .post-block,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .sidebar-inner,
  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image,
  .use-motion .menu-item,
  .use-motion .column,
  .use-motion .footer {
    opacity: 1 !important;
    top: 0 !important;
  }
}