/* ==========================================================
   Blogger v1 - Core Web Vitals Optimized CSS
   ========================================================== */

/* 1. CSS Variables for Theme Consistency */
:root {
    --brand-bg: #ffffff;
    --brand-text: #000000;
    --brand-neon: #22E6E1;
    --brand-neon-dark: #15bdb8;
    --brand-card: #ffffff;
    --brand-border: #e5e7eb;
}

/* 2. Base Resets & Performance Tweaks */
html {
    scroll-behavior: smooth;
    text-size-adjust: 100%; /* Prevent font scaling issues on mobile rotation */
}

body {
    -webkit-tap-highlight-color: transparent;
    background-color: var(--brand-bg);
    color: var(--brand-text);
    /* System fonts fallback for instant loading before Google Fonts load (Reduces LCP/FOUT) */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
    
    /* Prevent CLS when scrollbar appears on longer pages */
    scrollbar-gutter: stable; 
}

/* 3. ZERO CLS (Cumulative Layout Shift) Rules */

/* Image constraints */
img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Placeholder background color if image link fails or loads slow */
    background-color: #f3f4f6; 
}

/* Image Wrapper: Ye sabse important hai CLS rokne k liye. 
   Ye image load hone se pehle hi 16:9 ratio ka box bana dega */
.aspect-video-wrapper {
    aspect-ratio: 16 / 9;
    background-color: #f3f4f6; 
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 0.5rem; /* Tailwind 'rounded-lg' equivalent */
}

.aspect-video-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* 4. Accessibility & Clean UI */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Webkit Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f8fafc;
}
::-webkit-scrollbar-thumb {
    background: var(--brand-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-neon-dark);
}

/* Text Truncation for Blog Cards (Standardized line heights prevent shift) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    min-height: 3em; /* Reserve exact space for 2 lines */
}

/* 5. GPU Accelerated Animations (60fps Smoothness without repaints) */
.hover-neon {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow; /* Tells browser to use GPU */
}
.hover-neon:hover {
    box-shadow: 0 4px 14px 0 rgba(34, 230, 225, 0.3);
    border-color: var(--brand-neon);
    transform: translateY(-2px);
}

/* Sidebar transitions optimized */
#mobile-sidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
#sidebar-overlay {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}
.sidebar-open {
    overflow: hidden;
}