/* Basic body & container */
body { font-family:'Inter',sans-serif; background:#f9fafb; color:#111827; margin:0; transition:0.3s;}
body.dark-mode { background:#0f172a; color:#e5e7eb; }
.container { width:90%; max-width:1200px; margin:auto; }

/* Header */
header { background:#111827; padding:20px 0; box-shadow:0 4px 6px rgba(0,0,0,0.1); position:sticky; top:0; z-index:100; }
header a { color:#f9fafb; text-decoration:none; font-weight:600; }
nav ul.main-menu { display:flex; gap:25px; list-style:none; margin:0; padding:0; }
nav ul.main-menu li { position:relative; }
nav a:hover { color:#38bdf8; }

/* Submenu */
.sub-menu { display:none; position:absolute; top:100%; left:0; background:#111827; padding:10px 0; border-radius:8px; min-width:180px; box-shadow:0 4px 12px rgba(0,0,0,0.2); z-index:999; }
.main-menu li:hover > .sub-menu { display:block; }
.sub-menu li a { padding:10px 20px; color:#f9fafb; display:block; }
.sub-menu li a:hover { background:#1f2937; color:#38bdf8; }

/* Hero Section */
.hero { background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%); color:#fff; padding:120px 0; text-align:center; border-radius:0 0 50% 50% / 0 0 20% 20%; }
.hero h1 { font-size:3rem; margin-bottom:20px; }
.hero p { font-size:1.2rem; }

/* Posts Grid */
.posts { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; margin:50px 0; }
.post-card { background:#fff; padding:25px; border-radius:15px; box-shadow:0 8px 20px rgba(0,0,0,0.05); transition:0.3s; }
.post-card:hover { transform:translateY(-5px); box-shadow:0 12px 25px rgba(0,0,0,0.1); }
body.dark-mode .post-card { background:#111827; box-shadow:0 8px 20px rgba(255,255,255,0.05); }

/* Toggle Button */
.toggle-dark { position:fixed; top:15px; right:15px; background:#38bdf8; color:#111827; border:none; padding:10px 20px; border-radius:10px; cursor:pointer; font-weight:600; z-index:9999; transition:0.3s; }
.toggle-dark:hover { background:#0ea5e9; transform:scale(1.05); }

/* Footer */
footer { background:#111827; color:#f9fafb; text-align:center; padding:40px 0; margin-top:50px; }

/* Mobile */
.mobile-menu-toggle { display:none; } /* hide by default on desktop */

@media(max-width:768px){
    .main-menu { display:none; flex-direction:column; background:#111827; position:absolute; top:70px; left:0; width:100%; gap:0; }
    .main-menu li { border-bottom:1px solid #1f2937; }
    .mobile-menu-toggle { display:block; background:none; border:none; color:#f9fafb; font-size:1.5rem; cursor:pointer; }
    .main-menu li:hover > .sub-menu { display:none; }
    .sub-menu { position:relative; box-shadow:none; border-radius:0; }
}