/*
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.0.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;
}

/* --------------------------------------------------------------------------
 * Native WordPress comments, dressed in NexT's palette
 * -------------------------------------------------------------------------- */

.comments {
  padding-bottom: 20px;
}

.comments-title {
  font-size: 1.25em;
  font-weight: 400;
  margin: 0 0 1em;
}

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

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

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

.comment-body {
  border-bottom: 1px solid var(--card-bg-color);
  padding: 16px 0;
  position: relative;
}

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

.comment-author .avatar {
  border-radius: 50%;
  height: 36px;
  vertical-align: middle;
  width: 36px;
}

.comment-author .fn {
  font-style: normal;
  font-weight: 700;
  margin-left: 8px;
}

.comment-metadata {
  color: var(--blockquote-color);
  font-size: 0.8125em;
}

.comment-metadata a {
  border-bottom: 0;
  color: inherit;
}

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

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

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

.comment-reply-link,
.comment-edit-link {
  font-size: 0.8125em;
}

.bypostauthor > .comment-body .fn::after {
  content: "\2605";
  margin-left: 4px;
}

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

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

.comment-form label {
  display: block;
  font-size: 0.875em;
  margin-bottom: 4px;
}

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

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

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

.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: 4px 18px;
  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-navigation {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
}

.no-comments {
  color: var(--blockquote-color);
  font-style: italic;
}

/* --------------------------------------------------------------------------
 * 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;
  }
}