/* Custom utilities for the project (kept minimal; main layout via Tailwind) */

/* Card shadow with smooth transition for hover (Events cards) */
.card-shadow {
  box-shadow: rgba(17, 17, 26, 0.1) 0 4px 16px, rgba(17, 17, 26, 0.05) 0 8px 32px;
  transition: box-shadow 500ms ease;
}
.card-shadow:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0 13px 27px -5px, rgba(0, 0, 0, 0.3) 0 8px 16px -8px;
}

/* Professional CTA Button - Using Brandbook Orange */
.btn-outline-orange {
  border-radius: 4px;
  border: 2px solid #F7A83E;
  color: #F7A83E;
  background: #FEFEFE;
  box-shadow: 0 4px 16px 0 rgba(247, 168, 62, 0.15);
  transition: all 0.3s ease;
}

.btn-outline-orange:hover {
  background: #F7A83E;
  color: #FEFEFE;
  box-shadow: 0 8px 24px 0 rgba(247, 168, 62, 0.25);
  transform: translateY(-1px);
}

/* Mobile Navigation Enhancements */
.mobile-menu-backdrop {
  backdrop-filter: blur(4px);
  animation: fadeInBackdrop 0.3s ease-out;
}

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

/* Mobile menu panel slide animation */
.mobile-panel-enter {
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-panel-enter-active {
  transform: translateX(0);
}

/* Touch-friendly interactions for mobile */
@media (max-width: 1024px) {
  .mobile-nav-item {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  .mobile-nav-item:active {
    background-color: rgba(42, 100, 127, 0.1);
  }
  
  /* Improved tap targets */
  .mobile-lang-button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Smooth scrolling for mobile menu */
  .mobile-menu-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* Fix for double scrollbars in animated components */
[data-aos] {
  overflow: visible !important;
}

/* Fix for any component with overflow */
.overflow-x-hidden {
  overflow-y: visible !important;
}

/* Fix for AOS animated components */
[data-aos="fade-up"],
[data-aos="fade-down"],
[data-aos="fade-right"],
[data-aos="fade-left"],
[data-aos="zoom-in"] {
  overflow: visible !important;
}

/* Fix any potential AOS container issues */
.aos-init, 
.aos-animate {
  overflow: visible !important;
}

/* Line clamp utilities for text truncation */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Fallback for browsers that don't support -webkit-line-clamp */
@supports not (-webkit-line-clamp: 1) {
  .line-clamp-1 {
    max-height: 1.5em;
    overflow: hidden;
    position: relative;
  }
  
  .line-clamp-1::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, transparent, white 50%);
    padding-left: 1em;
  }
  
  .line-clamp-2 {
    max-height: 3em;
    overflow: hidden;
    position: relative;
  }
  
  .line-clamp-2::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, transparent, white 50%);
    padding-left: 1em;
  }
  
  .line-clamp-3 {
    max-height: 4.5em;
    overflow: hidden;
    position: relative;
  }
  
  .line-clamp-3::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, transparent, white 50%);
    padding-left: 1em;
  }
}

/* Enhanced text truncation with better control */
.text-ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;
}

/* Ensure proper word wrapping for long location names */
.location-text {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}

/* Armenian text specific handling */
[lang="hy"] .location-text,
html[lang="hy"] .location-text {
  font-size: 0.875rem; /* Slightly smaller for Armenian */
  word-break: break-all; /* More aggressive breaking for long Armenian words */
  overflow-wrap: anywhere;
}

/* Responsive text sizing for multilingual support */
@media (max-width: 640px) {
  .location-text {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.2;
  }
  
  [lang="hy"] .location-text,
  html[lang="hy"] .location-text {
    font-size: 0.75rem; /* 12px for Armenian on mobile */
  }
}

/* Button text handling for different languages */
.btn-multilingual {
  min-width: fit-content;
  max-width: 100%;
}

.btn-multilingual span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Armenian button text adjustments */
[lang="hy"] .btn-multilingual,
html[lang="hy"] .btn-multilingual {
  font-size: 0.8125rem; /* Slightly smaller for Armenian buttons */
  padding-left: 0.75rem; /* Slightly more padding for "Տեսնել ավելին" */
  padding-right: 0.75rem;
  min-width: fit-content;
}

/* Mobile adjustments for Armenian buttons */
@media (max-width: 640px) {
  [lang="hy"] .btn-multilingual,
  html[lang="hy"] .btn-multilingual {
    font-size: 0.75rem; /* Even smaller on mobile for "Տեսնել ավելին" */
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
}

@media (max-width: 480px) {
  [lang="hy"] .btn-multilingual,
  html[lang="hy"] .btn-multilingual {
    font-size: 0.6875rem; /* 11px - very compact for mobile */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Participant count text handling */
.participants-text {
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px; /* Increased from 120px */
}

/* Armenian participants text needs more space */
[lang="hy"] .participants-text,
html[lang="hy"] .participants-text {
  max-width: 180px; /* More space for "մասնակիցներ" */
  font-size: 0.8125rem; /* Slightly smaller but still readable */
}

@media (max-width: 640px) {
  .participants-text {
    font-size: 0.8125rem;
    max-width: 140px; /* Increased from 100px */
  }
  
  [lang="hy"] .participants-text,
  html[lang="hy"] .participants-text {
    font-size: 0.75rem;
    max-width: 150px; /* Increased from 90px to fit "մասնակիցներ" */
  }
}

@media (max-width: 480px) {
  .participants-text {
    max-width: 120px;
  }
  
  [lang="hy"] .participants-text,
  html[lang="hy"] .participants-text {
    max-width: 130px; /* Still enough for "մասնակիցներ" */
    font-size: 0.75rem;
  }
}