*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{
background:#f4f6f9;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
background:#0f172a;
color:white;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-size:30px;
font-weight:bold;
}

.logo img{
height:38px;
width:auto;
}

nav a{
color:white;
text-decoration:none;
margin-left:30px;
transition:.3s;
}

nav a:hover{
color:#38bdf8;
}

.hero{
height:80vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
url("https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=1400");
background-size:cover;
background-position:center;
color:white;
}

.hero h1{
font-size:60px;
margin-bottom:20px;
}

.hero p{
font-size:22px;
width:70%;
}

button{
margin-top:30px;
padding:15px 35px;
border:none;
background:#38bdf8;
font-size:18px;
border-radius:30px;
cursor:pointer;
}

button:hover{
background:white;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
padding:80px 8%;
}

.card{
background:white;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,.1);
transition:.3s;
}

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

.card img{
width:100%;
height:220px;
object-fit:cover;
}

.card h2{
padding:20px;
}

.card p{
padding:0 20px 20px;
color:#555;
}

footer{
background:#0f172a;
color:white;
text-align:center;
padding:30px;
}

/* Read Articles Button */

.btn{
display:inline-block;
margin-top:30px;
padding:15px 35px;
background:#38bdf8;
color:white;
text-decoration:none;
font-size:18px;
font-weight:600;
border-radius:30px;
transition:.3s;
}

.btn:hover{
background:white;
color:#0f172a;
}

/* Read Articles Page */

.article-container{
width:90%;
max-width:1300px;
margin:60px auto;
}

.article-title{
text-align:center;
font-size:48px;
margin-bottom:15px;
color:#0f172a;
}

.article-description{
text-align:center;
font-size:18px;
color:#666;
margin-bottom:50px;
}

.article-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
}

.article-card{
background:white;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,.1);
transition:.3s;
}

.article-card:hover{
transform:translateY(-10px);
}

.article-card img{
width:100%;
height:220px;
object-fit:cover;
}

.article-content{
padding:25px;
}

.article-content h2{
margin-bottom:15px;
color:#0f172a;
}

.article-content p{
color:#666;
line-height:1.7;
margin-bottom:20px;
}

.read-btn{
display:inline-block;
padding:12px 24px;
background:#38bdf8;
color:white;
text-decoration:none;
border-radius:8px;
transition:.3s;
font-weight:600;
}

.read-btn:hover{
background:#0f172a;
}

.search-container{
    display:flex;
    align-items:center;
    gap:8px;
}

.search-container input{
    padding:10px 15px;
    width:250px;
    border:none;
    border-radius:25px;
    outline:none;
    font-size:16px;
}

.search-container button{
    padding:10px 15px;
    border:none;
    border-radius:50%;
    background:#38bdf8;
    color:white;
    cursor:pointer;
    transition:.3s;
}

.search-container button:hover{
    background:#2563eb;
}

/* ============ Nav user menu (logged-in state) ============ */

nav{
    display:flex;
    align-items:center;
}

.nav-user{
    position:relative;
    margin-left:30px;
}

.nav-user-btn{
    display:flex;
    align-items:center;
    gap:8px;
    background:transparent;
    border:none;
    margin:0;
    padding:6px 10px;
    color:white;
    cursor:pointer;
    font-family:Poppins,sans-serif;
    font-size:15px;
    border-radius:20px;
    transition:.3s;
}

.nav-user-btn:hover{
    background:rgba(255,255,255,.08);
}

.nav-user-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #38bdf8;
}

.nav-user-caret{
    font-size:11px;
    opacity:.7;
}

.nav-user-dropdown{
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    background:white;
    min-width:170px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:.2s;
    z-index:50;
}

.nav-user-dropdown.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.nav-user-dropdown a{
    display:block;
    padding:12px 18px;
    color:#0f172a;
    text-decoration:none;
    font-size:14px;
    transition:.2s;
}

.nav-user-dropdown a:hover{
    background:#f4f6f9;
    color:#0f172a;
}

/* ============ Profile page ============ */

.profile-page{
    width:90%;
    max-width:1000px;
    margin:60px auto;
}

.profile-header{
    display:flex;
    align-items:center;
    gap:25px;
    margin-bottom:40px;
}

.profile-avatar-wrap{
    position:relative;
    width:110px;
    height:110px;
    flex-shrink:0;
}

.profile-avatar{
    width:110px;
    height:110px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid white;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
}

.profile-avatar-edit{
    position:absolute;
    bottom:2px;
    right:2px;
    background:#38bdf8;
    color:white;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:14px;
    transition:.3s;
}

.profile-avatar-edit:hover{
    background:#0f172a;
}

.profile-header h1{
    font-size:32px;
    color:#0f172a;
    margin-bottom:4px;
}

.profile-subtext{
    color:#666;
    font-size:15px;
}

.profile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.profile-card{
    background:white;
    border-radius:15px;
    padding:30px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.profile-card h2{
    font-size:20px;
    color:#0f172a;
    margin-bottom:20px;
}

.profile-card label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:#0f172a;
    margin:16px 0 6px;
}

.profile-card label:first-of-type{
    margin-top:0;
}

.profile-card input[type="text"],
.profile-card input[type="email"],
.profile-card input[type="password"],
.profile-card textarea,
.profile-card select{
    width:100%;
    padding:11px 14px;
    border:1px solid #ddd;
    border-radius:8px;
    font-family:Poppins,sans-serif;
    font-size:14px;
    outline:none;
    transition:.2s;
}

.profile-card input:focus,
.profile-card textarea:focus,
.profile-card select:focus{
    border-color:#38bdf8;
}

.profile-card input:disabled{
    background:#f4f6f9;
    color:#999;
}

.profile-card textarea{
    resize:vertical;
}

.profile-checkbox{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:400;
    cursor:pointer;
}

.profile-checkbox input{
    width:auto;
}

.profile-card button{
    width:100%;
    margin-top:22px;
    padding:13px;
    background:#38bdf8;
    color:white;
    border:none;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.profile-card button:hover{
    background:#0f172a;
}

.form-msg{
    margin-top:12px;
    font-size:14px;
    min-height:18px;
}

.form-msg.success{
    color:#16a34a;
}

.form-msg.error{
    color:#dc2626;
}

/* ============ Dark Mode ============ */

.dark-mode-toggle{
margin:0 0 0 20px;
padding:6px 10px;
background:transparent;
border:1px solid rgba(255,255,255,.35);
color:white;
border-radius:50%;
font-size:16px;
line-height:1;
cursor:pointer;
transition:.3s;
}

.dark-mode-toggle:hover{
background:rgba(255,255,255,.12);
}

body.dark-mode{
background:#0b1120;
color:#e2e8f0;
}

body.dark-mode header{
background:#0b1120;
border-bottom:1px solid #1e293b;
}

body.dark-mode .card,
body.dark-mode .article-card,
body.dark-mode .profile-card{
background:#111827;
box-shadow:0 5px 20px rgba(0,0,0,.4);
}

body.dark-mode .card h2,
body.dark-mode .article-content h2,
body.dark-mode .article-title,
body.dark-mode .profile-header h1,
body.dark-mode .profile-card h2,
body.dark-mode .profile-card label{
color:#f1f5f9;
}

body.dark-mode .card p,
body.dark-mode .article-content p,
body.dark-mode .article-description,
body.dark-mode .profile-subtext{
color:#94a3b8;
}

body.dark-mode footer{
background:#0b1120;
border-top:1px solid #1e293b;
}

body.dark-mode .profile-card input[type="text"],
body.dark-mode .profile-card input[type="email"],
body.dark-mode .profile-card input[type="password"],
body.dark-mode .profile-card textarea,
body.dark-mode .profile-card select{
background:#1e293b;
border-color:#334155;
color:#e2e8f0;
}

body.dark-mode .profile-card input:disabled{
background:#0f172a;
color:#64748b;
}

body.dark-mode .nav-user-dropdown{
background:#111827;
}

body.dark-mode .nav-user-dropdown a{
color:#e2e8f0;
}

body.dark-mode .nav-user-dropdown a:hover{
background:#1e293b;
}

body.dark-mode .building-meta span,
body.dark-mode .article-meta span{
background:#1e293b;
color:#e2e8f0;
}

body.dark-mode .building-description,
body.dark-mode .article-body{
color:#cbd5e1;
}

.card .read-btn{
display:inline-block;
margin:0 20px 20px;
}

a.logo{
color:white;
text-decoration:none;
cursor:pointer;
}

/* Category filter bar */

.filter-bar{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
padding:0 8% 20px;
}

.filter-btn{
margin:0;
padding:10px 22px;
border:2px solid #0f172a;
background:transparent;
color:#0f172a;
border-radius:30px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.filter-btn:hover{
background:#0f172a;
color:white;
}

.filter-btn.active{
background:#0f172a;
color:white;
}

.card[data-category].hidden,
.article-card[data-category].hidden{
display:none;
}

body.dark-mode .filter-btn{
border-color:#e2e8f0;
color:#e2e8f0;
}

body.dark-mode .filter-btn:hover,
body.dark-mode .filter-btn.active{
background:#38bdf8;
color:#0f172a;
border-color:#38bdf8;
}

/* Homepage category cards (Modern / Ancient) */

.category-cards{
display:grid;
grid-template-columns:repeat(2,1fr);
max-width:1000px;
margin:0 auto;
}

@media (max-width:700px){
.category-cards{
grid-template-columns:1fr;
}
}

.category-cards .card img{
height:280px;
}

.category-cards .card h2{
font-size:26px;
}

.empty-state{
grid-column:1/-1;
text-align:center;
color:#888;
padding:60px 20px;
}