/* ========================================================================
   GLOBAL THEME - Samaritans For The Nation
   Professional, Modern, Corporate Design System
   ======================================================================== */

/* ========================================================================
   CSS VARIABLES - Color Palette & Design Tokens
   ======================================================================== */
:root {
  /* Primary Colors */
  --color-primary: #0e1b2c;           /* Dark Navy - Primary brand color */
  --color-secondary: #007cc1;          /* Blue - Secondary/accent color */
  --color-accent: #c9a961;             /* Gold - Subtle accents only */
  --color-white: #ffffff;              /* Pure white */
  
  /* Shades & Variations */
  --color-primary-light: #1a2d42;      /* Lighter navy */
  --color-primary-dark: #060d16;       /* Darker navy */
  --color-secondary-light: #0095e8;    /* Lighter blue */
  --color-secondary-dark: #005a8d;     /* Darker blue */
  --color-accent-light: #d9b971;       /* Lighter gold */
  --color-accent-dark: #b9994d;        /* Darker gold */
  
  /* Neutral Colors */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  
  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  /* Typography Colors */
  --color-text-primary: #0e1b2c;
  --color-text-secondary: #1a202c;
  --color-text-light: #6b7280;
  --color-text-inverse: #ffffff;
  
  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-dark: #0e1b2c;
  --color-bg-light-blue: #d7f2ff;
  
  /* Border Colors */
  --color-border-light: #e5e7eb;
  --color-border-medium: #d1d5db;
  --color-border-dark: #9ca3af;
  --color-border-accent: #c9a961;
  
  /* Shadow Tokens */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Typography System */
  --font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-serif: 'Georgia', 'Times New Roman', serif; /* Fallback for special cases */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Font Sizes - Professional Scale */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */
  --font-size-7xl: 4.5rem;      /* 72px */
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 1.8;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  
  /* Spacing Scale */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 2.5rem;    /* 40px */
  --spacing-3xl: 3rem;      /* 48px */
  --spacing-4xl: 4rem;      /* 64px */
  --spacing-5xl: 5rem;      /* 80px */
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-base: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================================
   BASE TYPOGRAPHY
   ======================================================================== */

/* Import Professional Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Base Body Styles */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading Styles - Professional Scale */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  letter-spacing: var(--letter-spacing-tight);
}

h1, .h1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

h3, .h3 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

h4, .h4 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

h5, .h5 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

h6, .h6 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

/* Paragraph Styles */
p {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

/* Large Paragraph */
p.lead,
.lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-loose);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

/* Small Text */
small,
.text-small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* Extra Small Text */
.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

/* Strong/Bold Text */
strong,
b {
  font-weight: var(--font-weight-bold);
}

/* Emphasis */
em,
i {
  font-style: italic;
}

/* ========================================================================
   LINK STYLES
   ======================================================================== */
a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-weight: var(--font-weight-medium);
}

a:hover,
a:focus {
  color: var(--color-secondary-dark);
  text-decoration: none;
}

a:active {
  color: var(--color-secondary-dark);
}

/* Link with Underline */
a.link-underline {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a.link-underline:hover {
  text-decoration-color: var(--color-secondary);
}

/* Primary Link */
a.link-primary {
  color: var(--color-primary);
}

a.link-primary:hover {
  color: var(--color-secondary);
}

/* ========================================================================
   BUTTON STYLES - Professional & Consistent
   ======================================================================== */
.btn,
button.btn,
a.btn {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-wide);
}

/* Primary Button */
.btn-primary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Outline Button */
.btn-outline,
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* Button with Gold Accent Border */
.btn-accent {
  background-color: var(--color-white);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* Button Sizes */
.btn-sm {
  font-size: var(--font-size-sm);
  padding: 0.5rem 1rem;
}

.btn-lg {
  font-size: var(--font-size-lg);
  padding: 0.75rem 2rem;
}

/* ========================================================================
   UTILITY CLASSES - Colors
   ======================================================================== */

/* Text Colors */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-white { color: var(--color-white) !important; }
.text-gray-500 { color: var(--color-gray-500) !important; }
.text-gray-600 { color: var(--color-gray-600) !important; }
.text-gray-700 { color: var(--color-gray-700) !important; }

/* Background Colors */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-light { background-color: var(--color-bg-secondary) !important; }
.bg-light-blue { background-color: var(--color-bg-light-blue) !important; }

/* Border Colors */
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-accent { border-color: var(--color-accent) !important; }
.border-light { border-color: var(--color-border-light) !important; }

/* ========================================================================
   COMPONENT STANDARDIZATION
   ======================================================================== */

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card h3,
.card h4,
.card h5 {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Accent Borders (Gold) */
.accent-border-left {
  border-left: 4px solid var(--color-accent);
}

.accent-border-top {
  border-top: 4px solid var(--color-accent);
}

.accent-border-bottom {
  border-bottom: 4px solid var(--color-accent);
}

/* Icons - with Gold Accent */
.icon-accent {
  color: var(--color-accent);
}

.icon-primary {
  color: var(--color-primary);
}

.icon-secondary {
  color: var(--color-secondary);
}

/* Lists with Icons */
.list-icon li::before,
.list-styled li::before {
  color: var(--color-secondary);
}

/* Dividers */
hr,
.divider {
  border: 0;
  border-top: 1px solid var(--color-border-light);
  margin: var(--spacing-xl) 0;
}

hr.divider-accent {
  border-top-color: var(--color-accent);
  border-top-width: 2px;
}

/* ========================================================================
   FORM ELEMENTS - Standardized
   ======================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select,
.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  padding: 0.625rem 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(0, 124, 193, 0.1);
}

/* Labels */
label,
.form-label {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

/* ========================================================================
   RESPONSIVE TYPOGRAPHY
   ======================================================================== */
@media (max-width: 1024px) {
  :root {
    --font-size-5xl: 2.5rem;    /* 40px */
    --font-size-4xl: 2rem;      /* 32px */
    --font-size-3xl: 1.75rem;   /* 28px */
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-5xl: 2rem;      /* 32px */
    --font-size-4xl: 1.75rem;   /* 28px */
    --font-size-3xl: 1.5rem;    /* 24px */
    --font-size-2xl: 1.375rem;  /* 22px */
  }
  
  body {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-5xl: 1.75rem;   /* 28px */
    --font-size-4xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.375rem;  /* 22px */
  }
}

/* ========================================================================
   SECTION BACKGROUNDS
   ======================================================================== */
.section-dark {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
  color: var(--color-white);
}

.section-dark p {
  color: rgba(255, 255, 255, 0.9);
}

.section-light {
  background-color: var(--color-bg-secondary);
}

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

/* ========================================================================
   NAVIGATION & HEADER - Color Standardization
   ======================================================================== */
#header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
}

#header .logo {
  transition: opacity var(--transition-base);
}

#header nav a,
#mainMenu > li > a {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

#header nav a:hover,
#mainMenu > li > a:hover {
  color: var(--color-secondary);
}

/* Active/Current Navigation */
#mainMenu > li.active > a,
#mainMenu > li.current > a {
  color: var(--color-secondary);
}

/* ========================================================================
   FOOTER - Color Standardization
   ======================================================================== */
#footer {
  background-color: var(--color-primary);
  color: var(--color-white);
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6 {
  color: var(--color-white);
}

#footer p {
  color: rgba(255, 255, 255, 0.85);
}

#footer a {
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-medium);
}

#footer a:hover {
  color: var(--color-accent);
}

/* ========================================================================
   SOCIAL ICONS - Consistent Styling
   ======================================================================== */
.social-icons li a {
  color: var(--color-primary);
  background-color: transparent;
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.social-icons li a:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  transform: translateY(-2px);
}

/* Gold Accent for Special Icons */
.social-icons.accent li a:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ========================================================================
   SPACING UTILITIES
   ======================================================================== */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--spacing-xs) !important; }
.pt-2 { padding-top: var(--spacing-sm) !important; }
.pt-3 { padding-top: var(--spacing-md) !important; }
.pt-4 { padding-top: var(--spacing-lg) !important; }
.pt-5 { padding-top: var(--spacing-xl) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--spacing-xs) !important; }
.pb-2 { padding-bottom: var(--spacing-sm) !important; }
.pb-3 { padding-bottom: var(--spacing-md) !important; }
.pb-4 { padding-bottom: var(--spacing-lg) !important; }
.pb-5 { padding-bottom: var(--spacing-xl) !important; }

/* ========================================================================
   PRINT STYLES
   ======================================================================== */
@media print {
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: #000;
    page-break-after: avoid;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
}

/* ========================================================================
   END OF GLOBAL THEME
   ======================================================================== */

/* Global Paragraph Update 
   User requested paragraphs to not be dull. 
   Applying darker and denser text colors globally to p tags. 
*/
p {
  color: #1a202c !important; 
}

p, .project-description {
  color: #1a202c !important; 
}