/* Custom styles for BlancJoki */

* {
  box-sizing: border-box;
}

/* Form fields: placeholder stays gray, typed text is black */
input::placeholder,
textarea::placeholder {
  color: #888;
  opacity: 1;
}

input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
  color: #1a1a1a;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1a1a1a;
  background-color: #fafafa;
  -webkit-font-smoothing: antialiased;
}

.font-oswald {
  font-family: 'Oswald', sans-serif;
}

/* Hero Slider */
.hero-slide {
  transition: opacity 0.6s ease-in-out;
}

/* Product Tab Active */
.tab-btn.active {
  border-color: #8903ff;
  color: #8903ff;
}

/* FAQ Accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
}

.faq-item.open {
  border-color: #8903ff !important;
}

.faq-item.open .faq-icon-minus {
  display: block;
}

.faq-item.open .faq-icon-plus {
  display: none;
}

.faq-item:not(.open) .faq-icon-minus {
  display: none;
}

.faq-item:not(.open) .faq-icon-plus {
  display: block;
}

/* Navbar scroll effect */
header.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

/* Game card hover */
.game-card {
  transition: box-shadow 0.2s ease;
}

.game-card:hover {
  box-shadow: inset 0 0 0 4px #8903ff;
}

.game-card-hover-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.game-card:hover .game-card-hover-overlay {
  opacity: 1;
}

/* Service card hover */
.service-card {
  transition: box-shadow 0.2s ease;
  cursor: pointer;
}

.service-card:hover {
  box-shadow: inset 0 0 0 4px #8903ff;
}

.service-card-hover-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.service-card:hover .service-card-hover-overlay {
  opacity: 1;
}

/* Mobile menu */
#mobile-menu {
  transition: max-height 0.35s ease, opacity 0.35s ease;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

#mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

/* Tab scroll — hide scrollbar cross-browser */
.services-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.services-scroll::-webkit-scrollbar {
  display: none;
}

/* Dot indicators */
.slide-dot {
  transition: all 0.3s ease;
}

.slide-dot.active {
  background-color: #fafafa;
  width: 24px;
  border-radius: 4px;
}

/* Bottom nav mobile + tablet */
@media (max-width: 1023px) {
  .has-bottom-nav {
    padding-bottom: 72px;
  }
}

/* ─── Mega Menu ──────────────────────────────── */
#mega-menu {
  position: absolute;
  left: 50%;
  width: 100%;
  max-width: 1200px;
  top: 100%;
  z-index: 40;
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

@media (min-width: 1024px) {
  #mega-menu {
    display: block;
  }
}

#mega-menu.mega-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-game-item .game-name,
.mega-game-item .game-arrow {
  transition: color 0.15s, stroke 0.15s;
}

.mega-game-item:hover .game-name {
  color: #8903ff;
}

.mega-game-item:hover .game-arrow {
  stroke: #8903ff;
}

/* Card hover states */
.mm-narrow-card,
.mm-wide-card {
  transition: box-shadow 0.2s ease;
}

.mm-narrow-card:hover,
.mm-wide-card:hover {
  box-shadow: inset 0 0 0 4px #8903ff;
}

.mm-hover-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mm-narrow-hover {
  background: linear-gradient(180deg, rgba(66,0,123,0.9) 5.4%, rgba(66,0,123,0.25) 52.7%, rgba(66,0,123,0.9) 100%);
}

.mm-wide-hover {
  background: linear-gradient(202deg, rgba(66,0,123,0) 18.85%, rgb(66,0,123) 86.81%);
}

.mm-narrow-card:hover .mm-hover-overlay,
.mm-wide-card:hover .mm-hover-overlay {
  opacity: 1;
}

/* Service slider — hide scrollbar */
.service-slider {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.service-slider::-webkit-scrollbar {
  display: none;
}


/* Service slider dots */
.service-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .service-dots { display: none; }
}

.service-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e5e4e4;
  transition: background-color 0.2s ease;
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.service-dot.active {
  background-color: #8903ff;
}