/* =====================================================
   MERO ENOTES — COMPLETE RESPONSIVE CSS
   Mobile First Approach
   Last updated: 2026
   ===================================================== */

/* ── 1. NAVBAR ─────────────────────────────────────── */

@media (max-width: 1024px) {
    .nav-menu li>a {
        padding: 6px 10px;
        font-size: .82rem;
    }
}

@media (max-width: 768px) {

    /* Hide desktop nav links */
    .nav-menu-wrapper {
        display: none;
        position: fixed;
        top: 66px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #0F1F3D;
        flex-direction: column;
        padding: 24px 20px;
        gap: 4px;
        overflow-y: auto;
        z-index: 999;
    }

    /* Show nav when open */
    .nav-menu-wrapper.open {
        display: flex;
    }

    .nav-menu {
        flex-direction: column;
        gap: 0;
    }

    .nav-menu li>a {
        color: rgba(255, 255, 255, .85);
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        width: 100%;
    }

    .nav-menu li>a:hover {
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }

    /* Dropdown on mobile — show all as flat list */
    .nav-dropdown {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        display: block !important;
        padding: 0 0 0 16px;
        margin: 4px 0;
        border-radius: 0;
        background: rgba(255, 255, 255, .05);
        border-left: 2px solid #E8311A;
    }

    .nav-dropdown a {
        font-size: .9rem;
        color: rgba(255, 255, 255, .65) !important;
        padding: 8px 12px;
        border-bottom: none;
    }

    .nav-upload-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        text-align: center;
        margin-top: 12px;
    }

    /* Show hamburger */
    .hamburger {
        display: flex;
    }

    /* Hamburger animation when open */
    .hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .navbar {
        height: auto;
        min-height: 56px;
    }
}

/* ── 2. HERO SECTION ───────────────────────────────── */

@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hero-visual {
        display: none;
    }

    .hero-section {
        padding: 60px 24px 0;
    }

    .hero-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 48px 20px 0;
    }

    .hero-title {
        font-size: 2.2rem;
        letter-spacing: -.5px;
    }

    .hero-subtitle {
        font-size: .95rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .hero-buttons .btn,
    .hero-buttons a {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 1rem;
        text-align: center;
    }

    .hero-stats {
        gap: 20px;
        flex-wrap: wrap;
    }

    .hero-stat-number {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 36px 16px 0;
    }

    .hero-title {
        font-size: 1.85rem;
    }

    .hero-badge {
        font-size: .7rem;
        padding: 5px 12px;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        text-align: center;
    }

    .hero-stat-number {
        font-size: 1.3rem;
    }

    .hero-stat-label {
        font-size: .68rem;
    }
}

/* ── 3. SEARCH BAR SECTION ─────────────────────────── */

@media (max-width: 768px) {
    .live-search-section {
        padding: 24px 16px;
    }

    .live-search-wrapper h2 {
        font-size: 1.15rem;
        margin-bottom: 12px;
    }

    .live-search-form {
        flex-direction: column;
        border-radius: 12px;
        overflow: hidden;
    }

    .live-search-form input {
        padding: 13px 16px;
        border-bottom: 1px solid #E8ECF0;
        font-size: .9rem;
    }

    .live-search-form button {
        padding: 13px 16px;
        justify-content: center;
        font-size: .9rem;
        border-radius: 0;
    }

    .popular-tags {
        gap: 6px;
    }

    .popular-tags a {
        font-size: .75rem;
        padding: 5px 10px;
    }
}

/* ── 4. SECTION HEADERS ────────────────────────────── */

@media (max-width: 768px) {
    .section {
        padding: 48px 16px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 24px;
    }

    .section-header h2 {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .section {
        padding: 36px 16px;
    }

    .section-header h2 {
        font-size: 1.4rem;
    }
}

/* ── 5. FILTER TABS ────────────────────────────────── */

@media (max-width: 640px) {

    .filter-tabs,
    .class-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .filter-tabs::-webkit-scrollbar,
    .class-tabs::-webkit-scrollbar {
        display: none;
    }

    .filter-tab,
    .ctab {
        flex-shrink: 0;
        padding: 7px 16px;
        font-size: .8rem;
        white-space: nowrap;
    }
}

/* ── 6. NOTES / CARDS GRID ─────────────────────────── */

@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .notes-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .university-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-area {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .notes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .note-card {
        padding: 16px;
    }

    .note-icon {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .note-card h3 {
        font-size: .88rem;
    }

    .note-card p {
        font-size: .75rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 420px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .notes-grid {
        grid-template-columns: 1fr;
    }

    .note-card {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .note-icon {
        flex-shrink: 0;
    }

    .note-card p {
        display: none;
    }
}

/* ── 7. FEATURES STRIP ─────────────────────────────── */

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .feature-item {
        padding: 16px;
    }

    .feature-item h4 {
        font-size: .85rem;
    }

    .feature-item p {
        font-size: .75rem;
    }
}

@media (max-width: 420px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 8. UNIVERSITY SECTION ─────────────────────────── */

@media (max-width: 640px) {
    .university-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .university-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 9. BLOG GRID ──────────────────────────────────── */

@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .blog-thumb {
        height: 100px;
        font-size: 2.2rem;
    }

    .blog-body {
        padding: 14px 16px;
    }

    .blog-card h3 {
        font-size: .9rem;
    }
}

/* ── 10. UPLOAD CTA BANNER ─────────────────────────── */

@media (max-width: 768px) {
    .upload-cta {
        flex-direction: column;
        text-align: center;
        padding: 36px 24px;
        gap: 20px;
    }

    .upload-cta h2 {
        font-size: 1.5rem;
    }

    .upload-cta p {
        font-size: .88rem;
    }
}

@media (max-width: 480px) {
    .upload-cta {
        padding: 28px 16px;
        border-radius: 16px;
    }

    .upload-cta h2 {
        font-size: 1.3rem;
    }
}

/* ── 11. FOOTER ────────────────────────────────────── */

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-brand p {
        font-size: .82rem;
    }

    .footer-col h4 {
        font-size: .72rem;
    }

    .footer-col ul li a {
        font-size: .8rem;
    }
}

@media (max-width: 420px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .footer-bottom-links {
        gap: 12px;
        justify-content: center;
    }
}

/* ── 12. SINGLE POST PAGE ──────────────────────────── */

@media (max-width: 768px) {
    .post-layout {
        grid-template-columns: 1fr;
        padding: 24px 16px;
        gap: 24px;
    }

    .post-content {
        padding: 20px 16px;
    }

    .post-hero {
        padding: 36px 16px;
    }

    .post-hero-title {
        font-size: 1.6rem;
    }

    .post-meta {
        flex-wrap: wrap;
        gap: 10px;
        font-size: .82rem;
    }

    .post-sidebar {
        order: 2;
    }

    .pdf-viewer {
        height: 350px;
    }

    .share-buttons {
        flex-wrap: wrap;
    }

    .share-btn {
        flex: 1;
        text-align: center;
        min-width: 100px;
    }

    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ── 13. ARCHIVE / CATEGORY PAGE ───────────────────── */

@media (max-width: 768px) {
    .archive-hero {
        padding: 36px 16px;
    }

    .archive-hero-title {
        font-size: 1.8rem;
    }

    .posts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .full-width-layout {
        padding: 32px 16px;
    }

    .filter-bar-inner {
        flex-direction: column;
        height: auto;
        padding: 10px 16px;
        gap: 8px;
    }

    .filter-bar-left,
    .filter-bar-right {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .posts-grid {
        grid-template-columns: 1fr !important;
    }

    .archive-hero-title {
        font-size: 1.4rem;
    }

    .archive-hero-icon {
        font-size: 2.5rem;
    }
}

/* ── 14. SEARCH PAGE ───────────────────────────────── */

@media (max-width: 768px) {
    .search-hero {
        padding: 36px 16px 40px;
    }

    .search-hero-form {
        max-width: 100%;
    }

    .search-form-large {
        max-width: 100%;
        flex-direction: column;
        border-radius: 12px;
    }

    .search-input-large {
        border-bottom: 1px solid #E8ECF0;
    }

    .search-submit-btn {
        border-radius: 0;
    }

    .search-filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

/* ── 15. 404 PAGE ──────────────────────────────────── */

@media (max-width: 768px) {
    .not-found-section {
        padding: 48px 16px;
        min-height: auto;
    }

    .not-found-404 {
        font-size: 5rem;
    }

    .not-found-title {
        font-size: 1.5rem;
    }
}

/* ── 16. ABOUT PAGE ────────────────────────────────── */

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        padding: 20px 16px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-mission-title {
        font-size: 1.3rem;
    }

    .about-page-content {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* ── 17. PAGE CONTENT BOX ──────────────────────────── */

@media (max-width: 768px) {
    .page-content-box {
        padding: 28px 20px;
        border-radius: 14px;
    }

    .page-content-box h1 {
        font-size: 1.5rem;
    }
}

/* ── 18. BREADCRUMB ────────────────────────────────── */

@media (max-width: 480px) {
    .breadcrumb-bar {
        font-size: .75rem;
        padding: 10px 16px;
        white-space: nowrap;
        overflow-x: auto;
    }

    .breadcrumb-nav {
        font-size: .78rem;
    }

    .breadcrumb-hero {
        flex-wrap: wrap;
    }
}

/* ── 19. SIDEBAR WIDGETS ───────────────────────────── */

@media (max-width: 768px) {
    .sidebar-widget {
        padding: 16px;
    }

    .sidebar-widget h4 {
        font-size: .75rem;
    }
}

/* ── 20. RELATED POSTS ─────────────────────────────── */

@media (max-width: 768px) {
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .related-posts-section {
        padding: 40px 16px;
    }

    .section-heading {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 21. GLOBAL HELPERS ────────────────────────────── */

/* Prevent horizontal scroll on all screens */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Better tap targets on mobile */
@media (max-width: 768px) {

    a,
    button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Exception for inline text links */
    p a,
    li a,
    .entry-content a,
    .note-card-title a,
    .sidebar-note-item {
        min-height: unset;
        display: inline;
    }

    .note-card,
    .sidebar-note-item {
        display: flex;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Images always responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Tables scroll on mobile */
@media (max-width: 768px) {

    .post-content table,
    .entry-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Embedded iframes responsive */
.post-content iframe,
.entry-content iframe {
    max-width: 100%;
}

/* Container responsive padding */
@media (max-width: 768px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}