/*
Theme Name: Klarmetrics V2 Child
Description: Child theme for Klarmetrics blog based on Kadence theme, with a new design.
Template: kadence
Version: 2.1.1
*/

/* Custom styles for the new theme can be added below. */

/* ===================================================================
   Single Post Styles
   =================================================================== */
   body.single-post {
    scroll-behavior: smooth;
}

.article-content h2 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: #1e293b; /* slate-800 */
}

.article-content h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #334155; /* slate-700 */
}

.article-content p,
.article-content li {
    font-size: 1.125rem; /* text-lg */
    line-height: 1.7;
    color: #475569; /* slate-600 */
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content a {
    color: #0d9488; /* teal-600 */
    text-decoration: underline;
    transition: color 0.2s;
}

.article-content a:hover {
    color: #14b8a6; /* teal-500 */
}

.article-content ul {
    list-style-type: disc;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}

.article-content li {
    margin-bottom: 0.75rem;
}

.article-content blockquote {
    border-left: 4px solid #5eead4; /* emerald-300 */
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #475569;
}

/* Inline code (not inside pre blocks) */
.article-content :not(pre) > code {
    background-color: #fef2f2;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    color: #dc2626;
    font-size: 0.9em;
    border: 1px solid #fecaca;
}

/* Code blocks - Light theme with professional styling */
.article-content pre,
.article-content pre[class*="language-"],
article pre {
    background-color: #f8fafc !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    overflow-x: auto !important;
    margin: 1.5rem 0 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.article-content pre code,
.article-content pre code[class*="language-"],
.article-content pre code.hljs,
article pre code {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #1e293b !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace !important;
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    display: block !important;
}

.code-block-wrapper {
    position: relative;
    background-color: #282c34;
    border-radius: 1rem;
    margin: 2rem 0;
}

.code-block-wrapper .copy-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #d1d5db;
    transition: color 0.2s;
}

.code-block-wrapper .copy-btn:hover {
    color: #ffffff;
}

.code-block-wrapper pre code.hljs {
    padding: 1.5rem;
    background: transparent;
}

/* ===================================================================
   Table of Contents Styles
   =================================================================== */
.toc-content-transition {
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
}

.toc-link.active.toc-link-h2 {
    color: #059669; /* emerald-600 */
    border-left-color: #10b981; /* emerald-500 */
    transform: translateX(4px);
}

.toc-link.active.toc-link-h3 {
    color: #1e293b; /* slate-800 */
    border-left-color: #64748b; /* slate-500 */
    transform: translateX(4px);
}

.toc-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.toc-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.toc-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* slate-300 */
  border-radius: 2px;
}

.toc-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* slate-400 */
}