html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Verdana, Geneva, Tahoma, sans-serif;
background:#f4efe6;
color:#333;
}


/* HERO */

.hero{
height:75vh;
position:relative;
display:flex;
align-items:center;
padding-left:8%;
color:white;
overflow:hidden;
background-image:
linear-gradient(rgba(30,20,15,0.55),rgba(30,20,15,0.55)),
url("../images/history-bg.jpg");
background-size:cover;
background-position:center;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:
radial-gradient(circle at 20% 40%,rgba(255,220,150,0.25),transparent 60%);
pointer-events:none;
}

.hero-fade{
position:absolute;
bottom:0;
left:0;
width:100%;
height:120px;
background:linear-gradient(to bottom,
rgba(239,231,220,0),
#efe7dc);
}

.site-title{
font-size:72px;
margin:0;
letter-spacing:1px;
text-shadow:0 6px 15px rgba(0,0,0,0.6);
}

.site-subtitle{
font-size:24px;
margin-top:15px;
opacity:0.95;
text-shadow:0 3px 10px rgba(0,0,0,0.6);
}



/* PROFESOR */

.teacher-section{
padding:100px 20px;
display:flex;
justify-content:center;
background:linear-gradient(#efe7dc,#f4efe6);
}

.teacher-card{
display:flex;
gap:40px;
align-items:center;
background:white;
padding:40px;
border-radius:14px;
box-shadow:0 12px 30px rgba(0,0,0,0.18);
max-width:900px;
}

.teacher-photo{
width:200px;
border-radius:12px;
}

.teacher-text h2{
margin:0;
font-size:32px;
}

.teacher-text h4{
margin-top:6px;
color:#5c4033;
}
.teacher-text p{
    margin-top:-5px;
}
/* CONTENT LAYOUT */

.content-section{
padding:80px 40px;
background:#efe7dc;
}

.content-layout{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:260px 1fr;
gap:40px;
align-items:start;
}



/* SIDEBAR */

.toc-sidebar{
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.12);
position:sticky;
top:40px;
}

.toc-sidebar h3{
margin-top:0;
font-size:16px;
letter-spacing:1px;
color:#5c4033;
margin-bottom:20px;
}



/* TOC */

#toc-container{
display:flex;
flex-direction:column;
gap:10px;
}

.toc-button{
background:#f7f3ec;
border:none;
padding:12px 14px;
border-radius:8px;
text-align:left;
font-size:15px;
cursor:pointer;
transition:0.2s;
}

.toc-button:hover{
background:#e8ded1;
}



/* MATERIAL AREA */

.materials-area{
display:flex;
flex-direction:column;
gap:30px;
}



/* CARDURI */

.card{

background:white;
position:relative;
padding: 40px 36px;

border-radius:14px;

box-shadow:0 10px 25px rgba(0,0,0,0.12);

border:1px solid #e7ded1;

transition:0.3s;
margin-bottom: 25px;
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(0,0,0,0.2);
}


/* titlu mic deasupra */

.material-label{

font-size:10px;

letter-spacing:2px;

color:#c7a68d;

text-transform:uppercase;

margin-bottom:8px;

font-weight:600;

}



/* titlu */

.card h3{

margin:0;

font-size:28px;

color:#5a2e1b;

font-weight:700;

transition:color 0.35s ease;

}



/* descriere */

.card p{

margin-top:10px;

color:#8a6f5a;

line-height:1.6;

font-size:15px;

}


/* BUTOANE */

.buttons{
margin-top:20px;
display:flex;
gap:10px;
}

button{
background:#b89c7c;
border:none;
color:white;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
}

button:hover{
background:#9c7b65;
}



/* MODAL */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
}

.modal-content{
background:white;
width:80%;
max-width:900px;
margin:5% auto;
padding:40px 25px 25px 25px;
position:relative;
border-radius:10px;
}

#close-modal{

position:absolute;

top:12px;

right:18px;

font-size:28px;

cursor:pointer;

color:#5c4033;

font-weight:bold;

z-index:10;

margin-top:-7px;

}
/* ========================= */
/* TOC IMPROVEMENTS */
/* ========================= */

.toc-button{

background:#f6f0e7;

border:none;

padding:12px 14px;

border-radius:8px;

text-align:left;

font-size:15px;

cursor:pointer;

color:#6a4a37;

font-weight:600;

transition:0.25s;

}

.toc-button:hover{

background:#eadfd1;

color:#8b3a2e;

}

.toc-button.active{

background:#8b3a2e;

color:white;

}


/* ========================= */
/* CARD HOVER TEXT EFFECT */
/* ========================= */

.card h3{

transition:color 0.3s ease;

}

.card:hover h3{

color:#8b2e2e;

}



/* ========================= */
/* FILE TYPE BADGE */
/* ========================= */

/* ========================= */
/* FILE BADGE (ca in template) */
/* ========================= */

.file-badge{

position:absolute;

top:16px;
right:16px;

font-size:12px;

padding:6px 12px;

border-radius:20px;

font-weight:600;

background:#f1e7dc;

color:#7b5a44;

border:1px solid #e2d6c8;

}


/* variante */

.badge-ppt{

background:#f3e2d8;

color:#b45a2a;

}

.badge-video{

background:#f5dcdc;

color:#b33a3a;

}

.badge-pdf{

background:#dde6f6;

color:#3b5ea7;

}

.badge-doc{

background:#e3edf8;

color:#4c6fa8;

}