/*
 * ============================================================
 *  BVP Shivaji Shakha — Custom Responsive Overrides
 *  All breakpoints designed for mobile-first compatibility.
 *  This file is linked LAST so rules here override template CSS.
 * ============================================================
 */

/* ---- 0. Global Safety Net ---- */
*, *::before, *::after { box-sizing: border-box; }

/* Prevent horizontal scroll on mobile only — do NOT constrain desktop containers */
html, body { overflow-x: hidden; }

/* ---- Remove preloader from all pages ---- */
.preloader { display: none !important; }

/* Only media elements should be fluid — but NOT images inside fixed-height card containers */
img:not(.premium-img img):not(.img-wrapper img):not(.card-img-top img):not(.slider-card img),
video, iframe { max-width: 100%; height: auto; }

/* Card images must fill their containers */
.premium-img img,
.img-wrapper img,
.card-img-top img,
.slider-card img { max-width: 100%; }


/* ============================
   0b. MOBILE NAV MENU FIXES
   ============================ */

/* Ensure hamburger icon bars are visible */
.navbar-toggler .icon-bar {
    display: block;
    width: 28px;
    height: 3px;
    background-color: #8b0000;
    border-radius: 2px;
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Mobile nav open state — slide-in panel */
@media (max-width: 991px) {
    /* The navigation holder panel */
    #navbar.navigation-holder {
        position: fixed !important;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100vh;
        background: #1a0808 !important;
        z-index: 9999;
        overflow-y: auto;
        padding: 30px 20px;
        transition: left 0.35s cubic-bezier(0.23, 1, 0.32, 1);
        display: block !important; /* Override Bootstrap collapse hidden */
    }

    #navbar.navigation-holder.slideInn {
        left: 0 !important;
    }

    /* Nav links inside mobile panel */
    #navbar .nav.navbar-nav > li > a {
        color: #ffffff !important;
        font-size: 1rem !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        display: block;
    }

    #navbar .nav.navbar-nav > li > a:hover {
        color: var(--premium-gold, #FBAD17) !important;
    }

    /* Sub-menus inside mobile panel */
    #navbar .sub-menu {
        background: rgba(255,255,255,0.05) !important;
        padding-left: 16px !important;
        border-radius: 8px;
        margin: 4px 0 8px !important;
    }

    #navbar .sub-menu li a {
        color: rgba(255,255,255,0.8) !important;
        font-size: 0.9rem !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        display: block;
    }

    #navbar .sub-menu li a:hover {
        color: var(--premium-gold, #FBAD17) !important;
    }

    /* Close button inside panel */
    .menu-close {
        color: #fff !important;
        font-size: 1.2rem !important;
        background: rgba(255,255,255,0.1) !important;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        cursor: pointer;
    }

    /* Overlay when menu is open */
    .body-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
        display: none;
    }

    .body-overlay.active { display: block; }

    /* Header stays on top */
    #header { z-index: 9000; }

    .wpo-site-header {
        padding: 10px 0 !important;
    }

    /* Logo sizing */
    .navbar-brand img {
        width: 120px !important;
        height: auto !important;
    }

    /* "Join Us" button — smaller on mobile */
    .header-right .theme-btn {
        padding: 8px 18px !important;
        font-size: 0.82rem !important;
        width: auto !important;
        display: inline-flex !important;
    }
}

@media (max-width: 576px) {
    .navbar-brand img {
        width: 100px !important;
    }

    /* Fix: Join Us button — never wrap to two lines */
    .header-right .theme-btn,
    .close-form .theme-btn {
        padding: 7px 12px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        min-width: unset !important;
        line-height: 1.2 !important;
    }
}

/* Fix: Hero slider black empty space on mobile */
@media (max-width: 991px) {
    .hero-slider-container {
        height: auto !important;
        min-height: unset !important;
        background-color: transparent !important;
    }

    .hero-slider-container .carousel-item {
        height: auto !important;
    }

    .hero-slider-container .carousel-item img {
        height: auto !important;
        max-height: 55vh;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Remove leftover black bg from slider section */
    #mainHeroCarousel,
    .hero-slider-container .carousel,
    .hero-slider-container .carousel-inner {
        background-color: transparent !important;
    }
}


/* ============================
   0c. FEATURE OVERLAP CARDS FIX
   ============================ */
@media (max-width: 991px) {
    .features-overlap-section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: static !important;
        z-index: auto !important;
    }

    .features-overlap-section .wraper {
        border-radius: 16px;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .features-overlap-section .row {
        width: fit-content !important;
        margin: 0 auto !important;
        justify-content: center !important;
        display: flex !important;
    }

    .features-overlap-section .feature-card {
        margin-bottom: 8px;
    }
}

@media (max-width: 576px) {
    .features-overlap-section {
        margin: 0 !important;
    }

    /* Compact feature cards on mobile */
    .features-section .feature-card {
        padding: 10px 8px !important;
    }

    .features-section .feature-card .icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        line-height: 44px !important;
        margin-bottom: 6px !important;
    }

    .features-section .feature-card .icon i {
        font-size: 20px !important;
    }

    .features-section .feature-card .content h2 {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .features-section .feature-card .content h3 {
        font-size: 12px !important;
        line-height: 16px !important;
    }
}



/* ============================
   0d. ABOUT SECTION TAB FIX
   ============================ */

.about-tab .tab {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: hidden !important;
}

.about-tab .tab button.tablinks {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 10px 6px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 700 !important;
}

@media (max-width: 400px) {
    .about-tab .tab button.tablinks {
        font-size: 0.7rem !important;
        padding: 7px 3px !important;
    }
}

/* ============================
   1. TYPOGRAPHY — Fluid Scaling
   ============================ */
@media (max-width: 991px) {
    h1 { font-size: clamp(1.8rem, 5vw, 2.8rem) !important; }
    h2 { font-size: clamp(1.4rem, 4vw, 2.2rem) !important; }
    h3 { font-size: clamp(1.1rem, 3vw, 1.6rem) !important; }

    .section-title h2 {
        font-size: clamp(1.5rem, 4.5vw, 2.4rem) !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 576px) {
    h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
    h2 { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
    h3 { font-size: clamp(1rem, 4vw, 1.3rem) !important; }

    .section-title h2 {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    }
}


/* ============================
   2. SECTION PADDING — Scale Down
   ============================ */
@media (max-width: 991px) {
    .section-padding { padding: 60px 0 !important; }
    .section-dark-maroon,
    .section-light-maroon { padding: 60px 0 !important; }
}

@media (max-width: 576px) {
    .section-padding { padding: 40px 0 !important; }
    .section-dark-maroon,
    .section-light-maroon { padding: 40px 0 !important; }
}


/* ============================
   3. HEADER & NAVIGATION
   ============================ */
@media (max-width: 991px) {
    .topbar .topbar-content {
        flex-direction: column;
        gap: 8px;
        padding: 8px 16px;
        text-align: center;
    }

    .topbar .topbar-text {
        font-size: 0.8rem;
    }

    .wpo-site-header .navbar-brand img {
        max-height: 50px;
    }
}

@media (max-width: 576px) {
    .topbar { display: none; }

    .wpo-site-header {
        padding: 10px 0;
    }
}


/* ============================
   4. HERO / STATIC-HERO SECTION
   ============================ */
@media (max-width: 991px) {
    .static-hero {
        padding: 70px 0 40px !important;
    }

    .static-hero .slide-sub-title h2 {
        font-size: clamp(1.5rem, 4vw, 2.4rem) !important;
    }

    .static-hero .slide-btns {
        flex-wrap: wrap !important;
        gap: 14px !important;
        justify-content: center !important;
    }

    .static-hero .slide-btns .call {
        justify-content: center;
    }

    .main-portrait {
        max-height: 320px !important;
    }

    .president-info-box {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 10px;
        border-radius: 16px !important;
    }
}

@media (max-width: 768px) {
    .static-hero {
        padding: 50px 0 30px !important;
        text-align: center;
    }

    .static-hero .col-lg-6:last-child {
        margin-top: 30px;
    }

    .main-portrait {
        max-height: 260px !important;
    }

    .president-portrait-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px !important;
    }

    .slide-btns .theme-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .static-hero .slide-btns .call {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .static-hero {
        padding: 40px 0 20px !important;
    }

    .static-hero .slide-sub-title p {
        font-size: 0.9rem !important;
        max-width: 100% !important;
    }
}


/* ============================
   5. ABOUT SECTION
   ============================ */
@media (max-width: 991px) {
    .about-section-s3 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
    }

    .about-section-s3 .about-image img {
        height: 320px !important;
        margin-bottom: 30px;
    }

    .about-section-s3 .right-content {
        padding: 24px !important;
    }
}

@media (max-width: 576px) {
    .about-section-s3 .about-image img {
        height: 240px !important;
    }

    .about-section-s3 .right-content {
        padding: 16px !important;
    }
}


/* ============================
   6. FUNFACT / STATS SECTION
   ============================ */
@media (max-width: 768px) {
    .funfact-section-s2 .item {
        margin-bottom: 30px;
    }

    .funfact-section-s2 .item h2 {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 576px) {
    .funfact-section-s2 {
        padding: 30px 0 !important;
    }
}


/* ============================
   7. PREMIUM CARDS (Service Section)
   ============================ */
@media (max-width: 991px) {
    .premium-card {
        margin-bottom: 24px;
    }

    .premium-img { height: 180px !important; }

    .premium-content {
        padding: 18px 16px 16px !important;
    }

    .premium-content h2 a {
        font-size: 1.1rem !important;
    }

    .premium-content p {
        font-size: 0.88rem !important;
    }
}

@media (max-width: 576px) {
    .premium-img { height: 160px !important; }

    .premium-content {
        padding: 14px 12px 12px !important;
    }

    .premium-btn a {
        padding: 8px 16px !important;
        font-size: 0.82rem !important;
    }
}


/* ============================
   8. SHOWCASE CARDS (Excellence Section)
   ============================ */
@media (max-width: 991px) {
    .showcase-section {
        padding: 60px 0 80px !important;
    }

    .showcase-card {
        margin-bottom: 24px;
    }

    .showcase-card .img-wrapper { height: 180px !important; }

    .showcase-card .content {
        padding: 18px 16px 16px !important;
    }

    .showcase-card .content h3 {
        font-size: 1.1rem !important;
    }

    .showcase-card .content p {
        font-size: 0.88rem !important;
    }
}

@media (max-width: 576px) {
    .showcase-card .img-wrapper { height: 160px !important; }

    .showcase-card .content {
        padding: 14px 12px 12px !important;
    }

    .showcase-btn a {
        padding: 8px 16px !important;
        font-size: 0.82rem !important;
    }
}


/* ============================
   9. ACTIVITIES / SLIDER SECTION
   ============================ */
@media (max-width: 991px) {
    .activities-slider-section {
        padding: 50px 0 !important;
    }
}

@media (max-width: 576px) {
    .activities-slider-section {
        padding: 30px 0 !important;
    }
}


/* ============================
   10. MEMBER MODERN SECTION
   ============================ */
@media (max-width: 991px) {
    .member-modern-section {
        padding: 60px 0 !important;
    }

    .member-card-premium {
        padding: 20px 14px !important;
        margin-bottom: 24px;
    }
}

@media (max-width: 576px) {
    .member-modern-section {
        padding: 40px 0 !important;
    }

    .member-card-premium .member-img img {
        width: 100px !important;
        height: 100px !important;
    }

    .member-card-premium h3 {
        font-size: 1rem !important;
    }
}


/* ============================
   11. FOOTER
   ============================ */
@media (max-width: 991px) {
    .wpo-site-footer .widget {
        margin-bottom: 40px;
    }

    .wpo-site-footer .logo img {
        max-width: 160px;
    }
}

@media (max-width: 576px) {
    .wpo-site-footer {
        padding-top: 40px !important;
    }

    .wpo-site-footer .widget {
        margin-bottom: 28px;
    }

    .wpo-lower-footer .row {
        flex-direction: column-reverse;
        text-align: center;
        gap: 10px;
    }
}


/* ============================
   12. PAGE HEADERS (Inner Pages)
   ============================ */
@media (max-width: 768px) {
    .wpo-page-title {
        padding: 80px 0 50px !important;
    }

    .wpo-page-title h2 {
        font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
    }
}

@media (max-width: 576px) {
    .wpo-page-title {
        padding: 60px 0 30px !important;
    }
}


/* ============================
   13. ANAEMIA PAGE — Special sections
   ============================ */
@media (max-width: 991px) {
    .health-legacy-section {
        padding: 50px 0 !important;
    }

    .legacy-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .legacy-image { transform: none !important; }

    .premium-content-section {
        padding: 50px 0 !important;
    }

    .content-title {
        font-size: clamp(1.8rem, 5vw, 3rem) !important;
    }
}

@media (max-width: 576px) {
    .content-title {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
    }

    .quote-text {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    }
}


/* ============================
   14. MEMBER PAGE
   ============================ */
@media (max-width: 768px) {
    .member-card-premium {
        max-width: 280px;
        margin: 0 auto 24px;
    }
}


/* ============================
   15. THEME BUTTONS — Touch Friendly
   ============================ */
@media (max-width: 576px) {
    .theme-btn {
        padding: 12px 28px !important;
        font-size: 0.9rem !important;
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex !important;
    }
}


/* ============================
   16. OWL CAROUSEL / SLICK DOTS
   ============================ */
@media (max-width: 576px) {
    .owl-dots {
        margin-top: 20px !important;
    }

    .owl-dot span {
        width: 8px !important;
        height: 8px !important;
    }

    .slick-dots {
        bottom: -30px !important;
    }
}


/* ============================
   17. IFRAME & VIDEO embeds
   ============================ */
.video-container, .embed-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.embed-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

@media (max-width: 576px) {
    iframe {
        max-width: 100%;
    }
}


/* ============================
   18. SECTION TITLE ADJUSTMENTS
   ============================ */
@media (max-width: 768px) {
    .section-title {
        margin-bottom: 30px !important;
    }

    .section-title span {
        font-size: 0.85rem !important;
    }
}


/* ============================
   19. CARD ROWS — Prevent overflow
   ============================ */
@media (max-width: 768px) {
    .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
    .row.g-5 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
}


/* ============================
   20. MISSION / VISION TAB SECTIONS
   ============================ */
@media (max-width: 768px) {
    .right-content .nav-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }

    .right-content .nav-tabs .nav-link {
        padding: 8px 14px !important;
        font-size: 0.85rem !important;
    }
}