/* style.css - ALL IMPORTANT VERSION */

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/open-sans-v44-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* --- 1. VARIABLES & RESET --- */
:root {
    --primary-purple: #5b329a;
    --primary-blue: #337ab7;
    --primary-orange: #f79321;
    --bg-light: #f9f9f9;
    --text-dark: #333;
    --text-grey: #555;
    --box-purple-bg: #f8f4ff;
    --border-color: #ddd;
    --code-bg: #f1f1f1;
}

* {
    box-sizing: border-box !important;
}

html {
    scroll-behavior: smooth !important;
}

body {
    font-family: 'Open Sans', sans-serif !important;
    margin: 0 !important;
    background-color: var(--bg-light) !important;
    color: var(--text-dark) !important;
    line-height: 1.6 !important;
}

body, p, h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif !important;
}

a {
    color: var(--primary-blue) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

a:hover {
    color: var(--primary-purple) !important;
}

/* --- ARTICLE LIST STYLING --- */

/* --- CUSTOM BULLET POINTS (::before method) --- */

/* 1. Target LI elements inside the article body only */
body .content-wrapper main.article-body ul li {
    list-style-type: none !important;  /* Remove default browser bullets */
    position: relative !important;     /* Creates a container for the custom bullet */
    padding-left: 15px !important;     /* Make space for the bullet so text doesn't overlap */
    display: block !important;         /* Ensures proper alignment */
}

/* 2. Insert the "•" symbol manually */
body .content-wrapper main.article-body ul li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: var(--text-grey) !important;
    font-size: 2em !important;
    line-height: 1 !important;
}


/* --- 2. HERO HEADER SECTION --- */
header.hero {
    background-color: #1a1a2e !important;
    padding: 140px 20px !important;
    color: white !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    height: 100% !important;
    text-align: left !important;
}

/* Curved Line / Bubble Effect */
header.hero::after {
    content: '' !important;
    position: absolute !important;
    top: -20% !important;
    right: -10% !important;
    bottom: auto !important;
    width: 45% !important;
    padding-bottom: 45% !important;
    background: #e94560 !important;
    border-radius: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
}

.hero-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
}

header.hero h1 {
    font-size: 5.5rem !important;
    margin: 0 0 30px 0 !important;
    font-weight: 700 !important;
    max-width: 800px !important;
    line-height: 1.1 !important;
    color: white !important;
}

.l-left_icon {
    width: 19% !important;
}

.meta-info {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.author-block {
    display: flex !important;
    align-items: center !important;
}

.author-block img {
    width: 65px !important;
    height: 65px !important;
    border-radius: 50% !important;
    margin-right: 15px !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    object-fit: scale-down !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.author-details h4 {
    margin: 0 !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.author-details span {
    font-size: 1.4rem !important;
    opacity: 0.85 !important;
    color: #eee !important;
}

.date-read-time {
    font-size: 1.4rem !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding-left: 20px !important;
    color: #ddd !important;
}

/* --- 3. MAIN LAYOUT WRAPPER --- */
.content-wrapper {
    display: flex !important;
    max-width: 1300px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    gap: 40px !important;
    align-items: flex-start !important;
    background: transparent !important;
}

/* Main Article Column */
main.article-body {
    flex: 1 !important;
    min-width: 0 !important;
}

/* --- 4. TYPOGRAPHY (Headings & Text) --- */
/* Note: Added .article-body prefix to ensure these don't break your site footer/menu */

.article-body h2 {
    font-size: 2.8rem !important;
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    color: #000 !important;
    scroll-margin-top: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.article-body h3 {
    font-size: 2rem !important;
    margin-top: 30px !important;
    color: #222 !important;
    margin-bottom: 15px !important;
    font-weight: 600 !important;
}

.article-body p {
    margin-bottom: 20px !important;
    font-size: 1.6rem !important;
    color: #2c2c2c !important;
    line-height: 1.7 !important;
}

/* --- 5. LEFT SIDEBAR (Table of Contents) --- */
aside.toc-sidebar {
    flex: 0 0 220px !important;
    position: sticky !important;
    top: 20px !important;
}

.toc-sidebar h3 {
    font-size: 1.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
    color: var(--text-dark) !important;
}

.toc-sidebar ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-left: 2px solid var(--border-color) !important;
}

.toc-sidebar li {
    margin-bottom: 0 !important;
}

.toc-sidebar a {
    text-decoration: none !important;
    color: var(--text-grey) !important;
    font-size: 1.4rem !important;
    display: block !important;
    padding: 8px 0 8px 15px !important;
    transition: color 0.2s, border-left 0.2s !important;
    position: relative !important;
    left: -2px !important;
}

.toc-sidebar a:hover,
.toc-sidebar a.active {
    color: var(--primary-purple) !important;
    border-left: 2px solid var(--primary-purple) !important;
    font-weight: 600 !important;
    background: linear-gradient(90deg, #f8f4ff 0%, transparent 100%) !important;
}

/* --- 6. RIGHT SIDEBAR (Read Next) --- */
aside.read-next-sidebar {
    flex: 0 0 280px !important;
    position: sticky !important;
    top: 20px !important;
}

.read-next-card {
    background: white !important;
    padding: 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

.read-next-card h3 {
    margin-top: 0 !important;
    font-size: 1.8rem !important;
    border-bottom: 2px solid var(--bg-light) !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
    color: #333 !important;
}

.read-next-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.read-next-item {
    margin-bottom: 25px !important;
}

.read-next-item:last-child {
    margin-bottom: 0 !important;
}

.read-next-link {
    text-decoration: none !important;
    display: block !important;
}

.read-next-link:hover h4 {
    color: var(--primary-purple) !important;
}

.read-next-link h4 {
    margin: 0 0 8px 0 !important;
    color: var(--text-dark) !important;
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    transition: color 0.2s !important;
}

.read-time {
    font-size: 1.4rem !important;
    color: #888 !important;
    display: block !important;
    margin-bottom: 5px !important;
}

.cta-arrow {
    color: var(--primary-purple) !important;
    font-weight: 700 !important;
    font-size: 1.45rem !important;
    text-transform: uppercase !important;
}

/* --- 7. CONTENT COMPONENTS --- */

/* Purple Highlight Box */
.purple-box {
    background-color: var(--box-purple-bg) !important;
    border-radius: 8px !important;
    padding: 25px !important;
    margin: 30px 0 !important;
    border: 1px solid #e0d0f5 !important;
}

.purple-box ul {
    margin: 0 !important;
    padding-left: 20px !important;
}

.purple-box li {
    margin-bottom: 10px !important;
    color: var(--text-dark) !important;
}

.purple-box li::marker {
    color: var(--primary-purple) !important;
}

/* Code Block / Snippets */
.code-block {
    background-color: var(--code-bg) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    font-family: monospace !important;
    color: #c7254e !important;
    display: block !important;
    margin-bottom: 25px !important;
    border-left: 4px solid var(--primary-purple) !important;
    white-space: pre-wrap !important;
    overflow-x: auto !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* Author Bio Box */
.author-bio-box {
    display: flex !important;
    align-items: flex-start !important;
    background-color: var(--box-purple-bg) !important;
    padding: 25px !important;
    border-radius: 12px !important;
    margin-top: 50px !important;
    border: 1px solid #e0d0f5 !important;
}

.author-bio-box img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    margin-right: 20px !important;
}

.author-bio-text p {
    font-size: 1.5rem !important;
    margin: 0 !important;
    font-style: italic !important;
    color: #555 !important;
}
body .content-wrapper main.article-body .purple-box ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

body .content-wrapper main.article-body .purple-box li {
    position: relative !important;
    padding-left: 15px !important;
    margin-bottom: 10px !important;
}

body .content-wrapper main.article-body .purple-box li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: var(--primary-purple) !important;
    font-size: 2em !important;
    line-height: 1 !important;
}

.topnav_thin a {
    color: #fff !important;
}

/* --- 8. RESPONSIVE MEDIA QUERIES --- */

/* Tablet & Smaller Laptops */
@media (max-width: 1024px) {
    .content-wrapper {
        flex-wrap: wrap !important;
        gap: 30px !important;
    }

    aside.toc-sidebar {
        flex: 100% !important;
        position: static !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
    }

    .toc-sidebar ul {
        border-left: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }

    .toc-sidebar a {
        background: #fff !important;
        padding: 10px 15px !important;
        border-radius: 20px !important;
        border: 1px solid #eee !important;
        left: 0 !important;
    }

    main.article-body {
        flex: 0 0 60% !important;
    }

    aside.read-next-sidebar {
        flex: 1 !important;
        min-width: 250px !important;
    }
}

/* Mobile Phones */
@media (max-width: 768px) {
    header.hero {
        padding: 80px 20px !important;
    }

    header.hero::after {
        width: 70% !important;
        padding-bottom: 70% !important;
        top: -30% !important;
        right: -30% !important;
    }

    header.hero h1 {
        font-size: 2rem !important;
    }

    .meta-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .date-read-time {
        border-left: none !important;
        padding-left: 0 !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .content-wrapper {
        flex-direction: column !important;
        padding: 0 15px !important;
    }

    main.article-body {
        order: 1 !important;
        width: 100% !important;
        flex: auto !important;
    }

    aside.read-next-sidebar {
        order: 2 !important;
        width: 100% !important;
        flex: auto !important;
        position: static !important;
    }

    aside.toc-sidebar {
        order: 3 !important;
        width: 100% !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    /* Hide the Table of Contents sidebar on mobile [cite: 120] */
    aside.toc-sidebar {
        display: none !important;
    }

    /* Rest of your existing mobile styles */
    header.hero {
        padding: 80px 20px !important;
    }
    
    .content-wrapper {
        flex-direction: column !important;
        padding: 0 15px !important;
    }

    main.article-body {
        width: 100% !important;
    }
}

/* --- 1. CONTENT WRAPPER (Strict Layout Locking) --- */
body .content-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 1300px !important;
    margin: 40px auto !important;
    min-height: 100vh !important;
    
    /* Performance: Prevents layout recalculations from rippling out */
    contain: layout style !important; 
}

/* --- 2. SIDEBAR (Static & Instant) --- */
body .content-wrapper aside.toc-sidebar {
    /* 1. Strict Dimensions (Prevents Layout Shift) */
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    
    /* 2. Instant Rendering (Fixes Speed Index 77 -> 90+) */
    display: block !important;
    opacity: 1 !important;    /* Always visible */
    transform: none !important; /* No movement */
    animation: none !important; /* No waiting */
    
    /* 3. Rendering Optimization */
    /* Tells browser: "This box is static, don't repaint it constantly" */
    contain: content !important; 
    will-change: auto !important;
}

/* --- 3. MAIN ARTICLE (Prevent Text Reflow) --- */
body .content-wrapper main.article-body {
    flex: 1 1 auto !important;
    width: calc(100% - 260px) !important;
    min-width: 0 !important;
    
    /* Performance: Isolate main content painting */
    contain: layout paint !important; 
}

/* --- 4. MOBILE RESET --- */
@media (max-width: 768px) {
    body .content-wrapper {
        display: block !important;
    }
    body .content-wrapper aside.toc-sidebar {
        display: none !important; /* Hidden on mobile */
    }
    body .content-wrapper main.article-body {
        width: 100% !important;
    }
}

/* Optimized CSS Animation for Performance */
.animate {
    opacity: 0;
    transform: translateY(10px) !important;
    animation: fadeInUp 0.8s ease-out 1s forwards !important;
    /* This tells the browser to optimize the layer before it moves */
    will-change: opacity, transform !important; 
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}