/* Import Merriweather font */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');

:root {
  --primary-red: #d32f2f;
  --dark-black: #000000;
  --white-bg: #ffffff;
  --sidebar-width: 240px;
}

/* Reset + base */
* { box-sizing: border-box; }
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f8f9fa;
  color: #333;
}

/* Header */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  z-index: 100;
}
.logo-container { display:flex; align-items:center; gap:12px; }
.logo-container img { height:60px; width:auto; }
.logo-text { font-size:24px; font-weight:bold; color: var(--primary-red); font-family:'Impact', sans-serif; text-shadow:1px 1px 3px #000; }
.header-actions { display:flex; gap:10px; align-items:center; }

.divider { height:2px; background:#eee; margin-top:84px; }

/* Search + top categories bar */
.navbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
  background:#fff;
  flex-wrap:wrap; gap:10px;
  position:sticky; top:84px; z-index:90;
  border-bottom:1px solid #f1f1f1;
}
.search-bar input {
  padding:8px 12px;
  border:1px solid #ccc;
  border-radius:20px;
  min-width:200px;
}
.top-cats { display:flex; gap:12px; flex-wrap:wrap; }
.top-cats a {
  text-decoration:none;
  color:#d32f2f;
  font-weight:bold;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid transparent;
}
.top-cats a.active { color:#fff; background:var(--primary-red); }

/* Main layout grid */
.main {
  display:grid;
  grid-template-columns: var(--sidebar-width) 1fr 320px;
  gap:20px;
  padding:20px;
  margin-top:0;
  align-items:start;
  padding-top:20px;
}
@media (max-width:1100px) {
  .main { grid-template-columns: 200px 1fr 260px; }
}
@media (max-width:880px) {
  .main { grid-template-columns: 1fr; padding:12px; }
  .sidebar { display:none; }
  .ads { order:3; }
}

/* Sidebar */
.sidebar {
  background:#fff;
  border-right:1px solid #eee;
  padding:16px;
  height:calc(100vh - 84px);
  position:sticky;
  top:84px;
  overflow:auto;
  border-radius:0 0 8px 0;
}
.nav-group { margin-bottom:18px; }
.nav-link {
  display:block;
  padding:10px 12px;
  border-radius:8px;
  color:#111;
  text-decoration:none;
  border:1px solid transparent;
  margin-bottom:6px;
}
.nav-link:hover { background:#f7f7f7; border-color:#eee }
.nav-link.active { background:#fdecea; border-color:var(--primary-red); font-weight:700 }
.sidebar h4 { margin:8px 0 10px; color:var(--primary-red); }
.category-list a {
  display:block;
  padding:8px 10px;
  border-radius:6px;
  color:#333;
  text-decoration:none;
  margin-bottom:6px;
  border:1px solid transparent;
}
.category-list a:hover { background:#f7f7f7; border-color:#eee }
.category-list a.active { background:#fff1f0; border-color:var(--primary-red); font-weight:700 }

/* Posts & view_post content */
.posts { padding:6px; }
.posts h2 { margin-top:0; }
.post {
  margin-bottom:16px;
  display:flex;
  gap:12px;
  align-items:center;
  background:#fff;
  padding:12px;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.04);
}
.post img {
  width:140px;
  height:90px;
  object-fit:cover;
  border-radius:6px;
}
.post h3 { margin:0; font-size:16px; color:#333; }
.post p { margin:6px 0 0; color:#666; font-size:14px }

/* Ads */
.ads { padding:10px; }
.ads h2 { margin-top:0; }
.ad {
  background:#fff;
  padding:10px;
  border-radius:8px;
  border:1px solid #eee;
  margin-bottom:12px;
  overflow:hidden;
}
.ad img {
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:6px;
}

/* Footer */
footer {
  background:var(--primary-red);
  color:#fff;
  text-align:center;
  padding:15px;
  font-weight:bold;
  margin-top:18px;
  border-radius:6px;
}
footer a { color: black; }
.small-muted { font-size:13px; color:#6b7280; }

/* Single post page custom */
.single-post h1 { font-size:28px; margin:10px 0; }
.single-post img.cover {
  max-width:100%;
  border-radius:8px;
  margin:15px 0;
}
.single-post .meta { color:#666; font-size:14px; margin-bottom:10px; }
.single-post .post-content p { margin:10px 0; line-height:1.6; }
.single-post .post-content h3 { color:#d90000; margin-top:20px; }

/* Subtitle Styles (FINAL FIX) */
.single-post .post-content .subtitle-h,
.subtitle-h {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif !important;
  color: var(--primary-red) !important;
  font-weight: 700;
  font-size: 1.15rem;
  margin-top: 8px;
  line-height: 1.35;
  text-transform: none;
}

.subtitle-text {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif !important;
  color: var(--primary-red) !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
  background: #f8fafc;
  border-left: 4px solid #d1d5db;
  padding: 12px;
  margin: 10px 0;
  border-radius: 6px;
  white-space: pre-wrap;
}

/* Buttons */
.like-btn, .share-btn, .theme-btn {
  display:inline-block;
  margin-top:10px;
  padding:8px 15px;
  background:var(--primary-red);
  color:#fff;
  border:none;
  border-radius:5px;
  cursor:pointer;
  transition:0.2s;
}
.like-btn.liked { background:#ff6b6b; }
.share-container { position:relative; display:inline-block; margin-left:10px; }
.share-dropdown {
  display:none;
  position:absolute;
  top:110%; left:0;
  background:#fff;
  border:1px solid #ccc;
  border-radius:8px;
  min-width:160px;
  z-index:10;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.share-dropdown a,
.share-dropdown button {
  display:block;
  width:100%;
  padding:10px;
  text-align:left;
  background:none;
  border:none;
  color:#333;
  text-decoration:none;
  font-size:14px;
  cursor:pointer;
}
.share-dropdown a:hover,
.share-dropdown button:hover { background:rgba(0,0,0,0.05); }
.show .share-dropdown { display:block; }

/* Comments */
.comment-box { margin-top:30px; background:#fff; padding:15px; border-radius:8px; }
.comment { padding:12px; border-bottom:1px solid #eee; }
.comment strong { color:var(--primary-red); }
.subtitle-text {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  color: #d32f2f;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
  background: #fff5f5;
  border-left: 4px solid #d32f2f;
  padding: 10px 14px;
  margin: 16px 0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* Subtitle styling (all types: text, file-text) */
.subtitle-h,
.subtitle-text {
    font-family: 'Merriweather', serif !important; /* font */
    color: #c21807 !important; /* red */
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    margin: 10px 0 !important;
}

/* Subtitle-text (long text or file text) block */
.subtitle-text {
    background: #f8fafc !important;
    border-left: 4px solid #d1d5db !important;
    padding: 12px !important;
    border-radius: 6px !important;
    white-space: pre-wrap !important;
}

/* Subtitle headline short */
.subtitle-h {
    display: block !important;
    padding: 4px 0 !important;
}