/* ============================================================================
   Author: N1CHO
   Made for LynxLayers
   ============================================================================ */
/* ============================================================================
   LynxThemeN1CHO - Public pages (knowledgebase, announcements, contact,
   network/server status, error/banned, static CMS). Token-driven -> dark/light.
   Loaded globally; supplements theme.css/clientarea.css for public surfaces.
   ============================================================================ */

/* ---- Knowledgebase ---- */
#knowledgebase .panel, .kb-category, .kbcategory, .kbarticle, .kb-article-body {
  background: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important;
}
#knowledgebase a, .kbarticle a, .kb-article-body a { color: var(--primary-strong) !important; }
.kb-cat-icon, .kbtags .label, .kb-tag { background: color-mix(in oklch, var(--primary-color) 14%, transparent) !important; color: var(--primary-strong) !important; }
.kb-search, #knowledgebase .input-group { background: transparent !important; }

/* ---- Announcements (list + single) — themed cards ---- */
.announcement, .announcement-item, #announcements .panel {
  background: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important;
}
.announcement h2 a, .announcement h3 a, .announcement-title a { color: var(--text-primary) !important; }
.announcement h2 a:hover, .announcement h3 a:hover { color: var(--primary-strong) !important; }
.announcement .label-default { background: var(--bg-muted) !important; color: var(--text-secondary) !important; }
.announcement blockquote { border-left-color: var(--border-strong) !important; color: var(--text-secondary) !important; background: transparent !important; }

/* List-page announcement entries become contained cards with an accent rail. */
.announcement-single {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in oklch, var(--bg-surface) 92%, var(--primary-color) 6%), var(--bg-surface)) !important;
  border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important;
  padding: 26px 30px !important; margin: 0 0 20px !important;
  transition: border-color .25s var(--ease-out, cubic-bezier(.22,1,.36,1)),
              transform .25s var(--ease-out, cubic-bezier(.22,1,.36,1)),
              box-shadow .25s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.announcement-single::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--primary-color), var(--primary-strong));
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.announcement-single:hover {
  border-color: color-mix(in oklch, var(--primary-color) 35%, transparent) !important;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px color-mix(in oklch, var(--primary-color) 70%, transparent);
}
.announcement-single:hover::before { transform: scaleY(1); }
.announcement-single .title {
  font-family: var(--font-display); font-size: 1.5em; font-weight: 700; line-height: 1.3;
  color: var(--text-primary) !important; display: inline-block; margin-bottom: 12px;
  transition: color .2s;
}
.announcement-single .title:hover { color: var(--primary-strong) !important; }
.announcement-single p { color: var(--text-secondary) !important; line-height: 1.7; }

/* "Read more" — themed cyan pill instead of the yellow Bootstrap label. */
.announcement-single a.label-warning, .announcement-single .label-warning {
  display: inline-block; margin-left: 4px;
  background: color-mix(in oklch, var(--primary-color) 14%, transparent) !important;
  color: var(--primary-strong) !important;
  border: 1px solid color-mix(in oklch, var(--primary-color) 38%, transparent) !important;
  padding: 5px 13px !important; border-radius: var(--radius-pill) !important;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  transition: background .2s, border-color .2s, transform .2s;
}
.announcement-single a.label-warning:hover {
  background: color-mix(in oklch, var(--primary-color) 26%, transparent) !important;
  border-color: color-mix(in oklch, var(--primary-color) 55%, transparent) !important;
  transform: translateX(2px);
}
/* Meta row (date + admin edit) sits under a divider. */
.announcement-single .article-items {
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border-color);
  color: var(--text-muted) !important; font-size: 13px;
}
.announcement-single .article-items > i { color: var(--primary-strong); opacity: .85; margin-right: 5px; }
.announcement-single .admin-inline-edit { color: var(--text-secondary) !important; margin-left: 18px; transition: color .2s; }
.announcement-single .admin-inline-edit:hover { color: var(--primary-strong) !important; }

/* ---- Network / server status ---- */
#networkissues .panel, .serverstatus .panel, .status-item, .network-status-item {
  background: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important;
}
.serverstatus .progress, #networkissues .progress { background: var(--bg-muted) !important; }
.serverstatus .progress-bar { background: var(--color-success) !important; }

/* ---- Contact / static / error pages ---- */
#contact .panel, .contact-form, .cms-page, .static-page, .error-page, .errorbox, #fullpage-error {
  background: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important;
}
.cms-page a, .static-page a { color: var(--primary-strong) !important; }
.error-page h1, .errorbox h1 { color: var(--text-primary) !important; }

/* ---- Generic public headings/lead text ---- */
.page-header, .public-header { border-color: var(--border-color) !important; }
.lead { color: var(--text-secondary) !important; }