/* nav.css — navigation bar, dropdown, mobile hamburger */

/* Navigation */
.navbar {
    background: var(--white);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.navbar.scrolled { padding: 0.5rem 0; box-shadow: 0 2px 30px rgba(0,0,0,0.12); }

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.2rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-section { display:flex; align-items:center; gap:1rem; cursor:pointer; }
.logo-img { height:50px; width:auto; display:block; }
.logo-text { display:flex; flex-direction:column; }

.logo-name {
    font-size:1.5rem;
    font-weight:800;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; line-height:1.2;
}
.logo-tagline { font-size:0.7rem; color:var(--text-light); font-weight:500; font-style:italic; }

.nav-menu {
    display:flex; list-style:none; gap:3rem; align-items:center;
}

.nav-menu a {
    text-decoration:none; color:var(--text); font-weight:600; font-size:0.95rem; position:relative;
    transition: color 0.3s;
}
.nav-menu a::after {
    content: ''; position: absolute; bottom: -5px; left:0; width:0; height:2px; background:var(--primary); transition: width .3s;
}
.nav-menu a:hover { color:var(--primary); }
.nav-menu a:hover::after { width:100%; }

/* Dropdown Menu Styles */
.dropdown { position: relative; }
.dropdown-toggle { display:flex; align-items:center; gap:0.3rem; cursor: pointer; }
.dropdown-toggle .arrow { font-size:0.7rem; transition: transform 0.3s; }
.dropdown.active .arrow { transform: rotate(180deg); }

.dropdown-menu {
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-10px);
    background:var(--white); min-width:650px; max-width:800px;
    box-shadow:0 10px 40px rgba(0,0,0,0.15); border-radius:15px; padding:1.5rem; margin-top:1rem;
    opacity:0; visibility:hidden; transition: all .3s; z-index:100; max-height:500px; overflow-y:auto;
}
.dropdown.active .dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* dropdown grid */
.dropdown-menu-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem; width:100%; }
.course-category { background: var(--light); padding:1rem; border-radius:10px; border-left:3px solid var(--primary); min-width:0; }
.category-header { display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; font-weight:700; color:var(--secondary); font-size:.9rem; }
.category-courses { list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.category-courses li a { display:block; padding:.5rem .8rem; color:var(--text); font-size:.85rem; border-radius:6px; text-decoration:none; transition:all .3s; word-wrap:break-word; }
.category-courses li a:hover { background:var(--white); color:var(--primary); padding-left:1.2rem; box-shadow:0 2px 8px rgba(0,0,0,0.1); }

/* enroll button and hamburger */
.enroll-btn { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--white); padding:.8rem 2rem; border-radius:50px; font-weight:600; white-space:nowrap; }
.enroll-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,107,53,0.3); }

.hamburger { display:none; flex-direction:column; cursor:pointer; gap:5px; }
.hamburger span { width:28px; height:3px; background:var(--dark); border-radius:3px; transition: .3s; }