/* ============================================================
   cartoon.css — shared cartoon theme for the whole wiki
   Chunky outlines, bubbly corners, bouncy hovers, playful type.
   Loaded AFTER every per-project stylesheet so it wins.
   Keeps each project's --accent color, just cartoonifies it.
   ============================================================ */

:root {
  --round-sm: 12px;
  --round-md: 18px;
  --round-lg: 24px;
  --round-pill: 999px;
  --outline: 2px solid #000;
  --outline-soft: 2px solid rgba(0, 0, 0, 0.85);
  --shadow-pop: 4px 4px 0 #000;
  --shadow-pop-sm: 3px 3px 0 #000;
  --shadow-pop-lg: 6px 6px 0 #000;
  --font-display: 'Baloo 2', 'Inter', system-ui, sans-serif;
  --font-body: 'Nunito', 'Inter', system-ui, sans-serif;
}

/* ---------- playful type everywhere ---------- */
body {
  font-family: var(--font-body);
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}

h1, h2, h3,
.hero h1,
.doc-title,
.plugins-header h2,
.content-section h2,
.doc-section h2,
.page h1,
.error h1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance;
}

/* hero headline gets a cartoon pop shadow */
.hero h1,
.doc-title,
.page h1,
.error h1 {
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}

/* marker-highlight for accent spans in headlines */
.hero h1 span {
  display: inline-block;
  padding: 0 14px 2px;
  border: var(--outline);
  border-radius: var(--round-pill);
  box-shadow: var(--shadow-pop-sm);
  transform: rotate(-1.5deg);
  text-shadow: none;
  background: var(--accent, var(--yellow, #f5c842));
  color: #111 !important;
}

.hero p,
.doc-subtitle {
  font-weight: 600;
}

/* ---------- nav: sticker bar ---------- */
nav {
  border-bottom: 3px solid #000 !important;
  height: 64px !important;
  padding: 0 28px !important;
}

.nav-brand,
.nav-brand-root,
.nav-brand-page {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
}

/* Logos / artwork: display as-is (source files are opaque JPGs /
   banners with baked-in backgrounds, so no white sticker box). */
.nav-brand-icon,
.nav-brand-icon img,
.footer-logo-small {
  border-radius: 8px !important;
  background: transparent;
}

.hero-logo,
.hero-image {
  background: transparent;
  border: none !important;
  box-shadow: none !important;
}

.nav-links {
  gap: 8px !important;
  background: transparent;
}

.nav-links a,
.nav-links li a {
  border: 2px solid transparent !important;
  border-radius: var(--round-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  padding: 7px 16px !important;
}

.nav-links a:hover,
.nav-links li a:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: #000 !important;
  box-shadow: var(--shadow-pop-sm) !important;
  transform: translate(-1px, -1px);
  text-decoration: none !important;
}

.nav-links a.active,
.nav-links a.nav-active {
  background: var(--accent, var(--yellow, #f5c842)) !important;
  color: #111 !important;
  border-color: #000 !important;
  box-shadow: var(--shadow-pop-sm) !important;
}

.nav-mobile-toggle {
  border: 2px solid #000 !important;
  border-radius: 12px !important;
  padding: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 3px 3px 0 #000 !important;
}

.nav-mobile-bar {
  border-radius: 999px !important;
  height: 3px !important;
}

nav.nav-open .nav-links {
  border-bottom: 3px solid #000 !important;
  border-radius: 0 0 20px 20px !important;
  gap: 8px !important;
}

/* ---------- buttons: chunky bubbles, NO hover/click motion ---------- */
.btn-primary,
.btn-secondary,
.btn,
.contact-link,
.next-card,
a.btn-primary,
a.btn-secondary {
  border: 2px solid #000 !important;
  border-radius: var(--round-pill) !important;
  box-shadow: var(--shadow-pop) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  padding: 12px 26px !important;
}

.btn-primary,
.btn.btn-primary,
a.btn-primary {
  /* static tilt removed so hover looks identical */
}

.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:active,
.btn.btn-primary:active,
.btn-secondary:hover,
.btn.btn-secondary:hover,
.contact-link:hover,
.btn-secondary:active,
.contact-link:active {
  box-shadow: var(--shadow-pop) !important;
  text-decoration: none !important;
  filter: none !important;
}

.btn-secondary,
.btn.btn-secondary,
.contact-link,
a.btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-primary) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
.contact-link:hover {
  border-color: #000 !important;
  color: var(--text-primary) !important;
}

/* ---------- hero logo: floating sticker ---------- */
.hero-logo,
.hero-image {
  animation: cartoon-float 3.4s ease-in-out infinite;
}

@keyframes cartoon-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-9px) rotate(1.5deg); }
}

/* ---------- stats bar: sticker strip ---------- */
.stats-bar {
  border-top: 3px solid #000 !important;
  border-bottom: 3px solid #000 !important;
  padding: 18px !important;
}

.stats-inner {
  gap: 14px !important;
}

.stat-item {
  border: 2px solid #000 !important;
  border-radius: var(--round-lg) !important;
  box-shadow: var(--shadow-pop) !important;
  background: var(--bg-raised) !important;
  padding: 18px 24px !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}

.stat-item:hover {
  transform: translate(-2px, -2px) rotate(-0.6deg) !important;
  box-shadow: 6px 6px 0 #000 !important;
}

.stat-value {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

/* ---------- plugin cards: toy boxes ---------- */
.plugins-grid {
  gap: 24px !important;
}

.plugin-card {
  border: 2px solid #000 !important;
  border-radius: var(--round-lg) !important;
  box-shadow: var(--shadow-pop) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.plugin-card:nth-child(odd) {
  transform: rotate(-0.4deg);
}

.plugin-card:nth-child(even) {
  transform: rotate(0.4deg);
}

.plugin-card:hover {
  transform: translateY(-6px) rotate(0deg) scale(1.01) !important;
  box-shadow: 8px 8px 0 #000 !important;
}

.plugin-card-icon {
  border-radius: 16px !important;
  background: transparent;
}

.plugin-card-name {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 20px !important;
}

.plugin-tag,
.compat-tag,
.badge {
  border: 2px solid #000 !important;
  border-radius: var(--round-pill) !important;
  box-shadow: 2px 2px 0 #000 !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
}

.plugin-card-link {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  background: var(--accent, var(--yellow, #f5c842));
  color: #111 !important;
  border: 2px solid #000;
  border-radius: var(--round-pill);
  box-shadow: 3px 3px 0 #000;
  padding: 6px 16px;
  display: inline-flex !important;
  width: fit-content;
}

.plugin-card:hover .plugin-card-link {
  box-shadow: 3px 3px 0 #000;
}

/* ---------- docs: sidebar pills, chunky content ---------- */
.sidebar-nav a {
  border: 2px solid transparent !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}

.sidebar-nav a:hover {
  border-color: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  transform: translateX(2px);
}

.sidebar-nav a.active {
  border-color: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  font-weight: 800 !important;
  transform: rotate(-0.5deg);
}

.sidebar-label,
.doc-breadcrumb,
.code-block-label,
.cmd-stat-label,
.stat-label,
.next-card-label,
.footer-col h4 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

.step-num {
  border: 2px solid #000 !important;
  box-shadow: 2px 2px 0 #000 !important;
  font-weight: 800 !important;
  width: 32px !important;
  height: 32px !important;
}

.code-block,
.req-table,
.cmd-table,
.cmd-stat-box,
.callout,
.browse-bar,
.next-card,
.content-section .callout,
.compat-list,
.contact-section,
.doc-header {
  border-radius: var(--round-md) !important;
}

.code-block,
.req-table,
.cmd-table,
.browse-bar,
.next-card,
.contact-section,
.cmd-stat-box {
  border: 2px solid #000 !important;
  box-shadow: var(--shadow-pop) !important;
  overflow: hidden;
}

.browse-bar:hover,
.next-card:hover {
  transform: translate(-2px, -2px) rotate(-0.3deg) !important;
  box-shadow: 6px 6px 0 #000 !important;
}

.browse-bar-icon {
  opacity: 1 !important;
  background: transparent;
  padding: 6px;
}

.callout {
  border: 2px solid #000 !important;
  box-shadow: var(--shadow-pop-sm) !important;
}

.callout.callout-tip { transform: rotate(-0.3deg); }
.callout.callout-note { transform: rotate(0.3deg); }
.callout.callout-warning { transform: rotate(-0.5deg); }

.req-table th,
.cmd-table thead th {
  font-family: var(--font-display) !important;
}

/* ---------- inputs: squishy search bars ---------- */
.browse-search-input,
.cmd-search-input,
input[type="text"],
input[type="search"] {
  border: 2px solid #000 !important;
  border-radius: var(--round-pill) !important;
  box-shadow: 3px 3px 0 #000 !important;
  font-weight: 700 !important;
  padding: 12px 16px 12px 42px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.browse-search-input:focus,
.cmd-search-input:focus {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #000 !important;
  outline: 3px solid var(--accent, var(--yellow, #f5c842)) !important;
  outline-offset: 1px;
}

/* ---------- content sections get sticker headers ---------- */
.content-section h2::after,
.plugins-header h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 8px;
  margin: 12px auto 0;
  border: 2px solid #000;
  border-radius: 999px;
  background: var(--accent, var(--yellow, #f5c842));
  box-shadow: 2px 2px 0 #000;
  transform: rotate(-1deg);
}

.content-section,
.plugins-section {
  position: relative;
}

/* ---------- footer: chunky sticker footer ---------- */
footer {
  border-top: 3px solid #000 !important;
}

.footer-logo::before {
  content: "★" !important;
  font-size: 16px !important;
}

.footer-col a {
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: -8px;
  font-weight: 700 !important;
}

.footer-col a:hover {
  background: rgba(255, 255, 255, 0.08);
  outline: 2px solid #000;
  text-decoration: none !important;
}

.footer-version {
  border: 2px solid #000 !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 #000 !important;
  font-weight: 800 !important;
}

.footer-bottom {
  border-top: 2px dashed rgba(255, 255, 255, 0.16) !important;
}

.footer-logo-small {
  animation: cartoon-spin-hover 0.5s ease;
}

@keyframes cartoon-spin-hover {
  from { transform: rotate(0); }
}

/* ---------- error page / misc ---------- */
.error-code {
  display: inline-block;
  border: 2px solid #000;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #000;
  background: var(--accent, #58a6ff);
  color: #111 !important;
  font-weight: 800 !important;
  padding: 6px 18px !important;
}

.path {
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 10px 16px;
  display: inline-block;
}

/* ---------- playful selection + scrollbar ---------- */
::selection {
  background: var(--accent, #f5c842);
  color: #111;
}

::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--bg-raised);
  border: 2px solid #000;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent, #f5c842); }

/* ---------- reduced motion: keep it calm ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-image { animation: none; }
  * { transition: none !important; }
}

/* ---------- mobile: keep chunk intact ---------- */
@media (max-width: 680px) {
  nav { padding: 0 16px !important; }
  .stats-inner { gap: 10px !important; }
  .hero h1 span { transform: rotate(-1deg); }
  .btn-primary, .btn-secondary, .btn {
    width: 100%;
    text-align: center;
  }
}