/* Ctrl-Shift Exchange - Brand Overrides */

/* ============================================
   Base Typography & Body
   ============================================ */
body {
  font-family: var(--theme-font-body);
  color: var(--theme-text-primary);
  background-color: var(--theme-bg-body);
}

/* ============================================
   Navbar & Header
   ============================================ */
.navbar-brand {
  color: var(--theme-primary) !important;
  font-family: var(--theme-font-primary);
  font-weight: 600;
  font-size: 1.1rem;
}

.navbar {
  padding: 0.5rem 0;
}

/* Navbar logo - inline SVG inherits CSS color via currentColor.
   Set light color in dark mode so "Ctrl" text is readable. */
.navbar-logo {
  transition: color 0.2s ease;
}
[data-bs-theme="dark"] .navbar-logo {
  color: var(--theme-text-primary);
}

/* User avatar button */
#userAvatar {
  background-color: var(--theme-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid var(--theme-primary);
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  transition: background-color 0.2s ease;
}
#userAvatar:hover {
  background-color: var(--theme-primary-hover);
  border-color: var(--theme-primary-hover);
  color: #fff;
}
[data-bs-theme="dark"] #userAvatar {
  background-color: #3a4a5a;
  border-color: #4a5a6a;
  color: #e0e0e0;
}
[data-bs-theme="dark"] #userAvatar:hover {
  background-color: #4a5a6a;
  border-color: #5a6a7a;
  color: #fff;
}

/* Header session display */
.anonymous-user small {
  color: var(--theme-text-primary);
  opacity: 0.8;
}
.anonymous-user small code {
  color: var(--theme-primary);
  font-weight: 600;
  background-color: var(--theme-primary-light);
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
}

/* Theme toggle button */
#themeToggleBtn {
  color: var(--theme-text-primary);
  opacity: 0.7;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
#themeToggleBtn:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Page heading */
.njk-heading {
  font-weight: 600;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* ============================================
   Buttons - 6px border-radius per brand style
   ============================================ */
.btn-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  font-family: var(--theme-font-body);
  font-weight: 500;
  border-radius: 6px;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--theme-primary-hover);
  border-color: var(--theme-primary-hover);
}

.btn-outline-primary {
  color: var(--theme-primary);
  border-color: var(--theme-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: #fff;
}

/* ============================================
   Links
   ============================================ */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item) {
  color: var(--theme-primary);
}
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover {
  color: var(--theme-primary-hover);
}

/* ============================================
   Headings
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--theme-font-heading);
  font-weight: 600;
  color: var(--theme-text-heading);
}

/* ============================================
   Cards & Content Spacing
   ============================================ */
.card {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card-header {
  background-color: transparent;
  border-bottom-color: var(--theme-border-color);
  font-family: var(--theme-font-primary);
  font-weight: 600;
}

/* Content area spacing */
main.container-fluid {
  padding: 1.5rem !important;
}
main .row.g-4 > [class*="col"] {
  margin-bottom: 0;
}

/* ============================================
   Badges & Pills
   ============================================ */
.badge.bg-secondary {
  background-color: #5a6c7d !important;
  font-weight: 500;
}

/* ============================================
   Footer
   ============================================ */
footer.footer {
  font-family: var(--theme-font-body);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* ============================================
   Landing Page Hero
   ============================================ */
.cv-hero {
  background: linear-gradient(135deg, #0d1a3a 0%, #1863dc 50%, #0056a7 100%);
  color: #ffffff;
  padding: 4rem 2rem;
  border-radius: 1rem;
  text-align: center;
}
.cv-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #ffffff;
}
.cv-hero .tagline {
  font-family: var(--theme-font-body);
  font-size: 1.25rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}
.cv-hero .btn {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
  color: #0d1a3a;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 2rem;
}
.cv-hero .btn:hover {
  background-color: #2aa8d8;
  border-color: #2aa8d8;
}

/* ============================================
   Navbar Brand - Rosie hover effect (optional via hoverEffect)
   ============================================ */
.rosie-text-hover .site-name {
  transition: color 0.18s ease;
}

.rosie-text-hover:hover .site-name {
  color: var(--color-rosie-pink);
}

[data-bs-theme="dark"] .rosie-text-hover:hover .site-name {
  color: var(--color-rosie-pink-hover, #ff6390);
}

/* ============================================
   Dark Mode Overrides
   ============================================ */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] {
  background-color: var(--theme-bg-body);
  color: var(--theme-text-primary);
}

[data-bs-theme="dark"] .navbar {
  background-color: var(--theme-bg-card) !important;
}

[data-bs-theme="dark"] .navbar-brand {
  color: var(--theme-primary) !important;
}

[data-bs-theme="dark"] header {
  background-color: var(--theme-bg-card) !important;
}

[data-bs-theme="dark"] .njk-heading,
[data-bs-theme="dark"] .njk-title {
  color: var(--theme-text-primary) !important;
}

[data-bs-theme="dark"] .card {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .card-header {
  border-bottom-color: var(--theme-border-color);
}

[data-bs-theme="dark"] #themeToggleBtn {
  color: var(--theme-text-primary);
}

[data-bs-theme="dark"] .anonymous-user small {
  color: var(--theme-text-primary);
}

[data-bs-theme="dark"] .anonymous-user small code {
  color: var(--theme-primary);
  background-color: var(--theme-primary-light);
}

[data-bs-theme="dark"] .btn-outline-primary {
  color: var(--theme-primary);
  border-color: var(--theme-primary);
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--theme-primary);
  color: #fff;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--theme-text-primary) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--theme-bg-card) !important;
}

[data-bs-theme="dark"] .bg-white {
  background-color: var(--theme-bg-card) !important;
}

[data-bs-theme="dark"] .bg-body-secondary {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .shadow-sm {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode hero */
[data-bs-theme="dark"] .cv-hero {
  background: linear-gradient(135deg, #080d1f 0%, #0d3a8a 50%, #002f6b 100%);
}