/* ============================================================
   SINGLE POST — Redesigned
   ============================================================ */

/* ---- Layout ---- */
.single-post-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  grid-template-rows: 1fr;
  gap: var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  align-items: start;
}
.single-post-main {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.breadcrumbs a { color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs .sep { opacity: 0.45; }
.breadcrumbs .current { color: var(--text-primary); font-weight: 500; }

/* ================================================================
   ARTICLE CARD
   ================================================================ */
.single-article {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

/* ---- Header ---- */
.single-article-header { padding: var(--space-8) var(--space-8) var(--space-6); }

.post-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.cat-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(0,87,255,0.08);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.cat-badge:hover { background: rgba(0,87,255,0.15); text-decoration: none; }

.single-article-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 var(--space-5);
}

.single-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.84rem;
  color: var(--text-secondary);
}
.meta-item { display: flex; align-items: center; gap: var(--space-2); }
.meta-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; object-fit: cover; border: 2px solid var(--border-light); flex-shrink: 0; }
.meta-sep { opacity: 0.35; font-size: 1rem; }
.meta-item svg { flex-shrink: 0; stroke: currentColor; }

.single-article-header-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}
.single-article-header-text { flex: 1; min-width: 0; }
.single-article-hero {
  flex-shrink: 0;
  width: 220px;
  margin: 0;
  line-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  align-self: flex-start;
}
.single-hero-img {
  width: 220px;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* ================================================================
   INLINE TABLE OF CONTENTS
   ================================================================ */
.post-toc {
  margin: 0;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) var(--space-8);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
  transition: background var(--transition-fast);
}
.toc-toggle:hover { background: var(--bg-muted); }
.toc-toggle-left { display: flex; align-items: center; gap: var(--space-2); }
.toc-toggle-left svg { stroke: var(--color-primary); }
.toc-chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.25s ease; }
.toc-toggle[aria-expanded="false"] .toc-chevron { transform: rotate(180deg); }

.toc-list { list-style: none; padding: var(--space-2) var(--space-8) var(--space-5); margin: 0; columns: 2; column-gap: var(--space-8); }
.toc-item { break-inside: avoid; margin-bottom: var(--space-1); }
.toc-item-sub { padding-left: var(--space-5); }
.toc-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: 0.87rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  line-height: 1.4;
}
.toc-link:hover { color: var(--color-primary); text-decoration: none; }
.toc-link.is-active { color: var(--color-primary); font-weight: 600; }

.toc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: rgba(0,87,255,0.1);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.toc-link.is-active .toc-num { background: var(--color-primary); color: #fff; }
.toc-sub-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--border-medium); flex-shrink: 0; align-self: center; }
.toc-link.is-active .toc-sub-dot { background: var(--color-primary); }

/* ================================================================
   ARTICLE CONTENT
   ================================================================ */
.single-article-content {
  padding: var(--space-8);
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.85;
}
.single-article-content h2,
.single-article-content h3,
.single-article-content h4 { font-family: var(--font-display); color: var(--text-primary); line-height: 1.3; scroll-margin-top: calc(var(--header-height) + 24px); }
.single-article-content h2 { font-size: 1.5rem; font-weight: 800; margin: var(--space-10) 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--border-light); }
.single-article-content h3 { font-size: 1.18rem; font-weight: 700; margin: var(--space-8) 0 var(--space-3); }
.single-article-content h4 { font-size: 1rem; font-weight: 700; margin: var(--space-6) 0 var(--space-2); color: var(--text-muted); }
.single-article-content p { margin-bottom: var(--space-5); }
.single-article-content > *:first-child { margin-top: 0; }
.single-article-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.single-article-content a:hover { color: var(--color-primary-dark); }
.single-article-content ul, .single-article-content ol { margin: var(--space-3) 0 var(--space-5) var(--space-6); }
.single-article-content ul { list-style: disc; }
.single-article-content ol { list-style: decimal; }
.single-article-content li { margin-bottom: var(--space-2); line-height: 1.7; }
.single-article-content code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-muted); color: var(--color-primary); padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border-light); }
.single-article-content pre { background: #0D1B2A; color: #A8FF78; font-family: var(--font-mono); font-size: 0.87rem; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); overflow-x: auto; margin: var(--space-6) 0; line-height: 1.7; }
[data-theme="dark"] .single-article-content pre { background: #000; }
.single-article-content pre code { background: none; color: inherit; padding: 0; border: none; font-size: inherit; }
.single-article-content blockquote { border-left: 4px solid var(--color-primary); background: rgba(0,87,255,0.04); padding: var(--space-4) var(--space-6); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--text-muted); font-style: italic; margin: var(--space-6) 0; }
.single-article-content blockquote p:last-child { margin-bottom: 0; }
.single-article-content img { border-radius: var(--radius-md); border: 1px solid var(--border-light); margin: var(--space-6) 0; max-width: 100%; height: auto; }
.single-article-content figure { margin: var(--space-6) 0; }
.single-article-content figcaption { font-size: 0.82rem; color: var(--text-muted); text-align: center; margin-top: var(--space-2); }
.single-article-content table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: var(--space-6) 0; overflow-x: auto; display: block; }
.single-article-content th, .single-article-content td { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-light); text-align: left; vertical-align: top; }
.single-article-content th { background: var(--bg-subtle); font-weight: 700; color: var(--text-primary); font-size: 0.85rem; }
.single-article-content tr:nth-child(even) td { background: var(--bg-subtle); }
.single-article-content hr { border: none; border-top: 2px solid var(--border-light); margin: var(--space-8) 0; }

/* WordPress-specific */
.single-article-content .wp-caption { max-width: 100%; }
.single-article-content .wp-caption-text { font-size: 0.82rem; color: var(--text-muted); text-align: center; margin-top: var(--space-2); }
.single-article-content .alignleft  { float: left;  margin: var(--space-2) var(--space-5) var(--space-4) 0; }
.single-article-content .alignright { float: right; margin: var(--space-2) 0 var(--space-4) var(--space-5); }
.single-article-content .aligncenter { display: block; margin: var(--space-5) auto; }
.single-article-content .alignfull { margin-left: calc(-1 * var(--space-8)); margin-right: calc(-1 * var(--space-8)); max-width: calc(100% + var(--space-8) * 2); border-radius: 0; }
.single-article-content .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); margin: var(--space-6) 0; }
.single-article-content .gallery-item { margin: 0; }
.single-article-content .gallery-item img { width: 100%; height: 120px; object-fit: cover; margin: 0; }

/* ---- Tags footer ---- */
.single-article-footer { padding: var(--space-5) var(--space-8); border-top: 1px solid var(--border-light); background: var(--bg-subtle); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.tags-label { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.tags-label svg { stroke: currentColor; }
.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-pill { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-full); font-size: 0.78rem; color: var(--text-secondary); text-decoration: none; transition: border-color var(--transition-fast), color var(--transition-fast); }
.tag-pill:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }

/* ---- Author box ---- */
.single-author-box { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-6) var(--space-8); border-top: 1px solid var(--border-light); background: var(--bg-subtle); }
.author-box-avatar { width: 72px !important; height: 72px !important; border-radius: 50% !important; border: 3px solid var(--border-light); object-fit: cover; flex-shrink: 0; }
.author-box-info { flex: 1; min-width: 0; }
.author-box-label { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: var(--space-1); }
.author-box-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); }
.author-box-bio { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; }

/* ================================================================
   RELATED POSTS (below article)
   ================================================================ */
.related-posts-section { margin-bottom: var(--space-6); }
.related-posts-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.related-posts-title::before { content: ''; display: inline-block; width: 3px; height: 1.1em; background: var(--color-primary); border-radius: 2px; flex-shrink: 0; }
.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.related-post-card { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
.related-post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(0,87,255,0.2); text-decoration: none; }
.related-post-thumb { line-height: 0; }
.related-post-thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
.related-post-body { padding: var(--space-4); flex: 1; }
.related-post-title { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; margin-bottom: var(--space-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.related-post-date { font-size: 0.78rem; color: var(--text-muted); }

/* ================================================================
   COMMENTS
   ================================================================ */
.comments-area { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-6); }
.comments-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-5) var(--space-8); background: none; border: none; cursor: pointer; font-family: var(--font-display); font-size: 0.97rem; font-weight: 700; color: var(--text-primary); text-align: left; transition: background var(--transition-fast); }
.comments-toggle:hover { background: var(--bg-subtle); }
.comments-toggle-left { display: flex; align-items: center; gap: var(--space-3); }
.comments-toggle-left svg { stroke: var(--color-primary); }
.comments-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 var(--space-2); background: rgba(0,87,255,0.1); color: var(--color-primary); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; }
.comments-toggle-chevron { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.25s ease; }
.comments-area.is-open .comments-toggle-chevron { transform: rotate(180deg); }
.comments-collapsible { display: none; border-top: 1px solid var(--border-light); }
.comments-area.is-open .comments-collapsible { display: block; }
.comments-inner { padding: var(--space-6) var(--space-8) var(--space-8); }

/* Comment list */
.comment-list { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.comment-list .children { list-style: none; padding: 0 0 0 var(--space-5); margin: var(--space-4) 0 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); border-left: 2px solid var(--border-light); }
.comment-body { display: flex; gap: var(--space-4); }
.comment-author-avatar img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border-light); flex-shrink: 0; }
.comment-content-wrap { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.comment-author-name { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
.comment-date { font-size: 0.78rem; color: var(--text-secondary); }
.comment-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }
.comment-text p { margin-bottom: var(--space-3); }
.comment-text p:last-child { margin-bottom: 0; }
.comment-reply-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: 0.78rem; font-weight: 600; color: var(--color-primary); text-decoration: none; opacity: 0.8; transition: opacity var(--transition-fast); }
.comment-reply-link:hover { opacity: 1; text-decoration: none; }
.no-comments { text-align: center; padding: var(--space-10) var(--space-8); color: var(--text-secondary); font-size: 0.9rem; }
#respond { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border-light); }
#respond h3, #respond .comment-reply-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-6); }
.comment-form .comment-notes, .comment-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: var(--space-3) var(--space-4); background: var(--bg-base); border: 1px solid var(--border-medium); border-radius: var(--radius-md); font-size: 0.9rem; color: var(--text-primary); transition: border-color var(--transition-fast); box-sizing: border-box; font-family: inherit; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,87,255,0.1); }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form-cookies-consent label { font-weight: 400; display: inline; margin-left: var(--space-2); }
.comment-form p { margin-bottom: var(--space-5); }
.comment-form .form-submit { margin-bottom: 0; }
.comment-form .submit { display: inline-flex; align-items: center; padding: var(--space-3) var(--space-6); min-height: 44px; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-full); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); font-family: inherit; }
.comment-form .submit:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.logged-in-as, #cancel-comment-reply-link { font-size: 0.82rem; color: var(--text-secondary); }
#cancel-comment-reply-link { color: var(--color-primary); text-decoration: none; }
#cancel-comment-reply-link:hover { text-decoration: underline; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.single-post-sidebar {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- Generic sidebar widget ---- */
.sidebar-widget {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Widget title */
.widget-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-subtle);
}
.widget-title svg { stroke: currentColor; flex-shrink: 0; }

/* ---- WordPress default widget styles ---- */
.sidebar-widget .textwidget { padding: var(--space-4) var(--space-5); font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; }
.sidebar-widget .textwidget p { margin-bottom: var(--space-3); }
.sidebar-widget .textwidget p:last-child { margin-bottom: 0; }
.sidebar-widget .textwidget a { color: var(--color-primary); }
.sidebar-widget .search-form { padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-2); }
.sidebar-widget .search-field { flex: 1; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); font-size: 0.88rem; background: var(--bg-base); color: var(--text-primary); font-family: inherit; }
.sidebar-widget .search-field:focus { outline: none; border-color: var(--color-primary); }
.sidebar-widget .search-submit { padding: var(--space-2) var(--space-4); background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; transition: background var(--transition-fast); }
.sidebar-widget .search-submit:hover { background: var(--color-primary-dark); }
.sidebar-widget ul { list-style: none; padding: 0; margin: 0; }
.sidebar-widget ul li { border-bottom: 1px solid var(--border-light); }
.sidebar-widget ul li:last-child { border-bottom: none; }
.sidebar-widget ul li a { display: block; padding: var(--space-3) var(--space-5); font-size: 0.88rem; color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast); line-height: 1.4; }
.sidebar-widget ul li a:hover { color: var(--color-primary); background: var(--bg-subtle); text-decoration: none; }
.sidebar-widget .tagcloud { padding: var(--space-4) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sidebar-widget .tagcloud a { display: inline-flex; padding: var(--space-1) var(--space-3); background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: var(--radius-full); font-size: 0.78rem !important; color: var(--text-secondary); text-decoration: none; transition: border-color var(--transition-fast), color var(--transition-fast); }
.sidebar-widget .tagcloud a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.sidebar-widget .calendar_wrap { padding: var(--space-4) var(--space-5); }
.sidebar-widget table.wp-calendar-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sidebar-widget table.wp-calendar-table th, .sidebar-widget table.wp-calendar-table td { padding: var(--space-1) var(--space-2); text-align: center; }
.sidebar-widget table.wp-calendar-table td a { color: var(--color-primary); font-weight: 600; }
.sidebar-widget .wp-calendar-nav { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-5); font-size: 0.82rem; border-top: 1px solid var(--border-light); }
.sidebar-widget .wp-calendar-nav a { color: var(--color-primary); text-decoration: none; }

/* Override list styles for custom widgets that use <ul> internally */
.widget-toc ul, .widget-share ul, .widget-related ul { border-bottom: none; }
.widget-toc ul li, .widget-share ul li, .widget-related ul li { border-bottom: none; }
.widget-toc ul li a, .widget-share ul li a, .widget-related ul li a { padding: 0; }

/* ---- Sidebar TOC ---- */
.widget-toc .sidebar-toc-list { list-style: none; padding: var(--space-3) var(--space-4); margin: 0; }
.sidebar-toc-item { margin-bottom: 2px; border-bottom: none !important; }
.sidebar-toc-sub { padding-left: var(--space-4); }
.sidebar-toc-link { display: block; padding: 5px var(--space-2); font-size: 0.83rem; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); border-left: 2px solid transparent; line-height: 1.4; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); background: none !important; }
.sidebar-toc-link:hover { color: var(--color-primary); background: var(--bg-subtle) !important; text-decoration: none; }
.sidebar-toc-link.is-active { color: var(--color-primary); font-weight: 600; background: rgba(0,87,255,0.06) !important; border-left-color: var(--color-primary); }
.sidebar-toc-sub .sidebar-toc-link { font-size: 0.8rem; }

/* ---- Sidebar share ---- */
.share-buttons { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.share-btn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); border: 1px solid var(--border-light); background: var(--bg-base); color: var(--text-secondary); cursor: pointer; font-family: inherit; width: 100%; text-align: left; }
.share-btn:hover { transform: translateX(2px); text-decoration: none; }
.share-twitter { color: #000; }
[data-theme="dark"] .share-twitter { color: #fff; }
.share-twitter:hover  { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.2); }
.share-facebook { color: #1877F2; }
.share-facebook:hover { background: rgba(24,119,242,0.08); border-color: rgba(24,119,242,0.3); }
.share-whatsapp { color: #25D366; }
.share-whatsapp:hover { background: rgba(37,211,102,0.08); border-color: rgba(37,211,102,0.3); }
.share-copy { color: var(--text-secondary); }
.share-copy:hover { background: var(--bg-subtle); border-color: var(--border-medium); color: var(--text-primary); }
.share-copy.is-copied { color: var(--color-success); border-color: var(--color-success); background: rgba(0,196,106,0.08); }

/* ---- Sidebar related posts ---- */
.sidebar-related-list { list-style: none; padding: var(--space-3) var(--space-4); margin: 0; }
.sidebar-related-item { border-bottom: 1px solid var(--border-light) !important; }
.sidebar-related-item:last-child { border-bottom: none !important; }
.sidebar-related-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; text-decoration: none; transition: opacity var(--transition-fast); background: none !important; }
.sidebar-related-link:hover { opacity: 0.8; text-decoration: none; background: none !important; }
.sidebar-related-thumb { flex-shrink: 0; }
.sidebar-related-thumb img { width: 56px; height: 42px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.sidebar-related-text { flex: 1; min-width: 0; }
.sidebar-related-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.84rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 3px; }
.sidebar-related-date { font-size: 0.75rem; color: var(--text-muted); }

.sidebar-toggle-btn { display: none; }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet: collapse to 1 column, sidebar below article as collapsible */
@media (max-width: 1024px) and (min-width: 769px) {
  .single-post-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .single-post-main  { grid-column: 1; grid-row: 1; }
  .single-post-sidebar {
    grid-column: 1;
    grid-row: 2;
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast);
  }
  .sidebar-toggle-btn:hover { background: var(--bg-subtle); }
  .sidebar-toggle-btn svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
  .single-post-sidebar.sidebar-open .sidebar-toggle-btn svg { transform: rotate(180deg); }
  .sidebar-collapsible-body { display: none; flex-direction: column; gap: var(--space-4); padding-top: var(--space-3); }
  .single-post-sidebar.sidebar-open .sidebar-collapsible-body { display: flex; }
  .toc-list { columns: 1; }
  .related-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: sidebar completely hidden — content takes full width */
@media (max-width: 768px) {
  .single-post-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: var(--space-4) var(--space-2);
  }
  .single-post-main  { grid-column: 1; grid-row: 1; }

  /* Sidebar hidden on mobile — too cramped, all content is in the article */
  .single-post-sidebar { display: none; }

  .single-article-header { padding: var(--space-6) var(--space-5); }
  /* Hero image hidden on mobile — OG/SEO image still set in seo.php */
  .single-article-hero { display: none; }
  /* TOC collapsed by default on mobile — JS toggles inline style to override */
  .toc-list { display: none; columns: 1; }
  .toc-toggle[aria-expanded="false"] .toc-chevron { transform: rotate(180deg); }
  .single-article-content { padding: var(--space-5); }
  .single-article-footer { padding: var(--space-5); }
  .single-author-box { padding: var(--space-5); flex-direction: column; align-items: center; text-align: center; }
  .toc-toggle { padding: var(--space-4) var(--space-5); }
  .related-posts-grid { grid-template-columns: 1fr; }
  .comments-toggle { padding: var(--space-4) var(--space-5); }
  .comments-inner { padding: var(--space-5); }
  .comment-list .children { margin-left: var(--space-4); padding-left: var(--space-4); }
  .single-article-content .alignleft, .single-article-content .alignright { float: none; margin: var(--space-5) 0; display: block; }
}
/* ================================================================
   GUTENBERG / BLOCK WIDGET STYLES IN SIDEBAR
   ================================================================ */

/* Block headings inside sidebar widgets (Recent Posts, Recent Comments, etc.) */
.sidebar-widget .wp-block-heading {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-subtle);
  margin: 0;
}

/* Block group wrapper — remove default padding */
.sidebar-widget .wp-block-group { padding: 0; }
.sidebar-widget .wp-block-group__inner-container { padding: 0; }

/* Latest posts block */
.sidebar-widget .wp-block-latest-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-widget .wp-block-latest-posts li {
  border-bottom: 1px solid var(--border-light);
}
.sidebar-widget .wp-block-latest-posts li:last-child {
  border-bottom: none;
}
.sidebar-widget .wp-block-latest-posts__post-title {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.sidebar-widget .wp-block-latest-posts__post-title:hover {
  color: var(--color-primary);
  background: var(--bg-subtle);
  text-decoration: none;
}
.sidebar-widget .wp-block-latest-posts__post-date,
.sidebar-widget .wp-block-latest-posts__post-author {
  display: block;
  padding: 0 var(--space-5) var(--space-2);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: -4px;
}

/* Latest comments block */
.sidebar-widget .wp-block-latest-comments {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-widget .wp-block-latest-comments__comment {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-light);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}
.sidebar-widget .wp-block-latest-comments__comment:last-child { border-bottom: none; }
.sidebar-widget .wp-block-latest-comments__comment-link { color: var(--color-primary); text-decoration: none; }
.sidebar-widget .wp-block-latest-comments__comment-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.sidebar-widget .wp-block-latest-comments .no-comments {
  padding: var(--space-4) var(--space-5);
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* Block search widget */
.sidebar-widget .wp-block-search {
  padding: var(--space-4) var(--space-5);
}
.sidebar-widget .wp-block-search__label {
  display: none; /* title already in widget-title */
}
.sidebar-widget .wp-block-search__inside-wrapper {
  display: flex;
  gap: var(--space-2);
  flex-wrap: nowrap;
}
.sidebar-widget .wp-block-search__input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: inherit;
  min-width: 0;
}
.sidebar-widget .wp-block-search__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,87,255,0.1);
}
.sidebar-widget .wp-block-search__button {
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.sidebar-widget .wp-block-search__button:hover { background: var(--color-primary-dark); }

/* Categories block */
.sidebar-widget .wp-block-categories {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-widget .wp-block-categories li {
  border-bottom: 1px solid var(--border-light);
}
.sidebar-widget .wp-block-categories li:last-child { border-bottom: none; }
.sidebar-widget .wp-block-categories a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.sidebar-widget .wp-block-categories a:hover {
  color: var(--color-primary);
  background: var(--bg-subtle);
  text-decoration: none;
}

/* Archives block */
.sidebar-widget .wp-block-archives {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-widget .wp-block-archives li {
  border-bottom: 1px solid var(--border-light);
}
.sidebar-widget .wp-block-archives li:last-child { border-bottom: none; }
.sidebar-widget .wp-block-archives a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.sidebar-widget .wp-block-archives a:hover {
  color: var(--color-primary);
  background: var(--bg-subtle);
  text-decoration: none;
}

/* Tag cloud block */
.sidebar-widget .wp-block-tag-cloud {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sidebar-widget .wp-block-tag-cloud a {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: 0.78rem !important;
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.sidebar-widget .wp-block-tag-cloud a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

/* Paragraph / text block */
.sidebar-widget .wp-block-paragraph {
  padding: var(--space-4) var(--space-5);
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* Remove default margins WordPress adds */
.sidebar-widget .wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }