/* ============ Layout & Wrapper ============ */

.container { width: min(1200px, 92%); margin: 0 auto; }



.ggr-single-wrapper {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 320px;

  gap: 32px;

  margin: 150px auto 50px;

}



.ggr-single-main { min-width: 0; }



/* ============ Progress Bar ============ */

#ggr-progress-bar {

  position: fixed;

  top: 0; left: 0;

  height: 4px;

  width: 0%;

  z-index: 9999;

  background: linear-gradient(90deg, #0ea5e9, #7c3aed);

  box-shadow: 0 2px 10px rgba(124,58,237,.35);

}



/* ============ Header / Meta ============ */

.ggr-single-header { margin-bottom: 18px; }

.ggr-chip {

  display:inline-block; background:#eef2ff; color:#7c3aed;

  padding:6px 12px; border-radius:999px; font-weight:600; font-size:12.5px;

}

.ggr-single-title {

  font-size: 36px; line-height: 1.25; margin: 10px 0 10px; font-weight: 800;

}

.ggr-single-meta {

  display:flex; align-items:center; gap:10px; color:#475569; font-size:14.5px;

}

.ggr-avatar { width:36px; height:36px; border-radius:50%; border:2px solid #e2e8f0; }



/* ============ Featured Image ============ */

.ggr-single-featured img {

  width: 100%; border-radius: 14px; display:block;

  box-shadow: 0 12px 30px rgba(2,6,23,.12);

  margin: 14px 0 22px;

}



/* ============ TOC ============ */

.ggr-toc {

  position: sticky;

  top: 200px;

  background: #fff;

  border: 1px solid #e5e7eb;

  border-radius: 12px;

  padding: 14px 14px 8px;

  margin: 10px 0 60px;

  box-shadow: 0 10px 26px rgba(2,6,23,.06);

}

.ggr-toc h4 {

  margin: 0 0 8px; font-size: 14px; letter-spacing: .03em; color: #0f172a;

  font-weight: 800; text-transform: uppercase;

}

.ggr-toc .toc-toggle { display:none; }

.ggr-toc ol, .ggr-toc ul { list-style:none; padding-left:0; margin:0; }

.ggr-toc li { margin: 6px 0; }

.ggr-toc a {

  display:block; padding: 6px 8px; border-radius: 8px; text-decoration:none;

  color:#334155; font-size:14px; line-height:1.35;

}

.ggr-toc a:hover { background:#f1f5f9; }

.ggr-toc a.is-active { background:#eef2ff; color:#7c3aed; font-weight:700; }

.ggr-toc .toc-depth-2 { padding-left: 12px; opacity:.9; }



/* ============ Article Typography ============ */

.ggr-single-body { 

  font-size: 18px; line-height: 1.75; color:#0f172a; 

}

.ggr-single-body p { margin: 16px 0; }

.ggr-single-body h2, .ggr-single-body h3 { margin: 28px 0 10px; font-weight: 800; }

.ggr-single-body h2 { font-size: 28px; }

.ggr-single-body h3 { font-size: 22px; }

.ggr-single-body img { border-radius: 12px; margin: 18px 0; }

.ggr-single-body blockquote {

  border-left: 4px solid #7c3aed; background:#faf5ff; color:#3b0764;

  margin: 18px 0; padding: 14px 16px; border-radius: 8px;

}



/* ============ Newsletter CTA ============ */

.ggr-newsletter {

  margin: 28px 0;

  border:1px solid #e5e7eb; border-radius: 14px; padding: 20px;

  background: linear-gradient(180deg, #f8fafc, #ffffff);

  box-shadow: 0 10px 26px rgba(2,6,23,.06);

}

.ggr-newsletter h3 { margin: 0 0 6px; font-size: 22px; }

.ggr-newsletter p { margin: 0 0 12px; color:#475569; }

.ggr-newsletter form { display:flex; gap:10px; flex-wrap:wrap; }

.ggr-newsletter input {

  flex:1 1 260px; padding: 12px 14px; border-radius: 10px; border:1px solid #cbd5e1;

  outline:none;

}

.ggr-newsletter button {

  padding: 12px 16px; border:0; border-radius: 10px; cursor:pointer;

  background: linear-gradient(120deg, #0ea5e9, #7c3aed); color:#fff; font-weight:700;

  box-shadow: 0 10px 22px rgba(124,58,237,.25);

}

.ggr-newsletter button:hover { filter: brightness(1.05); transform: translateY(-1px); }



/* ============ Author Box ============ */

.ggr-author-box {

  display:flex; gap:14px; align-items:flex-start;

  border:1px solid #e5e7eb; border-radius: 14px; padding: 18px;

  background:#ffffff; margin: 24px 0 10px;

  box-shadow: 0 10px 26px rgba(2,6,23,.06);

}

.ggr-author-box img.avatar { border-radius: 50%; }

.ggr-author-box h4 { margin: 2px 0 6px; font-size: 18px; }

.ggr-author-box p { color:#475569; margin:0; }



/* ============ Affiliate Product Box (shortcode) ============ */

.ggr-product-box {

  border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px;

  background: #f8fafc; margin: 22px 0; box-shadow: 0 8px 20px rgba(2,6,23,.05);

}

.ggr-product-box h4 { margin: 0 0 8px; font-size:18px; }

.ggr-product-box a {

  display:inline-block; margin-top: 10px; padding: 10px 14px; border-radius: 10px;

  background: linear-gradient(120deg, #0ea5e9, #7c3aed); color:#fff; text-decoration:none; font-weight:700;

}



/* ============ Sidebar ============ */

.ggr-single-sidebar {

  position: sticky; top: 100px; height: fit-content;

}

.ggr-widget-title { font-size: 18px; font-weight:800; margin: 4px 0 0px; }

.ggr-related-posts { list-style: none; margin: 0; padding: 0; }

.ggr-related-posts li { margin: 10px 0; }

.ggr-related-posts a {

  display:block; text-decoration:none; color:#0f172a; background:#fff;

  border:1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px;

  transition:.2s; box-shadow: 0 8px 18px rgba(2,6,23,.05);

}

.ggr-related-posts a:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(2,6,23,.12); }



/* ============ Comments ============ */

.ggr-comments { margin: 30px 0 0; }

.ggr-comments .comment-list { list-style: none; padding-left: 0; }

.ggr-comments .comment-body {

  border:1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin: 12px 0;

  background:#fff; box-shadow: 0 6px 16px rgba(2,6,23,.05);

}

.ggr-comments .comment-author .avatar { border-radius: 50%; margin-right: 8px; }

.ggr-comments .comment-meta { font-size: 13px; color:#64748b; margin-top:4px; }

.ggr-comments .reply a {

  font-weight:700; color:#7c3aed; text-decoration:none;

}

.ggr-comments .comment-respond {

  border:1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin-top: 20px;

  background:#f8fafc;

}

.ggr-comments input, .ggr-comments textarea {

  width:100%; padding:12px; border-radius:10px; border:1px solid #cbd5e1; margin:6px 0 10px; outline:none;

}

.ggr-comments input[type="submit"] {

  width:auto; cursor:pointer; background: linear-gradient(120deg, #0ea5e9, #7c3aed);

  color:#fff; border:0; font-weight:800;

}



/* ============ Dark Mode ============ */

[data-theme="dark"] .ggr-single-meta { color:#94a3b8; }

[data-theme="dark"] .ggr-single-body { color:#e5e7eb; }

[data-theme="dark"] .ggr-single-featured img { box-shadow: 0 12px 30px rgba(0,0,0,.35); }

[data-theme="dark"] .ggr-toc { background:#0f172a; border-color:#1f2937; box-shadow: 0 16px 40px rgba(0,0,0,.35); }

[data-theme="dark"] .ggr-toc h4 { color:#e5e7eb; }

[data-theme="dark"] .ggr-toc a { color:#cbd5e1; }

[data-theme="dark"] .ggr-toc a:hover { background:#111827; }

[data-theme="dark"] .ggr-newsletter { background: linear-gradient(180deg, #0b1220, #0f172a); border-color:#1f2937; }

[data-theme="dark"] .ggr-newsletter p { color:#94a3b8; }

[data-theme="dark"] .ggr-author-box { background:#0f172a; border-color:#1f2937; box-shadow: 0 16px 40px rgba(0,0,0,.35); }

[data-theme="dark"] .ggr-product-box { background:#0b1220; border-color:#1f2937; }

[data-theme="dark"] .ggr-related-posts a { background:#0f172a; border-color:#1f2937; color:#e5e7eb; box-shadow: 0 16px 40px rgba(0,0,0,.35); }

[data-theme="dark"] .ggr-comments .comment-body,

[data-theme="dark"] .ggr-comments .comment-respond { background:#0f172a; border-color:#1f2937; box-shadow: 0 16px 40px rgba(0,0,0,.35); }

[data-theme="dark"] .ggr-comments .comment-meta { color:#94a3b8; }

[data-theme="dark"] .ggr-chip { background:#111827; color:#a78bfa; }



/* ============ Responsive ============ */

@media (max-width: 1024px) {

  .ggr-single-wrapper {

    grid-template-columns: 1fr;

  }

  .ggr-single-sidebar {

    position: static;

  }

  .ggr-toc { position: static; }

}

@media (max-width: 768px) {

  .ggr-single-title { font-size: 28px; }

  .ggr-single-meta { flex-direction: column; align-items:flex-start; gap:6px; }

  .ggr-toc .toc-toggle { display:block; width:100%; text-align:left; font-weight:800; background:#f1f5f9; border:0; border-radius:8px; padding:8px 10px; margin:2px 0 6px; }

  .ggr-toc .toc-list { display:none; }

  .ggr-toc.is-open .toc-list { display:block; }

}