/**
 * DNA Romance Multi-Tenant Consolidated Custom CSS
 * 
 * This file contains only custom styles that cannot be replaced with Bootstrap 5 utilities.
 * All other styles should use Bootstrap 5 utility classes directly in templates.
 * 
 * Last consolidated: August 2025
 * By: Claude Code
 */

/* ==========================================================================
 1. Multi-Tenant Site-Specific Styles
 ========================================================================== */

/* Site-specific primary colors - CSS variables for easy maintenance */
:root {
 --dnaromance-primary: #0F75BD;
 --dnaromance-accent: #F72C93;
 --datemetrix-primary: #6633B3;
 --datemetrix-overlay: rgba(103, 58, 183, 0.9);
 --genepool-primary: #009688;
 --genepool-overlay: rgba(0, 150, 136, 0.9);
 --wellmatched-primary: #1976D2;
 --generecovery-primary: #4CAF50;
 --heritablehealth-primary: #2196F3;
}

/* ==========================================================================
 2. CRITICAL ACCESSIBILITY FIXES - WCAG Compliance
 ========================================================================== */

/* Focus states for ALL interactive elements */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--bs-primary, #0F75BD);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Skip to main content link */
.skip-to-content {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
  z-index: 999999;
  color: var(--bs-white);
  background: var(--bs-dark);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
}

.skip-to-content:focus {
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  outline: 3px solid var(--bs-warning);
}

/* Ensure minimum touch target size (44x44px) */
button, 
a.btn,
input[type="submit"],
input[type="button"],
.btn {
  min-height: 44px;
  min-width: 44px;
}

/* Screen reader only text */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :focus-visible {
    outline-width: 4px;
  }
  
  .btn {
    border-width: 2px;
  }
}

/* ==========================================================================
 3. LOADING STATES & SKELETON SCREENS
 ========================================================================== */

/* Loading state for buttons and forms */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--bs-primary, #0F75BD);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* Button loading state */
.btn.loading {
  color: transparent !important;
}

.btn.loading::after {
  border-color: currentColor;
  border-top-color: transparent;
}

/* Skeleton screens for content loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 0.25rem;
  display: block;
  min-height: 1rem;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Different skeleton sizes */
.skeleton-text { height: 1rem; margin-bottom: 0.5rem; }
.skeleton-title { height: 2rem; margin-bottom: 1rem; }
.skeleton-button { height: 44px; width: 120px; }
.skeleton-avatar { width: 60px; height: 60px; border-radius: 50%; }
.skeleton-card { height: 200px; margin-bottom: 1rem; }

/* ==========================================================================
 4. MICRO-INTERACTIONS & SMOOTH TRANSITIONS
 ========================================================================== */

/* Smooth transitions for all interactive elements */
a,
button,
.btn,
input,
textarea,
select,
.card,
.dropdown-menu,
.nav-link {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button hover effects */
.btn:hover:not(:disabled):not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active:not(:disabled):not(.disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Card hover effects */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Form input focus effects */
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(15, 117, 189, 0.25);
}

/* ==========================================================================
 5. Language Dropdown (Cannot use Bootstrap dropdown due to custom flags)
 ========================================================================== */

.language-container {
 padding: 0 1.25rem; /* Use rem units */
}

.languages {
 z-index: 997;
 position: relative;
}

.nav-language-btn {
 background-color: transparent !important;
 border: 1px solid rgba(255, 255, 255, 0.2) !important;
 color: #fff !important;
 padding: 0.5rem 1rem;
 font-size: 0.875rem;
 transition: all 0.3s ease;
}

.nav-language-btn:hover,
.nav-language-btn:focus {
 background-color: rgba(255, 255, 255, 0.1) !important;
 border-color: rgba(255, 255, 255, 0.4) !important;
}

.language-image,
.flag-image {
 width: 1.25rem; /* 20px - reduced from 30px for better proportions */
 height: 1.25rem;
 object-fit: contain;
 margin-right: 0.5rem;
 border-radius: 2px; /* Subtle rounding for flags */
}

.language-menu {
 max-height: 18.75rem; /* 300px */
 overflow-y: auto;
 min-width: 13.125rem; /* 210px */
}

/* Enhanced Navbar Link Styling for Better Clickability */
.navbar-nav .nav-link {
 position: relative;
 padding: 0.75rem 1rem !important;
 font-weight: 500;
 color: rgba(255, 255, 255, 0.9) !important;
 text-transform: uppercase;
 font-size: 0.875rem;
 letter-spacing: 0.025em;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 border-radius: 6px;
 margin: 0 0.25rem;
}

.navbar-nav .nav-link:hover {
 background-color: rgba(255, 255, 255, 0.1);
 color: #fff !important;
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.navbar-nav .nav-link:focus {
 outline: 2px solid rgba(255, 255, 255, 0.3);
 outline-offset: 2px;
}

.navbar-nav .nav-link::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
 transform: translateX(-50%);
 transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
 width: 80%;
}

/* Active nav link styling */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
 background-color: rgba(255, 255, 255, 0.15);
 color: #fff !important;
 font-weight: 600;
}

.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link[aria-current="page"]::after {
 width: 80%;
}

/* Button-style nav links (like Sign-Up) */
.navbar-nav .nav-link.btn {
 background: var(--gradient-primary, linear-gradient(135deg, #0f75bd, #f72c93));
 color: white !important;
 border: none;
 font-weight: 600;
 margin-left: 0.5rem;
 padding: 0.625rem 1.25rem !important;
 border-radius: 50px;
 transition: all 0.3s ease;
}

.navbar-nav .nav-link.btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
 background: var(--gradient-primary, linear-gradient(135deg, #0a5a91, #d91872));
}

.navbar-nav .nav-link.btn::after {
 display: none; /* Remove underline for button-style links */
}

/* Site-specific navbar theming */
[data-site="generecovery"] .navbar-nav .nav-link::after {
 background: linear-gradient(90deg, #388e3c, #66bb6a);
}

[data-site="generecovery"] .navbar-nav .nav-link.btn {
 background: linear-gradient(135deg, #388e3c, #66bb6a);
}

[data-site="generecovery"] .navbar-nav .nav-link.btn:hover {
 background: linear-gradient(135deg, #2e7d32, #4caf50);
}

/* Mobile navbar improvements */
@media (max-width: 991.98px) {
 .navbar-nav .nav-link {
   margin: 0.25rem 0;
   padding: 0.875rem 1.25rem !important;
   border-radius: 8px;
   background-color: rgba(255, 255, 255, 0.05);
 }
 
 .navbar-nav .nav-link:hover {
   background-color: rgba(255, 255, 255, 0.15);
   transform: none; /* Remove transform on mobile */
 }
 
 .navbar-nav .nav-link::after {
   display: none; /* Remove underlines on mobile */
 }
}

/* ==========================================================================
 3. Services Dropdown (Custom styling requirements)
 ========================================================================== */

.services-dropdown {
 background-color: transparent !important;
 border: 1px solid rgba(255, 255, 255, 0.2) !important;
 color: #fff !important;
 font-size: 0.875rem;
 transition: all 0.3s ease;
}

.services-dropdown:hover,
.services-dropdown:focus {
 background-color: rgba(255, 255, 255, 0.1) !important;
 border-color: rgba(255, 255, 255, 0.4) !important;
}

.dropdown-symbol {
 font-size: 0.75rem;
 margin-left: 0.25rem;
}

/* ==========================================================================
 4. Hero Backgrounds (Site-specific, cannot use utilities)
 ========================================================================== */

/* DNA Romance backgrounds with A/B testing */
.banner3 {
 background-image: url('/static/images/background/couple.webp');
 background-position: center;
 background-size: cover;
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
}

.banner3::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(135deg, rgba(15, 117, 189, 0.8) 0%, rgba(247, 44, 147, 0.6) 100%);
}

/* Mobile DNA Romance background */
@media (max-width: 768px) {
 .banner3 {
 background-image: url('/static/images/background/couple-skyline.webp');
 }
}

/* DateMetriX personality background */
.banner3-datemetrix {
 background-image: url('/static/images/DateMetriX/3pannel_USA.webp');
}

.banner3-datemetrix::before {
 background: var(--datemetrix-overlay);
}

@media (max-width: 768px) {
 .banner3-datemetrix {
 background-image: url('/static/images/DateMetriX/Amy_USA_PsycMatch.webp');
 }
}

/* GenePool donor background */
.banner3-genepool {
 background-image: url('/static/images/genepool/pexels-amina-filkins-5424696.webp');
}

.banner3-genepool::before {
 background: var(--genepool-overlay);
}

@media (max-width: 768px) {
 .banner3-genepool {
 background-image: url('/static/images/genepool/pexels-maria-luiza-melo-12789912.jpeg');
 }
}

/* ==========================================================================
 5. Navbar Transparency Fixes (Complex multi-state styling)
 ========================================================================== */

/* Remove unwanted white backgrounds from navbar-collapse */
.navbar-collapse {
 background-color: transparent !important;
}

/* Mobile navbar backgrounds by site */
@media (max-width: 991px) {
 .navbar-datemetrix .navbar-collapse {
 background-color: var(--datemetrix-primary) !important;
 }
 
 .navbar-genepool .navbar-collapse {
 background-color: var(--genepool-primary) !important;
 }
 
 /* Ensure text visibility on colored backgrounds */
 .navbar-datemetrix .navbar-collapse .nav-link,
 .navbar-genepool .navbar-collapse .nav-link {
 color: #ffffff !important;
 }
}

/* ==========================================================================
 6. Custom Components (No Bootstrap equivalent)
 ========================================================================== */

/* Personality test game styles */
.game-container {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 border-radius: 1rem;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.personality-card {
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 cursor: pointer;
}

.personality-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* DNA animation for loading states */
@keyframes dna-rotate {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

.dna-loading {
 animation: dna-rotate 2s linear infinite;
}

/* ==========================================================================
 7. Print Styles (Cannot use utilities in @media print)
 ========================================================================== */

@media print {
 .no-print {
 display: none !important;
 }
 
 .print-only {
 display: block !important;
 }
 
 /* Ensure readable text in print */
 body {
 color: #000 !important;
 background: #fff !important;
 }
}

/* ==========================================================================
 8. Legacy Support (Temporary - to be removed after full migration)
 ========================================================================== */

/* Support for old alert styles until templates are updated */
.alert-debug {
 background-color: #f8f9fa;
 border-color: #d6d6d6;
 color: #666;
}

.alert-error {
 background-color: #f8d7da;
 border-color: #f5c6cb;
 color: #721c24;
}

/* ==========================================================================
 End of Consolidated Custom CSS
 
 Migration Notes:
 - Use Bootstrap 5 utilities for all spacing (m-*, p-*)
 - Use Bootstrap 5 utilities for all colors (text-*, bg-*)
 - Use Bootstrap 5 utilities for display (d-*, flex-*)
 - Use Bootstrap 5 utilities for borders (border-*, rounded-*)
 - Only add custom CSS here if Bootstrap 5 cannot achieve the effect
 ========================================================================== */