/* =========================================================
   Oldalsáv - kategóriák + segítségkérő kártya
   A style2026.css tokenjeire épül.
   ========================================================= */

.side-block { position: relative; }

@media (min-width: 992px) {
  .side-block { position: sticky; top: calc(var(--nav-height, 80px) + 24px); }
}

.kat-cim { display: block; margin-bottom: 1.4rem; }

/* ---------- Kategórialista ---------- */

.kat-lista { list-style: none; margin: 0; padding: 0 0 0 1px; border-left: 1px solid rgba(184, 146, 118, 0.4); }

.kat-link { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0.4rem 0.85rem 1.5rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-graphite); font-size: 1rem; font-weight: 400; transition: color var(--transition), border-color var(--transition), background var(--transition); }

.kat-link:hover { color: var(--brand-primary); border-left-color: var(--tone-mid); background: rgba(216, 195, 178, 0.18); }

.kat-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

.kat-link.active { color: var(--brand-primary); border-left-color: var(--brand-primary); font-weight: 500; }

.kat-ikon { display: flex; align-items: center; justify-content: center; min-width: 22px; color: var(--brand-primary); font-size: 1.05rem; }

.kat-nev { flex: 1 1 auto; line-height: 1.35; }

.kat-db { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 50%; background: rgba(216, 195, 178, 0.45); color: var(--text-graphite); font-size: 0.85rem; font-weight: 500; letter-spacing: 0; }

.kat-link.active .kat-db, .kat-link:hover .kat-db { background: var(--brand-primary); color: #fff; }

/* ---------- Segítségkérő kártya ---------- */

.side-help { background: var(--brand-primary); color: #fff; }

.side-help-cim { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; color: #fff; margin-bottom: 0.9rem; }

.side-help p { font-size: 0.98rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 1.6rem; }

.side-help-elerheto { font-style: normal; display: flex; flex-direction: column; gap: 0.9rem; margin: 0; }

.side-help-link { display: flex; align-items: center; gap: 0.75rem; color: #fff; font-size: 1rem; transition: opacity var(--transition); }

.side-help-link:hover { color: #fff; opacity: 0.75; }

.side-help-link i { font-size: 1.05rem; opacity: 0.85; min-width: 20px; }