/**
 * Skip2 Networks API Documentation – Custom Stylesheet
 * Extends the Furo theme to match the Skip2 brand identity.
 *
 * Brand: #f23636 (Vibrant Red), dark-mode only, Switzer typeface.
 * Mirrors the design language used at docs.skip2.net (Nextra/Next.js).
 */

/* ─── Switzer font (Fontshare CDN, same face used across all Skip2 products) ── */
@import url("https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&display=swap");

/* ─── CSS custom properties (supplement / override Furo variables) ─────────── */
:root,
[data-theme="dark"],
[data-theme="light"] {
  /* Typography */
  --font-stack: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-stack--monospace: "JetBrains Mono", "Fira Code", "Cascadia Code",
    "Consolas", monospace;

  /* Skip2 palette */
  --skip2-red: #f23636;
  --skip2-red-hover: #d42d2d;
  --skip2-red-muted: rgba(242, 54, 54, 0.15);
  --skip2-bg: #111111;
  --skip2-surface: #161616;
  --skip2-surface-2: #1c1c1c;
  --skip2-border: #2a2a2a;
  --skip2-text: #e4e4e7;
  --skip2-text-muted: #a1a1aa;
  --skip2-text-faint: #52525b;

  /* Force dark background regardless of Furo mode */
  --color-background-primary: var(--skip2-bg);
  --color-background-secondary: var(--skip2-surface);
  --color-foreground-primary: var(--skip2-text);
  --color-foreground-secondary: var(--skip2-text-muted);
  --color-brand-primary: var(--skip2-red);
  --color-brand-content: var(--skip2-red);

  /* Sidebar */
  --color-sidebar-background: var(--skip2-surface);
  --color-sidebar-background-border: var(--skip2-border);

  /* Inline code */
  --color-inline-code-background: var(--skip2-surface-2);
}

/* ─── Global reset / base ───────────────────────────────────────────────────── */
html,
body {
  font-family: var(--font-stack) !important;
  background-color: var(--skip2-bg) !important;
  color: var(--skip2-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Top navigation bar ────────────────────────────────────────────────────── */
.page-header {
  background-color: rgba(17, 17, 17, 0.85) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--skip2-border) !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Logo sizing */
.page-header .header-left .logo img,
.page-header .header-left img {
  height: 32px;
  width: auto;
  max-width: 160px;
}

/* ─── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar-container,
.sidebar-sticky,
.sidebar-scroll {
  background-color: var(--skip2-surface) !important;
  border-right: 1px solid var(--skip2-border) !important;
}

.sidebar-brand-text {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--skip2-text) !important;
}

.sidebar-logo-name {
  color: var(--skip2-text) !important;
}

/* Sidebar section captions */
.sidebar-caption {
  color: var(--skip2-text-faint) !important;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Sidebar links */
.sidebar-tree a.reference {
  color: var(--skip2-text-muted) !important;
  font-size: 0.875rem;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.sidebar-tree a.reference:hover {
  background-color: var(--skip2-red-muted) !important;
  color: var(--skip2-text) !important;
}

.sidebar-tree .current > a.reference {
  background-color: var(--skip2-red-muted) !important;
  color: var(--skip2-red) !important;
  font-weight: 600;
}

/* ─── Main content area ─────────────────────────────────────────────────────── */
.article-container,
.page-content article {
  color: var(--skip2-text);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.page-content h1,
.page-content h2,
.page-content h3 {
  font-family: var(--font-stack);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--skip2-text) !important;
}

h1 { font-size: 2rem; }
h2 {
  font-size: 1.35rem;
  border-bottom: 1px solid var(--skip2-border);
  padding-bottom: 0.4rem;
  margin-top: 2rem;
}
h3 { font-size: 1.1rem; }

/* Links */
a {
  color: var(--skip2-red) !important;
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: var(--skip2-red-hover) !important;
  text-decoration: underline;
}

/* ─── Homepage hero banner ───────────────────────────────────────────────────── */
.skip2-hero {
  background: linear-gradient(135deg, #1a0a0a 0%, #1c1010 40%, #161616 100%);
  border: 1px solid var(--skip2-border);
  border-left: 4px solid var(--skip2-red);
  border-radius: 10px;
  padding: 2.5rem 2.25rem;
  margin: 1.5rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}

.skip2-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(242, 54, 54, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

.skip2-hero-logo {
  display: block;
  height: 40px;
  width: auto;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 0 12px rgba(242, 54, 54, 0.25));
}

.skip2-hero h1 {
  font-size: 2rem !important;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 0.75rem;
  color: var(--skip2-text) !important;
  line-height: 1.2;
}

.skip2-hero h1 span {
  color: var(--skip2-red);
}

.skip2-hero p {
  font-size: 1rem;
  color: var(--skip2-text-muted);
  margin: 0.4rem 0;
  line-height: 1.65;
}

.skip2-hero a {
  color: var(--skip2-red) !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 54, 54, 0.4);
  transition: border-color 0.15s;
}

.skip2-hero a:hover {
  border-bottom-color: var(--skip2-red);
  text-decoration: none !important;
}

/* ─── Code blocks ───────────────────────────────────────────────────────────── */
.highlight {
  background-color: var(--skip2-surface-2) !important;
  border: 1px solid var(--skip2-border);
  border-radius: 8px;
  overflow: hidden;
}

.highlight pre {
  background-color: transparent !important;
  padding: 1.1rem 1.25rem;
  margin: 0;
  font-family: var(--font-stack--monospace);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Inline code */
code.literal,
code.docutils {
  background-color: var(--skip2-surface-2) !important;
  border: 1px solid var(--skip2-border);
  border-radius: 4px;
  padding: 0.15em 0.4em;
  font-family: var(--font-stack--monospace);
  font-size: 0.85em;
  color: #f87171 !important;
}

/* ─── API / autodoc cards ────────────────────────────────────────────────────── */
dl.py,
dl.http {
  background-color: var(--skip2-surface) !important;
  border: 1px solid var(--skip2-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}

dl.py dt,
dl.http dt {
  background-color: var(--skip2-surface-2) !important;
  border-left: 3px solid var(--skip2-red);
  border-radius: 0 6px 6px 0;
  padding: 0.5rem 0.85rem;
  margin: -1.25rem -1.5rem 1rem;
  font-family: var(--font-stack--monospace);
  font-size: 0.9rem;
  color: var(--skip2-text) !important;
}

.sig-name.descname {
  color: var(--skip2-red) !important;
  font-weight: 700;
}

.sig-prename.descclassname {
  color: var(--skip2-text-muted) !important;
}

/* ─── Admonitions (note, warning, etc.) ─────────────────────────────────────── */
.admonition {
  background-color: var(--skip2-surface) !important;
  border-left: 4px solid var(--skip2-red);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.admonition.note { border-left-color: #60a5fa; }
.admonition.warning { border-left-color: #facc15; }
.admonition.danger,
.admonition.error { border-left-color: var(--skip2-red); }
.admonition.tip,
.admonition.hint { border-left-color: #4ade80; }

.admonition-title {
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: var(--skip2-text) !important;
}

/* ─── Table of contents (right sidebar) ────────────────────────────────────── */
.toc-tree li a {
  color: var(--skip2-text-muted) !important;
  font-size: 0.8rem;
  transition: color 0.15s;
}
.toc-tree li a:hover {
  color: var(--skip2-text) !important;
}
.toc-tree li.scroll-current > a {
  color: var(--skip2-red) !important;
  font-weight: 600;
}

/* ─── Footer ────────────────────────────────────────────────────────────────── */
.page-footer {
  border-top: 1px solid var(--skip2-border) !important;
  background-color: var(--skip2-surface) !important;
  color: var(--skip2-text-muted) !important;
  font-size: 0.8rem;
  padding: 1.5rem 0;
}

.page-footer a {
  color: var(--skip2-text-muted) !important;
}
.page-footer a:hover {
  color: var(--skip2-red) !important;
}

/* ─── Search ────────────────────────────────────────────────────────────────── */
.page-header-text {
  color: var(--skip2-text) !important;
}

input[type="search"],
input[type="text"] {
  background-color: var(--skip2-surface-2) !important;
  border: 1px solid var(--skip2-border) !important;
  border-radius: 6px;
  color: var(--skip2-text) !important;
  padding: 0.4rem 0.75rem;
}
input[type="search"]:focus,
input[type="text"]:focus {
  border-color: var(--skip2-red) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--skip2-red-muted);
}

/* ─── Scrollbar styling ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--skip2-bg); }
::-webkit-scrollbar-thumb {
  background: var(--skip2-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--skip2-text-faint); }

/* ─── Prev / Next navigation links ─────────────────────────────────────────── */
.prev-next-area a {
  background-color: var(--skip2-surface) !important;
  border: 1px solid var(--skip2-border) !important;
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.prev-next-area a:hover {
  border-color: var(--skip2-red) !important;
  background-color: var(--skip2-red-muted) !important;
}
.prev-next-area .title {
  color: var(--skip2-text) !important;
}

/* ─── Hide the light/dark mode toggle (dark only) ───────────────────────────── */
.theme-toggle,
button.theme-toggle {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NEW ADDITIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── sphinx-copybutton ─────────────────────────────────────────────────────── */
/* Position the button in the top-right of every code block */
.highlight {
  position: relative;
}

button.copybtn {
  /* Positioning */
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  z-index: 2;

  /* Appearance */
  background: var(--skip2-surface-2) !important;
  border: 1px solid var(--skip2-border) !important;
  border-radius: 5px !important;
  padding: 0.3rem !important;
  cursor: pointer;
  line-height: 0;

  /* Layout — icon only, no extra space */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  /* Colour — currentColor propagates into the Heroicon stroke */
  color: var(--skip2-text-muted) !important;

  /* Fade in on hover */
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

/* Show on hover of the containing highlight block or when focused */
.highlight:hover button.copybtn,
button.copybtn:focus-visible {
  opacity: 1;
}

button.copybtn:hover {
  background: var(--skip2-red-muted) !important;
  border-color: var(--skip2-red) !important;
  color: var(--skip2-red) !important;
}

/* Success (checkmark) flash */
button.copybtn.success {
  opacity: 1 !important;
  color: #4ade80 !important;
  border-color: #4ade80 !important;
}

/* The injected SVG should size from the button, not from its own attributes */
button.copybtn svg {
  display: block;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0;
}

/* ─── Sidebar: "API Documentation  v1" label ────────────────────────────────── */
.skip2-sidebar-api-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem 0.4rem;
  border-bottom: 1px solid var(--skip2-border);
  margin-bottom: 0.25rem;
}

.skip2-sidebar-api-text {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--skip2-text-muted);
}

.skip2-badge-v1 {
  display: inline-flex;
  align-items: center;
  background: var(--skip2-red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.1em 0.45em;
  border-radius: 9999px;
  line-height: 1.4;
}

/* ─── Sidebar: "Platform Documentation" button ───────────────────────────────── */
.skip2-platform-link-wrap {
  /* Stay inside the sidebar scroll container */
  padding: 0.5rem 0.75rem 0.6rem;
  border-top: 1px solid var(--skip2-border);
  margin-top: 0.25rem;
  /* Clip anything that would bleed out */
  overflow: hidden;
  box-sizing: border-box;
}

.skip2-platform-btn {
  /* Flex row, strictly contained within the wrapper */
  display: flex !important;
  align-items: center;
  gap: 0.45rem;

  /* Fill the wrapper but never exceed it */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0; /* required: lets flex children shrink below their content size */

  padding: 0.45rem 0.65rem;
  background: var(--skip2-surface-2);
  border: 1px solid var(--skip2-border);
  border-radius: 6px;
  color: var(--skip2-text-muted) !important;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
}

.skip2-platform-btn:hover {
  background: var(--skip2-red-muted) !important;
  border-color: var(--skip2-red) !important;
  color: var(--skip2-red) !important;
  text-decoration: none !important;
}

/* Text label: shrinks to fit, truncates with ellipsis if still too wide */
.skip2-platform-btn-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Both SVG icons never shrink */
.skip2-platform-btn svg {
  flex-shrink: 0;
}

.skip2-ext-icon {
  margin-left: auto;
  opacity: 0.5;
}