/* =========================
   Typography
========================= */
html, body {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  color: #333;
}
h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  color: #222;
  margin-top: 1.2em;
}
code, pre {
  font-family: 'Fira Code', monospace !important;
}

/* =========================
   Sidebar (structure & look)
========================= */
.sidebar {
  width: 320px !important;
  background: linear-gradient(180deg, #B03C70 0%, #FFD1DC 100%);
  color: #fff;
  padding: 2rem 1.5rem;
  box-shadow: 2px 0 10px rgba(0,0,0,0.08);
  display: flex;               /* ensure full-height column */
  flex-direction: column;
}
.sidebar-inner {
  display: flex;               /* lets the footer push to bottom */
  flex-direction: column;
  height: 100%;
}

/* Branding text refinements */
.sidebar h1 {
  font-size: 1.6rem;
  margin: 0 0 .5rem 0;
}
.sidebar-desc,
.sidebar p {
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.9;
  margin: 0;
}

/* Footer pinned to bottom */
.sidebar-footer {
  margin-top: auto;            /* key line: pushes footer down */
  font-size: 0.85rem;
  opacity: 0.9;
}
#visitor-count {
  color: #fff;          /* full white for max contrast */

}

/* Optional: link appearance in sidebar */
.sidebar a {
  color: #fff;
  text-decoration: none;
}
.sidebar a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* =========================
   Main content area
========================= */
@media (min-width: 48em) {
  .content {
    margin-left: 320px !important;   /* match sidebar width */
    padding: 3rem 2rem;
    max-width: 820px;
  }
  .layout-reverse .content {
    margin-left: 0 !important;
    margin-right: 320px !important;
  }
}

/* =========================
   (Optional) Minimal CTA button
========================= */
.btn-primary {
  display: inline-block;
  background: #B03C70;
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background .18s ease;
}
.btn-primary:hover { background: #932e5d; }