/**
 * Single-article template (P3) — byline, TOC, author box, related posts,
 * sidebar widgets.
 *
 * Token-driven (see tokens.css) — no hardcoded colors. Builds on global.css's
 * primitives rather than redefining them. Enqueued only on
 * `is_singular('post')` with dep `wynx-global`, so it always loads — and
 * safely wins the cascade — after tokens.css/global.css print. Mobile-first;
 * breakpoints ~600/900px. Low specificity throughout (single classes / two
 * classes on the same element) to avoid collisions with global.css and
 * SWELL's own stylesheet.
 */

/* ==========================================================================
 * 監修 byline (parts/single/post_head.php)
 * ========================================================================== */

.wynx-byline {
  margin: 0.75rem 0 1.5rem;
  font-family: var(--wynx-mono);
  font-size: 0.8125rem;
  color: var(--wynx-muted);
}

.wynx-byline__k {
  display: inline-block;
  margin-right: 0.75rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--wynx-brass);
  background-color: var(--wynx-brass-tint);
  color: var(--wynx-brass-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ==========================================================================
 * Article meta row (category + date)
 * ========================================================================== */

.p-articleMetas.-top {
  font-family: var(--wynx-mono);
  font-size: 0.8125rem;
  color: var(--wynx-muted);
}

.p-articleMetas.-top a {
  color: var(--wynx-muted);
  text-decoration: none;
}

.p-articleMetas.-top a:hover {
  color: var(--wynx-brass-ink);
}

/* ==========================================================================
 * Table of contents (auto-inserted into the_content by SWELL)
 * ========================================================================== */

.p-toc {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--wynx-line);
  background-color: var(--wynx-surface);
}

.p-toc__ttl {
  margin: 0 0 1rem;
  font-family: var(--wynx-serif);
  font-size: 1rem;
  color: var(--color_htag);
}

.p-toc__list,
.p-toc__childList {
  font-family: var(--wynx-mono);
  font-size: 0.875rem;
  line-height: 1.8;
}

.p-toc__list li::marker,
.p-toc__childList li::marker {
  color: var(--wynx-brass);
}

.p-toc__link {
  color: var(--color_text);
  text-decoration: none;
}

.p-toc__link:hover {
  color: var(--wynx-brass-ink);
}

.p-toc__expandBtn {
  font-family: var(--wynx-mono);
  font-size: 0.8125rem;
  color: var(--wynx-brass-ink);
}

/* ==========================================================================
 * 監修者 (author box — parts/single/post_author.php)
 * ========================================================================== */

.l-articleBottom__section.-author .c-secTitle {
  margin: 0 0 1.25rem;
  font-family: var(--wynx-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wynx-brass-ink);
}

.p-authorBox {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--wynx-line);
  border-left: 3px solid var(--wynx-brass);
  background-color: var(--wynx-surface);
}

.p-authorBox__l {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.p-authorBox__name {
  font-family: var(--wynx-serif);
  font-size: 1.0625rem;
  color: var(--color_htag);
}

.wynx-authorMark {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--wynx-brass);
  background-color: var(--wynx-brass-tint);
  color: var(--wynx-brass-ink);
  font-family: var(--wynx-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.p-authorBox__position {
  font-family: var(--wynx-mono);
  font-size: 0.8125rem;
  color: var(--wynx-muted);
}

.p-authorBox__desc {
  margin: 0 0 1rem;
  line-height: 1.9;
  color: var(--color_text);
}

.p-authorBox__moreLink {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--wynx-line);
  color: var(--color_text);
  font-size: 0.8125rem;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.p-authorBox__moreLink:hover {
  border-color: var(--wynx-brass);
  color: var(--wynx-brass-ink);
  text-decoration: none;
}

@media (min-width: 600px) {
  .p-authorBox {
    flex-direction: row;
  }

  .p-authorBox__l {
    flex: none;
    width: 10rem;
  }
}

/* ==========================================================================
 * Related posts (auto-rendered by SWELL)
 * ========================================================================== */

.l-articleBottom__section.-related .c-secTitle {
  font-family: var(--wynx-serif);
  font-size: 1.25rem;
  color: var(--color_htag);
}

/* Keep SWELL's native flex card layout for related posts (.p-postList.-type-card
   is display:flex with sized items); only restyle the appearance. Overriding
   the container to grid left the flex-sized items at ~62px in the grid cells. */
.p-relatedPosts .p-postList__item {
  border: 1px solid var(--wynx-line);
  transition: border-color 0.2s ease;
}

.p-relatedPosts .p-postList__item:hover {
  border-color: var(--wynx-brass);
}

.p-relatedPosts .p-postList__title {
  color: var(--color_htag);
}

/* Assumption: SWELL names the meta row inside a post-list card
   `.p-postList__meta` (category + date, mirroring `.p-postList__title` —
   already confirmed in global.css). Not verified against parent source;
   no-ops harmlessly if the class differs. */
.p-relatedPosts .p-postList__meta {
  font-family: var(--wynx-mono);
  font-size: 0.75rem;
  color: var(--wynx-muted);
}

/* ==========================================================================
 * Sidebar widgets (recent posts, search)
 * ========================================================================== */

.c-widget__title,
.widgettitle {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--wynx-line);
  font-family: var(--wynx-serif);
  font-size: 1rem;
  color: var(--color_htag);
}

/* `:not(.p-relatedPosts)` scopes this to the sidebar Recent Posts widget's
   post list without needing to know the sidebar wrapper's own class name —
   the related-posts list is the only other `.p-postList` usage on this
   template and always carries the `.p-relatedPosts` class alongside it. */
.p-postList:not(.p-relatedPosts) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-postList:not(.p-relatedPosts) .p-postList__item {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wynx-line);
}

.p-postList:not(.p-relatedPosts) .p-postList__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.p-postList:not(.p-relatedPosts) .p-postList__title {
  font-size: 0.9375rem;
  color: var(--color_htag);
}

.widget_search .search-form,
.wp-block-search__inside-wrapper {
  display: flex;
  border: 1px solid var(--wynx-line);
}

.widget_search .search-field,
.wp-block-search__input {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  border: none;
  background-color: var(--color_bg);
  color: var(--color_text);
  font-size: 0.875rem;
}

.widget_search .search-submit,
.wp-block-search__button {
  padding: 0.625rem 1rem;
  border: none;
  border-left: 1px solid var(--wynx-line);
  background-color: var(--wynx-surface);
  color: var(--color_text);
  font-family: var(--wynx-mono);
  font-size: 0.8125rem;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.widget_search .search-submit:hover,
.wp-block-search__button:hover {
  background-color: var(--wynx-brass-tint);
  color: var(--wynx-brass-ink);
}

/* ==========================================================================
 * Motion
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .p-authorBox__moreLink,
  .p-relatedPosts .p-postList__item,
  .widget_search .search-submit,
  .wp-block-search__button {
    transition: none;
  }
}