/* =========================================
     PART 1: HERO SOCIAL ICONS & ALIGNMENT
     ========================================= */
     #hero a.btn.social-icon {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

    /* 1. KILL THE CIRCLE SHAPE */
    border-radius: 0 !important;

    margin-top: 3rem !important;
    margin-right: 15px !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    text-decoration: none !important;
    position: relative !important;

    /* 2. ALIGNMENT CONTAINER */
    display: inline-flex !important;
    align-items: center !important;
    height: 42px !important;
    vertical-align: middle !important;
}

#hero a.btn.social-icon img {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    display: block !important;

    /* 3. REMOVE MARGIN & MOVE LOWER */
    margin-top: 0 !important;
    /* Adjust this number (e.g., 4px or 5px) to move them even lower */
    transform: translateY(3px) !important;

    transition: transform 0.2s ease-in-out !important;
    filter: invert(36%) sepia(85%) saturate(3000%) hue-rotate(205deg) brightness(90%) contrast(110%) !important;
}

/* 4. UPDATE HOVER TO KEEP THE LOWER POSITION */
#hero a.btn.social-icon:hover img {
    transform: translateY(3px) scale(1.2) !important;
}

.dark #hero a.btn.social-icon img,
[data-theme="dark"] #hero a.btn.social-icon img {
    filter: brightness(0) invert(1) !important;
}
  /* =========================================
     PART 2: TOOLTIPS (BLACK BOX)
     ========================================= */
  #hero a.btn.social-icon::after {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translate(-50%, -5px);
      background-color: #000000 !important;
      color: #ffffff !important;
      padding: 6px 8px !important;
      border-radius: 4px !important;
      box-shadow: 0px 4px 8px rgba(0,0,0,0.3) !important;
      font-size: 12px;
      line-height: 1 !important;
      font-family: sans-serif !important;
      font-weight: 600;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease;
      z-index: 999;
      pointer-events: none;
  }

  #hero a[href*="github.com"]::after { content: "GitHub"; }
  #hero a[href*="linkedin.com"]::after { content: "LinkedIn"; }
  #hero a[href*="medium.com"]::after { content: "Medium"; }
  #hero a[href*="mailto:"]::after { content: "Email"; }
  #hero a[href*="t.me"]::after { content: "Telegram"; }
  #hero a[href*="blog"]::after { content: "Blog"; }

  #hero a.btn.social-icon:hover::after {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -12px); /* Slight slide up */
  }

/* =========================================
   PART 3: GLOBAL CARD STYLING & FOOTER
   ========================================= */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

#list-page .card-body, #recent-posts .card-body {
    padding: 1.25rem !important;
}

/* --- LIGHT THEME (Default) --- */

/* Header Black (#222222) */
#recent-posts .card .card-body h5.card-title a,
#list-page .card .card-body h5.card-title a {
    font-size: 20px !important;
    color: #007bff !important;
    text-decoration: none !important;
}

/* Description Blue (#0d6efd) */
html body .card .card-body .card-text p {
    color: #222222 !important;
}


/* --- DARK THEME OVERRIDES --- */

/* Everything White (#ffffff) */
html[data-theme="dark"] #recent-posts .card .card-body h5.card-title a,
html[data-theme="dark"] #list-page .card .card-body h5.card-title a,
html[data-theme="dark"] .card .card-body .card-text p,
.dark #recent-posts .card .card-body h5.card-title a,
.dark #list-page .card .card-body h5.card-title a,
.dark .card .card-body .card-text p {
    color: #ffffff !important;
}


/* --- FOOTER RESET --- */
#recent-posts .card-footer, #list-page .card-footer {
    border-top: none !important;
    border: 0 !important;
    padding-top: 0 !important;
    background-color: transparent !important;
}

/* =========================================
   NATURAL METADATA (DATE & READ TIME)
   ========================================= */

body .card-date,
body .card-reading-time,
body .post-date,
body .post-meta,
body [class*="card-date"],
body [class*="reading-time"] {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #475569 !important; /* Deep Slate */
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Dark Theme Override */
html[data-theme="dark"] body .card-date,
html[data-theme="dark"] body .card-reading-time,
html[data-theme="dark"] body .post-date,
html[data-theme="dark"] body [class*="card-date"],
html[data-theme="dark"] body [class*="reading-time"],
.dark body .card-date,
.dark body .card-reading-time {
    color: #a7afb8 !important; /* Bright Slate White */
}

/* 3. Force Icon visibility */
.card-reading-time svg,
[class*="reading-time"] svg {
    fill: currentColor !important;
    width: 12px !important;
}

/* --- Fix: Read More Color (Light/Dark Mode) --- */
/* .card-footer span.text-primary,
.card-footer a.text-primary {
    color: #0d6efd !important;
    font-weight: 500;
}

html[data-theme="dark"] .card-footer span.text-primary,
html[data-theme="dark"] .card-footer a.text-primary,
.dark .card-footer span.text-primary,
.dark .card-footer a.text-primary {
    color: #ffffff !important;
}

html[data-theme="dark"] .card-date,
.dark .card-date {
    color: #ffffff !important;
}

#recent-posts .card-footer a.text-info {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    outline: none !important;
} */

/* ==============================
   PART 4: VIEW ALL POSTS BUTTON
   ============================== */
#recent-posts .btn-view-all {
    transition: all 0.3s ease-in-out !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;

    /* SHRUNK SIDES */
    padding: 6px 12px !important;

    /* THIN TEXT */
    font-weight: 300 !important;
    font-size: 15px !important;

    border-radius: 8px !important;
    width: auto !important;
    min-width: 0 !important;
}

/* --- Light Theme Style (White BG + Blue Outline) --- */
#recent-posts .btn-view-all {
    background-color: #ffffff !important;
    border: 1px solid #007bff !important;
    color: #000000 !important;
}

/* --- Dark Theme Style (Dark/Transparent BG + White Outline) --- */
html[data-theme="dark"] #recent-posts .btn-view-all,
.dark #recent-posts .btn-view-all {
    background-color: transparent !important; /* Matches 'Mail me' on dark */
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

/* --- Hover States --- */
#recent-posts .btn-view-all:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] #recent-posts .btn-view-all:hover,
.dark #recent-posts .btn-view-all:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

  /* =========================================
     PART 5: FOOTER STATUS INDICATOR
     ========================================= */
  .status-dot {
      display: inline-block;
      width: 12px;
      height: 12px;
      background-color: #00c853;
      border-radius: 50%;
      animation: status-pulse 1s infinite;
  }

  @keyframes status-pulse {
      0% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.8); }
      70% { box-shadow: 0 0 0 8px rgba(46, 160, 67, 0); }
      100% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0); }
  }

  .status-text {
      color: #00c853 !important;
      font-family: 'JetBrains Mono', monospace !important;
      white-space: nowrap;
      font-size: 0.9em;
      font-weight: 500;
  }

  /* =========================================
   PART 6: RESUME BUTTON SLIMMING
   ========================================= */

#hero .btn-outline-primary,
#hero a[href*="resume"],
#hero .btn {
    /* Reduce horizontal padding to shrink from sides */
    padding-left: 12px !important;
    padding-right: 12px !important;

    /* Ensure no minimum width is forcing it to be wide */
    min-width: 0 !important;
    width: auto !important;

    /* Keeps it aligned with your 42px icons */
    height: 42px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* padding-bottom: 2px !important; */
}

/* =========================================
   Part 7: STIKCY FOOTER FIX
   ========================================= */

/* Ensure the body takes up the full height of the browser */
html, body {
    height: 100%;
}

/* Use Flexbox on the main container to push the footer down */
body {
    display: flex;
    flex-direction: column;
}

/* This targets the main content area (usually 'main' or 'div' before footer) */
main, #content, .main-content {
    flex: 1 0 auto;
}

/* Prevents the footer from shrinking */
footer {
    flex-shrink: 0;
}

/* =========================================
   Part 8: Supabase likes
   ========================================= */

:root {
    --heart-grey: #8899a6;
    --heart-cherry: #D2042D;
}

/* Dark Mode Theme Overrides */
body.dark {
    --heart-grey: #657786;
}

.bluesky-heart-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 25px 0;
    position: relative;
    z-index: 10;
}

#like-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important; /* Removed padding to tighten the layout */
    cursor: pointer !important;
    outline: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease;
}


#like-btn:hover {
    transform: scale(1.2);
}

.icon-stack {
    position: relative;
    width: 24px;
    height: 24px;
    display: block;
}

.icon-stack svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 24px !important;
    height: 24px !important;
    transition: all 0.2s ease !important;
    pointer-events: none;
}

.heart-outline {
    color: var(--heart-grey) !important;
    opacity: 1 !important;
    z-index: 2;
}

.heart-filled {
    color: var(--heart-cherry) !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0) !important;
    z-index: 3;
    filter: drop-shadow(0 0 2px rgba(210, 4, 45, 0.3));
}

/* --- THE EXPLOSION --- */
.particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow:
        0 -18px 0 0 var(--heart-cherry), 13px -13px 0 0 var(--heart-cherry),
        18px 0 0 0 var(--heart-cherry), 13px 13px 0 0 var(--heart-cherry),
        0 18px 0 0 var(--heart-cherry), -13px 13px 0 0 var(--heart-cherry),
        -18px 0 0 0 var(--heart-cherry), -13px -13px 0 0 var(--heart-cherry);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* --- ANIMATION TRIGGERS --- */
.liked .heart-outline {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.5) !important;
}

.liked .heart-filled {
    opacity: 1 !important;
    animation: heart-bounce-svg 0.45s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards !important;
}

.liked .particles {
    animation: particle-burst 0.45s ease-out forwards;
}

@keyframes heart-bounce-svg {
    0% { transform: translate(-50%, -50%) scale(0); }
    50% { transform: translate(-50%, -50%) scale(1.4); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes particle-burst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

#like-count {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--heart-grey);
    font-size: 18px;
    line-height: 1;
}

.liked #like-count {
    color: var(--heart-cherry);
}

/* --- Refined "Micro-Shake" (Subtle & Clean) --- */
.shake-animation {
    animation: micro-shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes micro-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
}

/* Optional: Add a 'not-allowed' cursor when already liked */
.liked #like-btn {
    cursor: default !important;
}


/* ===========================
   Part 10 - Modern Pill Tabs
   =========================== */
.topic-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 0;
}

.tab-button {
    background: #f8f9fa;
    border: 2px solid transparent;
    /* Text is always Black in Light Mode */
    color: #000000 !important;
    padding: 8px 22px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
}

/* --- Active State (Light Mode) --- */
.tab-button.active {
    background-color: #ffffff !important;
    color: #000000 !important;       /* Stays Black */
    border-color: #007bff !important; /* Only the border turns Blue */
    box-shadow: none !important;
}

/* --- Hover State (Light Mode) --- */
.tab-button:hover:not(.active) {
    color: #000000 !important;       /* Stays Black on hover */
    background-color: rgba(0, 0, 0, 0.05); /* Subtle gray hover instead of blue */
}

/* --- Dark Mode Overrides --- */
html[data-theme="dark"] .tab-button,
.dark .tab-button {
    background: #2d2d2d;
    /* Text is always White in Dark Mode */
    color: #ffffff !important;
    border-color: transparent;
}

html[data-theme="dark"] .tab-button.active,
.dark .tab-button.active {
    background-color: #1a1a1a !important;
    color: #ffffff !important;         /* Stays White */
    border-color: #ffffff !important; /* White Outline */
    box-shadow: none !important;
}

/* Hover on Dark Mode tabs */
html[data-theme="dark"] .tab-button:hover:not(.active),
.dark .tab-button:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* =================================
   Part 11 - CENTERED PAGE COUNTER
   ================================ */
.page-count-text {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-size: 11px;
    color: #6c757d;
    letter-spacing: 0.5px;
    margin-bottom: 8px; /* Space between text and buttons */
    display: block;
}

/* Dark Mode Adaptation */
html[data-theme="dark"] .page-count-text {
    color: #999;
}

/* =========================================
   PART 12: PAGINATION - THE OVERRIDE
   ========================================= */
/* 1. This selector is designed to BEAT the list.css:73 rule */

#list-page .pagination .page-item.active .page-link,
#list-page .pagination li.active a {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important; /* Text stays black */
    border: 2px solid #007bff !important; /* Only the blue outline */
    font-weight: 500;
}
/* 2. Base state for all buttons */
#list-page .pagination .page-item .page-link,
#list-page .pagination li a {
    background: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 7px !important;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000 !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    box-sizing: border-box;
}
/* --- 3. Dark Mode - Visibility Fix --- */
/* Force all numbers to be white so they don't hide in the dark */
html[data-theme="dark"] #list-page .pagination .page-item .page-link,
.dark #list-page .pagination .page-item .page-link,
html[data-theme="dark"] #list-page .pagination li a,
.dark #list-page .pagination li a {
    color: #ffffff !important;
    background: transparent !important;
    border: 2px solid transparent !important;
}

/* The Active State (White Outline) */
html[data-theme="dark"] #list-page .pagination .page-item.active .page-link,
.dark #list-page .pagination .page-item.active .page-link {
    background: transparent !important;
    border-color: #ffffff !important; /* White Outline */
    color: #ffffff !important;         /* White Text */
    font-weight: 500;
}

/* =========================================
   Part 13 - BLOG LIST SPECIFIC (Symmetry)
   ========================================= */
.card-img-container {
    width: 100%;
    height: 140px;
    overflow: hidden;
}

.card-img-top-custom {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-title-custom {
    font-size: 1rem !important;
    font-weight: 500;
    margin-bottom: 0.5rem;

    /* Clamping Logic */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* Added standard property */
    overflow: hidden;
    height: 2.6em;
}

.card-description-custom {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0;

    /* Clamping Logic */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3; /* Added standard property */
    overflow: hidden;
    height: 4.2em;
}

/* Footer clearance for the list page */
#list-page {
    padding-bottom: 3rem !important;
}

/* Card Body spacing match */
.card-body {
    padding: 1rem !important;
}

/* =========================================
   Part 14 - Recent post SPECIFIC (Symmetry)
   ========================================= */
     /* 1. DESKTOP: Only restrict the width on large screens */
    @media (min-width: 992px) {
        #recent-posts .col-lg-4 {
            max-width: 350px; /* Your chosen card width */
        }
    }

    /* 2. MOBILE: Remove restrictions so it spans the whole area like List page */
    @media (max-width: 991px) {
        #recent-posts .col-md-6 {
            max-width: 100%;
        }
    }

    /* Common Card Styling (Matches List.html) */
    #recent-posts .card-img-container {
        width: 100%;
        overflow: hidden;
    }

    #recent-posts .card-img-top-custom {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    #recent-posts .card-title-custom {
        height: 2.6em;
        overflow: hidden;
    }

    #recent-posts .card-description-custom {
        height: 4.2em;
        overflow: hidden;
    }

  /* =====================
   Part 15 - Skill Grid
   ====================== */
.skills-grid {
    list-style: none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.skill-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative;
    font-size: 14px;
    font-family: inherit !important;
}

/* Kills the theme's default > triangles */
.skill-item::before {
    content: none !important;
    display: none !important;
}

.skill-icon-wrapper {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.skill-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================
   Part 16 - Sidebar revamp
   ========================== */

/* 1. Global Reset: Kill underlines, borders, and shadows */
#stickySideBar a,
.sidebar-section a,
.toc-content a,
.tidy-tag,
.tidy-nav-card {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 2. Section Headers */
.tidy-label {
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* 3. Tags: Text-Only */
.tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 5px 0 !important;
}

.tidy-tag {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0d6efd !important;
}

/* 4. Social Share: 15px spacing */
.social-content {
    display: flex !important;
    gap: 15px !important;
    padding: 5px 0 !important;
}

.social-content a {
    color: #0d6efd !important;
    font-size: 18px !important;
}

/* 5. Nav Cards: Blended with Background */
.sidebar-section {
    margin-bottom: 12px !important;
}

.tidy-nav-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tidy-nav-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 0 !important; /* No side padding so it aligns with headers */
    background-color: transparent !important; /* Removes the "box" look */
    color: #1e293b !important;
    border: none !important;
    min-height: 32px !important;
}

/* FORCE BLUE CHEVRON (Stays blue in both themes as requested) */
.tidy-nav-card i.fas,
.tidy-nav-card i.fab,
.tidy-nav-card .fa-chevron-left,
.tidy-nav-card .fa-chevron-right {
    color: #0d6efd !important;
}

.truncate-title {
    flex: 1;
    font-size: 13px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- DARK MODE SPECIFIC FIXES --- */

html[data-theme="dark"] .tidy-label,
body.dark .tidy-label {
    color: #ffffff !important;
}

/* Transparent background for dark mode nav */
html[data-theme="dark"] .tidy-nav-card,
body.dark .tidy-nav-card {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

/* Social Icons, TOC, and Tags to White in Dark Mode */
html[data-theme="dark"] .social-content a,
body.dark .social-content a,
html[data-theme="dark"] .toc-content a,
body.dark .toc-content a,
html[data-theme="dark"] .tidy-tag,
body.dark .tidy-tag {
    color: #ffffff !important;
}

    html {
        background-color: var(--background-color) !important;
    }

    body::-webkit-scrollbar {
        height: 0px;
        width: 8px;
        background-color: var(--background-color);
    }

    ::-webkit-scrollbar-track {
        border-radius: 1rem;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 1rem;
        background: #b0b0b0;
        outline: 1px solid var(--background-color);
    }

    #search-content::-webkit-scrollbar {
        width: .5em;
        height: .1em;
        background-color: var(--background-color);
    }

    /*--Move inline CSS from head.html--*/

/* ========================================= */
/* 2. TECH-INSPIRED DOTTED STATUS BACKGROUND */
/* ========================================= */

.tech-footer-bg {
    position: relative;

    /* 1. BREAK OUT OF CONTAINER TO SPAN FULL SCREEN */
    width: 100vw;
    margin-left: calc(-50vw + 50%);

    /* 2. PADDING ADJUSTMENTS */
    padding-bottom: 0px !important; /* Anchors the text directly to the bottom */
    z-index: 1;
}

.tech-footer-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    background-size: 11px 11px;

    /* Default: Dark dots for Light Mode */
    background-image: radial-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 1px);

    /* 3. PRECISION TOP-TO-BOTTOM FADE */
    /* 0% to 50%: Stays completely transparent (Hides dots behind Avatar/Copyright)
       50% to 85%: Smoothly fades in (Starts around "Made with")
       85% to 100%: Completely solid dots at the bottom
    */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 50%, black 85%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 50%, black 85%, black 100%);
}

/* Dark Mode Override: White dots */
body.dark .tech-footer-bg::before,
html.dark .tech-footer-bg::before,
[data-theme="dark"] .tech-footer-bg::before,
[data-bs-theme="dark"] .tech-footer-bg::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) !important;
}

/* ========================================= */
/*           Lightbox image popup */
/* ========================================= */

.lightbox {
position: fixed;
inset: 0;
z-index: 9999;

display: flex;
justify-content: center;
align-items: center;

background: rgba(0, 0, 0, 0.9);

opacity: 0;
visibility: hidden;

transition:
opacity 0.45s ease,
visibility 0.45s ease;
}

.lightbox.active {
opacity: 1;
visibility: visible;
}

.lightbox img {
max-width: 95vw;
max-height: 90vh;
object-fit: contain;

opacity: 0;
transform: scale(0.75);

will-change: transform, opacity;
backface-visibility: hidden;

transition:
opacity 0.75s ease,
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox.active img {
opacity: 1;
transform: scale(1);
}

.lightbox-close {
position: absolute;
top: 20px;
right: 25px;

width: 32px;
height: 32px;

display: flex;
align-items: center;
justify-content: center;

border: none;
border-radius: 50%;

background: rgba(0, 0, 0, 0.55);

color: #fff;
font-size: 2.2rem;
line-height: 1;

cursor: pointer;

transition:
opacity 0.2s ease,
background 0.2s ease;
}

.lightbox-close:hover {
background: rgba(0, 0, 0, 0.75);
}


.lightbox-trigger {
text-decoration: none !important;
}

.lightbox-trigger:hover {
text-decoration: none !important;
}

.lightbox-trigger img {
cursor: zoom-in;
border: none;
}

.lightbox-trigger::after,
.lightbox-trigger:hover::after {
display: none !important;
content: none !important;
}

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

.toc-content {
  max-height: 60vh;
  /* max-height: calc(100vh - 300px); */
  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 0.5rem;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.6) transparent;
}

/* Chrome, Edge, Safari */
.toc-content::-webkit-scrollbar {
  width: 6px;
}

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

.toc-content::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.6);
  border-radius: 999px;
  transition: background 0.2s ease;
}

.toc-content::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.9);
}