/*
  Cariochi Docs — site.css (all colors moved to variables)
  Visual parity preserved. Only color literals were replaced by CSS variables.
*/

/* =====================
   1) Variables
====================== */
:root{
  /* Core palette */
  --bg:#ffffff;                        /* page bg */
  --fg:rgba(23, 43, 77, 0.82);         /* primary text */
  --muted:rgba(107, 119, 140, 0.88);   /* muted text */

  /* Accents */
  --brand:#ff6b00;              /* accent */

  /* Surfaces */
  --brand-bg:#F7F8FA;           /* subtle bg */

  /* Borders */
  --border:#EBECF0;             /* layout borders */
  --btn-border:#DFE1E6;         /* buttons */
  --btn-border-hover:#B3BAC5;   /* buttons hover */

  /* Links / icons */
  --link-muted:#42526E;

  /* Tables */
  --table-alt:#FBFCFE;          /* zebra */
  --table-hover:#F7F9FD;        /* hover */

  /* Effects */
  --shadow-color:rgba(9,30,66,.03);

  /* Layout */
  --max:1280px;                 /* optional content cap */

}

/* =====================
   2) Base / Typography / Links
====================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.65 -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;color:var(--fg);background:var(--bg)}
.container{max-width:none;margin:0 auto;padding:0 32px}

/* Headings */
article h1{margin:48px 0 16px;font-size:28px;line-height:1.25;font-weight:800;border-bottom:2px solid var(--brand);padding-bottom:6px}
article h2{margin:26px 0 12px;font-size:24px;line-height:1.3;font-weight:700;border-bottom:1px solid var(--border);padding-bottom:4px}
article h3{margin:22px 0 8px;font-size:18px;line-height:1.35;font-weight:700}
article h4{margin:18px 0 6px;font-size:16px;line-height:1.4;font-weight:700}

.content ul{margin:8px 0 12px 20px}
.content li{margin:4px 0}

a{color:var(--brand);text-decoration:none}

/* =====================
   3) Code blocks
====================== */
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:var(--brand-bg)}
pre{overflow:auto;border:1px solid var(--border);border-radius:8px;padding:6px}
code{border-radius:4px;padding:4px}
.highlight pre code{display:block;white-space:pre;font-size:0.85em;line-height:1.5}
.highlight .err {background-color:inherit;color:#24292f}

/* Контейнери Rouge */
 div.highlight, figure.highlight { position: relative; }

/* Кнопка копіювання */
.copy-btn {
  position: absolute;
  top: 6px; right: 6px;
  font-size: .75rem; line-height: 1;
  background: rgba(0,0,0,.06);
  border: 1px solid var(--border);
  color: var(--fg);
  font-weight: 200;
  padding: .25rem .45rem;
  border-radius: 6px;
  cursor: pointer;
  opacity: .75;
}
.copy-btn:hover {opacity: 1;}
.copy-btn.copied {color: var(--brand);}
/* =====================
   4) Header (brand, nav, burger, GitHub)
====================== */
.site-header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border);background:var(--brand-bg);}
.site-header .container{display:flex;align-items:center;gap:16px;padding:10px 24px;flex-wrap:wrap}

.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:24px}
.brand img{height:38px}

/* main nav */
.top-nav{margin-left:auto}
.top-nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.toc .section-nav li{list-style:none}
.top-nav a{display:inline-block;padding:6px 10px;color:var(--fg)}
.top-nav a:hover{background:var(--brand-bg)}
.top-nav .active a{font-weight:700;border-bottom:3px solid var(--brand);padding-bottom:6px}
.back-to-top{position:fixed; right:18px; bottom:18px;padding:.2rem .6rem; border-radius:8px;background:rgba(0,0,0,.06); text-decoration:none;color:var(--muted);}

/* GitHub button */
.header-github{display:flex;align-items:center;gap:6px;margin-left:12px;padding:6px 10px;border:1px solid var(--btn-border);border-radius:6px;text-decoration:none;background:var(--bg);color:var(--link-muted);white-space:nowrap;line-height:1.3}
.header-github:hover{background:var(--brand-bg);border-color:var(--btn-border-hover)}
.github-link{margin-left:1rem}
.github-text{font-size:10px}

/* burger checkbox — visually hidden but usable */
.site-header .nav-toggle[type="checkbox"]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;appearance:none}

/* burger button */
.menu-toggle{display:none;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--btn-border);border-radius:6px;cursor:pointer;color:var(--fg);background:var(--bg);line-height:1.3}

/* =====================
   5) Layout grid (left menu + content)
====================== */
.grid{display:grid;grid-template-columns:300px 1fr;gap:24px;margin:20px 0}
.left{padding-right:12px;border-right:1px solid var(--border)}
.content{min-width:0}

/* =====================
   6) TOC (right sidebar)
====================== */
.toc{border-right:1px solid var(--border)}
.toc-inner{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto}
.toc ul{padding-inline-start:20px}
.toc .section-nav{list-style:none;margin:0;padding:0}
.toc .section-nav a{display:block;padding:3px 8px;color:var(--link-muted);font-size:14px}
.toc .section-nav a:hover{background:var(--brand-bg);color:var(--fg)}
.toc .toc-entry.toc-h1 > a{margin-top:1rem;color:var(--fg);font-weight:700}
.toc .toc-entry.toc-h2 > a{color:var(--fg);font-size:.95em;font-weight:200}
.toc a.active{border-left:3px solid var(--brand);padding-left:6px;background-color:var(--brand-bg)}
:target{scroll-margin-top:72px}
.toc-mobile { display:none;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:16px; }

/* =====================
   7) Tables
====================== */
.content table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 1px 0 var(--shadow-color)}
.content thead th{position:sticky;top:0;background:#FAFBFC;border-bottom:1px solid var(--border);font-weight:700;padding:10px 12px;text-align:left}
.content thead th:first-child{border-top-left-radius:8px}
.content thead th:last-child{border-top-right-radius:8px}
.content tbody td{padding:10px 12px;border-top:1px solid var(--border);vertical-align:top}
.content tbody tr:nth-child(even){background:var(--table-alt)}
.content tbody tr:hover{background:var(--table-hover)}

/* =====================
   8) Callouts
====================== */
blockquote{margin:12px 0;padding:8px 14px;background:var(--brand-bg);border-left:4px solid var(--brand);border-radius:6px}

/* =====================
   9) Footer
====================== */
.site-footer{border-top:1px solid var(--border);margin-top:24px}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 24px;color:var(--muted);font-size:12px;line-height:0.4}

/* =====================
  10) Responsive
====================== */
@media (max-width:1200px){
  .grid{grid-template-columns:220px 1fr 280px}
}

@media (max-width:1024px){
  .grid{grid-template-columns:1fr;gap:0}
  .left{border-right:0;padding-right:0;border-bottom:1px solid var(--border);margin-bottom:16px}
  .toc{border-left:0;border-top:1px solid var(--border);border-right:0;margin-top:16px}
  .toc-inner{position:static;max-height:none;padding-left:0}
  .side-menu{position:static}
}

@media (max-width:1023px){
  .toc-mobile { display: block; margin-bottom: 16px; }
  .toc-desktop { display: none; }
}

@media (max-width:900px){
  .header-github .github-text{display:none}
}

@media (max-width:820px){
  .brand{order:1}
  .menu-toggle{display:flex;order:2;margin-left:auto}
  .header-github{order:3;margin-left:0}
  .header-github .github-text{display:none}
  .top-nav{order:4;display:none;flex-basis:100%;width:100%}
  .nav-toggle:checked ~ .top-nav{display:block}
  .back-to-top { display:none; }

  .top-nav ul{flex-direction:column;gap:0;padding:8px 0;margin:0;width:100%}
  .top-nav li{border-top:1px solid var(--border)}
  .top-nav a{display:block;padding:12px 6px}

  .site-footer .footer-inner {flex-direction:column;text-align:center;}
  .site-footer .contact {order:-1;margin-bottom:6px;}
}