/* style.css */

/* Custom fonts for that premium feel */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap');

html { 
  scroll-behavior: smooth; 
  font-family: 'Outfit', sans-serif;
}

body {
  overflow-x: hidden;
}

/* Glassmorphism Utilities */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Hover Utilities */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Tab Active States */
.tab-btn.active {
  background-color: #1e3a8a; /* brand-blue */
  color: white;
  border-color: #1e3a8a;
  box-shadow: 0 4px 14px 0 rgba(30, 58, 138, 0.39);
}

/* Custom Table Styling for Fixtures */
.fixtures-table-container {
  overflow-x: auto;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.fixtures-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: white;
}

.fixtures-table th {
  background-color: #f8fafc;
  font-weight: 600;
  color: #475569;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #e2e8f0;
}

.fixtures-table td {
  padding: 1rem;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.875rem;
}

.fixtures-table tr:hover td {
  background-color: #f8fafc;
}

/* Sub-branding accents */
.accent-glow {
  position: relative;
}
.accent-glow::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #eab308;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}
.accent-glow:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}