/* Custom styles for Millonarios F.C. website */

/* Add higher specificity to override Tailwind defaults */
html body {
  font-family: 'Montserrat', sans-serif !important;
  scroll-behavior: smooth !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.3s, color 0.3s !important;
}

/* Ensure all CSS variables are accessible */
:root {
    /* Light mode (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --border-color: #e5e7eb;
    --millonarios-blue: #2a3378;
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --footer-bg: #111827;
    --footer-text: #f9fafb;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --primary-color: #2a3378;
    --secondary-color: #ffffff;
    --discord-color: #5865F2;
    --modal-bg: rgba(0, 0, 0, 0.75);
  }
  
  [data-theme="dark"] {
    /* Dark mode with improved contrast */
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-tertiary: #bbbbbb;
    --border-color: #444444;
    --millonarios-blue: #4a74e8; /* Brighter blue for better contrast */
    --card-bg: #242424;
    --header-bg: #0a0a0a;
    --footer-bg: #0a0a0a;
    --footer-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --primary-color: #4a74e8;
    --secondary-color: #ffffff;
    --discord-color: #7289da; /* Brighter discord color for dark mode */
    --modal-bg: rgba(0, 0, 0, 0.85);
  }
  
  body {
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
  }
  
  /* BASIC ELEMENT STYLING */
  
  /* Basic color classes using CSS variables */
  .bg-white {
    background-color: var(--card-bg);
  }
  
  .bg-gray-50 {
    background-color: var(--bg-secondary);
  }
  
  .bg-gray-100 {
    background-color: var(--bg-tertiary);
  }
  
  .text-gray-900 {
    color: var(--text-primary);
  }
  
  .text-gray-700, .text-gray-800, .text-gray-600 {
    color: var(--text-secondary);
  }
  
  .text-gray-500, .text-gray-400 {
    color: var(--text-tertiary);
  }
  
  .text-primary {
    color: var(--millonarios-blue) !important;
  }
  
  .bg-primary {
    background-color: var(--millonarios-blue) !important;
  }
  
  .border-primary {
    border-color: var(--millonarios-blue) !important;
  }
  
  /* Shadows & Transitions */
  .shadow-md, .shadow-lg, .shadow-xl {
    box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
  }
  
  button, a {
    transition: all 0.3s ease;
  }
  
  /* Social & Discord */
  .text-indigo-500 {
    color: var(--discord-color);
  }
  
  .text-indigo-500:hover {
    color: var(--millonarios-blue);
  }
  
  footer.bg-gray-900 {
    background-color: var(--footer-bg);
  }
  
  /* Team Highlights */
  .millonarios-highlight {
    color: var(--millonarios-blue) !important;
    font-weight: 600;
  }
  
  /* DARK MODE STYLING */
  
  /* Navigation in dark mode */  
  [data-theme="dark"] header .hidden.md\:flex a,
  [data-theme="dark"] #mobile-menu a {
    color: #ffffff !important;
  }
  
  [data-theme="dark"] header .hidden.md\:flex a.font-medium.text-primary,
  [data-theme="dark"] #mobile-menu a.block.px-3.py-2.font-medium.text-primary {
    color: var(--millonarios-blue) !important;
  }
  
  [data-theme="dark"] header .hidden.md\:flex a:hover,
  [data-theme="dark"] #mobile-menu a:hover {
    color: var(--millonarios-blue) !important;
  }
  
  [data-theme="dark"] header.sticky {
    background-color: var(--header-bg) !important;
  }
  
  [data-theme="dark"] header .text-gray-700 {
    color: #ffffff !important;
  }
  
  /* Section backgrounds in dark mode */
  [data-theme="dark"] section {
    background-color: var(--bg-primary);
  }
  
  [data-theme="dark"] section.bg-white {
    background-color: var(--bg-secondary) !important;
  }
  
  [data-theme="dark"] section.bg-gray-50,
  [data-theme="dark"] section.bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
  }
  
  /* Buttons & Interactive Elements */
  [data-theme="dark"] .bg-primary.text-white,
  [data-theme="dark"] a.bg-primary,
  [data-theme="dark"] button.bg-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
  }
  
  [data-theme="dark"] .hover\:bg-blue-900:hover {
    background-color: #2d4ed8 !important;
  }
  
  [data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: var(--bg-tertiary) !important;
  }
  
  /* Form elements in dark mode */
  [data-theme="dark"] input, 
  [data-theme="dark"] textarea, 
  [data-theme="dark"] select {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
  }
  
  [data-theme="dark"] input::placeholder {
    color: var(--text-tertiary) !important;
  }
  
  /* Consolidated border styling in dark mode */
  [data-theme="dark"] .border,
  [data-theme="dark"] .border-gray-100,
  [data-theme="dark"] .border-gray-200,
  [data-theme="dark"] .border-gray-300,
  [data-theme="dark"] .border-t,
  [data-theme="dark"] .border-b,
  [data-theme="dark"] .border-l,
  [data-theme="dark"] .border-r {
    border-color: var(--border-color) !important;
  }
  
  /* Consolidated card styling in dark mode */
  [data-theme="dark"] .bg-white,
  [data-theme="dark"] div.bg-white,
  [data-theme="dark"] .card,
  [data-theme="dark"] section .bg-white,
  [data-theme="dark"] .rounded-lg.overflow-hidden.shadow-md,
  [data-theme="dark"] .rounded-lg.overflow-hidden.shadow-lg,
  [data-theme="dark"] .rounded-lg.overflow-hidden.shadow-xl,
  [data-theme="dark"] #team .bg-white,
  [data-theme="dark"] #news .bg-white,
  [data-theme="dark"] #fixtures .bg-white,
  [data-theme="dark"] #about .bg-white,
  [data-theme="dark"] .achievements .bg-white,
  [data-theme="dark"] .titles-content .bg-white,
  [data-theme="dark"] .trophies .bg-white,
  [data-theme="dark"] article.bg-white,
  [data-theme="dark"] .news-content .bg-white,
  [data-theme="dark"] .bg-white.rounded-lg,
  [data-theme="dark"] .mt-12 .bg-white,
  [data-theme="dark"] .bg-white.rounded-lg.p-8 {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
  }
  
  /* Consolidated text styling in dark mode */
  [data-theme="dark"] .text-gray-900,
  [data-theme="dark"] .text-gray-800,
  [data-theme="dark"] .text-gray-700,
  [data-theme="dark"] h2.text-gray-800,
  [data-theme="dark"] .text-2xl.font-bold.text-gray-800,
  [data-theme="dark"] #about h3,
  [data-theme="dark"] .achievements h3,
  [data-theme="dark"] .trophies h3,
  [data-theme="dark"] .achievements .text-2xl,
  [data-theme="dark"] .trophies .text-2xl,
  [data-theme="dark"] .rounded-lg .text-gray-900,
  [data-theme="dark"] .rounded-lg .text-gray-800,
  [data-theme="dark"] .rounded-lg .text-gray-700,
  [data-theme="dark"] .mt-12 h3.font-bold,
  [data-theme="dark"] .text-3xl.font-bold,
  [data-theme="dark"] .text-4xl.font-bold,
  [data-theme="dark"] .prose h2,
  [data-theme="dark"] .prose h3,
  [data-theme="dark"] .prose strong {
    color: var(--text-primary) !important;
  }
  
  [data-theme="dark"] .text-gray-600,
  [data-theme="dark"] .text-gray-500,
  [data-theme="dark"] p.text-gray-600,
  [data-theme="dark"] #about p,
  [data-theme="dark"] .achievements p,
  [data-theme="dark"] .trophies p,
  [data-theme="dark"] .achievements .text-gray-600,
  [data-theme="dark"] .trophies .text-gray-600,
  [data-theme="dark"] .rounded-lg .text-gray-600,
  [data-theme="dark"] .rounded-lg .text-gray-500,
  [data-theme="dark"] .mt-12 .text-gray-600,
  [data-theme="dark"] #news .rounded-lg.overflow-hidden p,
  [data-theme="dark"] .prose,
  [data-theme="dark"] .prose-lg,
  [data-theme="dark"] .prose p,
  [data-theme="dark"] .prose ul,
  [data-theme="dark"] .prose ol,
  [data-theme="dark"] .prose li {
    color: var(--text-secondary) !important;
  }
  
  [data-theme="dark"] .text-gray-500.text-sm,
  [data-theme="dark"] .fixed.inset-0.z-50 .text-gray-500 {
    color: var(--text-tertiary) !important;
  }
  
  /* Link styling in dark mode */
  [data-theme="dark"] a.text-primary,
  [data-theme="dark"] a.text-primary.font-semibold {
    color: var(--primary-color) !important;
  }
  
  [data-theme="dark"] a.text-primary:hover,
  [data-theme="dark"] a.text-primary.font-semibold:hover {
    color: #4a74e8 !important;
  }
  
  /* Card hover effects in dark mode */
  [data-theme="dark"] .shadow-md:hover,
  [data-theme="dark"] .shadow-lg:hover,
  [data-theme="dark"] .hover\:shadow-xl:hover,
  [data-theme="dark"] .team-card:hover,
  [data-theme="dark"] .transition.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4) !important;
  }
  
  /* Trophy & achievement icons */
  [data-theme="dark"] .fa-trophy,
  [data-theme="dark"] .fa-medal,
  [data-theme="dark"] .fa-award,
  [data-theme="dark"] .fa-star {
    color: #ffd700 !important; /* Gold color for trophies */
  }
  
  /* Colored background elements */
  [data-theme="dark"] .bg-blue-100,
  [data-theme="dark"] .bg-gray-100,
  [data-theme="dark"] .bg-gray-50,
  [data-theme="dark"] .prose .bg-gray-50 {
    background-color: var(--bg-tertiary) !important;
  }
  
  /* Modals in dark mode */
  [data-theme="dark"] .fixed.inset-0.z-50 {
    background-color: var(--modal-bg);
  }
  
  [data-theme="dark"] .fixed.inset-0.z-50 ul li {
    border-color: var(--border-color);
  }
  
  [data-theme="dark"] .fixed.inset-0.z-50 ul li span {
    color: var(--text-secondary);
  }
  
  [data-theme="dark"] .fixed.inset-0.z-50 ul li strong {
    color: var(--text-primary);
  }
  
  /* Mobile menu in dark mode */
  [data-theme="dark"] #mobile-menu {
    background-color: var(--bg-secondary) !important;
  }
  
  [data-theme="dark"] #mobile-menu a.hover\:bg-primary {
    color: var(--text-primary) !important;
  }
  
  [data-theme="dark"] #mobile-menu a.hover\:bg-primary:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
  }
  
  /* 404 page specific styling */
  [data-theme="dark"] section.bg-white.min-h-\[70vh\] {
    background-color: var(--bg-secondary) !important;
  }
  
  [data-theme="dark"] .text-5xl.md\:text-6xl.font-bold.text-primary,
  [data-theme="dark"] .text-xl.font-bold.mb-4 {
    color: var(--primary-color) !important;
  }
  
  /* Theme toggle styling */
  .theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: var(--millonarios-blue);
  }
  
  .theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  [data-theme="dark"] .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  /* Fix placeholder images in dark mode */
  [data-theme="dark"] img[src*="placeholder"] {
    border: 1px solid var(--border-color);
  }
  
  /* SECTION-SPECIFIC STYLING */
  
  /* Home section */
  #home {
    background-image: url('https://wallpapercave.com/wp/wp10817356.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }
  
  #home h1, 
  #home h2, 
  #home p, 
  #home .flex {
    animation: fadeIn 0.8s ease-out forwards;
  }
  
  #home h1 {
    animation-delay: 0.2s;
  }
  
  #home h2 {
    animation-delay: 0.4s;
  }
  
  #home p {
    animation-delay: 0.6s;
  }
  
  #home .flex {
    animation-delay: 0.8s;
    opacity: 0;
  }
  
  /* Team section */
  #team .bg-white img {
    height: 320px;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s ease;
  }
  
  #team .bg-white:hover img {
    transform: scale(1.05);
  }
  
  .team-card {
    transition: all 0.3s ease;
    overflow: hidden;
  }
  
  .team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  }
  
  /* Fixtures section */
  #fixtures .bg-white {
    background-color: var(--card-bg);
    border-color: var(--border-color);
  }
  
  #fixtures img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
  }
  
  #fixtures .bg-white:hover img {
    transform: scale(1.1);
  }
  
  #fixtures .text-gray-500, 
  #fixtures .text-gray-700,
  #fixtures .text-gray-800 {
    color: var(--text-secondary);
  }
  
  #fixtures .font-semibold {
    color: var(--text-primary);
  }
  
  #fixtures a.bg-primary {
    border-radius: 0.375rem;
  }
  
  #fixtures .bg-primary.text-white {
    color: #ffffff !important;
    background-color: var(--millonarios-blue) !important;
    font-weight: 600;
  }
  
  #fixtures a.inline-block.bg-primary.text-white {
    color: #ffffff !important;
    background-color: var(--millonarios-blue) !important;
    font-weight: 600;
  }
  
  /* Fixture countdown */
  .countdown {
    background-color: rgba(42, 51, 120, 0.1);
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 600;
    color: var(--primary-color);
    animation: pulse 2s infinite;
  }
  
  /* Fixtures modal */
  #fixtures-modal .bg-white {
    background-color: var(--card-bg);
  }
  
  /* Mobile menu */
  #mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  #mobile-menu.active {
    max-height: 300px;
  }
  
  /* Section dividers */
  .section-divider {
    height: 4px;
    width: 80px;
    background: var(--primary-color);
    margin: 0 auto 40px;
    position: relative;
  }
  
  .section-divider::before,
  .section-divider::after {
    content: '';
    position: absolute;
    height: 4px;
    width: 30px;
    background: var(--primary-color);
    top: 0;
    opacity: 0.6;
  }
  
  .section-divider::before {
    left: -40px;
  }
  
  .section-divider::after {
    right: -40px;
  }
  
  /* Button effects */
  .btn-hover-effect {
    transition: all 0.3s ease;
  }
  
  .btn-hover-effect:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  /* Smooth scroll */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Account for fixed header */
  }
  
  /* ANIMATIONS */
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(42, 51, 120, 0.4);
    }
    70% {
      box-shadow: 0 0 0 6px rgba(42, 51, 120, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(42, 51, 120, 0);
    }
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* UTILITY CLASSES */
  
  .text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .shadow-hover:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  
  /* Other elements */
  .fa-discord {
    font-size: 1.5rem;
  }
  
  .loader {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid var(--primary-color);
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
  }
  
  /* RESPONSIVE STYLES */
  
  @media (max-width: 768px) {
    #home {
      height: 60vh;
    }
    
    .section-divider::before,
    .section-divider::after {
      display: none;
    }
    
    .fixtures-dropdown {
      margin-left: 10px;
      margin-right: 10px;
      padding: 15px;
    }
    
    .fixtures-dropdown ul li {
      padding-left: 30px;
      font-size: 14px;
    }
    
    .fixtures-dropdown ul li::before {
      width: 16px;
      height: 16px;
      left: 5px;
    }
  
    #team .bg-white img {
      height: 250px;
    }
  }
  
  @media (max-width: 640px) {
    #home {
      height: 50vh;
    }
    
    .fixtures-dropdown {
      max-height: 70vh;
    }
  
    #team .bg-white img {
      height: 200px;
    }
  }
  
/* 404 page text contrast fix */
.bg-primary h3,
.bg-primary p {
  color: white !important;
}

[data-theme="dark"] .bg-primary h3,
[data-theme="dark"] .bg-primary p {
  color: white !important;
}

/* Special handling for the 404 page info box */
[data-theme="dark"] .bg-primary.rounded-lg.p-8 h3,
[data-theme="dark"] .bg-primary.rounded-lg.p-8 p {
  color: white !important;
  } 