/* Scrolling SVG Block - Theme-integrated Frontend Styles */

.wp-block-custom-scrolling-svg {
  /* Use theme's content width and inherit theme properties */
  position: relative;
  overflow: hidden;
  width: 100%;

  /* Default height if not specified */
  height: var(--block-height, 400px);
  min-height: 200px;

  /* Inherit theme colors and fonts */
  background: var(--wp--preset--color--base, transparent);
  color: var(--wp--preset--color--foreground, inherit);

  /* Smooth transitions for dynamic changes */
  transition: height 0.3s ease;
}

/* Main scrolling container */
.wp-block-custom-scrolling-svg .scrolling-svg-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* Performance optimization */
  transform: translateZ(0);
  will-change: contents;
}

/* Scrolling content wrapper */
.wp-block-custom-scrolling-svg .scrolling-svg-content {
  position: relative;
  width: 100%;
  /* Height will be set dynamically by JavaScript */
  display: flex;
  flex-direction: column;

  /* Performance optimizations */
  will-change: transform;
  backface-visibility: hidden;
  transform3d: translateZ(0);

  /* Animation will be added dynamically via JavaScript */
  transform: translateY(0);
}

/* Individual SVG wrapper */
.wp-block-custom-scrolling-svg .svg-wrapper {
  position: relative;
  width: 100%;
  /* Height will be set dynamically by JavaScript */
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

/* SVG image styling - FIXED to ensure 100% width coverage */
.wp-block-custom-scrolling-svg .scrolling-svg-image {
  width: 100%;
  height: auto; /* Changed from 100% to auto to maintain aspect ratio */
  /* Removed object-fit: cover to prevent cropping */
  object-fit: fill; /* This ensures SVG fills the entire width */
  object-position: center top;
  display: block;

  /* Ensure crisp SVG rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;

  /* Performance optimization */
  transform: translateZ(0);

  /* Ensure SVG scales properly */
  max-width: 100%;
  min-width: 100%;
}

/* Alternative SVG sizing for better aspect ratio handling */
@supports (aspect-ratio: 1) {
  .wp-block-custom-scrolling-svg .scrolling-svg-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }
}

/* Duplicate SVG for seamless infinite scroll */
.wp-block-custom-scrolling-svg .svg-duplicate {
  /* Hide from screen readers since it's decorative */
  aria-hidden: true;
}

/* Animation paused state */
.wp-block-custom-scrolling-svg.animation-paused .scrolling-svg-content {
  animation-play-state: paused !important;
}

/* Placeholder styles for when no SVG is selected */
.wp-block-custom-scrolling-svg.scrolling-svg-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 2px dashed var(--wp--preset--color--base-3, rgba(0, 0, 0, 0.1));
  border-radius: var(--wp--preset--spacing--20, 4px);
}

.wp-block-custom-scrolling-svg .scrolling-svg-placeholder-content {
  text-align: center;
  padding: var(--wp--preset--spacing--medium, 2rem);
  color: var(--wp--preset--color--base-2, #666);
}

.wp-block-custom-scrolling-svg .placeholder-icon {
  margin-bottom: var(--wp--preset--spacing--small, 1rem);
  opacity: 0.6;
}

.wp-block-custom-scrolling-svg .placeholder-icon svg {
  display: block;
  margin: 0 auto;
}

.wp-block-custom-scrolling-svg .scrolling-svg-placeholder-content p {
  margin: 0;
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  font-style: italic;
}

/* Loading state */
.wp-block-custom-scrolling-svg .scrolling-svg-image[src=''],
.wp-block-custom-scrolling-svg .scrolling-svg-image:not([src]) {
  background: var(--wp--preset--color--base-2, #f0f0f0);
  position: relative;
  min-height: 100px; /* Ensure minimum height during loading */
}

.wp-block-custom-scrolling-svg .scrolling-svg-image[src='']:after,
.wp-block-custom-scrolling-svg .scrolling-svg-image:not([src]):after {
  content: 'Loading SVG...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--wp--preset--color--base-2, #666);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  font-style: italic;
  font-family: var(--wp--preset--font-family--system, inherit);
}

/* Error state */
.wp-block-custom-scrolling-svg.error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--wp--preset--color--base, #f9f9f9);
  border: 1px solid var(--wp--preset--color--base-3, #ddd);
  border-radius: var(--wp--preset--spacing--20, 4px);
}

.wp-block-custom-scrolling-svg .error-message {
  color: var(--wp--preset--color--base-2, #666);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  text-align: center;
  padding: var(--wp--preset--spacing--medium, 2rem);
}

/* Screen reader only content */
.wp-block-custom-scrolling-svg .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .wp-block-custom-scrolling-svg {
    min-height: 150px;
  }

  .wp-block-custom-scrolling-svg.scrolling-svg-placeholder {
    min-height: 150px;
  }

  .wp-block-custom-scrolling-svg .scrolling-svg-placeholder-content {
    padding: var(--wp--preset--spacing--small, 1rem);
  }
}

@media (max-width: 480px) {
  .wp-block-custom-scrolling-svg {
    min-height: 120px;
  }

  .wp-block-custom-scrolling-svg .scrolling-svg-placeholder-content p {
    font-size: var(--wp--preset--font-size--x-small, 0.75rem);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .wp-block-custom-scrolling-svg.scrolling-svg-placeholder {
    border-color: currentColor;
  }

  .wp-block-custom-scrolling-svg .scrolling-svg-placeholder-content {
    color: currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .wp-block-custom-scrolling-svg .scrolling-svg-content {
    animation: none !important;
    transform: translateY(0) !important;
  }

  .wp-block-custom-scrolling-svg::after {
    content: 'Animation paused (motion preference)';
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    font-size: var(--wp--preset--font-size--x-small, 0.65rem);
    color: var(--wp--preset--color--base-2, #666);
    background: var(--wp--preset--color--base, rgba(255, 255, 255, 0.9));
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    opacity: 0.8;
    pointer-events: none;
  }
}

/* Print styles */
@media print {
  .wp-block-custom-scrolling-svg .scrolling-svg-content {
    animation: none !important;
    transform: translateY(0) !important;
    height: auto !important;
  }

  .wp-block-custom-scrolling-svg .svg-duplicate {
    display: none;
  }

  .wp-block-custom-scrolling-svg .svg-wrapper {
    height: auto;
  }
}

/* RTL (Right-to-Left) language support */
[dir='rtl'] .wp-block-custom-scrolling-svg .scrolling-svg-image {
  transform: scaleX(-1);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .wp-block-custom-scrolling-svg.scrolling-svg-placeholder {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
  }

  .wp-block-custom-scrolling-svg .scrolling-svg-placeholder-content {
    color: rgba(255, 255, 255, 0.7);
  }

  .wp-block-custom-scrolling-svg .scrolling-svg-image[src='']:after,
  .wp-block-custom-scrolling-svg .scrolling-svg-image:not([src]):after {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.8);
  }
}

/* Accessibility improvements */
.wp-block-custom-scrolling-svg:focus-within {
  outline: 2px solid var(--wp--preset--color--primary, #0073aa);
  outline-offset: 2px;
}

/* Performance optimizations for older browsers */
.wp-block-custom-scrolling-svg .scrolling-svg-content {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}

/* Safari-specific optimizations */
@supports (-webkit-appearance: none) {
  .wp-block-custom-scrolling-svg .scrolling-svg-image {
    -webkit-transform: translateZ(0);
  }
}

/* Firefox-specific optimizations */
@-moz-document url-prefix() {
  .wp-block-custom-scrolling-svg .scrolling-svg-content {
    will-change: auto; /* Firefox handles will-change differently */
  }
}

/* Edge/IE fallback (though these browsers are largely deprecated) */
@supports not (transform: translateZ(0)) {
  .wp-block-custom-scrolling-svg .scrolling-svg-content {
    position: relative;
    zoom: 1; /* IE zoom hack for performance */
  }
}

.wp-block-custom-scrolling-svg.alignfull,
.wp-block-custom-scrolling-svg.alignwide {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.wp-block-custom-scrolling-svg.alignwide {
  /* Fallback for themes without --wp--style--global--wide-size */
  max-width: var(--wp--style--global--wide-size, 1200px);
}

body:has(.wp-block-custom-scrolling-svg.alignfull) {
  overflow-x: hidden;
}