/* Reset & Base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #111;
  color: #fff;
}
img { max-width:100%; display:block; }
button { cursor: pointer; border: none; }

/* Header */
header { display:flex; justify-content:space-between; align-items:center; background:#1e1e2f; padding:.75rem 1rem; position:sticky; top:0; z-index:1000; }
.site-logo { height:40px; border-radius:6px; }
.menu-icons button { background:none; font-size:1.5rem; color:white; }

/* Hamburger Nav */
.nav-links { position:fixed; top:60px; left:0; width:260px; height:100vh; background:#222; transform: translateX(-100%); transition: transform .3s ease; overflow-y:auto; padding:1rem; z-index:999; }
.nav-links.open { transform: translateX(0); }
.nav-links a { display:block; padding:.5rem; color:#ddd; text-decoration:none; border-bottom:1px solid #444; margin-bottom:.3rem; }
.nav-links a:hover, .nav-links a.active { background:#0af; color:#fff; }

/* Main Content */
main { padding:1rem; max-width:960px; margin:auto; }
#searchBox { width:100%; padding:.5rem; margin-bottom:1rem; font-size:1rem; }

/* Welcome */
.welcome-box { background:#1e1e2f; color:#fff; padding:1rem 1.5rem; margin-bottom:1.5rem; border-radius:10px; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,.3); }
.hidden { display:none !important; }

/* Articles */
#articles { }
article { background:#1e1e2f; padding:1rem; border-radius:10px; margin-bottom:1rem; transition:background .25s; display:flex; flex-direction:column; align-items:center; text-align:center; }
article h2, article p { margin:.5rem 0; width:100%; }
article img { height:180px; object-fit:cover; border-radius:8px; margin:.5rem 0; }
article:hover { background:#2a2a3d; transform: translateY(-2px); }

/* Unified article-card (used for main article view and related cards) */
.article-card { background:#2a2a3b; border-radius:12px; padding:1rem; margin:1rem 0; box-shadow:0 0 10px rgba(0,0,0,.3); }
.article-card h2 { font-size:1.25rem; margin-bottom:.5rem; text-align:center; }
.article-card p { text-align:center; }

/* Buttons */
.button, .card-buttons button, form button, .button.pagination-button {
  background:#0a84ff; color:white; padding:.5rem 1rem; border-radius:6px; font-weight:bold; font-size:1rem; cursor:pointer; text-decoration:none; display:inline-block;
}
.button:hover, .card-buttons button:hover { background:#006edc; transform: translateY(-1px); }
.button.red { background:#cc0000; }
.card-buttons { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; width:100%; margin-top:.75rem; }
.card-buttons button { flex:1 1 45%; max-width:45%; box-sizing:border-box; }

/* Pagination */
.pagination { display:flex; justify-content:center; align-items:center; gap:.5rem; margin:1.5rem 0; flex-wrap:wrap; }
.pagination-text { font-weight:bold; color:#ccc; }

/* Article Viewer */
.article-viewer { background:#1e1e2f; padding:1rem; border-radius:10px; margin-bottom:2rem; }
.view-buttons { display:flex; justify-content:center; gap:1rem; margin-top:1.25rem; flex-wrap:wrap; }

/* Related area */
#relatedBox { margin-top:2rem; background:transparent; }
#relatedBoxContainer { background:#12121c; padding:1.25rem; border-radius:12px; display:flex; flex-direction:column; gap:1rem; }
.related-card { background:#1e1e2f; border-radius:10px; padding:1rem; display:flex; flex-direction:column; align-items:center; text-align:center; }

/* Share popup */
.share-popup { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999; background:#1e1e2f; color:#fff; padding:1.25rem; border-radius:10px; box-shadow:0 0 20px rgba(0,0,0,.4); width:90%; max-width:420px; display:none; }
.share-popup .popup-content { display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.share-popup input#shareUrl { width:100%; padding:.5rem; border-radius:5px; border:none; }
.share-popup .social-links { display:flex; gap:1rem; justify-content:center; }
.share-popup .social-links img { width:30px; height:30px; cursor:pointer; transition:transform .15s; }
.share-popup .social-links img:hover { transform:scale(1.15); }
.share-popup .close { position:absolute; top:8px; right:12px; font-size:1.2rem; cursor:pointer; }

/* Responsive */
@media (max-width:768px) {
  .card-buttons button { max-width: 48%; }
  .nav-links { width: 240px; }
}