/* ==================================================================================================================
 * ChinesePod forum: the rules the forum views need on top of Bootstrap 5 (header.ejs). Rebuilt 2026-10-21
 * after the original was lost with the old Nadir host; modelled on forum.chinesepod.com (Discourse 2.6). Page-specific
 * rules stay inline in the page templates.
 * State classes set by the page scripts: .active (search), .is-open (menus, dropdowns, modals), .is-minimized (composer).
 * ================================================================================================================== */
:root {
  --cpf-text: #222;
  --cpf-muted: #646464;
  --cpf-faint: #919191;
  --cpf-line: #e9e9e9;
  --cpf-hover: #f5f5f5;
  --cpf-blue: #0e76bd;
  --cpf-accent: #e45735;
  --cpf-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
html { font-family: Helvetica, Arial, sans-serif; font-size: 15px; }
body { background: #fff; color: var(--cpf-text); font-family: Helvetica, Arial, sans-serif; }
.hidden { display: none !important; }

/* ---- header ---------------------------------------------------------------------------------------------------- */
#top-navbar { position: relative; z-index: 1001; padding: 3px; background: #333; text-align: center; font-size: 15px; }
#top-navbar a { margin: 0 10px; }
#top-navbar-links a { color: #fff; text-decoration: none; }
.main-header {
  position: sticky; top: 0; z-index: 1000;
  background: #fff; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .25);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.header-logo { display: flex; align-items: center; min-width: 0; }
.header-logo .logo-image { display: block; height: 36px; width: auto; max-width: 100%; }
.header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.btn-login { background: var(--cpf-blue); border: 0; border-radius: 0; font-size: 14px; padding: 5px 12px; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer;
}
.icon-button svg { width: 28px; height: 28px; fill: #919191; }
.icon-button:hover svg, .search-wrapper.is-open .icon-button svg, .menu-dropdown-wrap.is-open .icon-button svg { fill: #333; }

.search-wrapper, .menu-dropdown-wrap, .user-menu-wrap { position: relative; }
.search-dropdown, .menu-panel, .user-menu-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 9px); z-index: 1001;
  background: #fff; border: 1px solid var(--cpf-line); box-shadow: var(--cpf-shadow);
}
.search-dropdown.active, .menu-panel.is-open, .user-menu-dropdown.is-open { display: block; }
.search-dropdown { width: 340px; padding: 10px; }
.search-input { width: 100%; border: 1px solid #ccc; padding: 7px 9px; font-size: 15px; outline: none; }
.search-input:focus { border-color: var(--cpf-blue); }
.search-options { display: none; }   /* "options" had no advanced search behind it */
.search-options-link { color: var(--cpf-muted); text-decoration: none; }

.menu-panel { width: 330px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 8px 10px; }
.menu-panel hr { margin: 6px 0; border-color: var(--cpf-line); opacity: 1; }
.menu-links { list-style: none; margin: 0; padding: 0; }
.menu-links.columned { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.menu-links a, .category-links .heading a {
  display: block; padding: 6px 8px; color: var(--cpf-text); text-decoration: none; font-size: 15px;
}
.menu-links a:hover, .category-links a:hover { background: var(--cpf-hover); color: var(--cpf-text); }
.category-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6px; }
.category-links .heading { grid-column: 1 / -1; }
.category-links .category-link a {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px;
  font-size: 13px; color: var(--cpf-text); text-decoration: none; min-width: 0;
}
.category-links .category-link { display: flex; align-items: center; min-width: 0; }
.category-links .category-link a { flex: 1; }
.category-links .topics-count { flex: 0 0 auto; padding-right: 6px; font-size: 12px; font-weight: 400; color: var(--cpf-faint); }
.category-links .badge-category { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-category-bg, .badge-category-parent-bg { display: inline-block; width: 9px; height: 9px; flex: 0 0 9px; }
.category-links .subcategory .badge-category-parent-bg { width: 4px; flex-basis: 4px; margin-right: -4px; }
.category-links .subcategory .badge-category-bg { width: 5px; flex-basis: 5px; }

.user-avatar-btn {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; overflow: hidden; cursor: pointer;
}
.user-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
.user-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 600; font-size: 17px;
}
.user-menu-dropdown { min-width: 210px; padding: 4px 0; }
.user-menu-name { padding: 8px 14px; font-weight: 700; border-bottom: 1px solid var(--cpf-line); margin-bottom: 4px; }
.user-menu-item { display: block; padding: 8px 14px; color: var(--cpf-text); text-decoration: none; }
.user-menu-item:hover { background: var(--cpf-hover); color: var(--cpf-text); }
.user-menu-logout { border-top: 1px solid var(--cpf-line); margin-top: 4px; }
.nav-pending-badge {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--cpf-accent); color: #fff; font-size: 12px; line-height: 20px; text-align: center;
}

/* ---- list navigation: All Categories / Categories / Latest / Top --------------------------------------------------- */
.btn-category { border: 1px solid #ccc; border-radius: 0; background: #fff; color: var(--cpf-text); }
.btn-category.is-open, .btn-category:hover { border-color: #999; background: #fff; }
.btn-warning, .btn-warning:hover, .btn-warning:focus { background: var(--cpf-accent); border-color: var(--cpf-accent); border-radius: 0; color: #fff; }
.categories-dropdown-wrap { position: relative; display: inline-block; }
.categories-dropdown, .category-chooser-dropdown {
  display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 1002;
  width: 350px; max-width: calc(100vw - 32px); max-height: 430px; overflow-y: auto;
  background: #fff; border: 1px solid var(--cpf-line); box-shadow: var(--cpf-shadow);
}
.categories-dropdown.is-open, .category-chooser-dropdown.is-open { display: block; }
.categories-dropdown-filter, .category-chooser-filter {
  position: sticky; top: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--cpf-line);
}
.categories-dropdown-filter input, .category-chooser-filter input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 15px; }
.filter-icon { color: var(--cpf-faint); }
.categories-dropdown-item, .category-chooser-item {
  display: block; width: 100%; padding: 8px 12px; border: 0; background: #fff;
  text-align: left; color: var(--cpf-text); text-decoration: none;
}
.categories-dropdown-item:hover, .category-chooser-item:hover, .category-chooser-item:focus { background: var(--cpf-hover); color: var(--cpf-text); }
.category-row-status { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.category-row-bullet { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; }
.category-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-row-count { color: var(--cpf-faint); font-weight: 400; font-size: 13px; white-space: nowrap; }
.category-row-desc { margin: 3px 0 0 16px; font-size: 13px; line-height: 1.4; color: var(--cpf-muted); }

.search-results-heading { margin: 4px 0 0; font-size: 15px; color: var(--cpf-muted); }
.search-results-heading a { margin-left: 10px; color: var(--cpf-blue) !important; }

/* ---- categories page ---------------------------------------------------------------------------------------------- */
.forum-section-header {
  margin-top: 18px; padding: 12px 8px 8px; font-size: 14px; color: var(--cpf-faint);
  border-bottom: 3px solid var(--cpf-line);
}
.forum-section-header--row { display: flex; justify-content: space-between; }
.category-block { display: flex; border-bottom: 1px solid var(--cpf-line); }
.category-bar { width: 6px; flex: 0 0 6px; }
.category-body { flex: 1; min-width: 0; padding: 12px 8px 16px 12px; }
.category-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.category-title { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
.category-title a { color: var(--cpf-text); text-decoration: none; }
.category-title a:hover { text-decoration: underline; }
.category-count { color: var(--cpf-faint); font-size: 16px; }
.category-content-row { display: flex; align-items: flex-start; gap: 20px; }
.category-icon-wrap {
  display: flex; align-items: center; justify-content: center; flex: 0 0 150px;
  width: 150px; height: 150px; border-radius: 12px; overflow: hidden; text-align: center;
}
.category-icon-img { width: 100%; height: 100%; object-fit: cover; }
.category-icon-wrap .category-icon-placeholder { font-size: 3rem !important; line-height: 150px !important; font-weight: 700; }
.category-description { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cpf-muted); }

.latest-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 10px; border-bottom: 1px solid var(--cpf-line);
}
.latest-item-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.latest-item-avatar { width: 45px; height: 45px; flex: 0 0 45px; border-radius: 50%; object-fit: cover; }
.latest-item-content { min-width: 0; }
.latest-item-title { margin: 0 0 3px; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.latest-item-title a { color: var(--cpf-text); text-decoration: none; }
.latest-item-title a:hover { text-decoration: underline; }
.latest-item-category { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.latest-item-category a { color: var(--cpf-muted) !important; text-decoration: none; }
.latest-item-category-square { display: inline-block; width: 9px; height: 9px; flex: 0 0 9px; }
.latest-item-right { flex: 0 0 auto; text-align: right; color: var(--cpf-faint); font-size: 15px; }
.latest-item-right p { margin: 0; }
.latest-section-list { overflow: hidden; padding-bottom: 24px; }

/* ---- topic page and composer --------------------------------------------------------------------------------------- */
.topic-avatars-logo { display: none !important; }   /* the full wordmark squeezed to 24 px */
.moderator .topic-body { background-color: #eedcff; }
.post-body-wrap { min-width: 0; overflow-wrap: anywhere; }
.post-body-wrap img { max-width: 100%; height: auto; }
img.emoji { width: 20px !important; height: 20px !important; vertical-align: middle; margin: 0 1px; }
img.emoji.only-emoji { width: 32px !important; height: 32px !important; margin: 4px 0; }
.mod-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.composer-fields.is-minimized .composer-body > :not(.reply-to) { display: none; }
.category-input { position: relative; }
.category-chooser-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 220px;
  padding: 6px 10px; border: 1px solid #ccc; background: #fff; color: var(--cpf-text); text-align: left;
}
.chooser-bullet { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; }
.chooser-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.composer-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .5);
}
.composer-modal-overlay.is-open { display: flex; }
.composer-modal { width: 520px; max-width: 100%; background: #fff; box-shadow: var(--cpf-shadow); }
.composer-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--cpf-line);
}
.composer-modal-title { margin: 0; font-size: 18px; font-weight: 700; }
.composer-modal-close { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--cpf-faint); cursor: pointer; }
.composer-modal-body { padding: 16px 18px; }
.composer-modal-body input[type="text"], .composer-modal-body input[type="url"] {
  width: 100%; margin-bottom: 10px; padding: 7px 9px; border: 1px solid #ccc; font-size: 15px;
}
.composer-modal-footer { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--cpf-line); }
.btn-ok { padding: 6px 16px; border: 0; background: var(--cpf-blue); color: #fff; }
.link-cancel { color: var(--cpf-muted); text-decoration: none; }
.radio-option { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }

/* ---- narrow screens ------------------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .header-inner { height: 52px; gap: 8px; }
  .header-logo .logo-image { height: 24px; }
  .btn-login { padding: 4px 9px; font-size: 13px; }
  .btn-login .me-2 { margin-right: 4px !important; }
  .icon-button { width: 36px; height: 36px; }
  .icon-button svg { width: 24px; height: 24px; }
  .search-dropdown, .menu-panel { position: fixed; left: 8px; right: 8px; top: 86px; width: auto; }
  .category-icon-wrap { flex-basis: 80px; width: 80px; height: 80px; border-radius: 8px; }
  .category-icon-wrap .category-icon-placeholder { font-size: 2rem !important; line-height: 80px !important; }
  .category-content-row { gap: 12px; }
  .category-title { font-size: 18px; }
  .latest-item-title { font-size: 16px; }
  .latest-item-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  /* topic lists (latest, top, category): title, replies and activity only */
  .topic-list-table .th-avatars, .topic-list-table .topic-cell-avatars,
  .topic-list-table .th-views, .topic-list-table .topic-cell-views { display: none; }
  .topic-list-table th, .topic-list-table td { padding-left: 8px !important; padding-right: 8px !important; }
  .topic-list-table .topic-title { overflow-wrap: anywhere; }
}