/* ===== sr-overflow-fix.css — OPTIMIZED LAYOUT SOLUTIONS ===== */
/* Clean, modern overflow and layout fixes without excessive !important */

/* Root level fixes */
html {
    overflow-x: clip;
    overflow-y: scroll;
    width: 100%;
    max-width: 100%;
    height: auto;
    scrollbar-gutter: stable;
}

body.sr-site {
    overflow-x: clip;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    height: auto;
}

* {
    box-sizing: border-box;
}

.site-wrapper {
    overflow-x: clip;
    overflow-y: visible;
    width: 100%;
}

/* Media elements - prevent overflow */
html body.sr-site img,
html body.sr-site svg,
html body.sr-site canvas,
html body.sr-site iframe,
html body.sr-site video {
    max-width: 100%;
    height: auto;
}

/* Layout containers - prevent minimum width issues */
html body.sr-site .card,
html body.sr-site [class*= grid],
html body.sr-site [class*=flex],
html body.sr-site .sr-dash-pro,
html body.sr-site .sr-dash-ultra,
html body.sr-site .sr-hero-pro {
    min-width: 0;
}

/* Hero elements */
html body.sr-site .sr-hero-pro,
html body.sr-site .sr-hero-pro__shell {
    overflow-x: hidden;
    max-width: min(1400px, 100vw);
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Dashboard elements */
html body.sr-site #dashboard,
html body.sr-site .sr-dash-pro,
html body.sr-site #spectrogram {
    overflow-x: hidden;
    max-width: min(1280px, 100vw);
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Content sections */
html body.sr-site section {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1.5rem;
}

/* Footer */
html body.sr-site footer,
html body.sr-site .footer-premium,
html body.sr-site .sr-footer-pro,
html body.sr-site .sr-footer-inner {
    overflow-x: hidden;
    max-width: min(1400px, 100vw);
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
    html body.sr-site .sr-hero-pro__shell,
    html body.sr-site #dashboard,
    html body.sr-site .sr-dash-pro,
    html body.sr-site section,
    html body.sr-site footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    html body.sr-site section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    html body.sr-site .sr-hero-pro__shell,
    html body.sr-site .sr-hero-pro__card,
    html body.sr-site #dashboard,
    html body.sr-site .sr-dash-pro,
    html body.sr-site .card {
        max-width: 100%;
        width: 100%;
    }

    html body.sr-site .sr-dash-pro-head__row,
    html body.sr-site .sr-hero-pro__readout,
    html body.sr-site .sr-hero-pro__badges,
    html body.sr-site .sr-hero-pro__actions,
    html body.sr-site .sr-dash-pro-chart-legend {
        flex-wrap: wrap;
    }

    html body.sr-site .sr-ultra-metrics,
    html body.sr-site .sr-ultra-harmonics,
    html body.sr-site .spectro-insight-grid,
    html body.sr-site .spectro-analysis-grid {
        grid-template-columns: 1fr;
    }

    html body.sr-site .sr-hero-pro__hz,
    html body.sr-site .sr-hero-pro__freq,
    html body.sr-site .sr-live-num,
    html body.sr-site #dash-live-hz {
        font-size: clamp(1.75rem, 11vw, 3.25rem);
        line-height: 1.05;
    }
}

@media (max-width: 420px) {
    html body.sr-site .sr-hero-pro__hz,
    html body.sr-site .sr-hero-pro__freq,
    html body.sr-site .sr-live-num {
        font-size: clamp(1.5rem, 10vw, 2.5rem);
    }
}