/*
Theme Name: Daily English AI
*/

/* =========================
GLOBAL
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#f7f5ff;
    color:#111827;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

.layout{
    min-height:100vh;
    padding-left: 16px;
    padding-right: 16px;
}

/* =========================
MAIN CONTENT
========================= */

.main-content{

    width:100%;

    padding-top:120px;

    padding-left:18px;

    padding-right:18px;

    padding-bottom:25px;
}



.content-wrapper{
    width:100%;
    max-width:1500px;
    margin:auto;
    padding-left:12px; 
    padding-right:12px;
}

/* =========================
HEADER
========================= */

.main-header{
    position:fixed;
    top:1px;
    left:12px;
    right:12px;
    z-index:9990;

    background:linear-gradient(135deg,#6d28d9,#4c1d95);

    border-radius:22px;

    padding:18px 26px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:25px;

    box-shadow:0 15px 40px rgba(0,0,0,0.12);
}


/* =========================
HEADER SAFE SPACING
========================= */

body{
    padding-top:0;
}





/* =========================
LOGO
========================= */

.header-logo{
    display:flex;
    align-items:center;
    gap:14px;
}

.logo-icon{
    width:58px;
    height:58px;
    background:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    flex-shrink:0;
}

.logo-text h2{
    color:white;
    font-size:30px;
    font-family:'Poppins',sans-serif;
    line-height:1;
    margin-bottom:5px;
}

.logo-text span{
    color:white;
    opacity:0.9;
    font-size:16px;
}

/* =========================
HEADER MENU
========================= */

.header-menu{
    display:flex;
    align-items:center;
    gap:32px;
}

.header-menu a{
    color:white;
    font-size:15px;
    font-weight:500;
    position:relative;
    padding-bottom:8px;
}

.header-menu a:hover{
    opacity:0.9;
}

.header-menu .active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:3px;
    background:white;
    border-radius:20px;
}

/* =========================
MENU BUTTON
========================= */

.menu-toggle{
    width:58px;
    height:58px;

    border:none;

    border-radius:18px;

    background:rgba(255,255,255,0.14);

    backdrop-filter:blur(10px);

    color:white;

    font-size:26px;

    cursor:pointer;

    transition:0.3s ease;

    flex-shrink:0;

    position:relative;

    z-index:10002;

    display:flex;
    justify-content:center;
    align-items:center;
}

.menu-toggle:hover{
    background:rgba(255,255,255,0.22);
    transform:scale(1.05);
}


/* =========================
SIDEBAR
========================= */

.sidebar{
    position:fixed;

    top:0;

    right:-320px;

    width:320px;

    height:100vh;

    background:white;

    z-index:10001;

    transition:0.4s ease;

    border-left:1px solid #ede9fe;

    overflow-y:auto;

    box-shadow:-10px 0 40px rgba(0,0,0,0.08);
}

.sidebar.show-sidebar{
    right:0;
}


.sidebar-inner{
    padding:30px 22px;
}

.sidebar-top{
    margin-bottom:35px;
}

.sidebar-top h2{
    font-family:'Poppins',sans-serif;
    font-size:32px;
    color:#6d28d9;
}

/* =========================
SIDEBAR NAV
========================= */

.sidebar-nav ul{
    list-style:none;
}

.sidebar-nav li{
    list-style:none;
    margin-bottom: 4px;
}

.sidebar-nav a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border-radius:16px;
    color:#1f2937;
    font-size:17px;
    font-weight:500;
    transition:0.3s;
}

.sidebar-nav a:hover{
    background:#f3e8ff;
    color:#6d28d9;
}

.sidebar-nav .current-menu-item > a{
    background:#eadcff;
    color:#6d28d9;
    font-weight:600;
}

/* =========================
SUB MENU
========================= */

.sidebar-nav .sub-menu{
    margin-top:8px;
    margin-left:18px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sidebar-nav .sub-menu a{
    background:#faf5ff;
    padding:12px 14px;
    border-radius:14px;
    font-size:15px;
    color:#4b5563;
}

.sidebar-nav .sub-menu a:hover{
    background:#ede9fe;
    color:#6d28d9;
}

/* =========================
HERO
========================= */

.hero{
    background:linear-gradient(135deg,#f5f3ff,#ede9fe);
    border-radius:36px;
    padding:70px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:50px;
    align-items:center;
    margin-bottom:60px;
}

.hero h1{
    font-size:72px;
    line-height:1.1;
    font-family:'Poppins',sans-serif;
    margin-bottom:24px;
}

.hero h1 span{
    color:#6d28d9;
}

.hero p{
    font-size:22px;
    color:#64748b;
    line-height:1.8;
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.primary-btn{
    background:#6d28d9;
    color:white;
    padding:18px 30px;
    border-radius:16px;
    font-weight:600;
}

.secondary-btn{
    border:2px solid #6d28d9;
    color:#6d28d9;
    padding:18px 30px;
    border-radius:16px;
    font-weight:600;
}

.hero-circle{
    width:280px;
    height:280px;
    background:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:120px;
    margin:auto;
}

/* =========================
SECTION
========================= */

.section{
    margin-bottom:60px;
}

.section-header{
    margin-bottom:30px;
    padding: 35px 28px;
}

.section-header h2{
    font-size:40px;
    font-family:'Poppins',sans-serif;
    margin-bottom:10px;
}

.section-header p{
    color:#64748b;
    font-size:18px;
}

/* =========================
TOPIC GRID
========================= */

.topics-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.topic-card{
    background:white;
    padding:35px 28px;
    border-radius:28px;
    border:1px solid #ede9fe;
    transition:0.3s;
}

.topic-card:hover{
    transform:translateY(-8px);
}

.topic-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:32px;
    margin-bottom:20px;
}

.purple{
    background:#ede9fe;
}

.green{
    background:#dcfce7;
}

.blue{
    background:#dbeafe;
}

.orange{
    background:#ffedd5;
}

.topic-card h3{
    margin-bottom:12px;
    font-size:24px;
}

.topic-card p{
    color:#64748b;
    line-height:1.7;
    margin-bottom:20px;
}

.topic-card a{
    color:#6d28d9;
    font-weight:600;
}

/* =========================
PRACTICE
========================= */

.practice-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.practice-card{
    background:white;
    padding:30px;
    border-radius:28px;
    border:1px solid #ede9fe;
}

.answer-btn{
    margin-top:18px;
    background:#6d28d9;
    color:white;
    border:none;
    padding:12px 18px;
    border-radius:12px;
    cursor:pointer;
}

.answer{
    display:none;
    margin-top:16px;
    background:#f5f3ff;
    padding:16px;
    border-radius:14px;
    color:#6d28d9;
    font-weight:600;
}

/* =========================
TABLET
========================= */

@media(max-width:1200px){

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

.hero h1{
    font-size:56px;
}

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

.header-menu{
    gap:18px;
}

}

/* =========================
MOBILE
========================= */

@media(max-width:991px){

.header-menu{
    display:none;
}

.hero{
    padding:45px 30px;
}

.hero h1{
    font-size:42px;
}

.hero p{
    font-size:18px;
}

.topics-grid,
.practice-grid{
    grid-template-columns:1fr;
}

}

@media(max-width:768px){

.main-content{
   padding-top:80px; 
   padding-left:14px; 
   padding-right:14px;
}

.main-header{
    padding:16px 18px;
    border-radius:18px;
}

.logo-icon{
    width:50px;
    height:50px;
    font-size:24px;
}

.logo-text h2{
    font-size:22px;
}

.logo-text span{
    font-size:14px;
}

.hero{
    padding:35px 24px;
}

.hero-buttons{
    flex-direction:column;
}

.primary-btn,
.secondary-btn{
    width:100%;
    text-align:center;
}

.sidebar-top h2{
    font-family:'Poppins',sans-serif;
    font-size:24px;
    color:#6d28d9;
}

    
}

@media(max-width:400px){
    .logo-text h2{
    font-size:18px;
}


/* =========================
MOBILE SIDEBAR FIX
========================= */

@media(max-width:768px){

.sidebar{

    width:280px !important;

    right:-280px !important;

    left:auto !important;

}

.sidebar.show-sidebar{

    right:0 !important;

}

}


}


.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);

    opacity:0;
    visibility:hidden;

    transition:0.3s;

    z-index:9998;
}

.sidebar-overlay.active{
    opacity:1;
    visibility:visible;
}

/* =========================
SIDEBAR HEADER
========================= */

.sidebar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 6px;
}

.sidebar-header h2{
    font-family:'Poppins',sans-serif;
    font-size:30px;
    color:#6d28d9;
}

/* =========================
SIDEBAR CLOSE BUTTON
========================= */

.close-sidebar{
    width:50px;
    height:50px;

    border:none;

    border-radius:16px;

    background:#f3e8ff;

    color:#6d28d9;

    font-size:24px;

    cursor:pointer;

    transition:0.3s;

    display:flex;
    justify-content:center;
    align-items:center;
}

.close-sidebar:hover{
    background:#e9d5ff;
}


.cta{

    background:linear-gradient(135deg,#ede9fe,#f5f3ff);

    border-radius:32px;

    padding:50px 40px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-top:20px;

    margin-bottom:40px;

    flex-wrap:wrap;
}

.cta h2{

    font-family:'Poppins',sans-serif;

    font-size:46px;

    line-height:1.2;

    margin-bottom:14px;

    color:#111827;

    max-width:700px;
}


.cta p{

    color:#64748b;

    font-size:20px;

    line-height:1.7;

    max-width:650px;
}


/* =========================
CTA MOBILE FIX
========================= */

@media(max-width:768px){

.cta{

    padding:32px 24px;

    border-radius:24px;

    flex-direction:column;

    align-items:flex-start;

    text-align:left;

    gap:24px;
}

.cta h2{

    font-size:30px;

    line-height:1.3;
}

.cta p{

    font-size:17px;
}

.cta .primary-btn{

    width:100%;

    justify-content:center;

    text-align:center;
}

.sidebar-header h2{
    font-family:'Poppins',sans-serif;
    font-size:24px;
    color:#6d28d9;
}

}


/* =========================
SUBMENU
========================= */

.has-submenu{
    width:100%;
}

.submenu-toggle{

    width:100%;

    background:none;

    border:none;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

    border-radius:18px;

    cursor:pointer;

    font-size:18px;

    font-weight:600;

    color:#111827;

    transition:0.3s ease;
}

.submenu-toggle:hover{
    background:#f5f3ff;
}


.submenu-arrow{

    width:32px;

    height:32px;

    border-radius:50%;

    background:#f5f3ff;

    color:#6d28d9;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    transition:0.3s ease;

    flex-shrink:0;
}

/* ACTIVE ROTATE */

.has-submenu.active .submenu-arrow{

    transform:rotate(90deg);

    background:#6d28d9;

    color:white;
}



/* ACTIVE */

.has-submenu.active .submenu-arrow{

    transform:rotate(180deg);
}

/* SUBMENU */

.submenu{

    list-style:none;

    padding-left:14px;

    margin-top:10px;

    display:none;
}

.has-submenu.active .submenu{
    display:block;
}

.submenu li{
    margin-bottom:10px;
}

.submenu a{

    display:block;

    text-decoration:none;

    background:#f5f3ff;

    color:#334155;

    padding:16px 18px;

    border-radius:18px;

    font-size:16px;

    transition:0.3s ease;
}

.submenu a:hover{

    background:#ede9fe;

    color:#6d28d9;
}

/* ACTIVE MENU */

.submenu a.current-topic{

    background:#ede9fe;

    color:#6d28d9;

    font-weight:700;
}

/* MOBILE */

@media(max-width:768px){

.submenu-toggle{

    padding:16px;

    font-size:16px;
}

.submenu a{

    font-size:15px;

    padding:14px 16px;
}
}