/* ===== api.css (JS‑free) ===== */

/* ---------- Fonts ---------- */
@font-face{
    font-family:'Onest';
    src:url('../css/fonts/OnestRegular.woff2') format('woff2'),
        url('../css/fonts/OnestRegular.woff')  format('woff');
    font-weight:400;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:'Onest';
    src:url('../css/fonts/OnestBold.woff2') format('woff2'),
        url('../css/fonts/OnestBold.woff')  format('woff');
    font-weight:700;font-style:normal;font-display:swap;
  }
  
  /* ---------- Theme vars ---------- */
  :root{
    --bg-img:url('../css/img/background.webp') top center/cover no-repeat;
    --bg:#fafafa;            --fg:#222;
    --card:#fff;             --accent:#f7931a;
    --shadow:rgba(0,0,0,.1);
  }
  #themeToggle:checked ~ .wrapper{
    --bg:#1e1e1e;            --bg-img:none;
    --fg:#eee;               --card:#2a2a2a;
    --accent:#f5a623;        --shadow:rgba(0,0,0,.55);
  }
  
  /* ---------- Base reset ---------- */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html,body{width:100%;min-height:100vh;margin:0}
  body{font-family:'Onest',sans-serif}
  
  .wrapper{
    min-height:100vh;
    background:var(--bg) var(--bg-img);
    color:var(--fg);
    transition:background .3s,color .3s;
    overflow-x:hidden;
  }
  .container{width:90%;max-width:1000px;margin:0 auto}
  a{text-decoration:none;color:inherit}
  
  /* ================================================= HEADER */
  .site-header{
    background:var(--card);box-shadow:0 2px 6px var(--shadow);
    position:sticky;top:0;z-index:10;transition:background .3s;
  }
  .header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
  .logo{display:flex;align-items:center;gap:.75rem}
  .logo img{height:32px}
  .logo-text{font:600 24px 'Raleway',sans-serif;color:var(--fg);transition:color .3s}
  
  .main-nav{display:flex;gap:3.75rem;flex-wrap:wrap}
  .main-nav a{font-size:16px;color:var(--fg);transition:color .2s}
  .main-nav a.active,.main-nav a:hover{color:var(--accent)}
  
  .theme-switch{display:flex;align-items:center;gap:.75rem;cursor:pointer}
  .theme-label{font-size:16px;color:var(--fg);transition:color .3s}
  .switch{
    width:48px;height:24px;background:#f4f4f4;border-radius:32px;position:relative;transition:background .3s
  }
  .switch::after{
    content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .3s
  }
  #themeToggle:checked ~ .wrapper .switch{background:var(--accent)}
  #themeToggle:checked ~ .wrapper .switch::after{transform:translateX(24px)}
  
  /* ---------- Burger ---------- */
  .burger{
    display:none;
    width:28px;height:22px;
    position:relative;cursor:pointer
  }
  .burger span{
    position:absolute;left:0;right:0;height:3px;
    background:var(--fg);border-radius:2px;transition:.3s;
  }
  /* равные отступы: 0 px, 9 px, 18 px → визуально «по сетке» */
  .burger span:nth-child(1){top:0}
  .burger span:nth-child(2){top:9px}
  .burger span:nth-child(3){top:18px}
  
  /* превращаемся в крест ― все линии вращаются из середины элемента */
  #burgerToggle:checked ~ .wrapper .burger span{
    top:50%;transform-origin:center;
  }
  #burgerToggle:checked ~ .wrapper .burger span:nth-child(1){
    transform:translateY(-50%) rotate(45deg)
  }
  #burgerToggle:checked ~ .wrapper .burger span:nth-child(2){
    opacity:0
  }
  #burgerToggle:checked ~ .wrapper .burger span:nth-child(3){
    transform:translateY(-50%) rotate(-45deg)
  }
  
  /* показываем только на мобилке */
  @media(max-width:768px){
    .burger{display:block}
  }
  
  /* ---------- Off‑canvas ---------- */
  .offcanvas{
    position:fixed;top:0;left:-260px;width:260px;height:100vh;background:var(--card);
    box-shadow:4px 0 12px rgba(0,0,0,.3);
    padding:1.5rem;display:flex;flex-direction:column;gap:2rem;
    transition:left .35s ease,background .3s;z-index:20
  }
  .offcanvas .main-nav{flex-direction:column;gap:1.25rem}
  .offcanvas .main-nav a{font-size:18px}
  .offcanvas .theme-switch{align-self:flex-start}
  #burgerToggle:checked ~ .wrapper .offcanvas{left:0}
  
  @media(max-width:768px){
    .desktop-only{display:none}
    .burger{display:block}
  }
  
  /* ================================================= PAGE TITLE */
  .page-title{
    text-align:center;font-weight:700;font-size:clamp(1.5rem,5vw,2.5rem);
    margin:2.5rem 0 0
  }
  
  /* ================================================= GRID */
  .doc-grid{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;margin-top:3rem}
  @media(max-width:900px){
    .doc-grid{grid-template-columns:1fr}
    .method-nav{flex-direction:row;justify-content:center;flex-wrap:wrap}
    .nav-btn{max-width:150px}
  }
  
  /* side‑nav buttons (labels) */
  .method-nav{list-style:none;display:flex;flex-direction:column;gap:1rem}
  .nav-btn{
    display:block;width:100%;padding:.75rem 1rem;border:2px solid var(--accent);
    border-radius:6px;background:none;font-weight:600;color:var(--fg);
    text-align:center;cursor:pointer;transition:.2s
  }
  
  /* активный таб (CSS‑радио) */
  #tab1:checked ~ .wrapper .nav-btn[for="tab1"],
  #tab2:checked ~ .wrapper .nav-btn[for="tab2"],
  #tab3:checked ~ .wrapper .nav-btn[for="tab3"],
  #tab4:checked ~ .wrapper .nav-btn[for="tab4"],
  #tab5:checked ~ .wrapper .nav-btn[for="tab5"]{
    background:var(--accent);color:#fff
  }
  
  /* content articles */
  .method{display:none;font-size:16px;color:var(--fg)}
  #tab1:checked ~ .wrapper .m1,
  #tab2:checked ~ .wrapper .m2,
  #tab3:checked ~ .wrapper .m3,
  #tab4:checked ~ .wrapper .m4,
  #tab5:checked ~ .wrapper .m5{display:block}
  
  /* ================================================= INPUT & CODE blocks — если понадобятся */
  code{font-family:Consolas,monospace;background:rgba(0,0,0,.05);padding:2px 4px;border-radius:4px}
  pre code{display:block;padding:1rem;overflow:auto}
  .header-inner{padding:1rem 0}
.main-nav{gap:3.5rem}