@media (max-width: 1024px) {

    .logo {font-size:1.3rem;}
    
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        cursor: pointer;
        position: relative;
        z-index: 2000;
    }

    .hamburger span {
        display: block;
        height: 2px;
        width: 100%;
        background-color: var(--color-white, #f8fafc);
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Transform burger bars into an Close 'X' when checked */
    .menu-checkbox:checked ~ .hamburger span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-checkbox:checked ~ .hamburger span:nth-child(2) {
        opacity: 0;
    }
    .menu-checkbox:checked ~ .hamburger span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Pull standard horizontal menu back into a sliding mobile drawer */
    .nav-menu {
        position: fixed;
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        background-color: var(--bg-color, #0f172a);
        flex-direction: column;
        gap: 0;
        padding: 1.5rem 2rem;
        overflow-y: auto;
        
        /* Drawer animation logic */
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 0 15px 20px rgba(0,0,0,0.4);
    }

    /* Open the panel drawer container when box is clicked */
    .menu-checkbox:checked ~ .nav-menu {
        transform: translateX(0);
    }

    .nav-menu > li {
        padding: 0;
        border-bottom: 1px solid #1e293b;
    }

    .nav-menu > li > a {
        display: block;
        padding: 1rem 0;
        font-size: 1.1rem;
    }

    /* Format Submenus inline for phone interfaces */
    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        background-color: rgba(30, 41, 59, 0.5);
        padding: 0 0 1rem 1rem;
        display: block; /* Lists out naturally under headings on small screens */
    }

    .submenu li a {
        padding: 0.6rem 0;
    }
    
}



@media (max-width: 900px) {
    .biography-text{
        flex: 1;
        width: 100%;
        
    }
    .outer-grid {
        grid-template-columns: 1fr; /* Drop side-by-side into simple column layout stacks */
        gap: 2.5rem;
    }
    
    .lightbox-nav { padding: 0.5rem 0.8rem; font-size: 1.5rem; }
    .prev { left: 0.5rem; }
    .next { right: 0.5rem; }
     .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .about-layout { flex-direction: column-reverse; }
            .biography-sidebar { position: static; width: 100%; }
            .footer-container { grid-template-columns: 1fr 1fr; }
.inner-banner .page-title {font-size: 1.2rem}
 .book-showcase-grid {
        grid-template-columns: 1fr; 
        gap: 2.5rem;
    }
    
    .book-title {
        font-size: 1.8rem;
    }
    
    .mobile-center {
        text-align: center;
    }
    
    .book-actions .btn {
        width: 100%; 
        text-align: center;
    }

     .article-layout, .contact-layout-grid {
                grid-template-columns: 1fr; /* Stacks the sidebar cleanly underneath the content canvas */
            }
            .featured-image-container {
                height: 300px;
            }
            h1.article-title {
                font-size: 2rem;
            }

         .form-group-row {
                flex-direction: column;
                gap: 0.3rem;
                margin-bottom: 0.3rem;
            }
            .form-group-row .form-field {
                margin-bottom: .5rem;
            }
            .contact-form-wrapper {
                padding: 1.5rem;
            }
    .form-field.full-width {margin-bottom:0.5rem}
   

}

/* Mobile-friendly: horizontal scroll for tables inside wp-block-table */
@media screen and (max-width: 900px) {
    .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    /* Make sure table cells don't wrap awkwardly */
    .wp-block-table table {
        min-width: 600px;
    }
    
    /* Optional: Add a subtle visual hint that the table is scrollable */
    .wp-block-table::-webkit-scrollbar {
        height: 6px;
    }
    
    .wp-block-table::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }
}

@media (max-width: 768px) {
    .hero {padding-top:5.5rem; padding-bottom:2rem;}
    p {font-size:0.9rem!important; margin-bottom:1rem;}
    .sidebar-meta h3 {font-size:1.1rem;}
    h2, h1.article-title, .sidebar-widget h4 {font-size:1.3rem!important}
    section {padding:1.5rem 15px }
    .container {padding:0} 
    .inner-banner {padding:1.2rem 0 0.8rem 0}
     header .container {height: auto; padding: 1rem; }
    nav ul { gap: 1.2rem; }
    .hero .container, .about-grid { flex-direction: column-reverse; text-align: center; }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-image img { width: 250px; height: 250px; }
    .hero-content p { margin: 0 auto 2rem auto; }
    .biography-sidebar {padding:15px;}
    .sidebar-meta .designation {font-size:0.8rem}
     .nav-menu {
        flex-direction: column;
        gap: 0;
    }
    .nav-menu > li {
        padding: 0;
    }
    .submenu {
        position: static;
        box-shadow: none;
        background: transparent;
        border: none;
        padding-left: 1rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none; /* In a full build, toggled via a JS click event */
    }
    .dropdown:hover .submenu {
        display: block;
    }
    .inner-banner h1 { font-size: 2.2rem; }
            .footer-container { grid-template-columns: 1fr; text-align: center; }
            .profile-col { align-items: center; }
            .footer-col h4::after { left: 50%; transform: translateX(-50%); }
          
 .site-footer {padding:1.5rem 0 1rem 0;}
 .hero p {font-size:1.1rem!important}
 .service-card h3, .white-bg h3 {font-size:1.1rem;}
 .article-layout {margin-top:0}

 /* single page */

 .single-container {
        flex-direction: column !important; 
        gap: 30px !important;
    }

    .main-content {
        flex: 1 !important; 
        width: 100% !important;
    }

    .sidebar {
        flex: 1 !important;
        width: 100% !important;
        min-width: 100% !important; 
        border-top: 1px solid #eee; 
        padding-top: 20px;
    }

.banner-btns {justify-content: center;}

}


@media (max-width: 500px) {
    :root {--gap:1rem}
    .hero-image {margin-top:1.6rem}
    .hero-content h1 {font-size:2rem}
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap:1.3rem;
    }
    .profile-col {
        align-items: center;
    }
    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .newsletter-form {
        flex-direction: column;
    }

    .hero-content p {margin-bottom:1rem;}
    .sub-title, .sidebar-widget h4 {font-size:1.2rem}

    .copyright {font-size:0.8rem!important}
    .mobile-center {text-align:center}
    h2.mobile-center::after {margin:0 auto;}
    .single-btn {margin-top:0.5rem;} 
    .service-card, .sidebar-widget, .contact-form-wrapper, .book-list-card {padding:0.6rem}
    .outer-grid, .contact-details-sidebar {gap:1.2rem; margin-top:0 }
    .white-bg .dark-text h3 {margin-bottom:0.5rem;}
    .portfolio-grid, .gallery-grid, .blog-grid, .books-catalog-grid{
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));}
    .btn {font-size:13px;}
    .book-description {margin-bottom:0}
    p.meta-item {margin-bottom:0}
    .banner-btns {justify-content: center;}
    .filter-btn {padding:0.5rem 1rem; font-size:0.85rem}
    .filter-container {padding:0; gap:0.3rem}
    .white-bg h3.blog-title {font-size:1.1rem;}
    .blog-section, .gallery-section {padding-bottom:0}
    .site-footer {padding-bottom:0}
    .recent-books .books-catalog-grid {padding-top:10px;}
    nav ul {gap:0.5rem!important}
    .nav-menu > li > a {padding:0.5rem 0}
    h2::after {display:none}
    h2.white-text.page-title {display:none}
    .inner-banner {padding:3.4rem 0 0.5rem 0; position: fixed; width:100%; z-index: 99;}
    .inner-page {padding-top:100px}
    .hero {padding-top:3rem;}
    h2, h1.article-title, .sidebar-widget h4 {margin-bottom:1rem;}
    .filter {margin-bottom:1.2rem;}
    .blog-grid {margin-top:0}
    .single-container {gap:5px!important}
    .contact-form-wrapper form {margin-top:0.8rem}
    .form-field p {margin-bottom:0}
    .book-btn.primary {padding:0.5rem 1rem}
    .book-title {font-size:0.95rem!important;}
    .book-list-card {gap:1rem!important}
    .cpm-modal-navbar {padding:10px !important; height: auto!important;}
    .cpm-modal-title {font-size:0.95rem!important}
    .cpm-modal-body-viewport {padding:5px!important}
   .cpm-nav-btn.next-right {right:10px!important}
    .cpm-nav-btn.prev-left {left:10px!important}
    .cpm-nav-btn {top:auto!important; bottom:40px}
    .cpm-page-side {height:70%!important}
    
    .cpm-page-side, .cpm-page-side canvas, .cpm-flip-face canvas, #cpmFlippingSheet {height:70%!important}
     .cpm-spine-gradient-overlay {height:100%!important}
      /*.cpm-nav-btn {width:40px!important; height:40px!important} */
    .btn {padding:0.6rem 1.2rem;}
   header .mobile-header {padding:0.6rem;}
   .logo {font-size:1.1rem;}
   .gallery-grid {margin-top:0}
   .tnp-subscription div.tnp-field, .tnp-profile div.tnp-field {margin-bottom:0.3rem!important;}
   .contact-content p, .biography-text p, .biography-text h2 {margin-bottom:1rem;}
   .tnp-subscription.contact-content p {margin-bottom:1rem;}
   .video-grid {grid-template-columns: repeat(auto-fit, minmax(250px, 100%));}
   .video-item {max-width:100%}
   .search-section {position:absolute; margin-left:0; left:10px; right:10px; text-align: right; padding-right:40px;}
.search-form-popup {min-width:100%; left:0}

}



@media (max-width: 400px) {
    .book-list-card {
        
        grid-template-columns: 1fr; 
        gap: 0.5rem;
    }

    .book-cover-frame {
        
        max-width: 160px;
        margin: 0 auto;
        
       
        height: 230px; 
        overflow: hidden;
        border-radius: 6px;
    }

    .book-cover-frame img {
        width: 100%;
        height: 100%;
        
       
        object-fit: cover; 
    }
    
    .book-title {
      
        text-align: center;
    }
    
    .book-meta-data {
        text-align: center;
    }
    
    .book-link-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .book-desc-text, .book-review-snippet {text-align: center;} 
}