@import url('https://fonts.googleapis.cn/css2?family=Cormorant+Garamond:wght@500;600;700&family=LXGW+WenKai&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@300;400;500&display=swap');

/* LuoH custom theme for BroadcastChannel Base.
   Ported from the v0.1.8 fork: 米白纸面 #f4f1ec, orangered accent, Bitter +
   Noto Serif SC typography, soft rounded panels. Load via HEADER_INJECT
   together with the Google Fonts (CN mirror) link — see THEMES.md. */

:root {
  --font-main: 'Bitter', 'Noto Serif SC', ui-sans-serif, system-ui, sans-serif;
  --font-secondary: 'Bitter', 'Noto Serif SC', ui-sans-serif, system-ui, sans-serif;
  --background-color: #f4f1ec;
  --heading-color: #000;
  --text-color: #000;
  --link-color: orangered;
  --code-background-color: #f9f9f9;

  --accent-color: var(--link-color);
  --border-color: rgba(0, 0, 0, 0.08);
  --muted-color: #999;
  --surface-color: #fff;

  --box-margin: 12px;
  --icon-hover-filter: invert(51%) sepia(0%) saturate(0%) hue-rotate(23deg) brightness(90%) contrast(90%);
  --icon-secondary-filter: invert(97%) sepia(0%) saturate(0%) hue-rotate(129deg) brightness(86%) contrast(88%);

  --radius-panel: 12px;
  --radius-chip: 16px;
  --radius-media: 16px;
  --shadow-soft: none;
}

html {
  color-scheme: light;
}

/* ===== Typography: role-based font assignment =====
   Headings / UI / meta each get their own typeface, while CJK always
   falls back to a matching Chinese webfont (loaded via @import above). */

/* Headings: Cormorant Garamond (Latin) + LXGW WenKai (CJK) */
.site-header > .title,
.site-header > .title > h1,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  font-family: 'Cormorant Garamond', 'LXGW WenKai', serif;
}

/* UI / navigation: Inter (Latin) + Noto Sans SC (CJK) */
.site-navigation a,
.site-navigation a:visited,
.search-button,
.search-submit,
.search-input {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

/* Meta / timestamps / footer: IBM Plex Mono digits + Noto Sans SC CJK */
.post-meta,
.post-meta p,
.post-meta a,
.post-meta a:visited,
.tg-message-meta,
.tg-message-meta a,
.post-entry-author,
.site-footer,
.site-footer a,
time {
  font-family: 'IBM Plex Mono', 'Noto Sans SC', monospace;
}

/* ===== Comments: role-based type, mirroring the page's font division =====
   The comment body is set in Inter + Noto Sans SC so guest voices read as
   sans-serif against the serif article text. Nicknames take the UI stack
   (like navigation), timestamps the mono/meta stack (like post dates). */

.tk-comments .tk-content {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

.tk-comments .tk-nick,
.tk-comments .tk-nick a {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

.tk-comments .tk-date,
.tk-comments .tk-action {
  font-family: 'IBM Plex Mono', 'Noto Sans SC', monospace;
}

/* Form chrome: inputs, buttons, counters, Twikoo footer — same voice as nav.
   .post-comments .comments .tk-comments outranks the bundled twikoo.css
   `font-family: inherit` rules (.tk-comments .tk-* .el-*, loaded later).
   The count badge and footer are OUTSIDE the inner input/textarea nodes:
   the counter inherits from the .el-textarea wrapper, and .tk-footer sits
   directly under Twikoo's renamed mount (div.twikoo), so both get their
   own selectors. */
.post-comments .comments .tk-comments .el-input__inner,
.post-comments .comments .tk-comments .el-textarea__inner,
.post-comments .comments .tk-input > .el-input__count,
.post-comments .comments .tk-comments .el-button,
.post-comments .comments .twikoo > .tk-footer,
.tk-comments .tk-input__count,
.tk-comments .tk-footer,
.tk-comments .tk-comments-title,
.tk-comments .tk-comments-no {
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

/* Code: IBM Plex Mono with CJK fallback for inline comments */
.content code,
.content pre,
code,
pre {
  font-family: 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===== Header: keep the title vertically centered against the avatar ===== */

.site-header {
  align-items: center;
  gap: 0.75rem;
}

/* The compact breakpoint stacks social links onto their own row; with a short
   channel title everything fits on one line: avatar | title | links. */
@media (max-width: 37.5rem) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .social-links {
    grid-column: auto;
    justify-self: end;
  }
}

/* ===== Header sections: visually separate identity / links / intro ===== */

.site-header > .title {
  align-self: center;
}

.channel-avatar {
  corner-shape: superellipse(1.2);
}

/* Intro sits on the bare page background, separated from the header row
   above and the nav band below by hairlines — no card. */
.channel-description {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  word-break: break-word;
}

/* ===== Navigation: hairline-separated band (no card) ===== */

/* Three hairlines divide the top into distinct bands — header row /
   intro / nav. Spacing between grid rows is handled by .site-header gap;
   padding-block keeps the text clear of the lines. */
.site-navigation {
  padding-block: 0.75rem;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.site-navigation > ul {
  gap: 0.25rem;
}

.site-navigation a {
  display: inline-block;
  padding: 0.25rem 0.2rem;
  text-decoration: none;
}

.site-navigation a:hover,
.site-navigation a[aria-current='page'] {
  text-decoration: none;
  color: var(--link-color);
  font-weight: 600;
}

/* ===== Search: toggle icon in the header link row, floating panel ===== */

/* The desktop input box is dropped; a checkbox-toggled search icon sits inside
   the header .social-links row (fork behavior). The panel floats below the
   icon row with a fade/slide transition instead of pushing content down. */
.desktop-search {
  display: none;
}

.mobile-search {
  display: none;
}

.social-links .search {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.social-links .search-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.social-links .search-button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-chip);
  color: var(--text-color);
  cursor: pointer;
}

.social-links .search-button:hover {
  background: rgba(0, 0, 0, 0.06);
}

.social-links .search-button svg {
  width: 1rem;
  height: 1rem;
}

.social-links .search-toggle:focus-visible ~ .search-button {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.social-links .search-form {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 14rem;
  max-width: 70vw;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
}

.social-links .search-toggle:checked ~ .search-form {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The floating panel borrows the input-box chrome from the base field. */
.social-links .search-form .search-field {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: var(--surface-color);
}

/* ===== Feed: tighten spacing between posts ===== */

.pagination {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

/* Restore the legacy pill button (v0.1.8 `.page`): rounded capsule with a
   1px border, text styled to match the footer "Powered by BroadcastChannel".
   Same muted grey, 0.8em size, and mono/Noto Sans SC type stack. */
.pagination a.older,
.pagination a.newer {
  width: auto;
  height: auto;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-color);
  font-size: 0.8em;
  font-weight: 500;
  color: var(--muted-color);
  font-family: 'IBM Plex Mono', 'Noto Sans SC', monospace;
}

.pagination a.older:hover,
.pagination a.newer:hover {
  color: var(--link-color);
  border-color: var(--link-color);
}

.pagination .newer {
  margin-left: auto;
}

/* The base .post-entry uses 2.75rem margin+padding (≈88px) between posts —
   too airy. Pull it back to a compact 1.5rem rhythm while keeping the
   hairline separator. */
.post-entry {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}

/* ===== Media: full-width, centered (drop legacy -12px offset) ===== */

/* The v0.1.8 --box-margin (12px) width offset is gone in v0.3.0's layout;
   images and the video card now fill the content column and center. */
.content img:not(.tg-emoji):not(.sticker):not(.link_preview_image):not(.modal-img) {
  width: 100%;
  margin-inline: auto;
}

.content .image-list-container {
  width: 100%;
  margin-inline: auto;
}

.link-preview-video-wrap {
  margin-top: 1rem;
  margin-inline: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: #000;
}

.link-preview-video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}