/**
 * PS Container Block Styles
 * 
 * Frontend and editor styles for the container block
 */

/* ==========================================================================
   Container Block - Frontend Styles
   ========================================================================== */

/* Base container styles */
.ps5-container {
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

/* Border defaults */
.ps5-container {
  border: 0 solid transparent;
}

/* Container Width Variants - Controls the outer container */
.ps5-container-full-width {
  width: 100%;
  max-width: none;
  /* Use CSS Grid or calc() for better full-width breakout */
}

/* Full-width breakout - only on frontend, not in editor */
body:not(.wp-admin) .ps5-container-full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Prevent horizontal scroll on body when using full-width containers */
body:not(.wp-admin):has(.ps5-container-full-width) {
  overflow-x: hidden;
}

/* Fallback for browsers that don't support :has() */
@supports not (selector(:has(*))) {
  body:not(.wp-admin) {
    overflow-x: hidden;
  }
}

.ps5-container-site-width {
  width: 100%;
  max-width: none; /* No limit on container itself */
}

.ps5-container-custom-width {
  width: 100%;
  max-width: none; /* No limit on container itself */
}

/* Editor-specific: Keep all containers within bounds */
.wp-admin .ps5-container-full-width,
.block-editor-writing-flow .ps5-container-full-width,
.block-editor-block-list__layout .ps5-container-full-width,
.editor-styles-wrapper .ps5-container-full-width {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
}

/* Inner Content Area - Controls the content width within the container */
.ps5-container-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
}

/* Content width for site-width containers */
.ps5-container-site-width .ps5-container-inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Content width for full-width containers */
.ps5-container-full-width .ps5-container-inner {
  max-width: none;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Content width for custom-width containers */
.ps5-container-custom-width .ps5-container-inner {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  /* Custom width will be set via inline styles */
}

/* Content alignment */
.ps5-container-align-left .ps5-container-inner {
  text-align: left;
}

.ps5-container-align-center .ps5-container-inner {
  text-align: center;
}

.ps5-container-align-right .ps5-container-inner {
  text-align: right;
}

/* Overlay */
.ps5-container-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ps5-container-site-width,
  .ps5-container-custom-width {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Reduce excessive margins on mobile */
  .ps5-container {
    margin-left: min(var(--margin-left, 0), 1rem) !important;
    margin-right: min(var(--margin-right, 0), 1rem) !important;
  }
}

/* ==========================================================================
   Container Block - Editor Styles
   ========================================================================== */

/* Editor-specific styles */
.ps5-container-block {
  position: relative;
  min-height: 50px;
  border: 2px dashed #ddd;
  transition: border-color 0.2s ease;
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}

.ps5-container-block:hover {
  border-color: #4f46e5;
}

/* Hide dashed border when container has background */
.ps5-container-block[style*='background-color'],
.ps5-container-block[style*='background-image'] {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.ps5-container-block[style*='background-color']:hover,
.ps5-container-block[style*='background-image']:hover {
  border-color: #4f46e5 !important;
}

/* Ensure container blocks stay within editor boundaries */
.block-editor-block-list__block[data-type='ps5-theme/container'] {
  max-width: 100% !important;
  overflow: visible !important;
}

/* Prevent horizontal scrolling in editor */
.block-editor-writing-flow .ps5-container-block {
  max-width: 100%;
  overflow-x: hidden;
}

/* No special sidebar handling needed - editor containers are already constrained */

/* Editor width variants - All containers behave normally in editor */
.wp-admin .ps5-container-full-width,
.wp-admin .ps5-container-site-width,
.wp-admin .ps5-container-custom-width {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  position: relative;
}

/* Editor inner container styles */
.editor-styles-wrapper .ps5-container-site-width .ps5-container-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.editor-styles-wrapper .ps5-container-full-width .ps5-container-inner {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.editor-styles-wrapper .ps5-container-custom-width .ps5-container-inner {
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Inner container in editor */
.ps5-container-inner {
  position: relative;
  z-index: 2;
  min-height: 50px;
}

/* Block appender styling */
.ps5-container-inner .block-list-appender {
  margin: 1rem 0;
}

.ps5-container-inner .wp-block {
  margin: 1rem 0;
}
.ps5-container-block .block-list-appender.wp-block {
  max-width: 350px;
  line-height: 0;
  margin: 20px 0px 20px 0px;
  width: 100%;
  position: relative;
  text-align: center;
  display: inline-block;
}

/* Empty state */
.ps5-container-inner:empty::before {
  content: 'Add blocks here...';
  color: #999;
  font-style: italic;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Visual indicator for full-width containers in editor */
.block-editor-writing-flow .ps5-container-full-width::before {
  content: 'Full Width (Preview - constrained in editor)';
  display: block;
  background: #4f46e5;
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  position: absolute;
  top: -25px;
  left: 0;
  z-index: 10;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.block-editor-writing-flow .ps5-container-site-width::before {
  content: 'Site Width';
  display: block;
  background: #ffffff;
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  position: absolute;
  top: -25px;
  left: 0;
  z-index: 10;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.block-editor-writing-flow .ps5-container-custom-width::before {
  content: 'Custom Width';
  display: block;
  background: #059669;
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  position: absolute;
  top: -25px;
  left: 0;
  z-index: 10;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Drop zone indicators */
.ps5-container-block .block-editor-inserter__toggle {
  background: #4f46e5;
  color: white;
  border-radius: 4px;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ps5-container-block .block-editor-inserter__toggle:hover {
  background: #4338ca;
}

/* Visual spacing indicators in editor - only show if no background */
.ps5-container-block[style*='padding']:not([style*='background-color']):not(
    [style*='background-image']
  ) {
  position: relative;
}

.ps5-container-block[style*='padding']:not([style*='background-color']):not(
    [style*='background-image']
  )::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px dashed rgba(79, 70, 229, 0.3);
  pointer-events: none;
  z-index: 0;
}

/* Background image in editor */
.ps5-container-block[style*='background-image'] {
  background-attachment: scroll !important; /* Override fixed in editor */
}

/* Ensure background properties work in the editor */
.ps5-container-block {
  background-color: transparent; /* Default transparent background */
  background-image: none; /* Default no background image */
}

/* Ensure editor doesn't override background styles */
.wp-admin .ps5-container-block {
  background-color: inherit;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
}

/* Inspector controls styling */
.components-panel__body h4 {
  margin: 16px 0 8px 0;
  font-weight: 600;
  color: #1e1e1e;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.components-panel__body hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid #e1e1e1;
}

/* Color palette improvements */
.components-color-palette {
  margin-top: 8px;
}

.components-color-palette__clear-button {
  margin-top: 8px;
}

/* Range control improvements */
.components-range-control {
  margin-bottom: 16px;
}

.components-range-control__wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.components-range-control__slider {
  flex: 1;
}

/* Media upload button improvements */
.components-button.is-primary {
  background: #4f46e5;
  border-color: #4f46e5;
}

.components-button.is-primary:hover:not(:disabled) {
  background: #4338ca;
  border-color: #4338ca;
}

.components-button.is-secondary {
  color: #4f46e5;
  border-color: #4f46e5;
}

.components-button.is-destructive {
  color: #dc2626;
  border-color: #dc2626;
}

.components-button.is-destructive:hover:not(:disabled) {
  background: #dc2626;
  color: white;
}