/* sidebar.css
   Styling für <aside> mit Bludit-Plugin-Blöcken:
   .plugin, .plugin-label, .plugin-content, Listen, Search Input etc.
*/

/* Plugin-Card */
.plugin {
  background-color: #ffffff;
  border: 1px solid #e9eef3;
  border-radius: 12px;
  padding: 16px 16px 14px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* Überschrift */
.plugin-label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #2c3e50;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ecf0f1;
}

/* Inhaltstext */
.plugin-content {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #34495e;
}

/* "Ein Gedankengang" wirkt besser mit etwas mehr Luft */
.plugin-about .plugin-content {
  color: #2f4152;
}

/* Links in der Sidebar */
.plugin-content a {
  color: #ff7a00;
  text-decoration: none;
}

.plugin-content a:hover {
  color: #cc5f00;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Listen */
.plugin-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plugin-content li {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid #eef3f6;
}

.plugin-content li:last-child {
  border-bottom: none;
}

/* Navigation/Links-Listen etwas kompakter */
.plugin-navigation .plugin-content li,
.plugin-pages .plugin-content li,
.plugin-static-pages .plugin-content li,
.plugin-categories .plugin-content li,
.plugin-tags .plugin-content li {
  padding: 7px 0;
}

/* List-Links als "Row" */
.plugin-content li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #2c3e50;
  font-weight: 500;
  text-decoration: none;
}

.plugin-content li a:hover {
  color: #ff7a00;
  text-decoration: none;
}

/* Parent-Item (im Static Pages Plugin) dezent hervorheben */
.plugin-static-pages li.parent > a {
  color: #2c3e50;
  font-weight: 700;
}

/* Kategorien-Zähler: Bludit schreibt den Count meist in Klammern ins Textlabel,
   deshalb nur optisch durch leicht andere Farbe beim Link */
.plugin-categories .plugin-content li a {
  color: #2c3e50;
}

/* Tags: wenn später befüllt, als Chips */
.plugin-tags .plugin-content ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plugin-tags .plugin-content li {
  border: none;
  padding: 0;
}

.plugin-tags .plugin-content li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ecf0f1;
  color: #2c3e50;
  font-size: 0.85rem;
  font-weight: 600;
}

.plugin-tags .plugin-content li a:hover {
  background: #ff7a00;
  color: #ffffff;
}

/* Search Plugin */
.plugin-search .plugin-content {
  display: flex;
  align-items: center;
}

#jspluginSearchText {
  width: 100%;
  appearance: none;
  border: 1px solid #dfe6ea;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  background: #ffffff;
  color: #2c3e50;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#jspluginSearchText::placeholder {
  color: #95a5a6;
}

#jspluginSearchText:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255,122,0,0.15);
}

/* Kleine Details: <br> in plugin-about sauberer wirken lassen */
.plugin-about .plugin-content br + br {
  content: "";
}

/* Sidebar Sticky (optional) – nur wenn du das wirklich willst:
   Kommentiert lassen, weil du evtl. schon sticky im Haupt-CSS hast. */
/*
.sidebar {
  position: sticky;
  top: 180px;
  align-self: start;
}
*/

/* Mobile: Sidebar-Plugin-Cards etwas kompakter */
@media (max-width: 768px) {
  .plugin {
    border-radius: 12px;
    padding: 14px 14px 12px;
    margin-bottom: 16px;
  }
  .plugin-label {
    font-size: 0.95rem;
  }
}

/* ---------------------------------------------------------
   DARK MODE (greift, wenn dein Toggle data-theme="dark" setzt)
   --------------------------------------------------------- */
html[data-theme="dark"] .plugin {
  background-color: #101a2e;
  border-color: #24314f;
  box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

html[data-theme="dark"] .plugin-label {
  color: #e6edf7;
  border-bottom-color: #24314f;
}

html[data-theme="dark"] .plugin-content {
  color: #cbd6ea;
}

html[data-theme="dark"] .plugin-content li {
  border-bottom-color: #24314f;
}

html[data-theme="dark"] .plugin-content li a {
  color: #e6edf7;
}

html[data-theme="dark"] .plugin-content li a:hover {
  color: #ffb36b;
}

html[data-theme="dark"] .plugin-static-pages li.parent > a {
  color: #e6edf7;
}

html[data-theme="dark"] #jspluginSearchText {
  background: #0f1930;
  border-color: #24314f;
  color: #e6edf7;
}

html[data-theme="dark"] #jspluginSearchText::placeholder {
  color: #94a3bf;
}

html[data-theme="dark"] #jspluginSearchText:focus {
  border-color: #ffb36b;
  box-shadow: 0 0 0 3px rgba(255,179,107,0.18);
}

html[data-theme="dark"] .plugin-tags .plugin-content li a {
  background: #0f1930;
  color: #cbd6ea;
}

html[data-theme="dark"] .plugin-tags .plugin-content li a:hover {
  background: #ffb36b;
  color: #0b1220;
}