/* Font declarations */
@font-face {
  font-family: 'Fuji-Bold';
  src: url('../../fonts/Fuji-Bold.woff2') format('woff2'),
       url('../../fonts/Fuji-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fuji-Regular';
  src: url('../../fonts/Fuji-Regular.woff2') format('woff2'),
       url('../../fonts/Fuji-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GothamCondensed-Bold';
  src: url('../../fonts/GothamCondensed-Bold.woff2') format('woff2'),
       url('../../fonts/GothamCondensed-Bold.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GothamCondensed-Medium';
  src: url('../../fonts/GothamCondensed-Medium.woff2') format('woff2'),
       url('../../fonts/GothamCondensed-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GothamCondensed-Light';
  src: url('../../fonts/GothamCondensed-Light.woff2') format('woff2'),
       url('../../fonts/GothamCondensed-Light.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WindsorBold';
  src: url('../../fonts/WindsorBold.woff2') format('woff2'),
       url('../../fonts/WindsorBold.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ApercuRegular';
  src: url('../../fonts/ApercuRegular.woff2') format('woff2'),
       url('../../fonts/ApercuRegular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Global styles */
body {
  font-family: 'ApercuRegular', sans-serif;
  color: #000000;
  font-size: 14px;
}

h1, h2 {
  font-family: 'Fuji-Bold', sans-serif;
  color: #222222;
  font-weight: 700 !important;
}

h3, h4, h5, h6 {
  font-family: 'Fuji-Regular', sans-serif;
  color: #222222;
  font-weight: 700 !important;
}

/* Custom font classes for Tailwind */
.font-fuji-bold {
  font-family: 'Fuji-Bold', sans-serif;
}

.font-fuji-regular {
  font-family: 'Fuji-Regular', sans-serif;
}

.font-gotham-bold {
  font-family: 'GothamCondensed-Bold', sans-serif;
}

.font-gotham-medium {
  font-family: 'GothamCondensed-Medium', sans-serif;
}

.font-gotham-light {
  font-family: 'GothamCondensed-Light', sans-serif;
}

.font-windsor {
  font-family: 'WindsorBold', sans-serif;
}

.font-apercu {
  font-family: 'ApercuRegular', sans-serif;
}
.bg-purple {
  background-color: #c9c8e5;
}
.bg-orange {
  background-color: #efbf85;
}
.bg-yellow {
  background-color: #f6e97b;
}
.bg-green {
  background-color: #68892d;
}
/* Set fixed width for active score columns (10-18), OUT, IN, Gross, HDCP, Net */
#scrambleScorecard th:nth-child(n+11):nth-child(-n+19),  /* Columns 11-19: holes 10-18 */
#scrambleScorecard th:nth-child(10),                    /* Column 10: OUT */
#scrambleScorecard th:nth-child(20),                    /* Column 20: IN */
#scrambleScorecard th:nth-child(21),                    /* Column 21: Gross */
#scrambleScorecard th:nth-child(22),                    /* Column 22: HDCP */
#scrambleScorecard th:nth-child(23),                    /* Column 23: Net */
#scrambleScorecard td:nth-child(n+11):nth-child(-n+19),
#scrambleScorecard td:nth-child(10),
#scrambleScorecard td:nth-child(20),
#scrambleScorecard td:nth-child(21),
#scrambleScorecard td:nth-child(22),
#scrambleScorecard td:nth-child(23) {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
}

/* Set narrower width for inactive/empty columns (holes 1-9) */
#scrambleScorecard th:nth-child(n+2):nth-child(-n+9),  /* Columns 2-9: holes 1-9 */
#scrambleScorecard td:nth-child(n+2):nth-child(-n+9) {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
}

/* Allow the team name column, win column, and points column to adjust based on content */
#scrambleScorecard th:first-child,
#scrambleScorecard td:first-child,
#scrambleScorecard th:nth-child(24),
#scrambleScorecard td:nth-child(24),
#scrambleScorecard th:nth-child(25),
#scrambleScorecard td:nth-child(25) {
  width: auto !important;
}
#scrambleScorecard th:nth-child(21) {
  padding-right: 12px !important; /* Increase right padding of IN column */
}

#scrambleScorecard th[data-sort="gross"] {
  padding-left: 12px !important; /* Increase left padding of GROSS column */
}
/*button hover*/
.button-hover, .button-hover-light-blue {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 2px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.button-hover::before, .button-hover-light-blue::before  {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 9999px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.button-hover-light-blue::before {
  background-color: #d5f1f4;
}

.button-hover:hover, .button-hover-light-blue:hover {
  color: #05445E;
  border-color: #05445E;
}

.button-hover:hover::before, .button-hover-light-blue:hover::before {
  opacity: 1;
}
.inverse-button-hover {
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s ease;
}

.inverse-button-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #dae9d7;
  border-radius: 9999px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}


.inverse-button-hover:hover::before {
  opacity: 1;
}
.drop-shadow-xl {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.drop-shadow-lg {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* Scroll container styles */
.scroll-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.scroll-text {
  display: inline-block;
  animation: scroll 20s linear infinite;
  letter-spacing: 1px;
  transform: translateX(0);
}

.scroll-container:hover .scroll-text {
  animation-play-state: paused;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.hero-mobile {
  height: 540px;
}
summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Additional fix for Firefox */
summary::marker {
  display: none;
}

/* Fix for Safari */
summary::-webkit-details-marker {
  color: transparent;
}
/*sponsors*/
/* Container styling for all sponsor logos */
.sponsor-container {
  border-radius: 8px;
  background: #e8e8e8;
  padding: 6px;
}
/* Subtle blue tint for new sponsor logos */
.sponsor-logo {
  filter: grayscale(30%) sepia(5%) hue-rotate(165deg) saturate(60%) brightness(0.95);
  border-radius: 8px;
  background: white;
  padding: 6px;
}

/* Automatic scrolling animation */
.sponsors-scroll {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.sponsors-track {
  animation: scroll 45s linear infinite;
  width: fit-content;
}

.sponsors-scroll-reverse {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.sponsors-track-reverse {
  animation: scroll-reverse 35s linear infinite;
  width: fit-content;
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%);
  }
}

@keyframes scroll-reverse {
  0% {
      transform: translateX(-50%);
  }
  100% {
      transform: translateX(0);
  }
}

/* Pause animation on hover */
.sponsors-scroll:hover .sponsors-track,
.sponsors-scroll-reverse:hover .sponsors-track-reverse {
  animation-play-state: paused;
}

/* For reduced motion preferences */
@media (prefers-reduced-motion) {
  .sponsors-track, .sponsors-track-reverse {
      animation: none;
  }
}

/* Table container with fixed height and vertical scroll */
  .table-scroll-container {
    max-height: 500px;  /* Adjust this value as needed */
    overflow-y: auto;
    overflow-x: auto;
  }
  
  /* Ensures the header stays visible when scrolling */
  thead.sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #05445E;
    box-shadow: 0 2px 4px rgba(5, 68, 94, 0.2);
  }
  .scrollbar-none {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
  }
  
  .scrollbar-none::-webkit-scrollbar {
    display: none;            /* Chrome, Safari, Opera */
  }
  /* iOS Safari specific fix for older versions */
@supports (-webkit-touch-callout: none) and (not (backdrop-filter: none)) {
  #mensHandicapTable thead, #womensHandicapTable thead {
    position: -webkit-sticky !important;
    top: 0 !important;
  }
}

/* Fix for horizontal scrolling */
html, body {
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

.product-card {
  transform-origin: center center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  border-radius: 32px !important;
  overflow: hidden;
}

.product-card.active {
  transform: none !important;
}

.product-card .arrow-btn {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card:hover .arrow-btn {
  opacity: 1;
}

.carousel-shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 81%;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 70%);
}

/* New styles for carousel adjustments */
.product-carousel {
  width: 100% !important; /* Changed from 100vw to prevent body overflow */
  position: relative;
  touch-action: pan-y; /* Allow vertical scrolling but not horizontal */
  /* Removed margin-left and margin-right calcs that were causing overflow */
}

.product-track {
  padding: 0;
  overflow: visible;
  position: relative;
  width: 100%;
  height: 320px;
  user-select: none; /* Prevent text selection during swipe */
  touch-action: pan-y; /* Allow vertical scrolling but not horizontal */
}

.product-card-inner {
  width: 100%;
  height: 100%;
  border-radius: 32px !important;
  overflow: hidden;
  position: relative;
}

.product-card img {
  width: 100% !important;
  height: 110% !important; /* Increased height for taller images */
  z-index: 0;
  max-width: none; /* Allow image to be full width */
  object-fit: contain; /* Maintain aspect ratio while filling */
}

/* Make center card image bigger */
.product-card.center img {
  transform: scale(1.044);
}

/* Make side card images bigger */
.product-card:not(.center) img {
  transform: scale(1.038);
}

.product-card .product-content {
  position: relative;
  z-index: 1;
}

.product-card .title-area {
  margin-top: 16px;
}

.product-card .price-area {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Add scaling for non-center cards */
.product-card:not(.center) .product-content {
  transform: scale(0.7);
  transform-origin: top left;
}

/* Fix for rounded corners */
.product-card-inner {
  border-radius: 32px !important;
  overflow: hidden;
}

/* Container for carousel to prevent page overflow */
.carousel-container {
  overflow-x: hidden;
  position: relative;
  width: 100%;
  touch-action: pan-y; /* Allow vertical scrolling but not horizontal */
}

.hero-mobile-img {
  transform: translateX(15%); /* Move 15% to the right */
  width: 120%; /* Make image wider */
  max-width: none; /* Override max-width constraints */
  height: 100%;
  object-fit: cover;
  object-position: 70% 85%; /* Focus more on the right side */
}

.testimonials-container {
@apply relative overflow-hidden w-full;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}

.testimonials-track {
@apply flex transition-all duration-500;
will-change: transform;
}

.testimonial-slide {
@apply flex-shrink-0 p-3;
}

.testimonial-slide > div {
@apply h-full flex flex-col rounded-3xl overflow-hidden;
}

/* Make sure the carousel is visible outside its container */
.testimonials-carousel {
@apply overflow-visible !important;
}

/* Arrow styling */
.testimonial-prev,
.testimonial-next,
.testimonial-prev-mobile,
.testimonial-next-mobile {
@apply cursor-pointer transition-opacity duration-300 ease-in-out;
}

/* Animation state class */
.animation-in-progress {
@apply pointer-events-none;
}

/* Swipe handling */
.swipe-overlay {
@apply absolute w-full h-full top-0 left-0 z-10;
touch-action: pan-x;
cursor: grab;
}

.swipe-overlay:active {
cursor: grabbing;
}

/* Reduce hero content top padding on desktop */
@media (min-width: 768px) {
  .hero-content-wrapper {
      padding-top: 0 !important;
  }

  .product-track {
      transform: none;
  }
  .hero-mobile-img {
      transform: none;
      width: 100%;
  }
}



/* Desktop adjustments to match design */
@media (min-width: 768px) {
  .product-track {
    transform: none;
}

/* Make center card bigger only on desktop */
.product-card.center {
    width: 319px !important;
    height: 319px !important;
}
  .testimonial-prev {
@apply -left-12;
}

.testimonial-next {
@apply -right-12;
}

.testimonial-slide {
@apply w-auto;
width: 369px !important; /* Force exact width */
}

.testimonials-container {
@apply overflow-visible;
}

/* Adjust positioning to show partial third card */
.testimonials-carousel {
@apply pr-16; /* Add right padding to show partial third card */
}
}

/* Mobile swipe styles */
.swipe-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  touch-action: pan-x; /* Only allow horizontal swiping */
  cursor: grab;
}

.swipe-overlay:active {
  cursor: grabbing;
}

/* Prevent text selection during swipe */
.testimonials-carousel {
user-select: none;
}

/* Responsive design */
@media (max-width: 768px) {
  /* Add mobile-specific styles here */
}
@media (min-width: 768px) {
  .modal-close {
    display: flex !important;
  }
}