@import url("/assets/actiontext-2541ac0d.css");
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap");

/* Shop bag animation */
@keyframes bag-bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.animate-bag-bounce {
  display: inline-block;
  animation: bag-bounce 0.3s ease-in-out;
}

/* Dark Landing Page Header Transitions */
.header-transparent {
  @apply bg-transparent;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.header-scrolled {
  @apply bg-neutral-950/95 backdrop-blur-sm;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Scroll-triggered animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Scroll indicator bounce */
@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.animate-scroll-bounce {
  animation: scrollBounce 2s infinite;
}

/* Video hero gradient overlay */
.video-gradient-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.3) 0%,
    rgba(10, 10, 10, 0.5) 50%,
    rgba(10, 10, 10, 0.8) 100%
  );
}

/* Animated gradient background (placeholder for video) */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient-bg {
  background: linear-gradient(
    135deg,
    #0a0a0a 0%,
    #171717 25%,
    #1f1f1f 50%,
    #171717 75%,
    #0a0a0a 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

/* Hotwire Combobox Full Width Styles */
@layer components {
  /* Ensure Hotwire Combobox takes full width in form containers */
  [data-controller*="hw-combobox"] {
    @apply w-full;
  }
  
  [data-controller*="hw-combobox"] .hw-combobox__main__wrapper {
    @apply w-full;
  }
  
  [data-controller*="hw-combobox"] input[role="combobox"] {
    @apply w-full;
  }
  
  /* Ensure dropdown listbox takes full width */
  [data-controller*="hw-combobox"] [role="listbox"] {
    @apply w-full;
    min-width: 100%;
  }
  
  /* Allow options to wrap text instead of truncating */
  [data-controller*="hw-combobox"] [role="option"],
  .hw-combobox__option {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    @apply text-sm;
  }
  
  /* Ensure the dropdown dialog is wide enough */
  [data-controller*="hw-combobox"] .hw-combobox__listbox {
    @apply w-full;
    min-width: 100%;
  }
}

/* Blog Editor WYSIWYG Styles
   ========================================================================== */

/* Style the Lexxy editor to match the public blog styling */
.blog-editor lexxy-editor {
  @apply rounded-xl border border-stone-200 bg-white overflow-hidden;
  font-family: inherit;
}

.blog-editor lexxy-editor .lexxy-editor__content {
  @apply px-6 py-8;
  min-height: 400px;
  font-size: 1.125rem;
  line-height: 1.75;
  color: #44403c; /* stone-700 */
}

/* Headings - match the public blog's font-yeseva styling */
.blog-editor .lexxy-content h1,
.blog-editor .lexxy-content h2,
.blog-editor .lexxy-content h3,
.blog-editor .lexxy-content h4,
.blog-editor .lexxy-content h5,
.blog-editor .lexxy-content h6 {
  font-family: 'Yeseva One', serif;
  font-weight: normal;
  color: #1c1917; /* stone-900 */
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.blog-editor .lexxy-content h2 {
  font-size: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.blog-editor .lexxy-content h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Paragraphs */
.blog-editor .lexxy-content p {
  margin-bottom: 1.5rem;
  line-height: 1.75;
}

/* Empty paragraphs should still take up space for line breaks */
.blog-editor .lexxy-content p:empty,
.blog-editor .lexxy-content p br {
  display: block;
}

.blog-editor .lexxy-content p:empty::before {
  content: '\00a0'; /* Non-breaking space */
  display: block;
}

/* Links */
.blog-editor .lexxy-content a {
  color: #0d9488; /* teal-600 */
  text-decoration: none;
}

.blog-editor .lexxy-content a:hover {
  text-decoration: underline;
}

/* Bold and strong */
.blog-editor .lexxy-content strong,
.blog-editor .lexxy-content .lexxy-content__bold {
  color: #1c1917; /* stone-900 */
  font-weight: 600;
}

/* Lists */
.blog-editor .lexxy-content ul,
.blog-editor .lexxy-content ol {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.blog-editor .lexxy-content ul {
  list-style-type: disc;
}

.blog-editor .lexxy-content ol {
  list-style-type: decimal;
}

.blog-editor .lexxy-content li {
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}

.blog-editor .lexxy-content li::marker {
  color: #78716c; /* stone-500 */
}

/* Nested lists */
.blog-editor .lexxy-content li ul,
.blog-editor .lexxy-content li ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Blockquotes */
.blog-editor .lexxy-content blockquote {
  border-left: 4px solid #14b8a6; /* teal-500 */
  background-color: rgba(245, 245, 244, 0.5); /* stone-100/50 */
  padding: 1rem 1.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
  font-style: normal;
  color: #44403c; /* stone-700 */
  margin: 1.5rem 0;
}

/* Code blocks */
.blog-editor .lexxy-content code {
  background-color: #f5f5f4; /* stone-100 */
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

.blog-editor .lexxy-content pre {
  background-color: #f5f5f4; /* stone-100 */
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.blog-editor .lexxy-content pre code {
  background: none;
  padding: 0;
}

/* Images */
.blog-editor .lexxy-content img {
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
}

/* Horizontal rule */
.blog-editor .lexxy-content hr,
.blog-editor .lexxy-content .horizontal-divider hr {
  border: none;
  border-top: 1px solid #e7e5e4; /* stone-200 */
  margin: 3rem 0;
}

/* Toolbar styling to match the editor aesthetic */
.blog-editor lexxy-toolbar {
  @apply bg-stone-50 border-b border-stone-200;
  padding: 0.5rem;
}

.blog-editor lexxy-toolbar button {
  @apply rounded-md;
}

.blog-editor lexxy-toolbar button:hover {
  @apply bg-stone-200;
}

.blog-editor lexxy-toolbar button[aria-pressed="true"] {
  @apply bg-stone-200;
}