/* PrayReps Main Stylesheet */

:root{
    /* TKDP Colors */
    --color-dark:    #2c3e50;
    --color-mid:     #34495e;
    --color-light:   #f8f9fa;
    --color-accent:  #8d2343;
    --color-muted:   #7f8c8d;
    --color-success: #28a745;
    --link-hover:    #00bcd4;
  
    /* Bootstrap functional colors (defaults) */
    --info-color:    #0dcaf0;
    --warning-color: #ffc107;
    --danger-color:  #dc3545;
  
    /* TKDP Typography & Layout */
    --font-serif:    Georgia, serif;
    --font-sans:     'Segoe UI', Roboto, sans-serif;
    --max-width:     800px;
    --radius-md:     8px;
    --shadow-card:   0 4px 12px rgba(0,0,0,.1);
  }
  
  /* Global Styles */
  body {
      font-family: var(--font-sans);
      background: var(--color-light);
      color: #333;
      line-height: 1.6;
  }
  
  /* Navigation */
  .navbar-brand {
      font-weight: 700;
      font-size: 1.5rem;
      letter-spacing: 0.5px; /* from style guide */
  }
  
  .site-header .nav-link{
      color:#f8f9fa !important;
  }
  
  .site-header .nav-link:hover{
      color:var(--link-hover) !important;
  }
  
  /* Hero section */
  .hero{
      background:var(--color-dark);
      color:#fff;
  }
  
  /* Cards */
  .card {
      border: none;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
      transition: outline 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
      outline: 1px solid transparent;
      outline-offset: -1px;
  }
  
  .card:hover {
      outline: 1px solid var(--color-accent);
      box-shadow: 0 6px 16px rgba(0,0,0,.15);
  }
  
  /* Buttons */
  .btn {
      border-radius: 0.375rem;
      font-weight: 500;
      transition: all 0.15s ease-in-out;
  }
  
  .btn-primary {
      background-color: var(--color-accent); /* from style guide: Primary CTA in hero: .btn-primary with background --color-accent or --color-dark */
      border-color: var(--color-accent);
  }
  
  .btn-primary:hover {
      /* The style guide doesn't specify a hover color. I will slightly darken the accent color. */
      filter: brightness(90%);
  }
  
  /* Forms */
  .form-control {
      border-radius: 0.375rem;
      border: 1px solid #ced4da;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .form-control:focus {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 0.2rem rgba(141, 35, 67, 0.25); /* Updated box-shadow color to match --color-accent */
  }
  
  /* Alerts */
  .alert {
      border: none;
      border-radius: 0.5rem;
  }
  
  /* Footer */
  .site-footer {
      background: var(--color-mid);
      color: #fff;
      margin-top: auto;
  }
  
  .footer-email {
      color: var(--link-hover);
  }
  
  .site-footer a {
      color: #fff;
  }
  
  .site-footer a:hover {
      text-decoration: underline;
  }
  
  
  /* Utility Classes */
  .text-primary {
      color: var(--color-dark) !important; /* Mapped from bootstrap primary */
  }
  
  .bg-primary {
      background-color: var(--color-dark) !important; /* Mapped from bootstrap primary */
  }
  
  /* Pull quotes */
  .pull-quote { /* Assuming this class name */
      border-left: 4px solid var(--color-accent);
      padding-left: 1rem;
      font-style: italic;
      font-family: var(--font-serif);
      color: var(--color-muted);
  }
  
  
  /* Responsive Design */
  @media (max-width: 768px) {
      .display-4 {
          font-size: 2.5rem;
      }
      
      .lead {
          font-size: 1.1rem;
      }
  }
  
  /* Loading States */
  .loading {
      opacity: 0.6;
      pointer-events: none;
  }
  
  .spinner-border-sm {
      width: 1rem;
      height: 1rem;
  }
  
  /* Prayer Interface Styles (for future use) */
  .prayer-card {
      max-width: 400px;
      margin: 0 auto;
  }
  
  .representative-photo {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 50%;
  }
  
  .prayer-stats {
      background: linear-gradient(135deg, var(--color-dark), var(--info-color));
      color: white;
      border-radius: 1rem;
  }
  
  /* Map Styles */
  .map-container {
      position: relative;
      width: 100%;
      height: 500px;
      border-radius: 0.5rem;
      overflow: hidden;
  }
  
  .map-legend {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(255, 255, 255, 0.9);
      padding: 1rem;
      border-radius: 0.5rem;
      box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  }

  /* Hexagonal Map Styles */
  #hex-map-container {
      position: relative;
      width: 100%;
      min-height: 500px;
      background: #f8f9fa;
      overflow: hidden;
  }

  .hex {
      position: absolute;
      width: 60px;
      height: 52px;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 1;
  }

  .hex-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform: rotate(30deg);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #dee2e6;
      background: #ffffff;
      transition: all 0.3s ease;
  }

  .hex-content {
      transform: rotate(-30deg);
      font-size: 20px;
      line-height: 1;
      text-align: center;
  }

  /* Hex states */
  .hex.empty .hex-inner {
      background: #f8f9fa;
      border-color: #dee2e6;
  }

  .hex.user_prayed .hex-inner {
      background: linear-gradient(135deg, #fff3e0, #ffe0b2);
      border-color: #ff6b35;
      box-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
  }

  .hex.community_prayed .hex-inner {
      background: linear-gradient(135deg, #e3f2fd, #bbdefb);
      border-color: #42a5f5;
      box-shadow: 0 0 8px rgba(66, 165, 245, 0.3);
  }

  /* Hover effects */
  .hex:hover {
      z-index: 10;
      transform: scale(1.1);
  }

  .hex:hover .hex-inner {
      border-color: #007bff;
      box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
  }

  .hex.empty:hover .hex-inner {
      background: #e9ecef;
      border-color: #007bff;
  }

  .hex.user_prayed:hover .hex-inner {
      border-color: #e65100;
      box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
  }

  .hex.community_prayed:hover .hex-inner {
      border-color: #1976d2;
      box-shadow: 0 0 20px rgba(66, 165, 245, 0.5);
  }

  /* Hex overlay styles removed - preparing for SVG-based maps */
  /* Legacy hex styles will be replaced with SVG-based styling */
  
  /* Admin Styles */
  .admin-sidebar {
      background-color: var(--color-light);
      min-height: calc(100vh - 56px);
  }
  
  /* Accessibility */
  .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
  }
  
  /* Focus indicators */
  .btn:focus,
  .form-control:focus,
  .form-select:focus,
  .form-check-input:focus {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
      .card {
          border: 1px solid var(--color-dark);
      }
      
      .btn {
          border-width: 2px;
      }
  }
/* Accessibility Improvements */
.prayer-topic-btn {
    position: relative;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}

.prayer-topic-btn .check-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.prayer-topic-btn.btn-outline-secondary {
    color: #5a6268;
    border-color: #5a6268;
}

.prayer-topic-btn.btn-outline-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #5a6268;
}