/**
 * Ragnar Academy — glossary-search.css
 * Styles for resources/bjj-glossary/index.html
 * Extrahováno z inline <style> Phase 2 Balík B4 (2026-04-21)
 */

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root{
  --bg:var(--ra-bg,#0a0a0f);
  --bg-card:var(--ra-surface-100,#111118);
  --bg-card2:var(--ra-surface-200,#16161f);
  --text:var(--ra-text,#e8e8ec);
  --muted:var(--ra-muted,#8a8a9a);
  --accent:var(--ra-gold,#c9a84c);
  --accent-dim:rgba(201,168,76,0.12);
  --border:var(--ra-border,rgba(255,255,255,0.06));
  --r:12px;
  /* Category colours */
  --cat-position:#3a7bd5;
  --cat-submission:#d53a3a;
  --cat-leglock:#c9a84c;
  --cat-sweep:#3aad7b;
  --cat-escape:#8a6bd5;
  --cat-grip:#d5893a;
  --cat-rules:#d53a8a;
  --cat-belt:#5ab4d5;
  --cat-training:#6bd53a;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth;}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:3px;}

/* ── Skip link ──────────────────────────────────────────────────────────────── */
/* .skip-link — definováno v ra-design-system.css */

/* ── Nav ────────────────────────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:100;padding:14px 48px;display:flex;justify-content:space-between;align-items:center;background:rgba(10,10,15,0.92);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);}
.nav-logo{font-size:14px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--text);}
.nav-logo span{color:var(--accent);}
.nav-back{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;transition:color .3s;}
.nav-back:hover{color:var(--accent);}
.nav-back svg{width:14px;height:14px;fill:currentColor;}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.hero{padding:64px 48px 48px;max-width:900px;margin:0 auto;}
.breadcrumb{font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:20px;text-transform:uppercase;}
.breadcrumb a{color:var(--muted);transition:color .3s;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span{margin:0 8px;opacity:.4;}
h1{font-size:clamp(28px,4vw,44px);font-weight:900;line-height:1.1;margin-bottom:16px;letter-spacing:-1px;}
h1 span{color:var(--accent);}
.hero-sub{font-size:15px;color:var(--muted);max-width:620px;line-height:1.7;margin-bottom:24px;}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);}
.hero-meta-item{display:flex;align-items:center;gap:6px;}
.hero-meta-item svg{width:14px;height:14px;fill:var(--accent);flex-shrink:0;}

/* ── Search ─────────────────────────────────────────────────────────────────── */
.search-wrap{background:var(--bg);position:sticky;top:57px;z-index:90;padding:16px 48px;border-bottom:1px solid var(--border);}
.search-inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.search-bar{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:10px 16px;transition:border-color .3s;}
.search-bar:focus-within{border-color:var(--accent);}
.search-bar svg{width:16px;height:16px;fill:var(--muted);flex-shrink:0;}
.search-bar input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14px;font-family:inherit;}
.search-bar input::placeholder{color:var(--muted);}
.count-label{font-size:11px;color:var(--muted);text-align:right;}

/* ── Category filters ───────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:8px;}
.fil{padding:6px 14px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;font-family:inherit;}
.fil:hover{border-color:var(--muted);color:var(--text);}
.fil.active{color:#0a0a0f;border-color:transparent;}
.fil[data-cat="all"].active{background:var(--accent);}
.fil[data-cat="position"].active{background:var(--cat-position);color:#fff;}
.fil[data-cat="submission"].active{background:var(--cat-submission);color:#fff;}
.fil[data-cat="leglock"].active{background:var(--cat-leglock);}
.fil[data-cat="sweep"].active{background:var(--cat-sweep);color:#fff;}
.fil[data-cat="escape"].active{background:var(--cat-escape);color:#fff;}
.fil[data-cat="grip"].active{background:var(--cat-grip);color:#fff;}
.fil[data-cat="rules"].active{background:var(--cat-rules);color:#fff;}
.fil[data-cat="belt"].active{background:var(--cat-belt);color:#fff;}
.fil[data-cat="training"].active{background:var(--cat-training);}

/* ── Main content ───────────────────────────────────────────────────────────── */
.main{max-width:900px;margin:0 auto;padding:32px 48px 80px;}

/* ── Term cards ─────────────────────────────────────────────────────────────── */
.terms-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.term-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:border-color .3s;position:relative;overflow:hidden;}
.term-card:hover{border-color:rgba(201,168,76,.2);}
.term-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;}
.term-card[data-cat="position"]::before{background:var(--cat-position);}
.term-card[data-cat="submission"]::before{background:var(--cat-submission);}
.term-card[data-cat="leglock"]::before{background:var(--cat-leglock);}
.term-card[data-cat="sweep"]::before{background:var(--cat-sweep);}
.term-card[data-cat="escape"]::before{background:var(--cat-escape);}
.term-card[data-cat="grip"]::before{background:var(--cat-grip);}
.term-card[data-cat="rules"]::before{background:var(--cat-rules);}
.term-card[data-cat="belt"]::before{background:var(--cat-belt);}
.term-card[data-cat="training"]::before{background:var(--cat-training);}
.term-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px;}
.term-name{font-size:16px;font-weight:700;color:var(--text);line-height:1.2;}
.cat-badge{font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0;}
.cat-badge.position{background:rgba(58,123,213,.15);color:#6fa3e8;}
.cat-badge.submission{background:rgba(213,58,58,.15);color:#e87070;}
.cat-badge.leglock{background:rgba(201,168,76,.15);color:var(--accent);}
.cat-badge.sweep{background:rgba(58,173,123,.15);color:#6fcfa7;}
.cat-badge.escape{background:rgba(138,107,213,.15);color:#b09de8;}
.cat-badge.grip{background:rgba(213,137,58,.15);color:#e8b080;}
.cat-badge.rules{background:rgba(213,58,138,.15);color:#e880b5;}
.cat-badge.belt{background:rgba(90,180,213,.15);color:#80cce8;}
.cat-badge.training{background:rgba(107,213,58,.15);color:#a0e880;}
.term-pron{font-size:11px;color:var(--muted);margin-bottom:6px;font-style:italic;}
.term-aliases{font-size:11px;color:var(--muted);margin-bottom:10px;line-height:1.5;}
.term-aliases strong{color:rgba(255,255,255,.4);font-weight:500;}
.term-def{font-size:13px;color:var(--text);line-height:1.6;margin-bottom:8px;}
.term-example{font-size:12px;color:var(--muted);border-left:2px solid var(--accent-dim);padding-left:10px;font-style:italic;line-height:1.5;}
.term-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.tag{font-size:10px;padding:2px 8px;border-radius:4px;background:var(--bg);border:1px solid var(--border);color:var(--muted);}
.tag.legal{border-color:rgba(107,213,58,.3);color:#a0e880;}
.tag.illegal{border-color:rgba(213,58,58,.3);color:#e87070;}
.tag.restricted{border-color:rgba(213,137,58,.3);color:#e8b080;}
.tag.nogi{border-color:rgba(58,123,213,.3);color:#6fa3e8;}
.tag.gi{border-color:rgba(201,168,76,.3);color:var(--accent);}

/* ── Section headings ───────────────────────────────────────────────────────── */
.section-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:40px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.section-label:first-child{margin-top:0;}

/* ── No results ─────────────────────────────────────────────────────────────── */
.no-results{text-align:center;padding:80px 24px;color:var(--muted);}
.no-results h3{font-size:20px;margin-bottom:8px;color:var(--text);}

/* ── Author note ────────────────────────────────────────────────────────────── */
.author-note{display:flex;align-items:center;gap:14px;background:var(--bg-card2);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:32px;}
.author-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-dim);border:1px solid rgba(201,168,76,.3);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:var(--accent);flex-shrink:0;}
.author-text{font-size:12px;color:var(--muted);line-height:1.5;}
.author-text strong{color:var(--text);display:block;font-size:13px;}

/* ── CTA ────────────────────────────────────────────────────────────────────── */
.cta-box{background:var(--accent-dim);border:1px solid rgba(201,168,76,.2);border-radius:16px;padding:40px;text-align:center;margin-top:64px;}
.cta-box h2{font-size:24px;font-weight:800;margin-bottom:8px;}
.cta-box p{color:var(--muted);font-size:14px;margin-bottom:24px;max-width:500px;margin-left:auto;margin-right:auto;}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn-gold{display:inline-block;background:var(--accent);color:#0a0a0f;padding:12px 28px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;transition:all .3s;}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(201,168,76,.25);}
.btn-line{display:inline-block;border:1px solid var(--border);color:var(--text);padding:12px 28px;border-radius:8px;font-weight:600;font-size:14px;transition:all .3s;}
.btn-line:hover{border-color:var(--accent);color:var(--accent);}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
footer{background:var(--bg-card);border-top:1px solid var(--border);padding:32px 48px;text-align:center;font-size:12px;color:var(--muted);}
footer a{color:var(--muted);transition:color .3s;}
footer a:hover{color:var(--accent);}

/* ── Utilities ──────────────────────────────────────────────────────────────── */
.hidden{display:none!important;}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  nav{padding:12px 20px;}
  .hero{padding:40px 20px 32px;}
  .search-wrap{padding:12px 20px;top:47px;}
  .main{padding:24px 20px 60px;}
  .terms-grid{grid-template-columns:1fr;}
  .cta-box{padding:28px 20px;}
  footer{padding:24px 20px;}
}
@media(max-width:480px){
  h1{font-size:26px;}
}