/* =====================================================
   Saraswat Academy - Responsive Chapter Page CSS
   Version: 2.0
   ===================================================== */

:root{
--primary:#2563eb;
--accent:#f97316;
--bg:#f5f8fc;
--text:#1f2937;
}

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

html{scroll-behavior:smooth;}

body{
font-family:Segoe UI,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.8;
overflow-x:hidden;
 width:100%;
}

.wrapper{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:16px;
}


.hero{
background:linear-gradient(135deg,#0f172a,#2563eb);
color:#fff;
padding:45px 35px;
border-radius:20px;
}

.hero h1{
font-size:2.3rem;
line-height:1.35;
}

.hero p{margin-top:10px;}

.breadcrumb{
font-size:.9rem;
opacity:.9;
margin-bottom:12px;
}

.grid{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:24px;
}

main{
    min-width:0;
}

aside{
background:#fff;
padding:25px;
border-radius:16px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
position:sticky;
top:20px;
height:max-content;
}

aside h2{margin-bottom:15px;color:#2563eb;}

aside ul{list-style:none;}

aside li{margin:10px 0;}

aside a{
display:block;
padding:10px 12px;
border-radius:10px;
font-weight:600;
color:#333;
}

aside a:hover{
background:#eef5ff;
}

main{min-width:0;}

section{
background:#fff;
border-radius:18px;
padding:28px;
margin-bottom:22px;
border-top:5px solid var(--primary);
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

h2{color:#2563eb;margin-bottom:15px;}
h3{margin:20px 0 10px;color:#1d4ed8;}

.intro{
background:#eef5ff;
border-left:5px solid var(--primary);
padding:18px;
border-radius:12px;
margin:20px 0;
}

.summary{
background:#fff8eb;
border-left:5px solid var(--accent);
padding:20px;
border-radius:12px;
margin-top:20px;
}

.table-responsive{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

table{
width:100%;
border-collapse:collapse;
min-width:650px;
}

th,td{
padding:10px;
border:1px solid #ccc;
vertical-align:top;
}

.accordion-btn{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
background:#fff;
border:none;
cursor:pointer;
padding:0;
text-align:left;
}

.accordion-btn h2{
margin:0;
font-size:1.8rem;
}

.accordion-icon{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#eef5ff;
transition:.35s;
font-size:22px;
flex-shrink:0;
}

.accordion-content{
overflow:hidden;
max-height:0;
padding-top:0;
transition:max-height .45s ease,padding-top .35s ease;
}

section.open .accordion-content{
max-height:50000px;
padding-top:20px;
}

section.open .accordion-icon{
transform:rotate(180deg);
}

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

/* Tablet */
@media (max-width:900px){

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

aside{
position:static;
margin-bottom:20px;
}

}

/* Mobile */
@media (max-width:768px){

.wrapper{
padding:12px;
}

.hero{
padding:25px 18px;
border-radius:15px;
}

.hero h1{
font-size:1.6rem;
}

.breadcrumb{
font-size:.8rem;
}

section{
padding:18px;
}

.accordion-btn h2{
font-size:1.25rem;
line-height:1.4;
padding-right:10px;
}

.accordion-icon{
width:34px;
height:34px;
font-size:18px;
}

aside{
padding:18px;
}

aside ul{
display:flex;
flex-direction:column;
gap:8px;
}

aside li{
margin:0;
}

table{
min-width:600px;
}

}

/* Small phones */
@media (max-width:480px){

.wrapper{
padding:10px;
}

.hero{
padding:20px 15px;
}

.hero h1{
font-size:1.35rem;
}

.breadcrumb{
display:none;
}

section{
padding:15px;
}

h2{
font-size:1.2rem;
}

h3{
font-size:1.05rem;
}

.accordion-btn h2{
font-size:1.1rem;
}

.accordion-icon{
width:30px;
height:30px;
font-size:16px;
}

table{
min-width:500px;
}

}