/* ==========================================================================
   GLOBAL RESPONSIVE & CONTRAST FIX - BAHUJANA ABHYUDAYA SEVA SAMITI (Human Rights Wing)
   Ensures 100% mobile responsiveness on all screens down to 320px with ZERO overflow.
   Covers Public Website, Admin Panel, and Member Panel.
   ========================================================================== */

/* 1. Prevent ANY horizontal viewport overflow */
*, *::before, *::after {
    box-sizing: border-box !important;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

img, video, iframe, svg {
    max-width: 100% !important;
    height: auto;
}

/* Background blob containment */
.hrs-hero, .hrs-hero-bg-shapes, .hero-slider, .objectives-section, .hrs-cta-banner {
    overflow: hidden !important;
    max-width: 100vw !important;
}

/* 2. Universal High-Contrast Hero Styling (Crisp White text on Red/Maroon banners across all pages) */
section.hrs-hero, section[class*="hero"], header[class*="hero"],
.hero, .hero-banner, .about-hero, .projects-hero, .events-hero, .member-hero, 
.who-hero, .school-hero, .activity-hero, .video-hero, .leadership-hero, 
.awards-hero, .policy-header, .environment-hero, .hero-intern,
.hero-section, .annual-hero, .blogs-hero, .faq-hero, .donate-hero {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.hrs-hero-content, .hrs-hero-visual {
    max-width: 100%;
    box-sizing: border-box;
}

[class*="hero"] h1, [class*="-hero"] h1,
.hero h1, .hero-banner h1, .about-hero h1, .projects-hero h1, .events-hero h1, 
.member-hero h1, .awards-hero h1, .hrs-hero h1, .hrs-hero-title, .leadership-hero h1,
.policy-header h1, .activity-hero h1, .video-hero h1, .environment-hero h1, 
.hero-intern h1, .hero-section h1, .annual-hero h1, .blogs-hero h1, .faq-hero h1,
.donate-hero h1, .gallery-hero h1, .testimonial-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

[class*="hero"] p, [class*="-hero"] p,
.hero p, .hero-banner p, .about-hero p, .projects-hero p, .events-hero p, 
.member-hero p, .awards-hero p, .hrs-hero p, .hrs-hero-subtitle, .leadership-hero p,
.policy-header p, .activity-hero p, .video-hero p, .environment-hero p, 
.hero-intern p, .hero-section p, .annual-hero p, .blogs-hero p, .faq-hero p,
.donate-hero p, .gallery-hero p, .testimonial-hero p {
    color: #fef08a !important; /* Soft gold readability on red */
    -webkit-text-fill-color: #fef08a !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-weight: 500 !important;
}

.hero a, .hero-banner a, .projects-hero a, .events-hero a, 
.member-hero a, .awards-hero a {
    color: #fbbf24 !important;
}

/* 3. High-Contrast Section Headings and Content Cards */
.hrs-section-title, .section-title, .section-header h2, .section-heading h2 {
    color: #4d050c !important; /* Deep dark maroon for maximum readability on light bg */
    font-weight: 800 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.hrs-section-desc, .section-header p, .section-desc {
    color: #475569 !important;
    font-weight: 500 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.hrs-badge-sub, .badge-sub {
    background: rgba(142, 18, 30, 0.08) !important;
    color: #8e121e !important;
    border: 1px solid rgba(142, 18, 30, 0.2) !important;
    font-weight: 700 !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
}

/* 4. Badges & Pills Responsive Wrapping */
.hrs-hero-badge, .hrs-reg-badge, .tagline {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
}

/* 5. Responsive adjustments for Tablets & Mobile (max-width: 991px) */
@media (max-width: 991px) {
    .hrs-top-contacts {
        display: none !important;
    }
    .hrs-top-bar-content {
        justify-content: center !important;
        text-align: center !important;
        gap: 6px !important;
    }
    .navbar-collapse {
        background: #ffffff;
        padding: 15px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
    }
    .hrs-dropdown-menu {
        box-shadow: none !important;
        border: 1px solid rgba(110, 11, 21, 0.08) !important;
        background: #faf6f4 !important;
        margin-left: 0 !important;
        min-width: 100% !important;
    }
    .membership-card {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* 6. Ultra-Responsive Mobile Optimization (max-width: 576px down to 320px) */
@media (max-width: 576px) {
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .row > * {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Top Announcement Bar */
    .hrs-top-bar {
        padding: 0.35rem 0 !important;
    }
    .hrs-top-bar-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 6px !important;
    }
    .hrs-reg-badge {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
        display: inline-block !important;
        max-width: 100% !important;
        line-height: 1.3 !important;
    }
    .hrs-top-right {
        justify-content: center !important;
        width: 100% !important;
    }

    /* Brand Logo & Title on 320px */
    .hrs-brand {
        max-width: calc(100% - 55px) !important;
    }
    .hrs-brand-logo {
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }
    .hrs-brand-title {
        font-size: 0.88rem !important;
        line-height: 1.15 !important;
        word-break: break-word !important;
    }
    .hrs-brand-sub {
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
    }
    .hrs-brand-parent {
        font-size: 0.55rem !important;
        line-height: 1.15 !important;
    }

    /* Hero Section & Typography */
    .hrs-hero {
        padding: 4.5rem 0 3rem !important;
        min-height: auto !important;
    }
    .hrs-hero-badge {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
        display: inline-flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    .hrs-hero-title, .hero h1, .hero-banner h1, .projects-hero h1, 
    .events-hero h1, .member-hero h1, .awards-hero h1 {
        font-size: clamp(1.35rem, 6.2vw, 1.85rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 1rem !important;
    }
    .hrs-hero-subtitle, .hero p, .hero-banner p, .projects-hero p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Hero Buttons */
    .hrs-hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        margin-bottom: 2rem !important;
    }
    .hrs-hero-buttons .hrs-btn, .hrs-btn, .btn-apply, .submit-btn, .main-btn, .hrs-btn-donate {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 10px 14px !important;
        font-size: 0.88rem !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    /* Hero Slider Card */
    .hrs-hero-card-main {
        padding: 10px !important;
        border-radius: 18px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .hrs-slider-slide img {
        height: 240px !important;
    }
    .hrs-slider-caption {
        padding: 14px 12px !important;
    }
    .hrs-slider-caption-title {
        font-size: 1.05rem !important;
    }
    .hrs-slider-options-wrap {
        display: none !important; /* Hide cluttered thumbnail chips on 320px mobile */
    }

    /* Forms and Containers */
    .donation-container, .contact-grid, .content-flex-grid {
        flex-direction: column !important;
        padding: 18px 8px !important;
        gap: 15px !important;
    }
    .payment-info, .form-container, .contact-info-card, 
    .contact-form-card, .form-card, .main-project-wrapper, .membership-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 12px !important;
        margin-top: 0 !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    /* Tables in Public Pages */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 1rem !important;
    }
}

/* 7. ADMIN PANEL RESPONSIVE FIXES (Down to 320px) */
@media (max-width: 992px) {
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 16px 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .sidebar {
        left: -290px !important;
        width: 270px !important;
        position: fixed !important;
        z-index: 10050 !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .sidebar.mobile-open {
        left: 0 !important;
        box-shadow: 10px 0 30px rgba(0,0,0,0.45) !important;
    }
    .sidebar.mobile-open span, 
    .sidebar.mobile-open .brand-name, 
    .sidebar.mobile-open .brand-subtitle, 
    .sidebar.mobile-open .nav-section-title {
        display: inline !important;
    }
    .mobile-toggle-bar {
        display: block !important;
    }
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .top-navbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    .table-container, .card, .data-card {
        max-width: 100% !important;
        overflow-x: auto !important;
        padding: 12px !important;
    }
    .table-responsive table {
        min-width: 520px;
    }
}

/* 8. USER / MEMBER PANEL RESPONSIVE FIXES (Down to 320px) */
@media (max-width: 768px) {
    .main, .user-main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 15px 10px !important;
        box-sizing: border-box !important;
    }
    .user-sidebar, #sidebar {
        left: -290px !important;
        width: 270px !important;
        position: fixed !important;
        z-index: 10050 !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .user-sidebar.active, #sidebar.active {
        left: 0 !important;
        box-shadow: 10px 0 30px rgba(0,0,0,0.45) !important;
    }
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 15px !important;
        left: 15px !important;
        z-index: 10060 !important;
    }
}