/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.logo-responsive {
  max-width: 50px;
}

@media (min-width: 992px) {
  .logo-responsive {
    max-width: 100%;
  }
}

.bloody-font {
  font-family: 'Jolly Lodger';
  letter-spacing: 5px;
}

.w-95 {
  width: 95% !important;
}

.race-card {
  color: inherit;
  font-family: inherit;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s;
}

.race-card:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.sponsor-card {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.language-toggle-mobile {
  background-color: transparent; 
  border: 0px;
}

.fade-in-title, .fade-in-subtitle {
  opacity: 0;
  animation: fadeIn 3.0s ease-in forwards;
}
.fade-in-title {
  animation-delay: 0.2s;
}
.fade-in-subtitle {
  animation-delay: 0.8s;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Custom dark scrollbar for admin tables */
.table-responsive {
  scrollbar-color: #444 #222;
  scrollbar-width: auto;
}

/* Webkit browsers */
.table-responsive::-webkit-scrollbar {
  height: 20px;
  background: #222;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.table-responsive::-webkit-scrollbar-corner {
  background: #222;
}

/* Register button */
.register-button .btn {
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.register-button .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.register-button .btn:hover::before {
  left: 100%;
}

.register-button .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), 0.3);
}

.register-button .btn:active {
  transform: translateY(0);
}

/* Animation for icon */
.register-button .btn:hover .fa-user-plus {
  animation: bounceIn 0.6s ease;
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% { transform: scale3d(.3, .3, .3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  100% { transform: scale3d(1, 1, 1); }
}

/* Footer Event Links Styling */
.other-event-link {
  transition: all 0.3s ease;
  padding: 0.5rem 0;
}

.other-event-link:hover {
  transform: translateY(-2px);
}

.event-logo-small {
  height: 100px;
}

@media (max-width: 991.98px) {
  .event-logo-small {
    height: 50px;
  }
  
  .other-event-link span {
    font-size: 0.85rem !important;
  }
}

/* UTMB Badge Styling */
.utmb-badge-container {
  z-index: 10;
  animation: fadeInBadge 1s ease-out 0.5s both;
  margin: 1.5rem;
  pointer-events: none; /* Prevent accidental touches */
}

.utmb-badge {
  width: 120px;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
  opacity: 0.95;
  display: block;
}

@keyframes fadeInBadge {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 0.95;
    transform: translateY(0);
  }
}

/* Desktop hover effect */
@media (hover: hover) and (pointer: fine) {
  .utmb-badge:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
    opacity: 1;
  }
  
  .utmb-badge-container {
    pointer-events: auto;
  }
}

/* Large Desktop */
@media (min-width: 1400px) {
  .utmb-badge {
    width: 140px;
  }
  
  .utmb-badge-container {
    margin: 2rem;
  }
}

/* Desktop */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .utmb-badge {
    width: 120px;
  }
  
  .utmb-badge-container {
    margin: 1.5rem;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
  .utmb-badge {
    width: 100px;
  }
  
  .utmb-badge-container {
    margin: 1.25rem;
  }
}

/* Mobile - Portrait */
@media (max-width: 767.98px) {
  .utmb-badge {
    width: 100px;
  }

  .utmb-badge-container {
    margin-top: 5rem;
  }
}

/* Small Mobile */
@media (max-width: 575.98px) {
  .utmb-badge {
    width: 80px;
  }

  .utmb-badge-container {
    margin-top: 5rem;
  }
}

/* Extra Small Mobile (iPhone SE, etc) */
@media (max-width: 375px) {
  .utmb-badge {
    width: 70px;
  }

  .utmb-badge-container {
    margin-top: 5rem;
  }
}

/* Mobile Landscape - Shorter Height */
@media (max-height: 600px) and (orientation: landscape) {
  .utmb-badge {
    width: 65px;
  }
  
  .utmb-badge-container {
    margin: 0.5rem;
  }
}

/* Very Short Screens (e.g., iPhone in landscape) */
@media (max-height: 500px) and (orientation: landscape) {
  .utmb-badge {
    width: 55px;
  }
  
  .utmb-badge-container {
    margin: 0.4rem;
  }
}

/* High DPI/Retina Displays - Ensure sharpness */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .utmb-badge {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Accessibility - Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .utmb-badge-container {
    animation: none;
  }
  
  .utmb-badge {
    transition: none;
  }
}

/* Dark mode - Enhance visibility if needed */
@media (prefers-color-scheme: dark) {
  .utmb-badge {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  }
}

/* Video Play Button Styling */
.video-play-icon {
  pointer-events: none;
  z-index: 1;
}

.play-button {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.play-button i {
  font-size: 32px;
  color: #000;
  margin-left: 5px; /* Optical centering */
}

.portfolio-box:hover .play-button {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 1);
}

/* Responsive sizing */
@media (max-width: 768px) {
  .play-button {
    width: 60px;
    height: 60px;
  }
  
  .play-button i {
    font-size: 24px;
  }
}

/* Inline video player styling */
.inline-video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.inline-video-wrapper {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
}

.inline-video-player {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.inline-video-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
  z-index: 2; /* above video */
  opacity: 0.9;
}

.inline-video-close:hover {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .inline-video-wrapper {
    max-width: 95%;
    max-height: 95%;
  }
  
  .inline-video-close {
    top: 10px;
    right: 10px;
  }
}