/* ══════════════════════════════════════════════════════════════
   Admoji API Docs — Raspberry theme
   Matches tryadmoji.com  ·  Slate (Middleman) override

   SCOPE: colour values only.
   - No content, markup, layout, spacing or font changes.
   - Monokai syntax highlighting (.highlight *) is deliberately
     NOT touched — those colours encode meaning in code samples.
   Load AFTER screen.css.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ad-pri:#9F2C53;      /* deep raspberry — primary, readable on white */
  --ad-pri-hi:#B53A63;   /* hover / lift */
  --ad-rose:#F0568A;     /* bright rose — accent on dark surfaces */
  --ad-ink:#0A0B0D;      /* near-black — matches main site bg */
  --ad-ink2:#14161A;     /* raised dark surface */
  --ad-ink3:#1C1F24;     /* code column */
  --ad-line:rgba(255,255,255,.10);
}

/* ── sidebar ─────────────────────────────────────────────── */
.tocify-wrapper{background:var(--ad-ink)}
.tocify-wrapper .lang-selector{background:var(--ad-ink2)}
.tocify-wrapper .lang-selector a{color:rgba(255,255,255,.72)}
.tocify-wrapper .lang-selector a:hover,
.tocify-wrapper .lang-selector a.active{color:#fff}

/* search field */
.tocify-wrapper .search input{background:var(--ad-ink2);border-color:var(--ad-line);color:#fff}
.tocify-wrapper .search:before{color:rgba(255,255,255,.55)}
.tocify-wrapper .search-results{background:var(--ad-ink2)}
.tocify-wrapper .search-results a{color:var(--ad-rose)}

/* top-level nav items */
.tocify-wrapper>.search+ul li a,
.tocify-wrapper #toc>ul>li>a{color:rgba(255,255,255,.78)}
.tocify-wrapper #toc>ul>li>a:hover{color:#fff}

/* active item — raspberry rail + tint (was Slate grey/blue) */
.tocify-wrapper .toc-link.active,
.tocify-wrapper .toc-link.active-parent,
.tocify-wrapper .tocify-item.active>a,
.tocify-wrapper #toc>ul>li.active>a{
  background:linear-gradient(90deg,rgba(159,44,83,.30),rgba(159,44,83,.10));
  box-shadow:inset 3px 0 0 var(--ad-rose);
  color:#fff}

/* sub-items */
.tocify-subheader .toc-link{color:rgba(255,255,255,.62)}
.tocify-subheader .toc-link:hover{color:#fff}
.tocify-subheader .toc-link.active{color:#fff;box-shadow:inset 3px 0 0 var(--ad-rose);
  background:rgba(159,44,83,.18)}

/* count badge — was #2484FF */
#toc>ul>li>a>span{background-color:var(--ad-pri);color:#fff}

/* footer links */
.toc-footer{border-top-color:var(--ad-line)}
.toc-footer li,.tocify-wrapper .toc-footer a{color:rgba(255,255,255,.6)}
.tocify-wrapper .toc-footer a:hover{color:var(--ad-rose)}

/* ── content column ──────────────────────────────────────── */
/* body links — was #0277BD */
.content a{color:var(--ad-pri)}
.content a:hover{color:var(--ad-pri-hi);text-decoration:underline}

/* inline code — tinted, still high contrast */
.content code{background:rgba(159,44,83,.07);color:#7E1C3F;
  border:1px solid rgba(159,44,83,.16);border-radius:4px}
/* never restyle code inside the dark panes */
.content pre code,.content blockquote code{background:none;color:inherit;border:0}

/* headings keep ink; add a raspberry rule under h1 */
.content h1{border-bottom:1px solid rgba(159,44,83,.22)}

/* method/permalink anchors */
.content h1:hover a:before,.content h2:hover a:before,
.content h3:hover a:before,.content h4:hover a:before{color:var(--ad-pri)}

/* ── dark code column ────────────────────────────────────── */
.page-wrapper .dark-box{background-color:var(--ad-ink3)}
.content pre,.content blockquote{background-color:var(--ad-ink3)}
.content blockquote>p{color:rgba(255,255,255,.82)}
.content>pre a,.content>blockquote a{color:var(--ad-rose);border-bottom-color:rgba(240,86,138,.4)}

/* language tabs */
.lang-selector{background-color:var(--ad-ink2);border-bottom-color:var(--ad-ink3)}
.lang-selector a{color:rgba(255,255,255,.68)}
.lang-selector a:hover{color:#fff}
.lang-selector a.active{background-color:var(--ad-ink3);color:#fff;
  box-shadow:inset 0 -3px 0 var(--ad-rose)}
.lang-selector a:active,.lang-selector a:focus{background-color:var(--ad-ink);color:#fff}

/* ── callouts ────────────────────────────────────────────────
   Selectors must match Slate's own `.content aside[.class]`
   specificity or the originals win. Semantic hues are kept:
   red = caution, green = ok, amber = note. Only `notice`
   (the neutral one) takes brand raspberry.                     */
.content aside{background:rgba(159,44,83,.06);
  border-left:3px solid var(--ad-pri)}
.content aside.notice{background:rgba(159,44,83,.06);border-left-color:var(--ad-pri)}
.content aside.warning{background-color:#FDECEE;border-left:3px solid #E5484D}
.content aside.success{background-color:#E9F7EC;border-left:3px solid #2E9E52}
.content aside.announce{background-color:#FFF8E1;border-left:3px solid #E7A008}
.content aside.warning:before,.content aside.notice:before,
.content aside.success:before,.content aside.announce:before{opacity:.85}

/* ── misc ────────────────────────────────────────────────── */
::selection{background:var(--ad-pri);color:#fff}
.content table thead th{border-bottom-color:rgba(159,44,83,.3)}
.content table tr:nth-child(even){background:rgba(159,44,83,.028)}

/* focus visibility (a11y) */
a:focus-visible,input:focus-visible,button:focus-visible{
  outline:2px solid var(--ad-rose);outline-offset:2px}

/* ── responsive: the mobile nav toggle ───────────────────── */
@media(max-width:930px){
  .tocify-wrapper .menu-toggle,.navbar{background:var(--ad-ink)}
}