/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent overflow on media and common elements */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Ensure all containers respect viewport width */
div, section, article, aside, header, footer, main {
    max-width: 100%;
    overflow-x: hidden;
}

html {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
    background-size: 100% 100%;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    background: rgba(255, 255, 255, 0.95);
    min-height: auto;
    box-shadow: none;
    position: relative;
    backdrop-filter: blur(10px);
    overflow-x: hidden;
    overflow-y: visible;
    padding: 0;
    border-radius: 0;
    box-sizing: border-box;
    /* Removed transform: scale(0.75) - was breaking sticky positioning */
    /* Ensure content doesn't overlap header */
    z-index: 1; /* Lower than header */
}

/* Ensure body background is always visible and full width */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: -1;
    pointer-events: none;
}

/* Ensure header container doesn't clip fixed header */
#headerContainer {
    position: static; /* Changed from relative - allows sticky to work properly */
    z-index: 1000; /* Match the header's z-index */
    background: transparent; /* Ensure it doesn't block */
    pointer-events: none; /* Allow clicks to pass through except on header */
}

#headerContainer > * {
    pointer-events: auto; /* Re-enable pointer events on header itself */
}

/* When header is collapsed, add padding to prevent content jump */
.container.header-collapsed {
    padding-top: 0;
}

/* Alternative approach for browsers that don't support :has() */
.dj-header-shrunk ~ * {
    margin-top: 0;
}

.header-follower-placeholder {
    width: 100%;
    pointer-events: none;
}

.header-follower-active {
    background: white;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* Search Results Container - Special styling for search results */
.search-results-container {
    min-height: auto !important; /* Remove full viewport height requirement */
    padding-top: 0 !important; /* No extra padding at top */
    margin-top: 0 !important; /* No margin at top */
    padding-bottom: 20px; /* Small padding at bottom */
}

/* When header is shrunk, adjust search results container */
.dj-header-shrunk ~ .search-results-container {
    margin-top: 0;
    padding-top: 0;
}

/* Ensure search results section inside container is properly positioned */
.search-results-container #searchResultsSectionContainer {
    width: 100%;
    margin: 0 !important;
    padding: 0;
}