/*
Theme Name: citimuzik theme v 1.0
Theme URI: https://citimuzik.com/
Author: CitiMuzik TV
Author URI: https://citimuzik.com/
Description: A unique, simple, and lightweight magazine/blog theme with a clean grid + sidebar layout. Built for speed.
Version: 1.3.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: citimuzik-litegrid
Tags: blog, news, grid-layout, one-column, two-columns, right-sidebar, custom-menu, featured-images, translation-ready
*/

/* ===========================
   CitiMuzik LiteGrid - CSS
   Goals: fast, minimal, readable
   No frameworks. No icon packs.
   =========================== */

:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --brand: #dd3333; /* brand red */
  --shadow: 0 6px 18px rgba(0,0,0,.06);
  --radius: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:visited { color: var(--brand); }
a:hover, a:focus { color: var(--brand); text-decoration: underline; }
a:focus { outline: 2px solid rgba(221,51,51,.25); outline-offset: 2px; }

img { max-width: 100%; height: auto; display: block; }

.container {
  width: min(1100px, calc(100% - 24px));
  margin: 0 auto;
}

/* Utility */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-header {
  background: #000;
  border-bottom: 1px solid #111;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
.site-branding {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}
.brand-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-logo{
  display:inline-flex;
  align-items:center;
}
.brand-logo img{
  width: 42px;
  height: auto;
}
/* Hide duplicate logo image that WP wraps inside .custom-logo-link when using Custom Logo */
.custom-logo-link img{
  width: 42px;
  height: auto;
}

.brand-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color:#fff !important;
  line-height:1;
}
@media (max-width: 991px){
  /* Mobile: close (X) for hamburger menu */
  .site-header .nav-menu-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    position:fixed;
    top:18px;
    right:18px;
    z-index:100001;
    background:rgba(255,255,255,.12);
    border:0;
    border-radius:12px;
    color:#fff;
    font-size:28px;
    cursor:pointer;
  }

  .brand-title{
    font-size: 16px;
    letter-spacing: .4px;
  }
}

.brand-text{ display:block; }
.site-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}
.site-title a { color: var(--brand); }
.site-description {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* On black header, keep supporting text readable */
.site-description{ color: rgba(255,255,255,.75); }

.primary-nav {
  margin-left: auto;
}
.primary-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  font-size: 14px;
  color: var(--brand);
  padding: 8px 10px;
  border-radius: 8px;
}
.primary-nav a:hover {
  background: #f9fafb;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Search icon in nav (works on desktop + mobile, no JS) */
.primary-nav{ display:flex; align-items:center; gap:10px; }
.nav-search{ position:relative; }
.nav-search > summary{
  list-style:none;
  cursor:pointer;
  color: rgba(255,255,255,.8);
  padding: 8px 10px;
  border-radius: 8px;
  user-select:none;
}
.nav-search > summary::-webkit-details-marker{ display:none; }
.nav-search > summary:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-search[open] > summary{
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-search-panel{
  position:absolute;
  right: 0;
  top: 44px;
  width: min(340px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 50;
}
@media (max-width: 680px){
  .brand-text{ display:none; }
  .primary-nav ul{ gap: 8px; }
}

.site-main {
  padding: 18px 0 30px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
}

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

.section-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .25px;
  margin: 0 0 10px;
  color: var(--brand);
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Desktop: exactly 2 columns */
@media (min-width: 992px) {
  .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: exactly 1 column */
@media (max-width: 991px) {
  .posts-grid { grid-template-columns: 1fr; gap: 12px; }
}

.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  min-height: 112px;
}
.post-card .thumb {
  width: 42%;
  min-width: 96px;
  background: #f9fafb;
}
.post-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-card .content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 56%;
}
.post-card .kicker {
  font-size: 11px;
  color: var(--brand);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.post-card .kicker a{ color: var(--brand); text-decoration: none; }
.post-card .kicker a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.post-card h2, .post-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.post-card .meta {
  margin-top: auto;
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 680px){
  .post-card{ min-height: 104px; }
  .post-card .thumb{ min-width: 98px; }
  .post-card .content{ padding: 9px; }
}

.post-card.no-thumb .thumb {
  display: none;
}
.post-card.no-thumb .content {
  width: 100%;
}

.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 14px;
}
.widget-title {
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 10px;
  letter-spacing: .25px;
}

.search-form {
  display: flex;
  gap: 8px;
}
.search-form label { flex: 1; }
.search-form input[type="search"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}
.search-form input[type="search"]:focus {
  border-color: #d1d5db;
}
.search-form input[type="submit"] {
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.featured-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.featured-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}

/* Sidebar colored cards (lightweight, no images added) */
.featured-item:nth-child(5n+1){ background: #fff1f2; }
.featured-item:nth-child(5n+2){ background: #fefce8; }
.featured-item:nth-child(5n+3){ background: #ecfeff; }
.featured-item:nth-child(5n+4){ background: #f5f3ff; }
.featured-item:nth-child(5n+5){ background: #f0fdf4; }
.featured-thumb {
  width: 72px;
  height: 54px;
  border-radius: 10px;
  overflow: hidden;
  background: #f9fafb;
  border: 1px solid var(--border);
}
.featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.featured-date {
  font-size: 12px;
  color: var(--muted);
}
/* Weekly NEW AUDIO widget: slightly tighter + nicer cards */
.cmz-weekly-list .featured-item{
  border-color: rgba(0,0,0,.08);
}
.cmz-weekly-list .featured-title{
  font-size: 13px;
}


.article-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.entry-title { margin: 6px 0 6px; text-align: center; color: var(--brand); font-size: 26px; line-height: 1.15; }
.entry-meta { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.entry-content p { margin: 0 0 12px; }
.entry-content a { text-decoration: none; }

.site-footer {
  border-top: 1px solid #111;
  padding: 18px 0;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  background: #000;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Bottom menu (mobile-first). Black bar requested. */
.bottom-nav{
  background:#000;
  border-top:1px solid #111;
}
.bottom-nav ul{
  list-style:none;
  display:flex;
  gap:14px;
  padding: 10px 0;
  margin: 0;
  align-items:center;
  flex-wrap:wrap;
}
.bottom-nav a{
  color: var(--brand);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 10px;
}
.bottom-nav a:hover{ text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 981px){
  /* Hide bottom nav on desktop */
  .bottom-nav{ display:none; }
}

/* Pagination (modern + clear, no markup changes) */
.navigation.pagination{ margin-top: 10px; }
.navigation.pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.navigation.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  font-weight: 800;
  color: var(--brand);
  text-decoration:none;
}
.navigation.pagination .page-numbers:hover{ text-decoration: underline; text-underline-offset: 3px; }
.navigation.pagination .page-numbers.current{
  border-color: rgba(221,51,51,.35);
  box-shadow: 0 4px 14px rgba(221,51,51,.12);
}
.navigation.pagination .page-numbers.dots{ border:0; background:transparent; min-width:auto; padding: 0 2px; }

/* ===========================
   Related Posts (no images)
   =========================== */

/* Framed box */
.related-surface{
  padding: 18px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.related-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.related-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.related-link{
  font-weight: 400;
  line-height: 1.35;
}
.related-date {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}



/* Top 20 Songs Now — two-column bulleted list like screenshot */
.related-bullets{
  margin: 0;
  padding: 0 0 0 18px;
  columns: 2;
  column-gap: 42px;
}
.related-bullets li{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 14px;
}
.related-bullets li::marker{
  color: var(--brand);
  font-size: 18px;
}
.related-bullets a{
  color: var(--brand) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  display: inline-block;
  padding-right: 10px;
}
.related-bullets a:hover{
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

@media (max-width: 700px){
  .related-bullets{ columns: 1; padding-left: 18px; }
}
/* ===========================
   Comments (clean + simple)
   =========================== */

.comments-area { padding: 16px 18px; }
.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.comment-list > li {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.comment-body { margin: 0; }
.comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.comment-author {
  font-weight: 900;
}
.comment-metadata a {
  font-size: 12px;
  color: var(--brand);
}
.comment-content p { margin: 0 0 10px; }
.reply { margin-top: 6px; }
.comment-reply-link {
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #f9fafb;
}
.comment-reply-link:hover {
  border-color: #d1d5db;
  background: #fff;
}

.comment-reply-title {
  margin: 14px 0 10px;
  font-size: 16px;
  font-weight: 900;
}
.comment-form {
  display: grid;
  gap: 10px;
}
.comment-form label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: #fff;
}
.comment-form textarea { resize: vertical; }
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: #d1d5db;
}
.comment-submit {
  justify-self: start;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.comment-submit:hover { filter: brightness(.95); }

.comments-closed { color: var(--muted); font-size: 13px; }


/* ====== v1.3 tweaks (CitiMuzik) ====== */
:root{
  --cmz-accent: #dd3333;
  --cmz-text: #111827;
  --cmz-muted: #6b7280;
  --cmz-border: #e5e7eb;
  --cmz-surface: #ffffff;
}

/* All headings and links use the brand red */
a, a:visited { color: var(--cmz-accent); }
a:hover, a:focus { opacity: .92; }

h1, h2, h3, h4, h5, h6 { color: var(--cmz-accent); }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--cmz-accent); }

/* Keep body text readable */
body, .entry-content { color: var(--cmz-text); }
.entry-content a { text-decoration: none; }

/* Post cards: smaller to show more items on mobile */
.post-card{
  padding: 10px;
  border: 1px solid var(--cmz-border);
  box-shadow: none;
  border-radius: 12px;
  gap: 10px;
}
.post-card .thumb{
  width: 96px;
  flex: 0 0 96px;
}
.post-card .thumb img{
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
}
.post-card .content{ padding: 0; }
.post-card .kicker{
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--cmz-accent);
  margin-bottom: 4px;
}
.post-card h3{
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}
.post-card h3 a{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Compact list spacing */
.posts-grid{ gap: 12px; }
@media (max-width: 640px){
  .posts-grid{ gap: 10px; }
  .post-card{ padding: 10px; border-radius: 12px; gap: 10px; }
  .post-card .thumb{ width: 86px; flex-basis: 86px; }
  .post-card .thumb img{ width: 86px; height: 64px; border-radius: 10px; }
  .post-card h3{ font-size: 14px; }
}

/* Single post title centered + meta line */
.entry-title{
  text-align: center;
  margin-bottom: 6px;
}
.entry-meta{
  text-align: center;
  color: var(--cmz-muted);
  font-size: 14px;
  margin-bottom: 14px;
}

/* Category above title (single post) */
.entry-category{
  text-align: center;
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.entry-category a{
  color: var(--cmz-accent);
  text-decoration: none;
}

/* Tags under post content */
.entry-tags{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--cmz-border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.entry-tags .label{
  color: var(--cmz-muted);
  font-size: 13px;
}
.entry-tags a{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--cmz-border);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  background: #fff;
}

/* Related posts list: tighter */
.related-list li{
  padding: 10px 0;
}
.related-list .date{
  color: var(--cmz-muted);
}



/* --- CitiMuzik tweaks v1.4 --- */
a, a:visited { color: #dd3333 !important; }
a:hover, a:focus { color: #dd3333 !important; }
h1, h2, h3, h4, h5, h6 { color: #dd3333 !important; }

/* Single post title centered */
.entry-title { text-align: center; }

/* Category pill */
.entry-category a{
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #dd3333;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  background: rgba(221,51,51,.06);
}

/* Hashtag tags */
.entry-tags{ margin-top: 16px; display:flex; flex-wrap:wrap; gap:10px; }
.entry-tags .tag-hash{
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* Related section - card look */
.related-surface{
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  margin: 18px 0;
}
.related-list{ list-style:none; margin:0; padding:0; }
.related-item{
  display:flex;
  align-items:center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.related-item:last-child{ border-bottom:0; }
.related-link{ font-weight: 800; text-decoration:none; }

/* Make mobile cards more compact: show more posts */
@media (max-width: 640px){
  .post-card{ padding: 10px !important; }
  .post-thumb{ width: 110px !important; }
  .post-title{ font-size: 15px !important; line-height: 1.2 !important; }
  .post-meta{ font-size: 12px !important; }
  .post-excerpt{ display:none !important; }
}

.entry-meta a { color: var(--brand); text-decoration: none; }
.entry-meta a:hover { text-decoration: underline; }

/* Category badge (single post) */
.entry-category { margin: 0 0 10px; text-align: center; }
.category-badge {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(221,51,51,.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(221,51,51,.06);
  color: var(--brand);
}
.category-badge:hover { text-decoration: underline; }

/* Tags (hashtags) */
.entry-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.entry-tags .tag-hash { font-weight: 800; }

/* Share buttons */
.entry-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.share-btn {
  border: 1px solid rgba(221,51,51,.35);
  background: rgba(221,51,51,.04);
  color: var(--brand);
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Share icon buttons */
.entry-share{ align-items:center; }
.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width: 40px;
  height: 40px;
}
.share-btn svg{ width: 18px; height: 18px; display:block; }
.share-btn:hover { text-decoration: underline; }
.share-btn:focus { outline: 2px solid rgba(221,51,51,.25); outline-offset: 2px; }
button.share-btn { appearance: none; }

/* Related posts: clean list */
.related-surface { margin-top: 14px; }
.related-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.related-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.related-link { font-weight: 900; }

/* Compact post cards (home + archive) */
.posts-grid { gap: 10px; }
.post-card { min-height: 112px; }
.post-card .thumb { width: 40%; min-width: 96px; }
.post-card .content { padding: 10px; gap: 6px; }
.post-card h2, .post-card h3 { font-size: 13px; line-height: 1.22; }
.post-card .kicker { font-size: 11px; }
.post-card .meta { font-size: 11px; }

/* Reduce thumbnail height on mobile for more density */
@media (max-width: 680px) {
  .post-card { min-height: 82px; }
  .post-card .thumb { min-width: 92px; }
  .post-card .content { padding: 10px; }
}

/* ===========================
   CitiMuzik Rules Enforcement
   - Headings + links stay #dd3333
   - Hover = underline only (no color/opacity change)
   =========================== */

/* Headings */
h1, h2, h3, h4, h5, h6 { color: #dd3333 !important; }

/* Links */
a, a:visited, a:hover, a:focus { color: #dd3333 !important; }
a { text-decoration: none; }
a:hover, a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  opacity: 1 !important;
}

/* Ensure section titles never override heading color */
.section-title { color: #dd3333 !important; }

/* Comment metadata links should follow global link color rule */
.comment-metadata a { color: #dd3333 !important; }

/* ===========================
   Requested UI refinements
   =========================== */

/* 1) Compact post cards (homepage + archives) */
.posts-grid{
  gap: 10px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (min-width: 1024px){
  .posts-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px){
  .posts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
}
@media (max-width: 420px){
  .posts-grid{ grid-template-columns: 1fr !important; }
}

.post-card{ min-height: 82px !important; padding: 0 !important; box-shadow: 0 4px 12px rgba(0,0,0,.05) !important; }
.post-card .thumb{ width: 42% !important; min-width: 92px !important; }
.post-card .content{ padding: 8px !important; gap: 5px !important; }
.post-card h3{ font-size: 13px !important; line-height: 1.22 !important; }
.post-card .meta{ font-size: 11px !important; }
.post-card .kicker{ font-size: 11px !important; }
.kicker-link{ text-decoration: none; }
.kicker-link:hover, .kicker-link:focus{ text-decoration: underline; text-underline-offset: 3px; }

/* 2) Modern pagination */
.navigation.pagination{
  margin-top: 14px;
}
.navigation.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}
.navigation.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 36px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(221,51,51,.25);
  background: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}
.navigation.pagination .page-numbers.current{
  background: rgba(221,51,51,.10);
  border-color: rgba(221,51,51,.65);
}
.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers:focus{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 3) Sidebar posts colored cards */
.featured-item{
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(0,0,0,.05);
}
.featured-item:nth-child(5n+1){ background: rgba(221,51,51,.06); }
.featured-item:nth-child(5n+2){ background: rgba(69,59,109,.06); }
.featured-item:nth-child(5n+3){ background: rgba(255,179,0,.08); }
.featured-item:nth-child(5n+4){ background: rgba(0,153,255,.06); }
.featured-item:nth-child(5n){ background: rgba(0,200,83,.06); }

/* 4) Share icons as proper icon buttons */
.entry-share{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}
.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 999px;
  border: 1px solid rgba(221,51,51,.30);
  background: #fff;
  color: #dd3333 !important;
}
.share-btn:hover, .share-btn:focus{
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* === CitiMuzik UX Overrides (v3) === */
/* Make top header and bottom nav truly black background */
.site-header,
.site-header .header-inner,
.primary-nav,
.primary-nav ul,
.bottom-nav,
.bottom-nav .container{
  background: #000 !important;
}

/* Ensure menu links remain brand color */
.site-header a,
.primary-nav a,
.bottom-nav a{
  color: var(--brand) !important;
}

/* Dense post grid + compact cards (home + archives) */
.posts-grid{
  gap: 6px !important;
}

@media (min-width: 1200px){
  .posts-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 992px) and (max-width: 1199px){
  .posts-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px){
  .posts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
}
@media (max-width: 360px){
  .posts-grid{ grid-template-columns: 1fr !important; }
}

/* Hard-limit card visual height by constraining thumbnail height */
.post-card{
  min-height: 70px !important;
  max-height: 92px !important;
  border-radius: 10px !important;
}

.post-card .content{
  padding: 6px !important;
  gap: 3px !important;
}

.post-card h2, .post-card h3{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.post-card .thumb{
  flex: 0 0 40% !important;
  width: 40% !important;
  min-width: 78px !important;
  height: 92px !important; /* matches max-height */
  overflow: hidden !important;
}

.post-card .thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 680px){
  .post-card{ min-height: 66px !important; max-height: 86px !important; }
  .post-card .thumb{ height: 86px !important; min-width: 72px !important; }
  .post-card .content{ padding: 6px !important; }
}

@media (max-width: 420px){
  .post-card{ max-height: 82px !important; }
  .post-card .thumb{ height: 82px !important; }
}




/* ===========================
   UX FIX OVERRIDES (v4)
   Purpose: force-visible compact cards + truly black header/footer bars.
   Keep lightweight (no JS).
   =========================== */

/* Force black backgrounds for top/bottom menus even if other CSS overrides */
.site-header, header.site-header, #masthead, header, .header, .topbar, .top-bar, .navbar, .main-nav {
  background: #000 !important;
}
.site-footer, footer.site-footer, footer, .bottom-nav, nav.bottom-nav, .footer-bar, .bottom-bar {
  background: #000 !important;
}
.site-header *, .bottom-nav * { color-scheme: dark; }

/* Ultra-compact post cards (home + archives) */
.posts-grid { gap: 8px !important; }
@media (min-width: 1024px){
  .posts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
}
@media (max-width: 680px){
  .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
}
@media (max-width: 420px){
  .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
}

/* Hard cap card height so thumbnails can’t stretch it */
.post-card{
  min-height: 0 !important;
  height: 92px !important;
  box-shadow: none !important; /* lighter + tighter */
}
@media (max-width: 680px){
  .post-card{ height: 84px !important; }
}
.post-card .thumb{
  width: 40% !important;
  min-width: 84px !important;
  height: 100% !important;
}
.post-card .thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Tight content */
.post-card .content{
  padding: 6px !important;
  gap: 3px !important;
  width: 60% !important;
}
.post-card .kicker{
  font-size: 10px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

/* Clamp title to 2 lines to keep card short */
.post-card h2, .post-card h3{
  font-size: 12px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.post-card h2 a, .post-card h3 a{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Remove extra meta spacing in cards */
.post-card .meta{ display:none !important; }

/* === User Override: Grid columns === */
/* Mobile: 1 column */
.posts-grid{ grid-template-columns: 1fr !important; }

/* Desktop/PC: 2 columns */
@media (min-width: 992px){
  .posts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.entry-content a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* ===== v6 adjustments requested ===== */

/* Center the homepage headline */
.section-title{ text-align:center; margin-left:auto; margin-right:auto; }

/* Menu bars: force solid black background and non-red link colors */
body .site-header, header.site-header{ background:#000 !important; border-bottom:1px solid #111 !important; }
body .bottom-nav{ background:#000 !important; border-top:1px solid #111 !important; }

/* Primary nav links should NOT use brand red */
.primary-nav a, .primary-nav a:visited{
  color:#fff !important;
  text-decoration:none !important;
}
.primary-nav a:hover{
  color:#fff !important;
  background: rgba(255,255,255,.08) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Bottom nav links should NOT use brand red */
.bottom-nav a, .bottom-nav a:visited{
  color:#fff !important;
  text-decoration:none !important;
}
.bottom-nav a:hover{
  color:#fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Post cards: titles not bold; only category is bold */
.post-card h2, .post-card h3,
.post-card h2 a, .post-card h3 a{
  font-weight: 500 !important;
}
.post-card .kicker, .post-card .kicker a{
  font-weight: 800 !important;
}

/* Remove default underlines on links inside posts; show underline only on hover */
.entry-content a, .entry-content a:visited{ text-decoration:none !important; }
.entry-content a:hover{ text-decoration: underline !important; text-underline-offset: 3px; }

/* Keep hover effect as underline only (no color change) */
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* Share icons: keep compact, icon-only, after tags */
.entry-share{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.share-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background: var(--surface); }
.share-btn svg{ width:20px; height:20px; }

.post-card:hover h2 a, .post-card:hover h3 a{ text-decoration: underline; text-underline-offset:3px; }



/* === v7 adjustments (user feedback) === */

/* Center the main headline on home */
.section-title{ text-align:center; }

/* Ensure menu text is NOT brand red, while keeping bars black */
.site-header, .bottom-menu{ background:#000 !important; }
.site-header a, .primary-nav a, .bottom-menu a, .bottom-menu .menu a{
  color: #f2f2f2 !important;
  text-decoration: none !important;
}
.site-header a:hover, .primary-nav a:hover, .bottom-menu a:hover{
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Post cards: on hover underline ONLY category, not the title */
.post-card:hover h2 a, .post-card:hover h3 a{ text-decoration: none !important; }
.post-card h2 a:hover, .post-card h3 a:hover{ text-decoration: none !important; }
.post-card .category-badge:hover, .post-card .kicker a:hover{ text-decoration: underline !important; text-decoration-thickness:2px; text-underline-offset:4px; }

/* Post card song title: slightly bigger, still not bold */
.post-card h3 a{ font-size: 15px !important; line-height: 1.25 !important; }
@media (max-width: 768px){
  .post-card h3 a{ font-size: 16px !important; }
}

/* Related: "Top 10 Songs Now" titles should NOT be bold + better spacing */
.related-surface{ padding: 14px 14px 10px !important; position: relative; }
.related-surface::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  pointer-events:none;
  border: 2px solid rgba(221,51,51,0.28);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset;
}
.related-list{ margin: 0; padding: 0; list-style: none; }
.related-item{ padding: 10px 10px; border-radius: 12px; }
.related-link{ font-weight: 400 !important; display:block; line-height: 1.35; }
.related-item + .related-item{ margin-top: 8px; background: rgba(255,255,255,0.03); }

/* Card text too close to outline (Top 10 area) */
.related-surface .related-item{ border: 1px solid rgba(255,255,255,0.08); }

/* Remove any share block under featured image (defensive, in case cached/old markup exists) */
.entry-share-top, .share-under-thumb, .thumb-share, .post-thumb-share{ display:none !important; }

/* Share icons: ensure SVG looks like brand icons */
.entry-share .share-btn{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #f2f2f2 !important;
}
.entry-share .share-btn:hover{ background: rgba(255,255,255,0.08) !important; }

/* Sidebar post cards: nicer colored cards */
.widget .sidebar-card, .widget .sidebar-post{
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(221,51,51,0.06);
}
.widget .sidebar-card:nth-child(2n), .widget .sidebar-post:nth-child(2n){
  background: rgba(255,255,255,0.05);
}

/* Trending Hits box */
.trending-box{
  margin: 12px 0 14px;
  padding: 14px 14px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.trending-title{
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.trending-item{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--brand) !important;
  text-decoration: none !important;
}
.trending-item:hover{
  text-decoration: underline !important;
  text-decoration-thickness:2px;
  text-underline-offset: 4px;
}
.trending-item + .trending-item{ margin-top: 6px; background: rgba(255,255,255,0.03); }

/* Logo fit (custom logo) */
.site-logo img, .custom-logo{
  max-height: 44px;
  width: auto;
  height: auto;
  display:block;
}
@media (max-width: 768px){
  .site-logo img, .custom-logo{ max-height: 38px; }
}


/* ===== v9 fixes: header/menu alignment + logo + cards + trending + share ===== */

/* Header black bars enforced */
.site-header, .header, .header-wrap, .top-bar,
.bottom-menu, .footer-menu, .mobile-bottom-menu {
  background: #000 !important;
}

/* Header layout: logo left, menu right */
.site-header .container.header-inner,
.site-header .container,
.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

/* Logo sizing */
.site-logo img,
.custom-logo-link img {
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* Hide big site title on mobile when logo exists */
@media (max-width: 991px){
  .site-title, .site-description { display:none !important; }
  .brand-title{ display:inline-flex !important; }
}

/* Menu link color should NOT use brand red */
.site-header a,
.site-header .primary-nav a,
.site-header nav a,
.bottom-menu a,
.footer-menu a,
.mobile-bottom-menu a {
  color: #fff !important;
  text-decoration: none !important;
}
.site-header a:hover,
.bottom-menu a:hover,
.footer-menu a:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

/* Post cards: title slightly bigger but NOT bold; category bold */
.post-card h2, .post-card h3 {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.28 !important;
}
.post-card .kicker,
.post-card .kicker a {
  font-weight: 700 !important;
}

/* Only show underline hover on CATEGORY in cards (not title) */
.posts-grid .post-card h3 a:hover,
.trending-grid .post-card h3 a:hover {
  text-decoration: none !important;
}
.posts-grid .post-card .kicker a:hover,
.trending-grid .post-card .kicker a:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

/* Remove always-underlined links inside post content; underline only on hover */
.entry-content a { text-decoration: none !important; }
.entry-content a:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

/* Share buttons: make visible + tappable */
.entry-share {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 12px 0 0 !important;
}
.entry-share .share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(221,51,51,.45) !important;
  background: rgba(221,51,51,.08) !important;
  color: var(--brand) !important;
  padding: 0 !important;
}
.entry-share .share-btn svg { width: 20px !important; height: 20px !important; }
.entry-share .share-btn:hover { text-decoration: none !important; box-shadow: 0 0 0 3px rgba(221,51,51,.10); }
.entry-share .share-btn.copied { background: rgba(221,51,51,.16) !important; }

/* Defensive: hide any legacy share blocks under featured image */
.single .share-under-thumb,
.single .share-under-featured,
.single .post-share,
.single .post-share-top,
.single .share-buttons,
.single .sharedaddy,
.single .sd-sharing,
.single .heateor_sss_sharing_container,
.single .addtoany_share_save_container {
  display: none !important;
}

/* Related posts: restore/upgrade framed surface */
.related-surface {
  border: 1px solid rgba(221,51,51,.25) !important;
  background: rgba(255,255,255,.02) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  border-radius: 16px !important;
  padding: 14px !important;
}
.related-surface .section-title { margin: 0 0 12px !important; }
.related-list { gap: 10px !important; }
.related-item {
  border: 1px solid rgba(221,51,51,.18) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  background: rgba(221,51,51,.05) !important;
}
.related-link { font-weight: 500 !important; }

/* Trending Hits cards box (below pagination) */
.trending-box {
  margin-top: 18px !important;
  border: 1px solid rgba(221,51,51,.20) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  background: rgba(255,255,255,.02) !important;
}
.trending-title {
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  color: var(--brand) !important;
}
.trending-grid .post-card { margin: 0 !important; }



/* ===========================
   Mobile menu tabs (HOME / MUSIC / DJ MIX...) - compact + clean
   =========================== */
@media (max-width: 991px){

  /* Hide big site title on mobile (logo only) */
  .site-title, .site-description{ display:none !important; }

  /* Tabs row container: allow horizontal scroll, reduce height */
  .mobile-menu, .mobile-nav, .secondary-nav, .category-tabs, .nav-tabs,
  .menu-categories, .category-menu, .tabs-menu, .top-tabs, .sub-menu-bar,
  .nav-secondary, .header-cats, .header-categories, .home-cats-nav{
    padding: 6px 10px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabs items */
  .mobile-menu a, .mobile-nav a, .secondary-nav a, .category-tabs a, .nav-tabs a,
  .menu-categories a, .category-menu a, .tabs-menu a, .top-tabs a, .sub-menu-bar a,
  .nav-secondary a, .header-cats a, .header-categories a, .home-cats-nav a{
    font-size: 14px !important;
    padding: 8px 10px !important;
    margin: 0 6px 0 0 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 0 !important; /* no underline by default */
  }

  /* Active underline only */
  .mobile-menu .current-menu-item > a,
  .mobile-nav .current-menu-item > a,
  .secondary-nav .current-menu-item > a,
  .category-tabs .current-menu-item > a,
  .nav-tabs .current-menu-item > a,
  .menu-categories .current-menu-item > a,
  .category-menu .current-menu-item > a,
  .tabs-menu .current-menu-item > a,
  .top-tabs .current-menu-item > a,
  .sub-menu-bar .current-menu-item > a,
  .nav-secondary .current-menu-item > a,
  .header-cats .current-menu-item > a,
  .header-categories .current-menu-item > a,
  .home-cats-nav .current-menu-item > a{
    border-bottom: 3px solid #fff !important;
    border-radius: 2px !important;
  }

  /* Search + hamburger buttons */
  .menu-toggle, .search-toggle, .header-icons a{
    background: rgba(255,255,255,.12) !important;
    border-radius: 999px !important;
    padding: 10px 12px !important;
  }
}

/* Header + footer nav backgrounds force black */
.site-header, .header, .header-wrap, .top-bar,
.bottom-menu, .bottom-nav, .footer-nav, .site-footer .bottom-bar{
  background:#000 !important;
}


/* Sidebar search: always show at top */
.sidebar .widget-search { margin-bottom: 14px; }
.sidebar .widget-search .search-form { display:flex; gap:8px; }
.sidebar .widget-search .search-form input[type="search"]{ width:100%; }

/* Home trending section title center */
.trending-title{ text-align:center !important; }


/* Hide any legacy/plugin share blocks that may appear under the featured image */
.article-surface .sharedaddy,
.article-surface .heateor_sss_sharing_container,
.article-surface .addtoany_share_save_container,
.article-surface .a2a_kit{
  display:none !important;
}


/* ===========================
   Fixes (v1.3.5)
   - prevent duplicate search widgets: sidebar area controls it
   - ensure related list columns render properly on desktop
   - mobile menu tabs styling (compact, underline only active)
   =========================== */

.related-bullets{
  column-count: 1 !important;
  columns: auto !important;
}
@media (min-width: 992px){
  .related-bullets{
    column-count: 2 !important;
    column-gap: 42px !important;
  }
}

/* Primary menu: black bar requested; keep text white (not brand red) */
.site-header,
.bottom-nav{
  background:#000 !important;
}

/* Primary nav links in header should NOT use brand red */
.site-header .primary-nav a{
  color:#fff !important;
}

/* Header structure: logo left; desktop menu visible; mobile icons on right */
.site-header .header-inner{
  display:flex !important;
  align-items:center !important;
}
.site-header .primary-nav{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.site-header .primary-links{
  display:block;
}
.site-header .primary-links > ul{
  display:flex;
  align-items:center;
  gap:26px;
  margin:0;
  padding:0;
}
.site-header .nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Buttons styling for search + hamburger */
.site-header .nav-search-btn,
.site-header .nav-menu-btn{
  display:inline-flex;
  color:#fff !important;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  cursor:pointer;
}
.site-header details > summary{ list-style:none; }
.site-header details > summary::-webkit-details-marker{ display:none; }

/* Dropdown panels */
.site-header .nav-menu-close{
  display:none;
}

.site-header .nav-search-panel,
.site-header .nav-menu-panel{
  position:absolute;
  right:0;
  top:52px;
  z-index:9999;
  background:#111;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  min-width:280px;
}

/* Smooth open animation (applies to both panels) */
.site-header .nav-search-panel,
.site-header .nav-menu-panel{
  opacity:0;
  transform: translateY(-8px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.site-header .nav-search[open] .nav-search-panel,
.site-header .nav-mobile-menu[open] .nav-menu-panel{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.site-header .nav-menu-panel .mobile-menu-list{
  margin:0;
  padding:0;
  list-style:none;
}
.site-header .nav-menu-panel .mobile-menu-list a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
}
.site-header .nav-menu-panel .mobile-menu-list a:hover{
  background:rgba(255,255,255,.08);
}

/* Mobile: hide desktop links, show hamburger; keep icons at far right */
@media (max-width: 991px){
  .site-header .primary-links{ display:none !important; }
  .site-header .nav-mobile-menu{ display:block !important; }
  .site-header .nav-actions{ margin-left:auto !important; }

  /* Mobile: ensure search opens fully visible (not covered) */
  .site-header .nav-search-panel{
    position:fixed;
    left:12px;
    right:12px;
    top:72px;
    min-width:0;
    z-index:100000;
  }

  /* Mobile: menu drops down like a full-width overlay list */
  .site-header .nav-menu-panel{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    padding:86px 18px 24px;
    border-radius:0;
    z-index:99999;
    overflow:auto;
  }
  .site-header .nav-menu-panel .mobile-menu-list a{
    font-size:20px;
    font-weight:800;
    padding:18px 6px;
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
}

/* Desktop: show full menu, hide hamburger */
@media (min-width: 992px){
  .site-header .nav-mobile-menu{ display:none !important; }

  /* Desktop menu links bold */
  .site-header .primary-nav .primary-links a{ font-weight: 700 !important; }
}


/* Fix: Desktop homepage keep sidebar (search) in sidebar column */
@media (min-width: 992px){
  body.home .layout{display:grid !important; grid-template-columns: 1fr 320px !important; gap: 18px !important;}
  body.home .sidebar{align-self:start;}
}


/* ===========================
   Single Post Featured Image
   (Only affects single post pages)
   =========================== */
.single .article-surface .wp-post-image,
.single-post .article-surface .wp-post-image{
  display:block;
  max-width:100%;
  width:100%;
  /* Consistent featured image size/ratio inside posts */
  aspect-ratio: 16 / 9;
  height:auto;
  border-radius:12px;
  object-fit:cover;
  object-position:center;
}

/* ===========================
   Comments Contrast Fix
   (Only affects comments area)
   =========================== */
.comments-area .comment-author,
.comments-area .comment-author .fn,
.comments-area .comment-author a{
  color: var(--text) !important;
}
.comments-area .says{
  color: var(--muted) !important;
}
.comments-area .comment-metadata,
.comments-area .comment-metadata a{
  color: var(--brand) !important;
}
.comments-area .reply a,
.comments-area .comment-reply-link{
  color: var(--brand) !important;
}
.comments-area .comment-meta,
.comments-area .comment-author,
.comments-area .comment-metadata{
  background: transparent !important;
}

.comments-title,
#reply-title{
  background: transparent !important;
  color: var(--text) !important;
}

/* Ensure the overall comments container isn't rendered as a dark box */
#comments,
.comments-area{
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Make sure individual comment cards stay light */
.comments-area .comment-list > li{
  background: #fff !important;
}