/* ============================================
   MPYPCP Official Website - Enhanced Responsive Styles
   Mobile-First Approach with Full Responsiveness
   ============================================ */

/* ============================================
   1. HAMBURGER MENU FOR MOBILE - ENHANCED
   ============================================ */

/* Hamburger Menu Button - Enhanced */
.mobile-menu-toggle {
    display: none;
    background: var(--primary-red);
    color: white;
    border: none;
    padding: 12px 15px;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle:hover {
    background: var(--accent-red);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.mobile-menu-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

.mobile-menu-toggle.active {
    background: var(--footer-black);
}

.mobile-menu-toggle i {
    transition: transform 0.3s ease;
}

.mobile-menu-toggle.active i.fa-bars {
    transform: rotate(90deg);
}

/* Enhanced mobile + tablet navigation (matches mobile-first 1023px breakpoint) */
@media (max-width: 1023px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .navbar {
        position: relative;
        padding: 0;
    }
    
    .navbar .container {
        position: relative;
        padding: 12px 15px;
        min-height: 60px;
        display: flex;
        align-items: center;
    }
    
    .nav-menu {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 320px;
        height: 100vh;
        background: linear-gradient(180deg, var(--primary-red) 0%, var(--accent-red) 100%);
        flex-direction: column;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
        z-index: 9999;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        padding: 80px 0 20px 0;
        visibility: hidden;
        opacity: 0;
    }
    
    .nav-menu.active {
        display: flex !important;
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }
    
    /* Overlay element created by JavaScript */
    #menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999; /* Below .navbar (1000) so nav-menu is clickable above overlay */
        animation: fadeIn 0.3s ease;
    }
    
    #menu-overlay.active {
        display: block;
    }

    /* Never block page clicks when menu is closed */
    #menu-overlay:not(.active) {
        pointer-events: none !important;
        visibility: hidden !important;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* Ensure menu items are clickable above the overlay */
    .nav-menu li,
    .nav-menu li a {
        position: relative;
        z-index: 1;
        pointer-events: auto;
    }
    
    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        position: relative;
    }
    
    .nav-menu li:first-child {
        border-top: 1px solid rgba(255,255,255,0.15);
    }
    
    .nav-menu li a {
        padding: 18px 25px;
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        min-height: 56px; /* Enhanced touch target */
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
        position: relative;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .nav-menu li a i {
        margin-right: 12px;
        font-size: 18px;
        width: 24px;
        text-align: center;
        transition: transform 0.3s ease;
    }
    
    .nav-menu li a:hover,
    .nav-menu li a.active {
        background: rgba(255,255,255,0.15);
        padding-left: 30px;
        color: var(--gold);
    }
    
    .nav-menu li a:hover i,
    .nav-menu li a.active i {
        transform: scale(1.2);
        color: var(--gold);
    }
    
    /* Dropdown indicator */
    .nav-menu li.dropdown > a::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        margin-left: auto;
        font-size: 12px;
        transition: transform 0.3s ease;
    }
    
    .nav-menu li.dropdown.active > a::after {
        transform: rotate(180deg);
    }
    
    /* Dropdown menu - Enhanced */
    .dropdown-menu {
        position: static;
        display: none !important;
        box-shadow: none;
        background: rgba(0,0,0,0.2);
        width: 100%;
        margin: 0;
        padding: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
        animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            max-height: 0;
        }
        to {
            opacity: 1;
            max-height: 500px;
        }
    }
    
    .nav-menu li.dropdown.active > .dropdown-menu {
        display: block !important;
    }
    
    .dropdown-menu li {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .dropdown-menu li a {
        padding-left: 50px !important;
        font-size: 15px;
        text-transform: none;
        font-weight: 500;
        background: rgba(0,0,0,0.1);
    }
    
    .dropdown-menu li a:hover {
        background: rgba(255,255,255,0.2);
        padding-left: 55px !important;
    }
    
    /* Nested dropdown */
    .dropdown-menu-sub {
        position: static;
        left: 0;
        width: 100%;
        background: rgba(0,0,0,0.3);
        margin: 0;
        padding: 0;
    }
    
    .dropdown-menu-sub li a {
        padding-left: 70px !important;
        font-size: 14px;
    }
    
    .dropdown-menu-sub li a:hover {
        padding-left: 75px !important;
    }
    
    /* Close button in menu - Hidden by default, shown via JavaScript */
    .nav-menu::after {
        display: none !important;
    }
    
    .menu-close-btn {
        display: none !important;
    }
    
    .nav-menu.active .menu-close-btn {
        display: flex !important;
    }
}

/* ============================================
   2. FLUID TYPOGRAPHY
   ============================================ */

/* Base font size with clamp for fluid typography */
html {
    font-size: 16px;
}

@media (max-width: 1200px) {
    html {
        font-size: clamp(14px, 1.2vw, 16px);
    }
}

@media (max-width: 768px) {
    html {
        font-size: clamp(14px, 4vw, 16px);
    }
    
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    
    h1 {
        font-size: clamp(24px, 6vw, 32px);
        line-height: 1.3;
    }
    
    h2 {
        font-size: clamp(20px, 5vw, 28px);
        line-height: 1.3;
    }
    
    h3 {
        font-size: clamp(18px, 4.5vw, 24px);
        line-height: 1.4;
    }
    
    h4 {
        font-size: clamp(16px, 4vw, 20px);
        line-height: 1.4;
    }
    
    p {
        font-size: clamp(14px, 3.5vw, 16px);
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    html {
        font-size: clamp(13px, 3.5vw, 15px);
    }
    
    h1 {
        font-size: clamp(20px, 5.5vw, 24px);
    }
    
    h2 {
        font-size: clamp(18px, 5vw, 22px);
    }
    
    h3 {
        font-size: clamp(16px, 4.5vw, 20px);
    }
}

/* ============================================
   3. TOUCH-FRIENDLY BUTTONS AND LINKS
   ============================================ */

@media (max-width: 768px) {
    /* Buttons - Minimum 44px touch target */
    .btn,
    button,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 24px !important;
        font-size: 16px !important;
        line-height: 1.5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    
    /* Links - Touch-friendly (excluding nav-menu links which have their own styles) */
    a:not(.nav-menu a) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 8px 0;
    }
    
    /* Form inputs - Prevent zoom on iOS */
    input,
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px;
        padding: 12px 15px;
    }
    
    /* Widget links */
    .widget-links li a {
        min-height: 44px;
        padding: 15px 20px !important;
        font-size: 16px;
    }
    
    /* Footer links */
    .footer-links li a {
        min-height: 44px;
        padding: 10px 0;
        display: flex;
        align-items: center;
    }
}

/* ============================================
   4. HEADER RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 900px) {
    /* Top bar */
    .top-bar {
        padding: 8px 0;
        font-size: 12px;
    }
    
    .top-bar .top-flex {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    /* Phone + email + timing: single row (translation-friendly); scroll if needed */
    .top-info {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    .top-info span {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        margin: 0 !important;
        flex-shrink: 0;
        font-size: 12px;
    }
    
    .social-icons {
        margin-top: 5px;
    }
    
    .social-icons a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    
    /* Header */
    .main-header {
        padding: 10px 0;
    }
    
    .header-flex {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        position: relative;
    }
    
    .logo-img img {
        max-width: 180px;
        height: auto;
    }
    
    .header-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .iso-badge {
        font-size: 11px;
        padding: 6px 10px;
    }
}

@media (max-width: 768px) {
    .header-actions {
        display: none; /* Hide badges on mobile as per previous requirement */
    }
    
    .logo-img img {
        max-width: 150px;
    }
    
    .top-info span {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .logo-img img {
        max-width: 120px;
    }
    
    .top-bar {
        font-size: 11px;
        padding: 6px 0;
    }
}

/* ============================================
   5. NAVIGATION RESPONSIVE
   ============================================ */

@media (max-width: 1023px) {
    .navbar {
        position: relative;
        padding: 0;
    }
    
    .navbar .container {
        position: relative;
        padding: 0;
    }
    
    .dropdown-menu {
        position: static;
        display: none !important;
        box-shadow: none;
        background: rgba(0,0,0,0.2);
        width: 100%;
        margin-left: 0;
    }
    
    .nav-menu li.dropdown.active > .dropdown-menu {
        display: block !important;
    }
    
    .dropdown-menu li a {
        padding-left: 40px !important;
        min-height: 44px;
    }
    
    .dropdown-menu-sub {
        position: static;
        left: 0;
        width: 100%;
        margin-left: 0;
    }
    
    .dropdown-menu-sub li a {
        padding-left: 60px !important;
    }
}

/* ============================================
   6. MAIN CONTENT RESPONSIVE
   ============================================ */

/* Stacked sidebar + main (≤1023px): tighter vertical rhythm; avoid stretched main column */
@media (max-width: 1023px) {
    .content-with-sidebar {
        gap: 12px;
    }

    .content-area {
        flex-grow: 0 !important;
    }
}

@media (max-width: 900px) {
    /* Container: padding only; max-width from layout-system */
    .container {
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
    }
    
    /* Main wrapper - Stack sidebar and content */
    .main-wrapper {
        flex-direction: column !important;
        gap: 20px;
        padding: 0 15px !important;
        margin-top: 20px;
    }
    
    .content-with-sidebar {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100% !important;
        order: 2;
        min-width: auto;
    }
    
    .content-area {
        width: 100% !important;
        order: 1;
        padding: 0 !important;
    }
    
    /* Welcome section */
    .welcome-sec {
        padding: 20px 15px !important;
        margin-bottom: 20px;
    }
    
    /* Hero slider: fluid height (home page uses index.html .home-hero-below-notification rules) */
    .hero-slider:not(.home-hero-below-notification) {
        min-height: clamp(200px, 45vw, 300px);
        background-attachment: scroll; /* Better performance on mobile */
    }
    
    .hero-text h2 {
        font-size: clamp(24px, 6vw, 32px);
    }
    
    .hero-text p {
        font-size: clamp(14px, 3.5vw, 18px);
    }
    
    /* Stats section: padding only here — column count at 600px / 2-col tablet in separate rules below */
    .stats-row {
        padding: 0 15px !important;
    }
    
    /* Course grid */
    .course-grid,
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    .course-card {
        width: 100%;
    }
    
    /* Affiliation banner */
    .affiliation-banner {
        padding: 15px 0 !important;
    }
    
    .affiliation-banner > div {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 15px !important;
    }
    
    .aff-text h3 {
        font-size: clamp(18px, 4.5vw, 24px);
    }
    
    .aff-text p {
        font-size: clamp(14px, 3.5vw, 16px);
    }
    
    .aff-btn .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Stats: tablet (601px–1023px) — 2×2, two cards per row */
@media (max-width: 1023px) and (min-width: 601px) {
    .stats-row .container,
    .stats-row .stats-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .stats-row .stat-box,
    .stats-row .stats-container .stat-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Stats: small phone — single column */
@media (max-width: 600px) {
    .stats-row .container,
    .stats-row .stats-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.9375rem !important;
    }

    .stats-row .stat-box,
    .stats-row .stats-container .stat-box {
        width: 100% !important;
        min-width: 100% !important;
        padding: 25px 15px !important;
    }

    .stats-row .stat-box h3,
    .stat-box h3 {
        font-size: clamp(32px, 8vw, 42px) !important;
    }

    .stats-row .stat-box span,
    .stat-box span {
        font-size: clamp(12px, 3vw, 14px) !important;
    }
}

@media (max-width: 768px) {
    .main-wrapper {
        padding: 0 0.625rem !important;
    }
    
    .welcome-sec {
        padding: 1.125rem 0.75rem !important;
    }
    
    .hero-slider:not(.home-hero-below-notification) {
        min-height: clamp(180px, 40vw, 250px);
    }
}

@media (max-width: 480px) {
    .main-wrapper {
        padding: 0 0.5rem !important;
        margin-top: 1rem;
    }
    
    .welcome-sec {
        padding: 1rem 0.625rem !important;
    }
    
    .hero-slider:not(.home-hero-below-notification) {
        min-height: clamp(160px, 38vw, 200px);
    }
}

/* ============================================
   7. IMAGES RESPONSIVE
   ============================================ */

/* Make all images responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent horizontal scroll from images */
@media (max-width: 768px) {
    img:not(.hero-bg-img) {
        width: 100%;
        height: auto;
    }
    
    /* Banner images */
    [style*="max-width: 1200px"],
    [style*="max-width: 1440px"] {
        max-width: 100% !important;
    }
    
    /* Patanjali banner */
    .maharshi-patanjali-banner img,
    [alt*="Maharshi Patanjali"] {
        width: 100% !important;
        height: auto !important;
    }

    /* Home: Facebook + Patanjali banner row – stack on small screens */
    .home-fb-banner-inner {
        grid-template-columns: 1fr !important;
    }
    .home-fb-banner-inner .home-fb-block {
        order: 1;
    }
    .home-fb-banner-inner .home-patanjali-banner-block {
        order: 2;
    }
}

/* ============================================
   8. FOOTER RESPONSIVE - CENTER ALIGNED
   ============================================ */

@media (max-width: 900px) {
    footer {
        padding-top: 30px;
        text-align: center;
    }
    
    .footer-grid {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    
    .footer-col {
        width: 100%;
        max-width: 100%;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .footer-col h3 {
        text-align: center;
        margin: 0 auto 15px;
        display: block;
    }
    
    .footer-links {
        text-align: center;
    }
    
    .footer-links li {
        text-align: center;
        border-bottom: 1px solid #222;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    
    .footer-links li a {
        justify-content: center;
        text-align: center;
    }
    
    .contact-list {
        align-items: center;
        text-align: center;
    }
    
    .contact-list li {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 5px;
    }
    
    .contact-list li i {
        margin-bottom: 5px;
    }
    
    .copyright {
        text-align: center;
        padding: 15px 0;
        font-size: 12px;
    }
    
    /* Social icons in footer */
    footer .social-icons {
        justify-content: center;
    }
}

/* ============================================
   9. TABLES RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Make tables scrollable on mobile */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    table {
        font-size: 12px;
        min-width: 600px;
    }
    
    table th,
    table td {
        padding: 10px 8px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    table {
        font-size: 11px;
        min-width: 500px;
    }
    
    table th,
    table td {
        padding: 8px 5px;
        font-size: 11px;
    }
}

/* ============================================
   10. FORMS RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    form {
        width: 100%;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
        padding: 12px 15px;
        border-radius: 4px;
    }
    
    .form-btn {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        padding: 12px;
    }
    
    /* Quick enquiry form in sidebar */
    .quick-form {
        padding: 15px;
    }
}

/* ============================================
   11. WIDGETS RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
    .widget {
        margin-bottom: 20px;
    }
    
    .widget-head {
        font-size: 16px;
        padding: 12px 15px;
    }
    
    .widget-links li a {
        font-size: 15px;
        padding: 12px 15px;
    }
    
    /* YouTube widget */
    .widget iframe {
        width: 100%;
        height: auto;
        min-height: 200px;
    }
}

/* ============================================
   12. PREVENT HORIZONTAL SCROLL
   ============================================ */

* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
    /* Avoid global max-width: 100% — use layout-system and targeted fixes */
}

/* ============================================
   13. ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
@media (max-width: 768px) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid var(--primary-red);
        outline-offset: 2px;
    }
    
    /* Skip to content link */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--primary-red);
        color: white;
        padding: 8px;
        text-decoration: none;
        z-index: 100;
    }
    
    .skip-link:focus {
        top: 0;
    }
}

/* ============================================
   14. PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce animations on mobile for better performance */
@media (max-width: 768px) {
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Disable parallax on mobile */
    .hero-slider {
        background-attachment: scroll !important;
    }
}

/* ============================================
   15. LANDSCAPE ORIENTATION
   ============================================ */

@media (max-width: 900px) and (orientation: landscape) {
    .hero-slider:not(.home-hero-below-notification) {
        height: 200px;
    }
    
    .top-bar {
        padding: 5px 0;
    }
}

/* ============================================
   16. PRINT STYLES
   ============================================ */

@media print {
    .navbar,
    .top-bar,
    .mobile-menu-toggle,
    footer,
    .sidebar,
    .social-icons {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    a {
        text-decoration: underline;
    }
}