/* ==========================================================================
   Base & Reset Variables
   ========================================================================== */
:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --color-primary: #0B3C8C;
  --color-primary-dark: #08285F;
  --color-primary-light: #1D5BBF;
  --color-secondary: #B3141B;
  --color-secondary-dark: #8C0B12;
  --color-accent-gold: #D4A017;
  --color-dark-bg: #4A4A4A;
  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ==========================================================================
   Global Element Styles
   ========================================================================== */
body {
  font-family: var(--font-family);
  color: var(--color-slate-700);
  background-color: var(--color-slate-50);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Custom Utility Classes
   ========================================================================== */
.custom-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.text-primary-blue {
  color: var(--color-primary);
}

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

.text-brand-red {
  color: var(--color-secondary);
}

.bg-brand-red {
  background-color: var(--color-secondary);
}

.border-brand-red {
  border-color: var(--color-secondary);
}

.text-gold {
  color: var(--color-accent-gold);
}

.border-gold {
  border-color: var(--color-accent-gold);
}

/* Placeholder Wireframe Image Styling */
.wireframe-img {
  background-color: var(--color-slate-200);
  border: 1px dashed var(--color-slate-400);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-500);
  position: relative;
  text-align: center;
}

/* Line clamp helpers */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Responsive Single-line helper */
@media (min-width: 992px) {
  .text-nowrap-desktop {
    white-space: nowrap !important;
  }
}