/* ============================= */
/*    RESPONSIVE - STUDY HUB     */
/* ============================= */

html,
body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

/* Hide hamburger by default */
.menu-toggle{
    display:none;
    font-size:26px;
    cursor:pointer;
    background:transparent;
    border:none;
    color:var(--text);
    padding:4px 8px;
    border-radius:8px;
}

.menu-toggle:hover{
    background:var(--bg);
}

/* ====== LARGE TABLETS (1024px) ====== */
@media (max-width:1024px){
    nav{
        padding:14px 5%;
    }

    .hero-content h1{
        font-size:40px;
    }

    section{
        padding:80px 6%;
    }

    .social-buttons{
        gap:8px;
    }

    .social-btn{
        padding:6px 12px;
        font-size:12px;
    }

    .hero-stats{
        gap:28px;
    }

    .stat-number{
        font-size:26px;
    }
}

/* ====== TABLETS (900px) ====== */
/* Founder section logo responsive for tablets */
@media (max-width:1024px){
    .founder-section::before {
        width: 800px;
        height: 800px;
        max-width: 90vw;
        max-height: 90vw;
    }
}
@media (max-width:900px){
    .about{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .about-text h2{
        text-align:center;
    }

    .about-img img{
        width:min(200px,60vw);
    }

    .study-grid{
        grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    }

    .tools-grid{
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    }
}

/* ====== MOBILE (768px) ====== */
    /* Founder section logo responsive for mobile */
    .founder-section::before {
        width: 400px;
        height: 400px;
        max-width: 90vw;
        max-height: 90vw;
    }
@media (max-width:768px){
    section{
        padding:70px 5%;
    }

    .hero{
        min-height:100vh;
        padding:100px 5% 50px;
    }

    .hero-content h1{
        font-size:30px;
        line-height:1.3;
    }

    .hero-content p{
        font-size:15px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:12px;
    }

    .btn{
        width:100%;
        max-width:280px;
        justify-content:center;
    }

    .hero-stats{
        gap:20px;
    }

    .stat-number{
        font-size:24px;
    }

    .stat-label{
        font-size:11px;
    }

    .study-grid,
    .tools-grid{
        grid-template-columns:1fr;
    }

    section h2{
        font-size:26px;
    }

    .motivation-content h2{
        font-size:24px;
    }

    /* Navbar mobile behavior for both home-page and study-page */
    .home-page nav,
    .study-page nav,
    .resources-page nav {
        flex-wrap:wrap;
        row-gap:10px;
        padding:12px 5%;
    }

    .home-page .menu-toggle,
    .study-page .menu-toggle,
    .resources-page .menu-toggle {
        display:block;
        margin-left:auto;
    }

    .home-page .social-buttons,
    .study-page .social-buttons,
    .resources-page .social-buttons {
        order:2;
        width:100%;
        justify-content:center;
    }

    .home-page .nav-links,
    .study-page .nav-links,
    .resources-page .nav-links {
        order:3;
        width:100%;
        position:static;
        flex-direction:column;
        align-items:center;
        gap:14px;
        display:none;
        padding:10px 0 0;
        background:transparent;
    }

    .home-page .nav-links.active,
    .study-page .nav-links.active,
    .resources-page .nav-links.active {
        display:flex;
    }

    .about{
        padding:70px 5%;
    }
}

/* ====== SMALL MOBILE (480px) ====== */
@media (max-width:480px){
    .hero-content h1{
        font-size:24px;
    }

    .hero-badge{
        font-size:12px;
        padding:6px 14px;
    }

    section h2{
        font-size:22px;
    }

    nav{
        padding:12px 4%;
    }

    nav .logo{
        font-size:18px;
    }

    .social-btn{
        font-size:11px;
        padding:6px 10px;
    }

    .social-btn svg{
        display:none;
    }

    .hero-stats{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:16px;
    }

    .tool-card{
        padding:24px 18px;
    }

    .study-card{
        padding:22px 18px;
    }

    .motivation{
        padding:60px 5%;
    }
}