/**
 * Frontend Styles for WP Custom Snippets
 * 
 * IMPORTANT: These styles are designed to be defensive and forgiving.
 * They prevent common issues where snippet content becomes invisible due to:
 * - Inline styles with height: 0 or similar
 * - CSS conflicts with themes or frameworks (Tailwind, Bootstrap, etc.)
 * - Overflow issues creating tiny scrollable boxes
 * 
 * @since 1.0.0
 * @updated 2026-02-12 - Fixed visibility issues caused by overflow-x: auto
 */

/* ==========================================================================
   SNIPPET CONTAINER - Main Wrapper
   ========================================================================== */

/**
 * Main container for snippets.
 * 
 * REMOVED: overflow-x: auto (was causing tiny scrollable boxes when combined
 * with problematic inline styles like height: 0px)
 * 
 * ADDED: overflow: visible to ensure content always shows
 */
.wp-custom-snippet-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    /* Allow content to expand naturally - no clipping */
    overflow: visible;
    
    /* Ensure container takes up space even with problematic children */
    min-height: auto;
    
    /* Reset any inherited height restrictions */
    height: auto !important;
    
    /* Ensure visibility */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ==========================================================================
   DEFENSIVE STYLES - Override Problematic Inline Styles
   ========================================================================== */

/**
 * Override height: 0 and similar problematic inline styles on child elements.
 * This prevents content from becoming invisible when snippet HTML contains
 * problematic inline styles (e.g., from copy-pasted code or CSS frameworks).
 * 
 * Using !important to override inline styles which have high specificity.
 * 
 * EXCEPTION: Gauge components and other fixed-height elements are excluded
 * using :not() selectors to preserve their required dimensions.
 */

/* Direct children - prevent height collapse (excluding gauge components) */
.wp-custom-snippet-container > *:not(.gauge-container):not(.gauge-wrapper):not([class*="gauge"]) {
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0; /* Allow flexbox to work properly */
    height: auto !important; /* Override any height: 0px inline styles */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Second-level children - common nesting pattern (excluding gauge components) */
.wp-custom-snippet-container > * > *:not(.gauge-container):not(.gauge-background):not(.gauge-mask):not(.gauge-needle):not(.gauge-labels):not([class*="gauge"]) {
    height: auto !important;
    min-height: 0;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Third-level children - for deeply nested structures (excluding gauge components) */
.wp-custom-snippet-container > * > * > *:not([class*="gauge"]) {
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/**
 * Target common wrapper elements that might have height: 0
 * These selectors target common patterns in CSS frameworks
 * EXCLUDING gauge elements to preserve their fixed heights
 */
.wp-custom-snippet-container div:not(.gauge-container):not(.gauge-background):not(.gauge-mask):not(.gauge-needle):not(.gauge-labels):not([class*="gauge"]),
.wp-custom-snippet-container section:not([class*="gauge"]),
.wp-custom-snippet-container article,
.wp-custom-snippet-container main,
.wp-custom-snippet-container header,
.wp-custom-snippet-container footer {
    height: auto !important;
    min-height: 0;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   GAUGE COMPONENT PRESERVATION
   ========================================================================== */

/**
 * Preserve fixed heights for gauge/meter components.
 * These components (like password strength meters) require specific dimensions
 * to render correctly. These rules override the general height: auto rules.
 */
.wp-custom-snippet-container .gauge-container,
.wp-custom-snippet-container [class*="gauge-container"] {
    height: 140px !important;
    min-height: 140px !important;
}

.wp-custom-snippet-container .gauge-background,
.wp-custom-snippet-container [class*="gauge-background"] {
    height: 100% !important;
}

.wp-custom-snippet-container .gauge-mask,
.wp-custom-snippet-container [class*="gauge-mask"] {
    height: 115px !important;
    min-height: 115px !important;
}

.wp-custom-snippet-container .gauge-needle,
.wp-custom-snippet-container [class*="gauge-needle"] {
    height: 115px !important;
    min-height: 115px !important;
}

.wp-custom-snippet-container .gauge-labels,
.wp-custom-snippet-container [class*="gauge-labels"] {
    height: 100% !important;
}

/* General gauge element preservation - catch any other gauge-related classes */
.wp-custom-snippet-container [class*="gauge"] {
    /* Don't force height: auto on gauge elements */
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   OVERFLOW HANDLING - Prevent Scrollable Boxes
   ========================================================================== */

/**
 * Allow horizontal scrolling ONLY on specific elements that need it,
 * not on the main container (which was causing the visibility bug).
 * 
 * Tables and code blocks may legitimately need horizontal scroll.
 */

/* Tables can have horizontal scroll if needed */
.wp-custom-snippet-container table {
    width: 100%;
    max-width: 100%;
    display: table; /* Reset from display: block */
    overflow-x: auto;
}

/* Wrapper for wide tables */
.wp-custom-snippet-container .table-wrapper,
.wp-custom-snippet-container .table-responsive {
    overflow-x: auto;
    width: 100%;
}

/* Code blocks may need horizontal scroll */
.wp-custom-snippet-container pre,
.wp-custom-snippet-container code {
    overflow-x: auto;
    max-width: 100%;
}

/* ==========================================================================
   RESPONSIVE MEDIA
   ========================================================================== */

/* Responsive images within snippets */
.wp-custom-snippet-container img {
    max-width: 100%;
    height: auto !important; /* Override any fixed height */
    display: block;
}

/* Responsive iframes (for embedded content) */
.wp-custom-snippet-container iframe {
    max-width: 100%;
    height: auto;
    min-height: 200px; /* Ensure iframes are visible */
}

/* Responsive videos */
.wp-custom-snippet-container video {
    max-width: 100%;
    height: auto !important;
}

/* ==========================================================================
   FLEXBOX & GRID COMPATIBILITY
   ========================================================================== */

/**
 * Ensure flex and grid layouts work properly within snippets.
 * Don't force height on flex/grid containers.
 */
.wp-custom-snippet-container [class*="flex"],
.wp-custom-snippet-container [class*="grid"] {
    min-height: 0; /* Allow shrinking in flex/grid */
}

/* Tailwind flex utilities - ensure children are visible */
.wp-custom-snippet-container .flex,
.wp-custom-snippet-container .inline-flex,
.wp-custom-snippet-container .grid {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS
   ========================================================================== */

@media screen and (max-width: 768px) {
    .wp-custom-snippet-container {
        font-size: 14px;
    }
    
    .wp-custom-snippet-container * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

@media screen and (max-width: 480px) {
    .wp-custom-snippet-container {
        font-size: 13px;
        padding: 0 5px;
    }
}

/* ==========================================================================
   FULL-WIDTH SUPPORT
   ========================================================================== */

/**
 * Allow content to be full-width.
 * REMOVED: max-width constraints at different breakpoints that were limiting
 * the container width unnecessarily.
 * 
 * The container now respects its parent's width instead of imposing
 * arbitrary max-widths like 1170px, 970px, etc.
 */

/* Full-width mode - when parent container is full-width */
.wp-custom-snippet-container.full-width,
.full-width .wp-custom-snippet-container {
    max-width: none;
    width: 100%;
}

/* ==========================================================================
   DEBUGGING HELPER (can be enabled via class)
   ========================================================================== */

/**
 * Add class "debug-snippet" to visualize the container boundaries.
 * Useful for troubleshooting layout issues.
 */
.wp-custom-snippet-container.debug-snippet {
    outline: 2px dashed red !important;
    background: rgba(255, 0, 0, 0.05) !important;
}

.wp-custom-snippet-container.debug-snippet > * {
    outline: 1px dashed blue !important;
}