@import "tailwindcss";

/* Gill Sans Font Face Declarations */
@font-face {
  font-family: 'Gill Sans';
  src: url("/assets/fonts/GillSans/GillSans.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans';
  src: url("/assets/fonts/GillSans/GillSansItalic.otf") format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans';
  src: url("/assets/fonts/GillSans/GillSansLight.otf") format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans';
  src: url("/assets/fonts/GillSans/GillSansLightItalic.otf") format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans';
  src: url("/assets/fonts/GillSans/GillSansMedium.otf") format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans';
  src: url("/assets/fonts/GillSans/GillSansMediumItalic.otf") format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans';
  src: url("/assets/fonts/GillSans/GillSansBold.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans';
  src: url("/assets/fonts/GillSans/GillSansBoldItalic.otf") format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans';
  src: url("/assets/fonts/GillSans/GillSansHeavy.otf") format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans';
  src: url("/assets/fonts/GillSans/GillSansHeavyItalic.otf") format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans Condensed';
  src: url("/assets/fonts/GillSans/GillSansCondensed.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gill Sans Condensed';
  src: url("/assets/fonts/GillSans/GillSansCondensedBold.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Custom color definitions for the London Irish Business Society */
@theme {
  --color-irish-green: #24e161;
  --color-lilac: #b7b7ff;
  --color-off-white: #fffdf1;
  --color-isle-of-man-green: #007726;
  --color-deep-lilac: #6b46c1;
  --color-bluish-black: #04081a;
  --color-oxford-green: #005102;
  --color-galway-green: #001d02;
}

/* Custom styles for the London Irish Business Society */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Gill Sans', system-ui, sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Gill Sans', system-ui, sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply bg-irish-green text-bluish-black  px-6 py-3 rounded-full font-semibold hover:bg-isle-of-man-green hover:text-off-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
  }
  
  .btn-secondary {
    @apply bg-lilac text-bluish-black px-6 py-3 rounded-full font-semibold hover:bg-deep-lilac hover:text-off-white transition-all duration-300;
  }
  
  .card {
    @apply bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6;
  }
  
  .gradient-text {
    @apply bg-gradient-to-r from-irish-green to-lilac bg-clip-text text-transparent;
  }
  
  /* Gill Sans specific utility classes */
  .font-gill {
    font-family: 'Gill Sans', system-ui, sans-serif;
  }
  
  .font-gill-condensed {
    font-family: 'Gill Sans Condensed', 'Gill Sans', system-ui, sans-serif;
  }
  
  /* Background Carousel Styles */
  .bg-carousel {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    will-change: opacity;
  }
  
  .carousel-slide.active {
    opacity: 1;
  }
  
  /* Ensure proper z-index layering */
  .bg-carousel {
    z-index: 1;
  }
  
  .bg-carousel .absolute.inset-0 {
    z-index: 2;
  }
  
  .container.relative.z-10 {
    z-index: 3;
  }
  
  /* Smooth fade transition for carousel */
  .carousel-slide {
    filter: brightness(0.8);
  }
  
  .carousel-slide.active {
    filter: brightness(1);
  }
  
  /* Carousel navigation dots */
  .carousel-dot {
    transition: all 0.3s ease-in-out;
    opacity: 0.5;
  }
  
  .carousel-dot.active {
    opacity: 1;
    transform: scale(1.2);
  }
  
  .carousel-dot:hover {
    opacity: 0.8;
    transform: scale(1.1);
  }
  
  /* Custom overlay options */
  .overlay-dark {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.6), rgba(31, 41, 55, 0.4));
  }
  
  .overlay-neutral {
    background: linear-gradient(135deg, rgba(64, 64, 64, 0.5), rgba(96, 96, 96, 0.3));
  }
  
  .overlay-warm {
    background: linear-gradient(135deg, rgba(55, 48, 163, 0.4), rgba(79, 70, 229, 0.2));
  }

  .overlay-irish-green {
    background: linear-gradient(135deg, rgba(0, 119, 38, 0.6), rgba(0, 119, 38, 0.4));
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .backdrop-blur-sm {
    backdrop-filter: blur(8px);
  }
  
  /* Flash Message Animations */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fade-out-up {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-20px);
    }
  }
  
  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
  }
  
  .animate-fade-out-up {
    animation: fade-out-up 0.3s ease-out forwards;
  }
}

/* Speakers Carousel Specific Styles */
.carousel-container {
  position: relative;
  height: 26rem; /* h-128 - adjust height for 3 cards */
}

.carousel-slide {
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Speaker card styling */
.speaker-card {
  transition: transform 0.3s ease-in-out;
}

.speaker-card:hover {
  transform: translateY(-4px);
}

/* Modal close button styling */
.modal-close-btn {
  @apply text-gray-400 hover:text-gray-600 transition-colors duration-300 p-2 rounded-full hover:bg-gray-100;
}

/* Modal animations and transitions */
.modal-enter {
  opacity: 0;
  transform: scale(0.9);
}

.modal-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.modal-exit {
  opacity: 1;
  transform: scale(1);
}

.modal-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 200ms ease-in, transform 200ms ease-in;
}

/* Ensure modal content is properly scrollable */
.modal-content {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #f7fafc;
}

.modal-content::-webkit-scrollbar {
  width: 6px;
}

.modal-content::-webkit-scrollbar-track {
  background: #f7fafc;
  border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}