/* Estilos Personalizados com a paleta da logo */
:root {
  /* Cor primária extraída da logo (Azul Ciano) */
  --primary-color: #00aeef;
  --primary-rgb: 0, 174, 239;
  --darker-blue: #007ba7;
  /* Um azul mais escuro para gradientes */
  --dark-blue: #0d2b4f;
  --light-gray: #f0f2f5;
  --medium-gray: #e9ecef;

  --bs-primary: var(--primary-color);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-body-font-family: 'Inter', sans-serif;

  --sidebar-width-expanded: 260px;
  --sidebar-width-collapsed: 80px;
  --top-navbar-height: 60px;
}

body {
  background-color: #f8f9fa;
}

.navbar {
  transition: background-color 0.3s ease-in-out;
}

.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.navbar-brand img {
  height: 40px;
  width: auto;
}

.btn-primary{
  background-color: var(--primary-color);
}

.hero-section {
  padding: 6rem 0;
  background-color: #ffffff;
}

.hero-section .display-5 {
  color: #212529;
}

.hero-section .lead {
  color: #495057;
}

.hero-image {
  max-height: 400px;
  object-fit: cover;
}

.section-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
}

.feature-card {
  border: none;
  background-color: #ffffff;
  border-radius: 0.75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.07);
}

.cta-section {
  /* Gradiente usando a nova paleta de cores */
  background-image: linear-gradient(45deg, var(--darker-blue), var(--primary-color));
  border-radius: 1rem;
}

.search-highlight {
  background-color: yellow;
}

.help-block.error {
  color: red;
}

#panel {
  background-color: var(--light-gray);
  padding-top: var(--top-navbar-height);
  /* Space for fixed top navbar */
}

.sidebar {
  width: var(--sidebar-width-collapsed);
  height: calc(100vh - var(--top-navbar-height));
  position: fixed;
  top: var(--top-navbar-height);
  left: 0;
  background-color: var(--dark-blue);
  transition: width 0.3s ease;
  overflow-x: hidden;
}

.sidebar:hover {
  width: var(--sidebar-width-expanded);
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.5rem;
  white-space: nowrap;
}

.sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.sidebar .nav-link.active {
  background-color: var(--primary-color);
  color: white;
}

.sidebar .nav-link .bi {
  font-size: 1.5rem;
  min-width: 50px;
  text-align: center;
  transition: margin 0.3s ease;
}

.sidebar .link-text {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sidebar:hover .link-text {
  opacity: 1;
  transition-delay: 0.1s;
}

.content {
  margin-left: var(--sidebar-width-collapsed);
  padding: 2rem;
  transition: margin-left 0.3s ease;
}

/* This rule is not needed if we change margin via JS, but with hover it is */
.sidebar:hover~.content {
  margin-left: var(--sidebar-width-expanded);
}

.card {
  border: none;
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.05);
}

.jurisprudence-card {
  border: 1px solid var(--medium-gray);
}

.jurisprudence-card:hover {
  border-color: var(--primary-color);
}

@media (max-width: 992px) {
  /* On smaller screens, the hover effect can be tricky. We might want to handle this differently, but for now, we hide the complex layout. A hamburger menu would be a better approach for mobile. */
}