/* Minimal styles.css: imports page-sizing and provides base defaults */
@import url('/static/page-sizing.css');

html,body{height:100%;margin:0;padding:0;font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
.viewport{height:100vh;min-height:100vh;overflow-y:hidden;}

/* Additional minimal defaults to avoid flash of unstyled content */
img{max-width:100%;height:auto;display:block}

/* Widget stacking override for PageBuilder's Enforce Draw On Top setting. */
[data-enforceDrawOnTop="True"],
[data-enforcedrawontop="True"],
[data-enforce-draw-on-top="true"] {
    position: relative !important;
    z-index: 214748300 !important;
}

/* Image fallback styling - show alt text clearly when image fails */
img[data-image-failed="true"] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 16px;
    min-height: 100px;
    color: #6b7280;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    position: relative;
}

img[data-image-failed="true"]::before {
    content: "🖼️ ";
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

img[data-image-failed="true"]::after {
    content: attr(alt);
    display: block;
    max-width: 100%;
    word-wrap: break-word;
}

/* Sticky Row Functionality */
.row[data-sticky] {
    transition: position 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
    will-change: position, top, bottom;
}

.row[data-sticky="top"],
.row[data-sticky="bottom"] {
    /* Ensure smooth positioning changes */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* End of minimal styles.css */
/* Mobile Responsive Text Scaling - Global */
@media (max-width: 768px) {
    /* Force all paragraph text to scale down more aggressively on mobile */
    .widget-paragraph:not([data-autofit]) {
        font-size: min(
            clamp(4px, 2vw, var(--para-max-size, 20px)),
            clamp(4px, calc(var(--para-row-limit, 12px) * 0.5), var(--para-max-size, 20px)),
            clamp(4px, calc(var(--para-vw-limit, 12px) * 0.7), var(--para-max-size, 20px))
        ) !important;
        line-height: 1.4 !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Also scale down titles more aggressively */
    .widget-title h1:not([data-autofit]), 
    .widget-title h2:not([data-autofit]), 
    .widget-title h3:not([data-autofit]), 
    .widget-title h4:not([data-autofit]), 
    .widget-title h5:not([data-autofit]), 
    .widget-title h6:not([data-autofit]) {
        font-size: min(
            clamp(6px, 3vw, var(--title-max-size, 48px)),
            clamp(6px, calc(var(--title-row-limit, 20px) * 0.5), var(--title-max-size, 48px)),
            clamp(6px, calc(var(--title-vw-limit, 20px) * 0.7), var(--title-max-size, 48px))
        ) !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
}

@media (max-width: 480px) {
    /* Even more aggressive scaling on very small screens */
    .widget-paragraph:not([data-autofit]) {
        font-size: min(
            clamp(3px, 1.8vw, 16px),
            clamp(3px, calc(var(--para-row-limit, 12px) * 0.4), 16px),
            clamp(3px, calc(var(--para-vw-limit, 12px) * 0.5), 16px)
        ) !important;
        line-height: 1.3 !important;
        padding: 8px !important;
    }
    
    .widget-title h1:not([data-autofit]), 
    .widget-title h2:not([data-autofit]), 
    .widget-title h3:not([data-autofit]), 
    .widget-title h4:not([data-autofit]), 
    .widget-title h5:not([data-autofit]), 
    .widget-title h6:not([data-autofit]) {
        font-size: min(
            clamp(4px, 2.5vw, 32px),
            clamp(4px, calc(var(--title-row-limit, 20px) * 0.4), 32px),
            clamp(4px, calc(var(--title-vw-limit, 20px) * 0.5), 32px)
        ) !important;
    }
}

/* ============================================================================
   Image Loading Debug Outlines  (gated by .show-image-debug on <html>)
   Yellow = LQ placeholder visible, Green = HQ/original loaded
   Controlled by localStorage key: portal_show_image_debug
   ============================================================================ */
.show-image-debug img[data-lq-loaded="true"],
.show-image-debug [data-lq-loaded="true"] {
    outline: 2px solid #f5c542 !important;
    outline-offset: -2px;
}

.show-image-debug img[data-hq-loaded="true"],
.show-image-debug [data-hq-loaded="true"] {
    outline: 2px solid #4caf50 !important;
    outline-offset: -2px;
}