/**
 * Yobo Arena Integration - Widget Styles
 * CLS Prevention & Theme-Agnostic Layout
 * 
 * @package Yobo_Arena_Integration
 * @version 3.0
 */

/* ============================================
 * ARENA WIDGETS - CLS PREVENTION & CONTAINMENT
 * Theme-agnostic styles that work universally
 * ============================================ */

/* Widget wrapper - creates layout containment boundary */
.yobo-arena-widgets-wrapper {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    clear: both;
    overflow: hidden;
    margin: 2rem 0;
    padding: 0;
    contain: layout style;
}

/* Clearfix for older browsers and float-based layouts */
.yobo-arena-widgets-wrapper::before,
.yobo-arena-widgets-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Individual widget containers */
.arena-comments-widget,
.arena-poll-widget {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 1.5rem 0;
    padding: 0;
    overflow: hidden;
    contain: layout inline-size;
}

/* Reserve space for widgets to prevent CLS */
.arena-comments-widget:empty,
.arena-poll-widget:empty,
.arena-comments-widget[data-loading="true"],
.arena-poll-widget[data-loading="true"] {
    min-height: 400px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: yobo-arena-skeleton 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Smooth transition when content loads */
.arena-comments-widget:not(:empty),
.arena-poll-widget:not(:empty) {
    min-height: 0;
    background: none;
    animation: none;
    transition: min-height 0.3s ease-out;
}

@keyframes yobo-arena-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Constrain all iframe elements within widgets */
.arena-comments-widget iframe,
.arena-poll-widget iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: none;
    overflow: hidden;
}

/* Ensure all widget children respect box model */
.arena-comments-widget *,
.arena-poll-widget * {
    box-sizing: border-box;
    max-width: 100%;
}

/* Prevent horizontal scrolling from widget content */
.arena-comments-widget > *,
.arena-poll-widget > * {
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================
 * THEME-AGNOSTIC FOOTER PROTECTION
 * Ensures footer stays in correct position
 * and doesn't overlap content during resize
 * ============================================ */

/* Force footer into normal document flow */
body footer,
body .site-footer,
body #colophon,
body [role="contentinfo"],
body .footer-adv,
body .ast-footer-overlay-wrap,
body #footer,
body .wp-block-template-part[data-area="footer"],
body .ast-small-footer,
body .site-footer-primary-section-1 {
    position: relative !important;
    position: static !important;
    clear: both !important;
    float: none !important;
    z-index: 10;
    transform: none !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 0 !important;
}

/* Astra specific footer fixes */
.ast-footer-overlay-wrap,
.site-footer {
    position: relative !important;
}

/* Ensure main page wrapper uses normal flow layout */
body.single-post #page,
body.single-post .site,
body.single-post #wrapper {
    display: block !important;
    min-height: auto !important;
}

/* Ensure content area before footer has proper height */
body.single-post #content,
body.single-post .site-content,
body.single-post .ast-container {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Reset sticky footer on single posts with Arena */
body.single-post.yobo-arena-active {
    display: block !important;
    min-height: auto !important;
}

body.single-post.yobo-arena-active > #page,
body.single-post.yobo-arena-active > .site {
    display: block !important;
    flex: none !important;
    min-height: auto !important;
}