/* Navigation-specific styles for Django CMS Navigation feature
 * Feature: 005-cms-navigation
 *
 * This file contains custom styles that extend or override Mizzle theme defaults.
 * Most navigation styling is handled by Bootstrap 5 and Mizzle theme CSS.
 */

/* Override default font with Instrument Sans */
:root {
  --bs-body-font-family: "Instrument Sans", sans-serif;
  /* Override green active color with primary color */
  --bs-navbar-active-color: #1E9CAD !important;
  --bs-navbar-hover-color: #1E9CAD !important;
}

/* Ensure navbar active/hover states use primary color */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--bs-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-primary) !important;
}

body {
  font-family: "Instrument Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Instrument Sans", sans-serif;
}

/* Logo sizing */
.navbar-brand-item {
  height: 36px;
  width: auto;
}

/* Logo visibility based on theme */
[data-bs-theme="light"] .dark-mode-item,
[data-bs-theme="dark"] .light-mode-item {
  display: none !important;
}

[data-bs-theme="light"] .light-mode-item,
[data-bs-theme="dark"] .dark-mode-item {
  display: block !important;
}

/* Auto theme (system preference) */
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme="light"]) .light-mode-item {
    display: none !important;
  }
  html:not([data-bs-theme="light"]) .dark-mode-item {
    display: block !important;
  }
}

@media (prefers-color-scheme: light) {
  html:not([data-bs-theme="dark"]) .dark-mode-item {
    display: none !important;
  }
  html:not([data-bs-theme="dark"]) .light-mode-item {
    display: block !important;
  }
}

/* Breadcrumb styles */
.breadcrumb-nav {
  background-color: var(--bs-light);
}

.breadcrumb-dots .breadcrumb-item + .breadcrumb-item::before {
  content: "\2022";
  color: var(--bs-secondary);
}

.breadcrumb-dots .breadcrumb-item a {
  color: var(--bs-body-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-dots .breadcrumb-item a:hover {
  color: var(--bs-primary);
}

.breadcrumb-dots .breadcrumb-item.active {
  color: var(--bs-secondary);
}

.breadcrumb-dots .breadcrumb-item i {
  font-size: 0.875rem;
}