/* CoinJog Súgó (/jogi-ai/sugo/), 2026-10-21. Separate file: the CSP forbids inline styles. */

.sugo-fej{padding:56px 0 44px}
.sugo-utvonal{margin:0 0 8px !important;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7f93aa !important}

.sugo-racs{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;padding:56px 0 96px;align-items:start}

/* oldalsav */
.sugo-oldalsav{position:sticky;top:96px;min-width:0}
.sugo-menu summary{display:none}
.sugo-menu ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--szurke-100)}
.sugo-menu li a{
  display:block;padding:9px 14px;margin-left:-2px;border-left:2px solid transparent;
  color:var(--szurke-700);font-size:.95rem;font-weight:500;line-height:1.35;
}
.sugo-menu li a:hover{color:var(--ejjel);border-left-color:var(--szurke-300);text-decoration:none}
.sugo-menu li a[aria-current="page"]{color:var(--jade-sotet);border-left-color:var(--jade);font-weight:600}
.sugo-menu-lab{margin:18px 0 0;padding-left:14px;font-size:.9rem}

/* tartalom */
.sugo-tartalom{min-width:0;max-width:76ch}
.sugo-tartalom h2{font-size:1.4rem;margin:2.2em 0 .6em;scroll-margin-top:96px}
.sugo-tartalom h2:first-child{margin-top:0}
.sugo-tartalom h3{font-size:1.1rem;margin:1.6em 0 .5em}
.sugo-tartalom p,.sugo-tartalom li{color:var(--szurke-700)}
.sugo-tartalom code{
  font:.9em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--szurke-100);
  padding:1px 6px;border-radius:6px;color:var(--ejjel);overflow-wrap:anywhere;
}
.sugo-bevezeto{font-size:1.06rem;margin-top:0}
.sugo-lista{padding-left:1.2em}
.sugo-lista li{margin-bottom:.5em}

.sugo-lepesek{list-style:none;counter-reset:lepes;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:14px}
.sugo-lepesek > li{counter-increment:lepes;position:relative;padding-left:44px;min-height:28px}
.sugo-lepesek > li::before{
  content:counter(lepes);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--jade-halvany);color:var(--jade-sotet);font-weight:700;font-size:.85rem;
}

/* kodblokk masolas gombbal */
.kod-blokk{margin:16px 0 22px;border-radius:12px;overflow:hidden;background:var(--ejjel);box-shadow:var(--arnyek-s)}
.kod-fej{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 10px 8px 16px;background:#111c30;border-bottom:1px solid rgba(255,255,255,.08);
  color:#8ea1b8;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.masol-gomb{
  font:inherit;font-size:.8rem;letter-spacing:0;text-transform:none;cursor:pointer;
  background:rgba(255,255,255,.08);color:#e6edf7;border:1px solid rgba(255,255,255,.16);
  border-radius:8px;padding:5px 12px;min-height:32px;transition:background var(--atmenet);
}
.masol-gomb:hover{background:rgba(25,182,168,.25)}
.masol-gomb:focus-visible{outline:2px solid #5fd8cb;outline-offset:2px}
.masol-gomb.kesz{background:rgba(25,182,168,.35);border-color:#5fd8cb}
.kod-blokk .kod{margin:0;border-radius:0;box-shadow:none}
.kod-blokk .kod code{background:none;padding:0;color:inherit;font:inherit;overflow-wrap:normal}

/* kepek */
.sugo-kep{margin:18px 0 26px}
.sugo-kep img{width:100%;max-width:560px;border-radius:12px;border:1px solid rgba(15,34,52,.12);box-shadow:var(--arnyek-m);background:#fff}
.sugo-kep figcaption{margin-top:10px;font-size:.88rem;color:var(--szurke-500)}

/* megjegyzes */
.sugo-megj{
  margin:18px 0;padding:14px 18px;border-radius:12px;background:var(--hatter);
  border:1px solid rgba(15,34,52,.08);font-size:.93rem;
}
.sugo-megj.figyelem{background:#fff8ec;border-color:rgba(217,164,65,.45)}

/* kartyak */
.sugo-ket,.sugo-valaszto{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.sugo-kartya{
  display:block;padding:20px 22px;border-radius:14px;background:var(--papir);
  border:1px solid rgba(15,34,52,.1);box-shadow:var(--arnyek-s);min-width:0;
}
.sugo-kartya h3{margin:0 0 6px;font-size:1.05rem;color:var(--ejjel)}
.sugo-kartya p{margin:0;font-size:.93rem;color:var(--szurke-500)}
.sugo-kartya.link{transition:transform var(--atmenet),box-shadow var(--atmenet),border-color var(--atmenet)}
.sugo-kartya.link:hover{transform:translateY(-2px);box-shadow:var(--arnyek-m);border-color:rgba(25,182,168,.4);text-decoration:none}

/* tabla */
.sugo-tabla-keret{overflow-x:auto;margin:16px 0 22px}
.sugo-tabla{width:100%;border-collapse:collapse;font-size:.94rem}
.sugo-tabla th,.sugo-tabla td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(15,34,52,.1);vertical-align:top;color:var(--szurke-700)}
.sugo-tabla th{background:var(--hatter);color:var(--ejjel);font-weight:600}
.sugo-tabla td:first-child{font-weight:600;color:var(--ejjel);width:34%}

/* lapozo */
.sugo-lapozo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(15,34,52,.1)}
.sugo-lapozo a{display:block;padding:14px 18px;border-radius:12px;border:1px solid rgba(15,34,52,.1);color:var(--ejjel);font-weight:600}
.sugo-lapozo a:hover{border-color:var(--jade);text-decoration:none}
.sugo-lapozo a span{display:block;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--szurke-500)}
.sugo-lapozo .kovetkezo{text-align:right}

/* GYIK lenyilok: jogi-ai.css (the main page uses them too) */

@media (max-width:900px){
  .sugo-racs{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 0 72px}
  .sugo-oldalsav{position:static}
  .sugo-menu{border:1px solid rgba(15,34,52,.12);border-radius:12px;background:var(--papir);box-shadow:var(--arnyek-s)}
  .sugo-menu summary{
    display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;list-style:none;
    padding:14px 16px;font-weight:600;color:var(--ejjel);
  }
  .sugo-menu summary::-webkit-details-marker{display:none}
  .sugo-menu summary::after{
    content:"";width:9px;height:9px;border-right:2px solid var(--jade-sotet);border-bottom:2px solid var(--jade-sotet);
    transform:rotate(45deg);transition:transform var(--atmenet);flex:0 0 auto;
  }
  .sugo-menu[open] summary::after{transform:rotate(-135deg)}
  .sugo-menu nav{padding:0 16px 14px}
  .sugo-ket,.sugo-valaszto{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sugo-fej{padding:44px 0 34px}
  .sugo-lapozo{grid-template-columns:1fr}
  .sugo-lapozo .kovetkezo{text-align:left}
  .sugo-tabla td:first-child{width:40%}
}