/* ================================
   RuneScape Modern UI Theme
   STABLE • MODERN • READABLE
================================ */

:root {
  --bg: #0f0f0f;
  --panel: #181818;
  --panel-2: #141414;
  --border: #2a2a2a;
  --text: #f2f2f2;
  --muted: #b0b0b0;
  --gold: #d4af37;

  --font-display: "Cinzel", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ================================
   BASE
================================ */

html, body {
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* RESTORED */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: #e0e0e0;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* ================================
   NAVBAR
================================ */

.rs-navbar {
  background-color: var(--panel-2);
  border-bottom: 1px solid var(--border);
}

.rs-navbar .navbar-brand {
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 1rem;
}

/* Nav links */
.rs-navbar .nav-link {
  color: #d6d6d6;
  font-size: 0.9rem;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  transition: background 120ms ease, color 120ms ease;
}

.rs-navbar .nav-link:hover {
  background: rgba(255,255,255,0.04);
  color: #ffffff;
}

/* ================================
   NAVBAR TOGGLER (FIXED)
================================ */

.navbar-toggler {
  border: none;
  padding: 0.18rem 0.35rem;
  border-radius: 8px;
  background: transparent;
  transition: background 120ms ease, transform 80ms ease;
  box-shadow: none;
  height: 36px;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  box-shadow: none;
  outline: none;
}

.navbar-toggler-icon {
  filter: none;
  opacity: 0.95;
  width: 20px;
  height: 20px;
}

/* On hover show subtle gold highlight and color the icon */
.navbar-toggler:hover {
  background: transparent;
}

.navbar-toggler:hover .navbar-toggler-icon {
  color: var(--gold) !important;
  opacity: 1;
  transition: color 120ms ease, opacity 120ms ease;
}

/* ================================
   TYPOGRAPHY (TARGETED, NOT GLOBAL)
================================ */

p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.rs-subtitle {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

strong {
  color: #ffffff;
  font-weight: 600;
}

/* ================================
   CARDS (CHART-SAFE)
================================ */

.card {
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.25px;
  color: #ffffff;
}

/* ================================
   HERO
================================ */

.home-hero {
  padding: 56px 0 40px;
  background: linear-gradient(180deg, #141414 0%, transparent 80%);
}

.home-title {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  color: var(--gold);
}

.home-subtitle {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  color: var(--muted);
}

/* ================================
   BUTTONS (BOOTSTRAP-SAFE RESET)
================================ */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.6rem 1.05rem;
  border-radius: 9px;
  border: 1px solid var(--border);
  background-color: var(--panel-2);
  color: #d6d6d6;
  min-height: 40px;
  box-shadow: none;
}

.btn:hover {
  background-color: #1e1e1e;
  color: #ffffff;
  border-color: var(--border);
}

.btn:focus,
.btn:focus-visible,
.btn:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
}

/* Primary */
.btn-primary {
  background: linear-gradient(
    180deg,
    #e6c75f 0%,
    var(--gold) 60%,
    #b7952e 100%
  );
  color: #0f0f0f;
  border-color: var(--gold);
}

.btn-primary:hover {
  box-shadow: 0 0 12px rgba(212,175,55,0.35);
}

/* ================================
   TIME RANGE BUTTONS
================================ */

.rs-time-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rs-time-toggle .btn {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
}

.rs-time-toggle .btn.active {
  background: linear-gradient(
    180deg,
    #e6c75f 0%,
    var(--gold) 65%,
    #b7952e 100%
  );
  color: #0f0f0f;
  border-color: var(--gold);
}

.rs-data-notice {
  color: #acacac;
  font-size: 12px;
  font-weight: 500;
}

/* ================================
   CHART SAFETY
================================ */

.chart-container {
  height: 260px;
  position: relative;
}

canvas {
  display: block;
}

/* ================================
   INFO CARD
================================ */

.rs-info-card {
  background: linear-gradient(180deg, #191919 0%, #141414 100%);
}

.rs-info-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
}

.rs-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #101010;
  color: #d6d6d6;
}

/* ================================
   OFFCANVAS NAV
================================ */

.offcanvas,
.offcanvas.text-bg-dark {
  background-color: var(--panel-2) !important;
  color: var(--text);
}

.offcanvas-header {
  border-bottom: 1px solid var(--border);
}

.offcanvas-title {
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
}

.offcanvas .nav-link {
  color: var(--muted);
  border-radius: 8px;
}

.offcanvas .nav-link:hover {
  background-color: var(--panel);
  color: #ffffff;
}

/* ================================
   RESPONSIVE
================================ */

@media (min-width: 768px) {
  .home-title {
    font-size: 2.4rem;
  }

  .chart-container {
    height: 320px;
  }
}

@media (min-width: 992px) {
  .home-title {
    font-size: 2.7rem;
  }

  .chart-container {
    height: 360px;
  }

  .rs-navbar .navbar-brand {
    font-size: 1.1rem;
  }
}

/* ================================
   ICON ALIGN
================================ */

.bi {
  vertical-align: -0.125em;
}