/* v5.34 — Category toggle, uniform category chips, aligned with posts, smaller page sidebar. */

/* Theme fonts: dark = Vampire Wars, mint/light = Aresink (site name + category only) */
@font-face { font-family: "LM Vampire Wars"; src: url("fonts/theme/vampire-wars.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "LM Aresink"; src: url("fonts/theme/aresink.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --lm-theme-font: "LM Vampire Wars", Georgia, serif; }
html.lm-light { --lm-theme-font: "LM Aresink", Georgia, serif; }

html body .lm-brand-name, html body .lm-brand-name *,
html body .lm-cat-label,
html body .lm-chip, html body .lm-chip *,
html body .lm-tag, html body .lm-side-title,
html body .lm-category-toggle, html body .lm-category-toggle * {
  font-family: var(--lm-theme-font) !important;
}

/* ---------- Category wrap: same width as the post grid (.lm-wrap) ---------- */
.lm-cat-wrap { max-width: 1400px; margin: 8px auto 4px; padding-inline: 16px; box-sizing: border-box; }
@media (min-width: 1600px) { .lm-cat-wrap { max-width: 1500px; } }
@media (max-width: 767px) { .lm-cat-wrap { padding-inline: 10px; } }

/* ---------- Toggle: icon + label only, no outline or box around it ---------- */
.lm-cat-toggle {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 0 auto 8px; padding: 4px 12px; border: 0; background: transparent; box-shadow: none;
  color: var(--text); cursor: pointer; transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.lm-cat-toggle:hover { transform: translate3d(0, -2px, 0); }
.lm-cat-toggle:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 4px; border-radius: 8px; }

html body .lm-cat-toggle .lm-cat-label {
  font-family: var(--lm-theme-font) !important;
  font-size: 13px; font-weight: 400; letter-spacing: .06em; line-height: 1.2; text-transform: none;
  white-space: nowrap; color: var(--brand-gold);
}
html.lm-light body .lm-cat-toggle .lm-cat-label { color: var(--text); }
.lm-cat-label.is-swap { animation: lmCatLabelIn .5s cubic-bezier(.22, 1, .36, 1); }

/* Icon bobs up and down; points down when closed, up when open */
.lm-cat-arrow-wrap { display: block; height: 24px; animation: lmCatBob 1.2s ease-in-out infinite; }
.lm-cat-arrow {
  display: block; width: 22px; height: 22px; margin: 0 auto;
  transform: rotate(90deg); transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.lm-cat-toggle.is-open .lm-cat-arrow { transform: rotate(-90deg); }
.lm-cat-arrow img { width: 100%; height: 100%; display: block; object-fit: contain; }

@supports ((-webkit-mask: url("img/send-message.png")) or (mask: url("img/send-message.png"))) {
  .lm-cat-arrow img { display: none; }
  .lm-cat-arrow {
    background: linear-gradient(135deg, var(--brand-gold), var(--brand) 60%, var(--brand-deep));
    -webkit-mask: url("img/send-message.png") center / contain no-repeat;
            mask: url("img/send-message.png") center / contain no-repeat;
  }
}

/* ---------- Panel: slides down when opening, back up when closing ---------- */
.lm-cat-panel { display: grid; grid-template-rows: 1fr; }
.lm-cat-panel-inner {
  min-height: 0; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow);
}
.lm-cat-tg { display: flex; justify-content: center; padding: 14px 14px 2px; }
.lm-cat-tg .lm-telegram { max-width: 100%; }
.lm-cat-panel-inner > .lm-chips { margin: 0 !important; max-width: 100% !important; background: transparent !important; box-shadow: none !important; border-top: 0 !important; }

/* ---------- Uniform category chips: one style for every category ---------- */
html body .lm-chips > a.lm-chip,
html body .lm-chips > a.lm-chip:nth-child(n),
html body .lm-chips > a.lm-chip:nth-child(n):hover {
  width: 100% !important; max-width: 100% !important; min-width: 0; min-height: 40px;
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px !important; margin: 0 !important; font-size: 12.5px !important; font-weight: 600;
  line-height: 1.25; letter-spacing: 0; text-align: center; white-space: normal; overflow-wrap: anywhere;
  border: 1px solid var(--border) !important; border-radius: 10px !important;
  background: var(--chip) !important; color: var(--text) !important;
  box-shadow: none !important; transform: none !important; filter: none !important; animation: none !important;
}
html body .lm-chips > a.lm-chip:hover { border-color: var(--brand) !important; color: var(--brand-gold) !important; }
html body .lm-chips > a.lm-chip.is-active {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep)) !important;
  border-color: transparent !important; color: #fff !important;
}
html body .lm-chips > a.lm-chip .lm-ico { animation: none !important; transform: none !important; filter: none !important; font-size: 14px; }
html body .lm-chips > a.lm-chip > span:last-child { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  html body .lm-chips { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; padding: 12px !important; gap: 8px; }
}

/* ---------- Static pages: sidebar a bit smaller ---------- */
@media (min-width: 1024px) {
  .lm-wrap.lm-has-side:has(> .lm-side) { grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; }
}
.lm-side-box { padding: 10px 10px 12px !important; margin-bottom: 10px !important; border-radius: 12px !important; }
.lm-side-title { font-size: 11px !important; margin-bottom: 8px !important; }
.lm-side .lm-tags { gap: 6px !important; }
.lm-side .lm-tag { font-size: 11.5px !important; padding: 5px 9px !important; }
.lm-side .lm-side-request, .lm-side .lm-side-home { font-size: 13px; padding: 9px 11px; margin-top: 8px; }
.lm-side-brand { font-size: 11px !important; }

@keyframes lmCatBob {
  0%, 100% { transform: translate3d(0, -3px, 0); }
  50% { transform: translate3d(0, 3px, 0); }
}
@keyframes lmCatLabelIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- Collapse animation (JS adds html.lm-cat-js) ---------- */
html.lm-cat-js .lm-cat-panel {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s linear .5s;
}
html.lm-cat-js .lm-cat-panel.is-open {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s;
}
html.lm-cat-js .lm-cat-panel-inner { border-width: 0; box-shadow: none; transform: translate3d(0, -18px, 0); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
html.lm-cat-js .lm-cat-panel.is-open .lm-cat-panel-inner { border-width: 1px; box-shadow: var(--shadow); transform: translate3d(0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  .lm-cat-arrow-wrap, .lm-cat-label.is-swap { animation: none !important; }
  html.lm-cat-js .lm-cat-panel, html.lm-cat-js .lm-cat-panel-inner { transition: none !important; }
}