/* Main styles for Carlson Gracie Team UK website */

html,
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: "Inter", Arial, sans-serif;
  background-color: #fafafa;
  color: #0d0d0d;
  /* Add top padding to account for fixed navbar */
  padding-top: 80px; /* Mobile navbar height */
}

@media (min-width: 768px) {
  body {
    padding-top: 96px; /* Desktop navbar height */
  }
}

/* Fix hero section to account for navbar padding */
#home {
  margin-top: -80px; /* Negative margin to offset body padding on mobile */
  padding-top: 80px; /* Add padding to maintain content positioning */
}

@media (min-width: 768px) {
  #home {
    margin-top: -96px; /* Negative margin to offset body padding on desktop */
    padding-top: 96px; /* Add padding to maintain content positioning */
  }
}

/* Fixed header styles */
#main-navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(13, 13, 13, 0.7); /* Slightly transparent black */
  backdrop-filter: blur(8px); /* Blur effect for modern browsers */
  -webkit-backdrop-filter: blur(8px); /* For Safari */
  transition: all 0.3s ease;
}

/* Ensure smooth animation when scrolling */
#navbar-inner,
#navbar-logo {
  transition: all 0.3s ease;
}

/* Adjust anchor scroll positions to account for fixed header */
section[id] {
  scroll-margin-top: 96px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", Arial, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.timetable th,
.timetable td {
  transition: background-color 0.3s, transform 0.2s;
}

.timetable tr:hover td {
  background-color: #f3f4f6;
  transform: scale(1.02);
}

.coach-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e03d45;
}

.glitch-logo {
  position: relative;
  display: inline-block;
}

.glitch-logo img {
  filter: drop-shadow(0 0 16px #fff8) brightness(1.2);
  animation: glitch 2.5s infinite linear alternate-reverse;
}

.glitch-logo::before,
.glitch-logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/logo.png") center/contain no-repeat;
  opacity: 0.7;
  pointer-events: none;
  mix-blend-mode: lighten;
}

.glitch-logo::before {
  left: 2px;
  top: 0;
  filter: blur(1px) drop-shadow(2px 0 #00fff9);
  animation: glitchTop 2.5s infinite linear alternate-reverse;
}

.glitch-logo::after {
  left: -2px;
  top: 0;
  filter: blur(1px) drop-shadow(-2px 0 #ff00c8);
  animation: glitchBot 2.5s infinite linear alternate-reverse;
}

@keyframes glitch {
  0% {
    filter: none;
  }

  10% {
    filter: brightness(1.2) hue-rotate(10deg);
  }

  20% {
    filter: brightness(1.1) blur(0.5px);
  }

  30% {
    filter: brightness(1.3) hue-rotate(-10deg);
  }

  40% {
    filter: brightness(1.2) blur(1px);
  }

  50% {
    filter: brightness(1.2) hue-rotate(0deg);
  }

  100% {
    filter: none;
  }
}

@keyframes glitchTop {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.7;
  }

  10% {
    transform: translate(-2px, -2px);
    opacity: 0.5;
  }

  20% {
    transform: translate(2px, 2px);
    opacity: 0.8;
  }

  30% {
    transform: translate(-1px, 1px);
    opacity: 0.6;
  }

  40% {
    transform: translate(1px, -1px);
    opacity: 0.7;
  }

  50% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
}

@keyframes glitchBot {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.7;
  }

  10% {
    transform: translate(2px, 2px);
    opacity: 0.5;
  }

  20% {
    transform: translate(-2px, -2px);
    opacity: 0.8;
  }

  30% {
    transform: translate(1px, -1px);
    opacity: 0.6;
  }

  40% {
    transform: translate(-1px, 1px);
    opacity: 0.7;
  }

  50% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
}

@keyframes fab-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(224, 61, 69, 0.7);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(224, 61, 69, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(224, 61, 69, 0);
  }
}

.animate-fab-pulse {
  animation: fab-pulse 1.5s infinite;
}

.animate-fab-pulse-paused {
  animation-play-state: paused !important;
}

/* Classes images - optimized for dynamic scaling without cropping */
#classes img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Ensure consistent card heights */
#classes .group {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Classes grid layout - specific to classes section only */
#classes .grid:not(#clubs-grid):not(#gym-list) {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
}

/* Responsive image sizing optimizations */
/* Carlson Gracie image in about section */
#about img {
  max-height: 400px !important;
  width: 100% !important;
  object-fit: cover;
}

/* Gallery images base sizing for mobile */
#gallery img {
  height: 150px !important;
  min-height: 150px !important;
  object-fit: cover;
}

@media (min-width: 768px) {
  /* Classes images for larger screens */
  #classes img {
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
  }

  #classes .grid:not(#clubs-grid):not(#gym-list) {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 2rem !important;
  }

  /* Carlson Gracie image responsive sizing for desktop */
  #about img {
    max-height: 350px !important;
    max-width: 500px !important;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  /* Classes images for desktop screens */
  #classes .grid:not(#clubs-grid):not(#gym-list) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }

  #about img {
    max-height: 320px !important;
    max-width: 450px !important;
  }

  /* Gallery images responsive sizing for desktop */
  #gallery img {
    height: 200px !important;
    max-height: 200px !important;
  }
}

/* Footer responsive grid layout */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (min-width: 501px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 500px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Product image optimizations - preserves aspect ratio without cropping */
.product-image-container {
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.product-image-container img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.product-image-container:hover img {
  transform: scale(1.02);
}

/* Responsive product image containers */
@media (max-width: 640px) {
  .product-image-container {
    min-height: 250px !important;
  }

  .product-image-container img {
    max-height: 250px !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .product-image-container {
    min-height: 280px !important;
  }

  .product-image-container img {
    max-height: 280px !important;
  }
}

@media (min-width: 1025px) {
  .product-image-container {
    min-height: 320px !important;
  }

  .product-image-container img {
    max-height: 320px !important;
  }
}