/* ==========================================================================
   NERDSINBLACK (NIB) THEME FOR RATHENA DOCUMENTATION (PT-BR)
   Dark Deep (#030303, #0a0a0a), Gold & Yellow Accents (#f5c518, #ffd700)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --black-deep: #030303;
  --black-primary: #0a0a0a;
  --black-secondary: #111111;
  --black-card: #161616;
  --black-card-hover: #1f1f1f;
  --black-code: #0d0d0d;
  --yellow-primary: #f5c518;
  --yellow-glow: #ffd700;
  --yellow-light: #fff3c4;
  --white: #ffffff;
  --white-off: #e0e0e0;
  --gray-light: #b0b0b0;
  --gray-mid: #888888;
  --gray-dark: #262626;
  --green-on: #3ddc84;
  --red-off: #e63946;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-yellow: rgba(245, 197, 24, 0.35);
  --shadow-yellow: 0 0 24px rgba(245, 197, 24, 0.18);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.6);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--black-primary) !important;
  color: var(--white-off) !important;
  line-height: 1.6;
  min-height: 100vh;
}

/* Top Bar */
.top-bar {
  background: var(--black-deep);
  border-bottom: 1px solid var(--border-subtle);
  padding: 6px 0;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}
.top-bar .container {
  max-width: 1280px; margin: 0 auto; padding: 0 20px;
  display: flex; justify-content: space-between; align-items: center;
}
.top-bar .trending {
  display: flex; align-items: center; gap: 8px;
  color: var(--yellow-primary); font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.85rem;
}
.top-bar .trending i { animation: pulse-fire 1.2s infinite; }
@keyframes pulse-fire {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
.top-bar .social-top a {
  color: var(--gray-light); margin-left: 14px; font-size: 0.85rem; text-decoration: none;
  transition: color var(--transition-fast);
}
.top-bar .social-top a:hover { color: var(--yellow-primary); }

/* Main Header */
.main-header {
  background: var(--black-secondary) !important;
  border-bottom: 2px solid var(--border-yellow) !important;
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.main-header .container {
  max-width: 1280px; margin: 0 auto; padding: 12px 20px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-icon {
  width: 44px; height: 44px; background: var(--yellow-primary);
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--black-deep); font-weight: 900;
  transition: all var(--transition-smooth);
}
.logo:hover .logo-icon { transform: rotate(-5deg) scale(1.08); }
.logo-text {
  font-family: 'Bebas Neue', sans-serif; font-size: 2rem;
  letter-spacing: 2px; color: var(--white); line-height: 1;
}
.logo-text span { color: var(--yellow-primary); }
.logo-sub {
  font-size: 0.65rem; letter-spacing: 2px; color: var(--gray-mid);
  display: block; font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase;
}

.main-nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.main-nav a {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.95rem;
  letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
  color: var(--white-off); padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent; transition: all var(--transition-fast);
  display: inline-flex; align-items: center; gap: 6px;
}
.main-nav a:hover { color: var(--yellow-primary); border-color: var(--border-yellow); }
.main-nav a.active { background: var(--yellow-primary); color: var(--black-deep); font-weight: 800; }

.search-trigger-btn {
  background: rgba(245, 197, 24, 0.15) !important;
  color: var(--yellow-primary) !important;
  border: 1px solid var(--border-yellow) !important;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.95rem;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--transition-fast);
}
.search-trigger-btn:hover {
  background: var(--yellow-primary) !important;
  color: var(--black-deep) !important;
  box-shadow: var(--shadow-yellow);
}

/* Sidebar */
#sidebar {
  background: var(--black-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--white-off) !important;
}
#sidebar h2 {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--yellow-primary) !important;
  border-bottom: 1px solid var(--border-yellow);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.sidebar-scroll::-webkit-scrollbar,
#rathena-topic-list::-webkit-scrollbar,
#show-case-list::-webkit-scrollbar,
#filterableList::-webkit-scrollbar {
  width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-track,
#rathena-topic-list::-webkit-scrollbar-track,
#show-case-list::-webkit-scrollbar-track,
#filterableList::-webkit-scrollbar-track {
  background: #0d0d0d;
  border-radius: 6px;
}
.sidebar-scroll::-webkit-scrollbar-thumb,
#rathena-topic-list::-webkit-scrollbar-thumb,
#show-case-list::-webkit-scrollbar-thumb,
#filterableList::-webkit-scrollbar-thumb {
  background: var(--yellow-primary);
  border-radius: 6px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover,
#rathena-topic-list::-webkit-scrollbar-thumb:hover,
#show-case-list::-webkit-scrollbar-thumb:hover,
#filterableList::-webkit-scrollbar-thumb:hover {
  background: var(--yellow-glow);
}

.sidebar-link {
  color: var(--gray-light) !important;
  text-decoration: none;
  font-size: 0.88rem;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  display: block;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}
.sidebar-link:hover {
  background: rgba(245, 197, 24, 0.12) !important;
  color: var(--yellow-primary) !important;
  border-left-color: var(--yellow-primary);
}
.sidebar-link.active, .active {
  background: var(--yellow-primary) !important;
  color: var(--black-deep) !important;
  font-weight: 700 !important;
  border-left-color: var(--white) !important;
}

/* Content Container & Card */
#content-display, .bg-white {
  background-color: var(--black-card) !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--white-off) !important;
  border-radius: var(--radius-md) !important;
}
.shadow-md, .shadow-lg {
  box-shadow: var(--shadow-card) !important;
}
.rounded-lg {
  border-radius: var(--radius-md) !important;
}

/* Typography in Content */
h1, .text-3xl {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 1.5px !important;
  color: var(--white) !important;
  line-height: 1.2;
}
h2, .text-2xl {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  color: var(--yellow-primary) !important;
}
h3, .text-xl {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  color: var(--white) !important;
}
.text-gray-800, .text-gray-900 {
  color: var(--white) !important;
}
.text-gray-700, .text-gray-600 {
  color: var(--white-off) !important;
}
.text-gray-500 {
  color: var(--gray-light) !important;
}
hr {
  border-color: var(--border-subtle) !important;
}

/* Code and Pre */
code {
  background: rgba(245, 197, 24, 0.14) !important;
  color: var(--yellow-glow) !important;
  border: 1px solid var(--border-yellow) !important;
  padding: 2px 7px !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Consolas', monospace !important;
  font-size: 0.88em !important;
}
pre {
  display: none;
}

/* Ace Editor */
.ace-editor-instance {
  border: 1px solid var(--border-yellow) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
}
.pre_container {
  background: var(--black-code) !important;
  border: 1px solid var(--border-yellow) !important;
  border-radius: var(--radius-sm) !important;
  margin: 16px 0 !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.pre_container > div:first-child {
  color: var(--yellow-primary) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 1px;
}
.copy-button {
  background: var(--yellow-primary) !important;
  color: var(--black-deep) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 14px !important;
  border-radius: 4px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  float: right;
  margin-bottom: 6px;
}
.copy-button:hover {
  background: var(--yellow-glow) !important;
  box-shadow: var(--shadow-yellow) !important;
  transform: translateY(-1px);
}

/* Search Modal */
.modal-overlay {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(8px);
}
.modal-content {
  background: var(--black-card) !important;
  border: 2px solid var(--border-yellow) !important;
  box-shadow: var(--shadow-yellow) !important;
  color: var(--white-off) !important;
  border-radius: var(--radius-md) !important;
}
.modal-content h3 {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  color: var(--yellow-primary) !important;
  letter-spacing: 1px;
}
#filterInput {
  background: #0d0d0d !important;
  border: 1px solid var(--border-yellow) !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem;
  width: 100%;
}
#filterInput:focus {
  outline: none;
  box-shadow: var(--shadow-yellow);
}
#filterableList li a {
  color: var(--gray-light) !important;
  padding: 8px 12px;
  display: block;
  border-radius: 4px;
  transition: all 0.2s;
  text-decoration: none;
}
#filterableList li a:hover {
  background: rgba(245, 197, 24, 0.15) !important;
  color: var(--yellow-primary) !important;
}
#closeModalBtn {
  color: var(--gray-light) !important;
  transition: color 0.2s;
}
#closeModalBtn:hover {
  color: var(--yellow-primary) !important;
}

/* Site Footer */
.site-footer {
  background: var(--black-deep);
  border-top: 2px solid var(--border-yellow);
  padding: 22px 0;
  margin-top: 40px;
  text-align: center;
  color: var(--gray-mid);
  font-size: 0.8rem;
}
.site-footer strong {
  color: var(--white);
}

/* Links inside articles */
article a, #content-display a {
  color: var(--yellow-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
article a:hover, #content-display a:hover {
  color: var(--yellow-glow);
  text-decoration: underline;
}

/* Lists */
ul.list-disc {
  color: var(--white-off);
}
ul.list-disc li {
  margin-bottom: 6px;
}

/* Video & Media */
video, img {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  max-width: 100%;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  #sidebar {
    display: block !important;
    width: 20rem !important;
  }
}