/* ========================================
   TYPOGRAPHY SYSTEM - System Fonts Optimized
   ========================================

   Using native system fonts for optimal performance and compatibility.
   No external CDN dependencies - eliminates tracking prevention issues.

   Font stack:
   - macOS/iOS: -apple-system (SF Pro)
   - Windows: Segoe UI
   - Android: Roboto
   - Linux: 'Helvetica Neue', Arial
   - Fallback: sans-serif

   Weight usage guide:
   - 300 (Light): Subtle text, large headings
   - 400 (Regular): Body text, paragraphs
   - 500 (Medium): Buttons, labels, emphasized text
   - 600 (Semibold): Subheadings, card titles, navigation
   - 700 (Bold): Main headings, important CTAs
   - 800 (Extrabold): Hero text, major headings

   Letter-spacing:
   - Headings: -0.02em (tighter tracking)
   - Buttons/Labels: -0.01em (slightly tighter)
   - Body: default (optimal for system fonts)
   ======================================== */

/* CSS Variables for consistent typography */
:root {
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.navbar-brand {
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em; /* Tighter tracking for Inter - more modern look */
}

/* Typography Utilities - Optimized for Inter */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em; /* Tighter tracking for headings */
  line-height: 1.2;
}

h1, .h1 { font-weight: var(--font-weight-bold); }
h2, .h2 { font-weight: var(--font-weight-bold); }
h3, .h3 { font-weight: var(--font-weight-semibold); }

/* Button text - Medium weight for Inter looks great */
.btn {
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
}

/* Form labels */
label, .form-label {
  font-weight: var(--font-weight-medium);
}

/* Card titles */
.card-title {
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

.dropdown-menu {
  animation: fadeInDown 0.15s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Language Switcher Styles */
#languageDropdown {
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s ease;
}

#languageDropdown:hover {
  color: #ffd700 !important;
}

#languageDropdown .bi-globe {
  font-size: 1.1rem;
  margin-right: 4px;
}


/* Language dropdown - tamna pozadina, svetao tekst, bez gradijenata */
.dropdown-menu .dropdown-item {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: var(--font-weight-normal);
  background: #181a1b !important;
  color: #f8f9fa !important;
  border: none;
  transition: background 0.2s, color 0.2s;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: #23272b !important;
  color: #fff !important;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item.fw-bold {
  background: #23272b !important;
  color: #fff !important;
  font-weight: var(--font-weight-bold);
}
.dropdown-menu .dropdown-item .bi-check2 {
  color: #4fc3f7 !important;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

footer a {
  transition: opacity 0.2s ease;
}

footer a:hover {
  opacity: 0.8;
}