/* ==================================================
   PERFRIG DESIGN SYSTEM - Final Version
   No icons in headings
   No hover effects on images
   Dynamic banner at bottom of sidebar (fixed when visible)
   TOC with proper height (not stretched to bottom)
   Author box with read time
   Mobile TOC collapsible
   Related Posts section at end of article
================================================== */

:root {
    /* Core Colors */
    --primary: #06D7F6;
    --secondary: #00FF9C;
    --accent: #0066FF;
    --dark: #0A0A0C;
    --darker: #05080C;
    --card: #14151A;
    --article-card: #212121;
    --sidebar-card: #0d1117;
    --text-primary: #E5E7EB;
    --text-secondary: #9CA3AF;
    --text-muted: #6B7280;
    --border: rgba(255, 255, 255, 0.05);
    --border-light: rgba(255, 255, 255, 0.1);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #06D7F6, #0055FF);
    --gradient-secondary: linear-gradient(135deg, #00FF9C, #00E5FF);
    --gradient-text: linear-gradient(90deg, #06D7F6, #00FF9C);
    --gradient-border: linear-gradient(135deg, rgba(6,215,246,0.4), rgba(0,255,156,0.4), rgba(6,215,246,0.4));
    
    /* Typography */
    --font-heading: 'Exo 2', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Spacing */
    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 15px;
    --space-lg: 20px;
    --space-xl: 25px;
    --space-2xl: 30px;
    --space-3xl: 40px;
    --space-4xl: 50px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-round: 999px;
    
    /* Shadows */
    --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 35px rgba(6, 215, 246, 0.25);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--darker);
    font-family: var(--font-body);
    color: var(--text-primary);
    line-height: 1.75;
    position: relative;
    overflow-x: hidden;
}

/* Subtle technical background grid */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(var(--text-secondary) 1px, transparent 1px),
        linear-gradient(90deg, var(--text-secondary) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.02;
    pointer-events: none;
    mix-blend-mode: soft-light;
    z-index: -1;
}

.filter-btn .count{
opacity:.6;
margin-left:4px;
font-size:12px;
}

/* Decorative elements - subtle */
.glow-orb {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 50%, rgba(6, 215, 246, 0.1), transparent 70%);
    top: -200px;
    right: -200px;
    z-index: -1;
    filter: blur(80px);
    animation: float 12s ease-in-out infinite;
}

.glow-orb-2 {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle at 70% 30%, rgba(0, 255, 156, 0.08), transparent 70%);
    bottom: -250px;
    left: -250px;
    z-index: -1;
    filter: blur(100px);
    animation: float 15s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, 20px); }
}

/* ==================================================
   CONTAINER
================================================== */

.container {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 20px 0 40px;
}

/* ==================================================
   TOP SECTION - Image + Author Box (Enhanced)
================================================== */

.single-top {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: var(--space-3xl);
    margin: 10px 0 10px;
    align-items: stretch;
}

.top-image {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    position: relative;
}

.top-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-2xl);
    padding: 2px;
    background: var(--gradient-border);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.top-image:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.top-image:hover::after {
    opacity: 1;
}

.top-image img {
    width: 100%;
    height: 420px;
    object-fit: fill;
    display: block;
    transition: transform 0.6s ease;
}

.top-image:hover img {
    transform: scale(1.03);
}

.author-bio {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

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

.author-bio-name {
    margin: 0 0 6px 0;
}

.author-role {
    opacity: 0.7;
    margin-bottom: 8px;
}
/* ==================================================   ARTICLE DETAILS PANEL - COMPACT VERSION ================================================== */


/* ==================================================
   ARTICLE DETAILS BOX - BALANCED PRO VERSION
================================================== */

.article-details-box {
    background: linear-gradient(145deg, var(--card), #181b22);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    border: 1px solid rgba(6,215,246,0.28);
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.55);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Toggle icon hidden on desktop — shown via mobile media query */
.article-details-box .toggle-icon {
    display: none;
}

/* Subtle hover */
.article-details-box:hover {
    border-color: rgba(6,215,246,0.45);
    box-shadow:
        0 14px 35px -10px rgba(0,0,0,0.65),
        0 0 18px rgba(6,215,246,0.12);
}

/* ==================================================
   TITLE
================================================== */

.article-details-title {
    font-family: var(--font-heading);
    font-size: 24px; /* same as You might also like */
    font-weight: 700;
    color: var(--primary);
    position: relative;
    display: inline-block;
    margin-bottom: 14px;
}

/* Underline identical to related section */
.article-details-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--primary);
    border-radius: 3px;
}

.article-details-box:hover .article-details-title::after {
    width: 72px;
}

/* ==================================================
   ROWS
================================================== */

.article-details-row {
    font-size: 14px;
    line-height: 1.7;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.article-details-row:last-child {
    border-bottom: none;
}

/* Labels */
.article-details-row strong {
    min-width: 90px;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #99CEFF;
    font-weight: 700;
}

/* Values */
.article-details-row .detail-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* Links */
.article-details-row a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
}

.article-details-row a:hover {
    color: var(--secondary);
    transform: translateX(2px);
}

/* ==============================================
   ARTICLE CATEGORY PILLS
============================================== */

.article-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.article-category-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    background: transparent;
}

.article-category-pill:hover {
    background: var(--primary);
    color: var(--dark);
    transform: none; /* cancel slide effect */
}

/* Force black text inside category pill on hover */
.article-details-row .article-category-pill:hover {
    color: var(--dark);
}

/* ==================================================   TITLE - No icons ================================================== */


.single-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    margin-bottom: var(--space-2xl);
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    letter-spacing: -0.5px;
    position: relative;
    display: inline-block;
    max-width: 1000px;
}

.single-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { width: 100px; opacity: 1; }
    50% { width: 150px; opacity: 0.8; }
}

/* ==================================================
   LAYOUT - THREE COLUMNS
================================================== */

.page {
    display: grid;
    grid-template-columns: 
        clamp(180px, 15vw, 220px)
        minmax(0, 1000px)
        clamp(260px, 20vw, 300px);
    gap: var(--space-sm);
    justify-content: center;
}


/* ==================================================
   TOC - LEFT COLUMN - No icons
   DYNAMIC HEIGHT - Not stretched to bottom
================================================== */

.toc {
    background: var(--card);
    padding: 18px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    position: sticky;
    top: 95px;
    transition: all var(--transition-normal);
    height: fit-content; /* Makes it only as tall as its content */
    max-height: calc(100vh - 80px); /* Ensures it doesn't overflow viewport */
    overflow-y: auto; /* Adds scroll if content exceeds viewport height */
}

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

/* Custom scrollbar for TOC (only if needed) */
.toc::-webkit-scrollbar {
    width: 4px;
}

.toc::-webkit-scrollbar-track {
    background: var(--darker);
    border-radius: 10px;
}

.toc::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

.toc:hover {
    border-color: rgba(6, 215, 246, 0.3);
    box-shadow: var(--shadow-glow);
}

.toc h3 {
    font-family: var(--font-heading);
    margin-bottom: 40px;
    color: var(--primary);
    font-size: 20px;
    position: relative;
    display: inline-block;
    padding-right: var(--space-md);
}

.toc h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.toc ul {
    list-style: none;
        padding-inline-start: 0 !important;
    margin: 0;
}


.toc li {
    margin-bottom: var(--space-xs);
    border-bottom: 1px solid #06d7f699;
    padding-bottom: var(--space-xs);
}

.toc li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.toc a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: all var(--transition-fast);
    position: relative;
    padding-left: 0;
    line-height: 1.4;
}

.toc a:hover {
    color:#99CEFF;
    padding-left: 8px;
}

.toc a::before {
    content: '▹';
    position: absolute;
    left: -15px;
    color: #99CEFF;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.toc a:hover::before {
    opacity: 1;
}

/* ==================================================
   ARTICLE - MIDDLE COLUMN - No icons in headings
================================================== */

.article {
    background: var(--article-card);
    padding: var(--space-3xl);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.article:hover {
    border-color: rgba(6, 215, 246, 0.2);
    box-shadow: var(--shadow-lg);
}

/* Gutenberg heading base — applies to all .wp-block-heading elements */
.wp-block-heading {
    color: var(--primary);
}

.article h2 {
    margin: 35px 0 12px;
    color: var(--primary);
    font-size: 28px;
    position: relative;
    display: inline-block;
     margin-top: 6px;
}

.article h2:first-of-type {
    margin-top: 0;
}



.article .article-content h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    margin: var(--space-2xl) 0 var(--space-md);
    color: var(--primary);
}

.article p {
    margin-bottom:14px;
    font-size: 16.5px;
    color: var(--text-primary);
    line-height: 1.7;

}

.article p:last-of-type {
    margin-bottom: 0;
}

.article-content img {
    max-width: 100%;
    border-radius: var(--radius-xl);
    margin: 20px 0 0;
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-content img:hover {
    transform: scale(1.01);
    box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.article > p img,
.article > figure img {
    max-width: 100%;
    border-radius: var(--radius-xl);
    margin: var(--space-2xl) 0;
    border: 1px solid var(--border);
    transition: none; 
    box-shadow: var(--shadow-md);
}

/* ==============================================
   IMAGE CAPTION STYLE (WordPress)
============================================== */

.article-content figure {
    margin: 28px 0;
}

.article-content .wp-element-caption {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 12px;
    padding-top: 8px;
    border-left: 1px solid rgba(6,215,246,0.15);
}

/* ==============================================
   ARTICLE CONTENT LINKS HOVER
============================================== */

.article-content a {
    position: relative;
    color: var(--primary);
    text-decoration: none;
}

.article-content a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transition: width 0.25s ease;
}

.article-content a:hover {
    color: var(--secondary);
}

.article-content a:hover::after {
    width: 100%;
}
/* ==================================================
   AUTHOR BIO (Bottom)
================================================== */

.author-bio {
    margin-top: var(--space-4xl);
    padding: var(--space-2xl);
    background: var(--darker);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    display: flex;
    gap: var(--space-xl);
    align-items: center;
    transition: all var(--transition-normal);
}

.author-bio:hover {
    border-color: rgba(6, 215, 246, 0.3);
    box-shadow: var(--shadow-glow);
}

/* === Avatar Wrapper === */
.author-bio-avatar {
    width: 90px;
    height: 90px;
    flex-shrink: 0;              /* prevent shrinking */
    display: block;
}

/* === Avatar Image === */
.author-bio-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
    display: block;
}

.author-bio:hover .author-bio-avatar img {
    transform: scale(1.05);
    filter: brightness(1.1);
    box-shadow: var(--shadow-glow);
}

/* === Author Name === */
.author-bio-name {
    font-family: var(--font-heading);
    font-size: 22px;
    margin-bottom: var(--space-xs);
    color: var(--primary);
    cursor: pointer;
}

.author-bio-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.author-bio-name a:hover {
    color: var(--primary);
    opacity: 1;
}

/* === Description === */
.author-bio p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}


.author-bio-text p {
    margin-bottom: 8px;
    line-height: 1.6;
}

.author-read-more {
    display: inline-block;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.author-read-more:hover {
    text-decoration: underline;
}
/* ==================================================
   RELATED POSTS SECTION - 2 articles at the end
================================================== */

.related-posts {
    margin-top: var(--space-4xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--border);
}

.related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
}

.related-header h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--primary);
    position: relative;
    display: inline-block;
}

.related-header h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.related-view-all {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all var(--transition-fast);
}

.related-view-all:hover {
    gap: 10px;
    color: var(--secondary);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}



.related-card {
    background: var(--card);
    position: relative;
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;  
    color: inherit;  
        cursor: pointer;
    
}

.related-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: 2;
}

.related-card:hover {
    transform: translateY(-6px);
    border-color: rgba(6, 215, 246, 0.3);
    box-shadow: var(--shadow-glow);
    
}

.related-card:hover::before {
    opacity: 1;
}

.related-card-image-wrapper {
        padding: 18px;
    padding-bottom: 0;
    display: flex;
    justify-content: center;
}

.related-card-image {
    width: 100%;
    height: 170px;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    display: block;
    margin:0;
}

.related-card:hover .related-card-image {
    transform: scale(1.05);
}

.related-card-content {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.related-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
    font-size: 12px;
    color: var(--text-secondary);
}

.related-card-category {
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.related-card-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    line-height: 1.35;
    min-height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
        color: var(--text-primary);
    transition: color var(--transition-fast);
    
}
.related-card:hover .related-card-title {
    color: var(--primary);
}
.related-card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.related-card-title a:hover {
    color: var(--primary);
}
.related-card:hover .related-card-title {
    color: var(--primary);
}
.related-card-excerpt {
    font-size: 14px; 
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; 
    margin-bottom: 10px;
}

.related-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

.related-card-date {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.related-card-date i {
    color: var(--primary);
    font-size: 11px;
}

.related-card-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all var(--transition-fast);
}

.related-card-link:hover {
    gap: 10px;
    color: var(--secondary);
}



/* ==================================================
   SIDEBAR - RIGHT COLUMN - WILL MOVE WITH ARTICLE
================================================== */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: sticky;
    top: 95px;
    /*    align-self: start;*/


}

/* Sidebar cards */
.sidebar-card {
    background: var(--card);
    padding: var(--space-xl);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.sidebar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-normal);
}


.sidebar-card h3 {
    font-family: var(--font-heading);
    color: var(--primary);
    margin-bottom: var(--space-lg);
    font-size: 18px;
    position: relative;
    display: inline-block;
}

.sidebar-card h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.sidebar-card p {
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.sidebar-card p i {
    color: var(--primary);
    font-size: 12px;
    opacity: 0.7;
    transition: all var(--transition-fast);
}

.sidebar-card p:hover {
    color: var(--primary);
    background: rgba(6, 215, 246, 0.05);
    padding-left: var(--space-md);
}

.sidebar-card p:hover i {
    opacity: 1;
    transform: translateX(3px);
}

/* ── Neutralise the <p> wrapper Gutenberg injects around shortcodes ──────
   .sidebar-card p { display:flex } turns that wrapper into a horizontal
   flex container. This scoped reset restores normal block stacking so
   all .sidebar-post items stack vertically as intended.
   Placed after .sidebar-card p to win the cascade (same specificity). */
.sidebar-card-content > p,
.sidebar-card-content > p:hover {
    display: block;
    padding: 0;
    margin: 0;
    gap: 0;
    cursor: default;
    border-radius: 0;
    background: transparent;
    color: inherit;
    transition: none;
}

.sidebar-card input {
    width: 100%;
    padding: 12px;
    margin-top: var(--space-xs);
    background: var(--darker);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: white;
    font-size: 14px;
    transition: all var(--transition-fast);
}

.sidebar-card input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
}

.sidebar-card input::placeholder {
    color: var(--text-muted);
    font-size: 13px;
}

.sidebar-card button {
    width: 100%;
    margin-top: var(--space-md);
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.sidebar-card button i {
    font-size: 14px;
}

.sidebar-card button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
    opacity: 0.9;
}

/* ==================================================
   DYNAMIC BANNER - Appears after last sidebar card
   STAYS FIXED when visible
================================================== */
.sidebar-banner {
    position: fixed;
    top: 95px;
    border-radius: var(--radius-2xl);
    overflow: hidden;

    /* Image Background */
    background:
        linear-gradient(135deg, rgba(6,215,246,0.15), rgba(124,58,237,0.15)),
        linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.75)),
        url("banner.webp") center/cover no-repeat;

    color: white;
    border: 1px solid rgba(255,255,255,0.08);

    opacity: 0;
    visibility: hidden;

    /* IMPORTANT: allow JS to shift banner up near footer */
    --bannerShift: 20px; /* default hidden offset */
    transform: translateY(var(--bannerShift));

transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.1s linear;

    z-index: 200;
}

.sidebar-banner.visible {
    opacity: 1;
    visibility: visible;

    /* When visible, JS will set --bannerShift to 0 or negative values */
    transform: translateY(var(--bannerShift));
}

/* Subtle cyber glow border */
.sidebar-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-2xl);
    padding: 1px;
    background: linear-gradient(135deg, #06D7F6, #7C3AED);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

.banner-inner {
    position: relative;
    z-index: 2;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.banner-inner > * {
    margin: 0 !important;
}

#dynamicBanner .banner-inner,
#dynamicBanner .banner-inner > * {
    width: 100%;
    height: 100%;
}

.banner-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#dynamicBanner {
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.sidebar-banner h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    margin-bottom: var(--space-xs);
}

.sidebar-banner p {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: var(--space-md);
}

.banner-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--radius-round);
    background: linear-gradient(90deg, #06D7F6, #7C3AED);
    font-size: 12px;
    font-weight: 600;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.banner-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* ==================================================
   FOOTER
================================================== */

.article-footer {
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.tags-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 18px;
    position: relative;
    display: inline-block;
}

.tags-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.tags {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: #06d7f600;
    border: 1px solid #06d7f6;
    border-radius: var(--radius-round);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tag:hover {
    background: var(--primary);
    color: var(--dark);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(6,215,246,0.4);
}

/* =========================
   TAGS BLOCK + TITLE
========================= */

.tags-block{
    width:100%;
}

.tags-header{
    margin-bottom:14px;
}

.tags-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 20px;
    position: relative;
    display: inline-block;
}

.tags-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}









/* =========================
   share BUTTON
========================= */

.share {
    display: flex;
    gap: var(--space-md);
}

.share a {
    color: var(--text-secondary);
    font-size: 18px;
    transition: all var(--transition-fast);
}

.share a:hover {
    color: var(--primary);
    transform: translateY(-3px);
}



/* ==================================================
   MOBILE RESPONSIVE - TOC Collapsible
================================================== */

@media (max-width: 1100px) {
    .page {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .toc, .sidebar {
        position: relative;
        top: 0;
    }
    
    .single-top {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .top-image img {
        height: 350px;
    }
    
.container {
    padding: 20px 0 40px;
    display: flex;
    flex-direction: column;
}

.single-title {
    order: -1;
}
    
    /* TOC collapsible on mobile/tablet */
    .toc {
        cursor: pointer;
        height: auto;
        max-height: none;
        overflow-y: visible;
    }
    
    .toc h3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
        padding-bottom: var(--space-sm);
    }
    
    .toc h3::after {
        content: none; /* Remove the line under heading */
    }
    
    .toc h3 .toggle-icon {
        display: inline-block;
        margin-left: auto;
        transition: transform var(--transition-normal);
        font-size: 12px;
        color: var(--primary);
    }
    
    .toc ul {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        margin-top: 0;
    }
    
    .toc.active ul {
        max-height: 500px; /* Enough for many items */
        margin-top: var(--space-lg);
    }
    
    .toc .toggle-icon {
    display: inline-block;
}

    /* Article Details Box collapsible on mobile */
    .article-details-box {
        cursor: pointer;
        gap: 0;
    }

    .article-details-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
    }

    .article-details-title::after {
        content: none;
    }

    .article-details-title .toggle-icon {
        display: inline-block;
        margin-left: auto;
        transition: transform var(--transition-normal);
        font-size: 12px;
        color: var(--primary);
    }

    .article-details-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .article-details-box.active .article-details-body {
        max-height: 600px;
        padding-top: var(--space-lg);
    }

    .article-details-box .toggle-icon {
        display: inline-block;
    }

    /* Related posts on mobile */
    .related-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: var(--space-lg) 0;
    }
    
    .top-image img {
        height: 280px;
    }
    
    .author-box {
        padding: var(--space-xl);
    }
    
    .single-title {
        font-size: 28px;
    }
    
    .article {
        padding: var(--space-xl);
    }
    
    .article h2 {
        font-size: 24px;
    }
    
    .article p {
        font-size: 16px;
    }
    
    .author-bio {
        flex-direction: column;
        text-align: center;
        padding: var(--space-xl);
    }
    
    .sidebar {
        gap: var(--space-md);
    }
    
    .article-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .share {
        width: 100%;
        justify-content: center;
    }
    
    .related-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

@media (max-width: 480px) {
    .article h2 {
        font-size: 22px;
    }
    
    .author-name {
        font-size: 20px;
    }
    
    .sidebar-card {
        padding: var(--space-lg);
    }
    
    .related-card-image {
        height: 150px;
    }
}


/* ==================================================
   sidebar-post css cards
================================================== */


.sidebar-post{
display:flex;
align-items:center;
gap:12px;
padding:10px 0;
text-decoration:none;
border-bottom:1px solid var(--border);
transition:transform .2s ease;
}

.sidebar-post:last-child{
border-bottom:none;
}

.sidebar-post:hover{
transform:translateX(3px);
}

.sidebar-post .thumb{
flex:0 0 70px;
width:70px;
height:50px;
overflow:hidden;
border-radius:6px;
}

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

.sidebar-post .title{
font-size:14px;
line-height:1.4;
color:var(--text-secondary);
font-weight:500;
transition:color .2s ease;
}

.sidebar-post:hover .title{
color:var(--primary);
}

/* ==================================================
   NEWSLETTER BOX
================================================== */

/* Reset inherited .sidebar-card p hover/cursor effects for newsletter text.
   Same specificity (0,1,1) as .sidebar-card p — placed after, so it wins. */
.newsletter-box p,
.newsletter-box p:hover {
    display: block;
    padding: 0;
    margin-bottom: var(--space-sm);
    gap: 0;
    cursor: default;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    transition: none;
}

/* Input: error state */
.newsletter-form input.input-error {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.15);
}

/* Inline error message */
.newsletter-error {
    font-size: 12px;
    color: #ff6b6b;
    min-height: 16px;
    line-height: 1.4;
}

/* Button: spinner element hidden by default */
.newsletter-form button .btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: nl-spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* Button: loading state */
.newsletter-form button.loading {
    opacity: 0.75;
    pointer-events: none;
}

.newsletter-form button.loading .btn-label {
    display: none;
}

.newsletter-form button.loading .btn-spinner {
    display: inline-block;
}

@keyframes nl-spin {
    to { transform: rotate(360deg); }
}

/* Success message */
.newsletter-success {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--secondary);
    font-size: 14px;
    padding: var(--space-sm) 0;
}

/* Ensure the HTML [hidden] attribute is not overridden by display:flex above */
.newsletter-success[hidden] {
    display: none;
}

.newsletter-success i {
    font-size: 18px;
    flex-shrink: 0;
}

/* ==================================================
   COMMENTS SYSTEM — PERFRIG chV2
   Scoped to .perfrig-comments-wrap to avoid
   touching any other page element.
================================================== */

/* ── Wrap + section heading ───────────────────── */

.perfrig-comments-wrap {
    margin-top: var(--space-4xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--border);
}

.comments-section-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 20px;
    position: relative;
    display: inline-block;
}

.comments-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

/* ── Container ────────────────────────────────── */

.perfrig-comments-wrap .comments-area {
    background: #0A0A0C;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 24px;
}

/* WordPress injects its own h2.comments-title —
   hide it since we render our own heading above */
.perfrig-comments-wrap .comments-title {
    display: none;
}

/* ── Comment list reset ───────────────────────── */

.perfrig-comments-wrap .comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.perfrig-comments-wrap .comment-list .children {
    list-style: none;
    margin: 0 0 0 52px;
    padding: 0;
    border-left: 2px solid rgba(6,215,246,0.12);
    padding-left: 16px;
}

/* ── Individual comment item ──────────────────── */

.perfrig-comments-wrap .comment {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.perfrig-comments-wrap .comment:last-child,
.perfrig-comments-wrap .children .comment:last-child {
    border-bottom: none;
}

/* ── Avatar ───────────────────────────────────── */

.perfrig-comments-wrap .comment-author img {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 2px solid rgba(6,215,246,0.20);
    display: block;
}

/* Avatar wrapper keeps the image from stretching */
.perfrig-comments-wrap .comment-body {
    display: flex;
    gap: 14px;
    width: 100%;
}

.perfrig-comments-wrap .comment-body > .comment-author {
    flex-shrink: 0;
}

/* Right column: meta + content + reply */
.perfrig-comments-wrap .comment-body > :not(.comment-author):not(img) {
    flex: 1;
    min-width: 0;
}

/* ── Author name ──────────────────────────────── */

.perfrig-comments-wrap .comment-author .fn {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

.perfrig-comments-wrap .comment-author .fn a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.perfrig-comments-wrap .comment-author .fn a:hover {
    color: var(--primary);
}

.perfrig-comments-wrap .comment-author .says {
    display: none; /* hide the "says:" label */
}

/* ── Comment meta layout ──────────────────────── */

.perfrig-comments-wrap .comment-meta {
    margin-bottom: 8px;
}

.perfrig-comments-wrap .comment-metadata {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.perfrig-comments-wrap .comment-metadata a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.perfrig-comments-wrap .comment-metadata a:hover {
    color: var(--primary);
}

/* ── Awaiting moderation notice ───────────────── */

.perfrig-comments-wrap .comment-awaiting-moderation {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: #f59e0b;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.18);
    border-radius: 999px;
}

/* ── Comment text ─────────────────────────────── */

.perfrig-comments-wrap .comment-content {
    color: #D6D6D9;
    font-size: 15px;
    line-height: 1.65;
}

.perfrig-comments-wrap .comment-content p {
    margin: 0 0 8px;
}

.perfrig-comments-wrap .comment-content p:last-child {
    margin-bottom: 0;
}

/* ── Reply link ───────────────────────────────── */

.perfrig-comments-wrap .reply {
    margin-top: 8px;
}

.perfrig-comments-wrap .reply a,
.perfrig-comments-wrap .reply a.comment-reply-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: opacity 0.2s ease;
}

.perfrig-comments-wrap .reply a:hover {
    opacity: 0.75;
}

/* ── No-comments message ──────────────────────── */

.perfrig-comments-wrap .no-comments {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0 0 20px;
}

/* ── Comment respond / form area ──────────────── */

.perfrig-comments-wrap .comment-respond {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.perfrig-comments-wrap .comment-reply-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
}

/* Small "cancel reply" link beside the title */
.perfrig-comments-wrap .comment-reply-title small {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 400;
}

.perfrig-comments-wrap .comment-reply-title small a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.perfrig-comments-wrap .comment-reply-title small a:hover {
    color: var(--primary);
}

/* ── Form notes / labels ──────────────────────── */

.perfrig-comments-wrap .comment-notes,
.perfrig-comments-wrap .comment-form label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

/* ── Form fields ──────────────────────────────── */

.perfrig-comments-wrap .comment-form input[type="text"],
.perfrig-comments-wrap .comment-form input[type="email"],
.perfrig-comments-wrap .comment-form input[type="url"],
.perfrig-comments-wrap .comment-form textarea {
    width: 100%;
    background: #0f0f12;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 14px;
    color: #fff;
    font-size: 14px;
    font-family: var(--font-body);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
}

.perfrig-comments-wrap .comment-form textarea {
    min-height: 130px;
    resize: vertical;
}

/* ── Focus states ─────────────────────────────── */

.perfrig-comments-wrap .comment-form input[type="text"]:focus,
.perfrig-comments-wrap .comment-form input[type="email"]:focus,
.perfrig-comments-wrap .comment-form input[type="url"]:focus,
.perfrig-comments-wrap .comment-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(6,215,246,0.10);
}

/* ── Field rows (WP wraps each field in a <p>) ── */

.perfrig-comments-wrap .comment-form p {
    margin: 0 0 14px;
}

.perfrig-comments-wrap .comment-form p:last-child {
    margin-bottom: 0;
}

/* ── Submit button ────────────────────────────── */

.perfrig-comments-wrap .comment-form input[type="submit"],
.perfrig-comments-wrap .comment-form .submit {
    width: auto;
    background: var(--primary);
    color: #000;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 10px 24px;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: opacity 0.2s ease, transform 0.15s ease;
    appearance: none;
}

.perfrig-comments-wrap .comment-form input[type="submit"]:hover,
.perfrig-comments-wrap .comment-form .submit:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* ── Cookie consent checkbox (WP adds this) ───── */

.perfrig-comments-wrap .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.perfrig-comments-wrap .comment-form-cookies-consent input[type="checkbox"] {
    width: auto;
    margin-top: 2px;
    flex-shrink: 0;
}

.perfrig-comments-wrap .comment-form-cookies-consent label {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    cursor: pointer;
}

/* ── Logged-in note ───────────────────────────── */

.perfrig-comments-wrap .logged-in-as {
    font-size: 13px;
    color: #888;
    margin-bottom: 14px;
}

.perfrig-comments-wrap .logged-in-as a {
    color: var(--primary);
    text-decoration: none;
}

/* ── Required field marker ────────────────────── */

.perfrig-comments-wrap .required-field-message {
    font-size: 12px;
    color: #888;
    margin-bottom: 14px;
}

.perfrig-comments-wrap .required {
    color: #ff6b6b;
    margin-left: 2px;
}

/* ── Pagination (threaded comments navigation) ── */

.perfrig-comments-wrap .comment-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 13px;
}

.perfrig-comments-wrap .comment-navigation a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.perfrig-comments-wrap .comment-navigation a:hover {
    opacity: 0.75;
}

/* ── Responsive ───────────────────────────────── */

@media (max-width: 600px) {
    .perfrig-comments-wrap .comments-area {
        padding: 16px;
    }

    .perfrig-comments-wrap .comment-list .children {
        margin-left: 16px;
        padding-left: 12px;
    }

    .perfrig-comments-wrap .comment-body {
        gap: 10px;
    }

    .perfrig-comments-wrap .comment-author img {
        width: 34px;
        height: 34px;
    }
}