/* =========================================================
   Togetha — Scroll Sites Custom CSS (FINAL + Mobile Fix)
   ========================================================= */
/* Load fonts */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@400;600;700&family=Bitter:wght@400;600;700&display=swap");
/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  --theme-text-font: "Bitter", serif;
  --theme-text-color: #464646;
  --theme-text-scale: 1;
  --theme-headline-font: "Urbanist", sans-serif;
  --theme-headline-color: #3f0b78;
  --theme-headline-scale: 1;
  --theme-primary-color: #3f0b78;
  --theme-on-primary-color: #ffffff;
  --theme-roundness: 1;
}
/* =========================================================
   BREADCRUMBS & TOC
   ========================================================= */
.breadcrumbs,
.breadcrumbs a {
  color: var(--theme-primary-color);
}
.toc-heading {
  color: var(--theme-primary-color);
}
/* =========================================================
   LEFT NAVIGATION (Article Tree)
   ========================================================= */
/* Remove markers */
.tree .tree-item-header::before,
.tree .tree-item-header a::before,
.tree .tree-item::before {
  display: none !important;
  content: none !important;
}
/* Row container — padding lives here so twisty & text share the same height */
.navigator .tree-item-header {
  width: 100%;
  border-radius: calc(var(--theme-roundness) * 6px);
  background: transparent;
  padding: 0.25rem 0.5rem 0.25rem 0.6rem;
  align-items: center;
}
/* Anchor fills row — no padding, container handles spacing */
.navigator .tree-item-header a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 0;
  font-family: var(--theme-headline-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-primary-color);
  text-decoration: none;
  background: transparent !important;
  border: 0;
  border-radius: inherit;
}
/* Hover = full width */
.navigator .tree-item-header:hover {
  background-color: color-mix(
    in srgb,
    var(--theme-primary-color) 10%,
    transparent
  );
}
/* Prevent double hover */
.navigator .tree-item-header a:hover,
.navigator .tree-item-header a:focus-visible {
  background: transparent !important;
  text-decoration: underline;
}
/* Active = full-width solid button */
.navigator .tree-item-header:has(a[aria-current="page"]) {
  background-color: var(--theme-primary-color) !important;
}
.navigator .tree-item-header:has(a[aria-current="page"]) a[aria-current="page"] {
  color: var(--theme-on-primary-color) !important;
  background: transparent !important;
  text-decoration: none;
}
/* Fallback if :has() unsupported */
.navigator .tree-item-header a[aria-current="page"] {
  background-color: var(--theme-primary-color) !important;
  color: var(--theme-on-primary-color) !important;
}
/* Active wins over hover */
.navigator .tree-item-header:hover:has(a[aria-current="page"]) {
  background-color: var(--theme-primary-color) !important;
}
/* Keyboard focus */
.navigator .tree-item-header:focus-within {
  outline: 2px solid
    color-mix(in srgb, var(--theme-primary-color) 55%, white);
  outline-offset: 2px;
}
/* =========================================================
   MOBILE DRAWER CLOSE BUTTON (FIX)
   ========================================================= */
/* Make the close icon visible on dark header */
.drawer-toggle {
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
/* Force strong contrast for the X icon */
.drawer-toggle .icon {
  fill: #ffffff !important;
}
/* Improve tap target & visibility */
.drawer-toggle:hover,
.drawer-toggle:focus-visible {
  background-color: rgba(255, 255, 255, 0.28);
}
/* =========================================================
   LINKS
   ========================================================= */
.article-body a,
.fb-layout-body a,
.cm a,
.pm a {
  color: var(--theme-primary-color) !important;
}
.article-body a:hover,
.fb-layout-body a:hover {
  text-decoration: underline;
}