/*
 * Theme Name: FusionDev
 * Theme URI: https://fusiondev.me
 * Author: Alonso Vazquez
 * Description: Minimalist theme for a programming blog.
 * Version: 1.0.0
 *
 * TABLE OF CONTENTS
 *
 *  1. CSS Custom Properties
 *  2. Reset
 *  3. Base
 *  4. Accessibility
 *  5. Navigation
 *  6. Mobile Menu
 *  7. Hero
 *  8. Buttons
 *  9. Skills
 * 10. Avatar
 * 11. Post List
 * 12. Single Post
 * 13. Portfolio
 * 14. GitHub Repos
 * 15. Contact Form
 * 16. About / Timeline
 * 17. Certifications
 * 18. 404
 * 19. Footer
 * 20. Code Blocks
 * 21. Prism Overrides
 * 22. Animations
 * 23. Responsive
 */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================================= */

:root,
[data-theme="light"] {
    --ff-mono:     'IBM Plex Mono', monospace;
    --ff-sans:     'DM Sans', sans-serif;
    --bg:          #f8f9fb;
    --bg-alt:      #eef1f7;
    --surface:     #ffffff;
    --border:      #dde2ed;
    --ink:         #16181f;
    --ink-2:       #3d4255;
    --muted:       #5c6380;
    --accent:      #2f6fd4;
    --accent-2:    #1a4fa0;
    --accent-soft: #e8eef9;
    --tag-bg:      #dce8fa;
    --tag-fg:      #1d4fa8;
    --grid-line:   rgba(47, 111, 212, 0.08);
    --code-bg:     #13151c;
    --code-border: #1e2130;
    --code-fg:     #cdd6f4;
    --code-cm:     #545c7e;
    --code-kw:     #89b4fa;
    --code-str:    #a6e3a1;
    --code-fn:     #89dceb;
    --code-num:    #fab387;
    --code-cl:     #f9e2af;
    --nav-height:  60px;
    --transition:  0.2s ease;
}

[data-theme="dark"] {
    --bg:          #0f1117;
    --bg-alt:      #161820;
    --surface:     #1a1d27;
    --border:      #252836;
    --ink:         #e2e4ed;
    --ink-2:       #a8adc4;
    --muted:       #6b7194;
    --accent:      #5b9cf6;
    --accent-2:    #3d7de8;
    --accent-soft: #1a2640;
    --tag-bg:      #1a2a45;
    --tag-fg:      #7ab3f8;
    --grid-line:   rgba(91, 156, 246, 0.07);
    --code-bg:     #0d0f16;
    --code-border: #1a1d2a;
}


/* =============================================================================
   2. RESET
   ============================================================================= */

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


/* =============================================================================
   3. BASE
   ============================================================================= */

html { scroll-behavior: smooth; }

body {
    background:     var(--bg);
    color:          var(--ink);
    font-family:    var(--ff-sans);
    font-size:      15px;
    line-height:    1.7;
    transition:     background var(--transition), color var(--transition);
    width:          100%;
    max-width:      none;
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

#main-content {
    flex:    1;
    display: block;
    width:   100%;
}

.section {
    max-width: 820px;
    margin:    0 auto;
    padding:   4rem 2.5rem;
}

.section + .section { border-top: 1px solid var(--border); }

.section h1 { font-weight: 500; }

.section-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   2rem;
}

.section-head h2 {
    font-size:      1.05rem;
    font-weight:    600;
    letter-spacing: -0.01em;
    color:          var(--ink);
}

.section-head a {
    font-family:     var(--ff-mono);
    font-size:       11px;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    text-decoration: none;
    color:           var(--accent);
}

.section-icon-heading {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.section-icon {
    color:       var(--accent);
    flex-shrink: 0;
}


/* =============================================================================
   4. ACCESSIBILITY
   ============================================================================= */

.skip-link {
    position:        absolute;
    top:             -100%;
    left:            1rem;
    background:      var(--accent);
    color:           #fff;
    padding:         8px 16px;
    border-radius:   0 0 6px 6px;
    font-size:       13px;
    font-weight:     500;
    text-decoration: none;
    z-index:         999;
    transition:      top 0.2s;
}

.skip-link:focus { top: 0; }


/* =============================================================================
   5. NAVIGATION
   ============================================================================= */

.site-nav {
    position:        sticky;
    top:             0;
    z-index:         200;
    height:          var(--nav-height);
    background:      var(--bg);
    border-bottom:   1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-inline:  2rem;
    width:           100%;
    transition:      background var(--transition), border-color var(--transition);
}

.nav-logo {
    font-family:     var(--ff-mono);
    font-weight:     600;
    font-size:       14px;
    text-decoration: none;
    color:           var(--ink);
    letter-spacing:  -0.01em;
    display:         flex;
    align-items:     center;
    gap:             7px;
    transition: color var(--transition);
}

.nav-logo:hover { color: var(--accent); }

.nav-logo:hover .dot { color: var(--ink); }

.nav-logo .dot  { color: var(--accent); }

.nav-logo-icon {
    color:       var(--accent);
    flex-shrink: 0;
}

.nav-right {
    display:     flex;
    align-items: center;
    gap:         2rem;
}

.nav-links {
    display:    flex;
    gap:        2rem;
    list-style: none;
    margin:     0;
    padding:    0;
}

.nav-links a {
    font-size:       13px;
    font-weight:     400;
    text-decoration: none;
    color:           var(--muted);
    transition:      color var(--transition);
}

.nav-links a:hover,
.nav-links .current-menu-item a {
    color:       var(--ink);
    font-weight: 500;
}

.nav-links li        { list-style: none; }
.nav-links li::before { display: none; }

.theme-toggle {
    background:    none;
    border:        none;
    cursor:        pointer;
    padding:       4px;
    display:       flex;
    align-items:   center;
    color:         var(--muted);
    border-radius: 6px;
    transition:    color var(--transition), background var(--transition);
}

.theme-toggle:hover {
    color:      var(--ink);
    background: var(--bg-alt);
}

.theme-toggle svg {
    width:      18px;
    height:     18px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover svg { transform: rotate(20deg); }

.icon-sun,
.icon-moon                      { display: none; }
[data-theme="light"] .icon-sun  { display: block; }
[data-theme="dark"]  .icon-moon { display: block; }


/* =============================================================================
   6. MOBILE MENU
   ============================================================================= */

.nav-hamburger {
    display:         none;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         4px;
    color:           var(--muted);
    border-radius:   6px;
    transition:      color var(--transition), background var(--transition);
    align-items:     center;
    justify-content: center;
}

.nav-hamburger:hover {
    color:      var(--ink);
    background: var(--bg-alt);
}

.nav-hamburger .close-icon     { display: none; }
.nav-hamburger .hamburger-icon { display: block; }

.nav-hamburger[aria-expanded="true"] .close-icon     { display: block; }
.nav-hamburger[aria-expanded="true"] .hamburger-icon { display: none; }

.mobile-menu {
    position:       absolute;
    top:            var(--nav-height);
    left:           0;
    right:          0;
    background:     var(--bg);
    border-bottom:  1px solid var(--border);
    z-index:        199;
    overflow:       hidden;
    max-height:     0;
    opacity:        0;
    transition:     max-height 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.mobile-menu.is-open {
    max-height:     400px;
    opacity:        1;
    pointer-events: auto;
}

.mobile-nav-links {
    list-style: none;
    padding:    0.5rem 0;
    margin:     0;
}

.mobile-nav-links li            { border-bottom: 1px solid var(--border); }
.mobile-nav-links li:last-child { border-bottom: none; }

.mobile-nav-links a {
    display:         block;
    padding:         1rem 2rem;
    font-size:       15px;
    font-weight:     400;
    color:           var(--muted);
    text-decoration: none;
    transition:      color var(--transition), background var(--transition);
}

.mobile-nav-links a:hover,
.mobile-nav-links .current-menu-item a {
    color:      var(--ink);
    background: var(--bg-alt);
}


/* =============================================================================
   7. HERO
   ============================================================================= */

.hero-wrapper {
    position: relative;
    overflow: hidden;
    width:    100%;
}

.hero-wrapper::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size:  40px 40px;
    pointer-events:   none;
    z-index:          0;
}

.hero-wrapper::after {
    content:        '';
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    background:     linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
    z-index:        1;
}

.hero-wrapper .section {
    position: relative;
    z-index:  2;
}

.about-grid {
    display:               grid;
    grid-template-columns: 1fr 200px;
    gap:                   3rem;
    align-items:           center;
}

.available-pill {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    font-family:    var(--ff-mono);
    font-size:      10px;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color:          #16a34a;
    background:     #dcfce7;
    border:         1px solid #bbf7d0;
    padding:        4px 12px;
    border-radius:  99px;
    margin-bottom:  1.2rem;
}

[data-theme="dark"] .available-pill {
    color:        #4ade80;
    background:   #052e16;
    border-color: #166534;
}

.available-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    #16a34a;
    animation:     pulse 2s ease-in-out infinite;
    flex-shrink:   0;
}

[data-theme="dark"] .available-dot { background: #4ade80; }

.about-tag {
    font-family:    var(--ff-mono);
    font-size:      11px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  1rem;
}

.about h1 {
    font-size:      clamp(1.8rem, 4vw, 2.6rem);
    font-weight:    500;
    line-height:    1.2;
    letter-spacing: -0.02em;
    margin-bottom:  1.2rem;
    color:          var(--ink);
}

.about h1 span { color: var(--accent); }

.about-bio {
    color:         var(--ink-2);
    font-size:     15px;
    line-height:   1.8;
    margin-bottom: 1.8rem;
}

.about-hero header { max-width: 640px; }

.about-role {
    font-family:    var(--ff-mono);
    font-size:      13px;
    color:          var(--accent);
    margin-bottom:  1rem;
    letter-spacing: 0.02em;
}

.about-summary {
    font-size:     15px;
    color:         var(--ink-2);
    line-height:   1.8;
    margin-bottom: 1.8rem;
}


/* =============================================================================
   8. BUTTONS
   ============================================================================= */

.btn-row {
    display:         flex;
    gap:             0.8rem;
    flex-wrap:       wrap;
    margin-bottom:   0;
    padding-inline:  0;
    justify-content: flex-start;
    width:           fit-content;
}

.btn {
    font-family:     var(--ff-sans);
    font-size:       13px;
    font-weight:     500;
    padding:         8px 18px;
    border-radius:   6px;
    text-decoration: none;
    cursor:          pointer;
    border:          none;
    transition:      all var(--transition);
    letter-spacing:  0.01em;
    display:         inline-block;
}

.btn-primary       { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }

.btn-ghost {
    background:  transparent;
    color:       var(--ink-2);
    border:      1px solid var(--border);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color:        var(--accent);
}


/* =============================================================================
   9. SKILLS
   ============================================================================= */

.skills-row {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    margin-top: 1.5rem;
    list-style: none;
    padding:    0;
}

.skill-chip {
    font-family:   var(--ff-mono);
    font-size:     11px;
    padding:       3px 10px;
    border-radius: 4px;
    background:    var(--bg-alt);
    color:         var(--muted);
    border:        1px solid var(--border);
    transition:    all var(--transition);
}

.skill-chip:hover {
    background:   var(--accent-soft);
    color:        var(--accent);
    border-color: var(--accent);
}


/* =============================================================================
   10. AVATAR
   ============================================================================= */

.avatar-figure { margin: 0; }

.avatar-img {
    width:         180px;
    height:        180px;
    border-radius: 24px;
    border:        1px solid var(--border);
    object-fit:    cover;
    display:       block;
    box-shadow:
        0 8px 32px rgba(47, 111, 212, 0.15),
        0 2px 8px  rgba(0, 0, 0, 0.08);
    transition:    box-shadow var(--transition), transform var(--transition);
}

.avatar-img:hover {
    transform:  translateY(-3px);
    box-shadow:
        0 16px 48px rgba(47, 111, 212, 0.2),
        0 4px  16px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .avatar-img {
    box-shadow:
        0 8px 32px rgba(91, 156, 246, 0.2),
        0 2px 8px  rgba(0, 0, 0, 0.4);
}


/* =============================================================================
   11. POST LIST
   ============================================================================= */

.post-list {
    padding:    0;
    margin:     0;
    list-style: none;
}

.post-card {
    display:               grid;
    grid-template-columns: 72px 1fr;
    gap:                   1.2rem;
    padding:               1.2rem 0;
    border-bottom:         1px solid var(--border);
}

.post-card:first-child       { border-top: 1px solid var(--border); }
.post-card:hover .post-title { color: var(--accent); }

.post-date {
    font-family:    var(--ff-mono);
    font-size:      10px;
    color:          var(--muted);
    letter-spacing: 0.04em;
    line-height:    1.5;
    padding-top:    2px;
}

.post-title {
    font-size:     15px;
    font-weight:   500;
    color:         var(--ink);
    line-height:   1.4;
    margin-bottom: 0.25rem;
    transition:    color var(--transition);
}

.post-title a        { text-decoration: none; color: inherit; }
.post-title a:hover  { color: var(--accent); }

.post-title-link       { text-decoration: none; color: inherit; }
.post-title-link:hover { color: var(--accent); }

.post-excerpt {
    font-size:     13px;
    color:         var(--muted);
    line-height:   1.65;
    margin-bottom: 0.5rem;
}

/* WordPress adds <p> inside excerpts — strip its margin */
.post-excerpt p { margin: 0; }

.post-tags {
    display:    flex;
    gap:        5px;
    flex-wrap:  wrap;
    list-style: none;
    padding:    0;
    margin:     0;
}

.tag {
    font-family:    var(--ff-mono);
    font-size:      10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        2px 7px;
    border-radius:  3px;
    background:     var(--tag-bg);
    color:          var(--tag-fg);
}

.no-posts {
    color:     var(--muted);
    font-size: 13px;
}

/* Archive / Pagination */
.pagination {
    margin-top:  2rem;
    padding-top: 1.5rem;
    border-top:  1px solid var(--border);
}

.pagination .nav-links {
    display:  flex;
    gap:      0.5rem;
    flex-wrap:wrap;
}

.pagination .page-numbers {
    font-family:     var(--ff-mono);
    font-size:       12px;
    padding:         6px 12px;
    border-radius:   4px;
    border:          1px solid var(--border);
    color:           var(--muted);
    text-decoration: none;
    transition:      all var(--transition);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
}


/* =============================================================================
   12. SINGLE POST
   ============================================================================= */

.post-header { margin-bottom: 2rem; }

.post-header-meta {
    display:        flex;
    align-items:    center;
    gap:            8px;
    font-family:    var(--ff-mono);
    font-size:      11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--muted);
    margin-bottom:  1rem;
    flex-wrap:      wrap;
}

.post-header h1 {
    font-size:      clamp(1.6rem, 4vw, 2.4rem);
    font-weight:    500;
    line-height:    1.25;
    letter-spacing: -0.02em;
    margin-bottom:  1.5rem;
    color:          var(--ink);
}

.post-body {
    font-size:   15px;
    line-height: 1.85;
    color:       var(--ink-2);
}

.post-body p      { margin-bottom: 1.4rem; }
.post-body h2     { font-size: 1.3rem; font-weight: 500; margin: 2.5rem 0 0.75rem; color: var(--ink); }
.post-body h3     { font-size: 1.1rem; font-weight: 500; margin: 2rem 0 0.75rem;   color: var(--ink); }
.post-body ul,
.post-body ol     { padding-left: 1.5rem; margin-bottom: 1.4rem; }
.post-body li     { margin-bottom: 0.4rem; }
.post-body a      { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover{ color: var(--accent-2); }

.post-body blockquote {
    border-left:  3px solid var(--accent);
    padding-left: 1.2rem;
    margin:       1.8rem 0;
    color:        var(--muted);
    font-style:   italic;
}

.post-body pre:not([class*="language-"]) {
    background:    var(--code-bg);
    border:        1px solid var(--code-border);
    border-radius: 8px;
    padding:       1.2rem 1.4rem;
    overflow-x:    auto;
    margin:        1.8rem 0;
    font-size:     13px;
    line-height:   1.75;
}

.post-body code {
    font-family:   var(--ff-mono);
    font-size:     12px;
    background:    var(--tag-bg);
    color:         var(--accent);
    padding:       1px 6px;
    border-radius: 3px;
}

.post-body pre code {
    background: transparent;
    color:      var(--code-fg);
    padding:    0;
    font-size:  inherit;
}


/* =============================================================================
   13. PORTFOLIO
   ============================================================================= */

.portfolio-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem;
}

.project-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 10px;
    padding:       1.4rem;
    cursor:        pointer;
    transition:    all var(--transition);
}

.project-card:hover {
    border-color: var(--accent);
    transform:    translateY(-2px);
    box-shadow:   0 6px 24px rgba(47, 111, 212, 0.08);
}

.project-icon {
    font-family:   var(--ff-mono);
    font-size:     11px;
    color:         var(--accent);
    background:    var(--accent-soft);
    padding:       4px 9px;
    border-radius: 4px;
    display:       inline-block;
    margin-bottom: 0.9rem;
    letter-spacing:0.06em;
}

.project-title {
    font-size:     14px;
    font-weight:   500;
    margin-bottom: 0.4rem;
    color:         var(--ink);
}

.project-desc {
    font-size:   12px;
    color:       var(--muted);
    line-height: 1.6;
}

.project-stack {
    display:    flex;
    gap:        5px;
    flex-wrap:  wrap;
    margin-top: 0.9rem;
    list-style: none;
    padding:    0;
}

.stack-tag {
    font-family:   var(--ff-mono);
    font-size:     10px;
    padding:       2px 6px;
    border-radius: 3px;
    background:    var(--bg-alt);
    color:         var(--muted);
    border:        1px solid var(--border);
}


/* =============================================================================
   14. GITHUB REPOS
   ============================================================================= */

.github-repos {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1rem;
    list-style:            none;
    padding:               0;
    margin:                0;
}

.github-repo-card {
    background:     var(--surface);
    border:         1px solid var(--border);
    border-radius:  10px;
    padding:        1.2rem 1.4rem;
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
    transition:     border-color var(--transition), transform var(--transition);
}

.github-repo-card:hover {
    border-color: var(--accent);
    transform:    translateY(-2px);
}

.github-repo-header {
    display:     flex;
    align-items: center;
    gap:         8px;
    color:       var(--accent);
}

.github-repo-header svg { flex-shrink: 0; }

.github-repo-name {
    font-family:     var(--ff-mono);
    font-size:       13px;
    font-weight:     600;
    color:           var(--accent);
    text-decoration: none;
    letter-spacing:  -0.01em;
}

.github-repo-name:hover { text-decoration: underline; }

.github-repo-desc {
    font-size:   12px;
    color:       var(--muted);
    line-height: 1.6;
    flex-grow:   1;
}

.github-repo-meta {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
    margin-top:  0.4rem;
}

.github-repo-lang,
.github-repo-stars,
.github-repo-forks,
.github-repo-updated {
    font-family: var(--ff-mono);
    font-size:   11px;
    color:       var(--muted);
    display:     flex;
    align-items: center;
    gap:         4px;
}

.lang-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--accent);
    flex-shrink:   0;
}

.lang-dot[data-lang="JavaScript"] { background: #f1e05a; }
.lang-dot[data-lang="TypeScript"] { background: #3178c6; }
.lang-dot[data-lang="CSS"]        { background: #563d7c; }
.lang-dot[data-lang="HTML"]       { background: #e34c26; }
.lang-dot[data-lang="PHP"]        { background: #4f5d95; }
.lang-dot[data-lang="Python"]     { background: #3572A5; }
.lang-dot[data-lang="Shell"],
.lang-dot[data-lang="Bash"]       { background: #89e051; }

.github-error,
.github-empty {
    color:     var(--muted);
    font-size: 13px;
}


/* =============================================================================
   15. CONTACT FORM
   ============================================================================= */

.contact-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2.5rem;
    align-items:           start;
}

.contact-intro {
    color:         var(--ink-2);
    font-size:     14px;
    line-height:   1.8;
    margin-bottom: 1.5rem;
}

.contact-links {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
}

.contact-link {
    display:         flex;
    align-items:     center;
    gap:             12px;
    text-decoration: none;
    color:           var(--ink-2);
    font-size:       13px;
    padding:         10px 14px;
    border:          1px solid var(--border);
    border-radius:   8px;
    background:      var(--surface);
    transition:      all var(--transition);
}

.contact-link:hover {
    border-color: var(--accent);
    color:        var(--accent);
    background:   var(--accent-soft);
}

.contact-link svg {
    width:       16px;
    height:      16px;
    flex-shrink: 0;
    fill:        currentColor;
}

.contact-form {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.contact-form button { align-self: flex-start; }

.form-field {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.form-field label {
    font-family:    var(--ff-mono);
    font-size:      11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--muted);
}

.form-field input,
.form-field textarea {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 6px;
    padding:       9px 12px;
    font-family:   var(--ff-sans);
    font-size:     13px;
    color:         var(--ink);
    outline:       none;
    transition:    border-color var(--transition);
    resize:        none;
    width:         100%;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--muted); }

.form-field input:focus,
.form-field textarea:focus         { border-color: var(--accent); }

.form-response {
    font-size:     13px;
    padding:       10px 14px;
    border-radius: 6px;
    display:       none;
}

.form-response:not(:empty) { display: block; }

.form-success {
    background: #dcfce7;
    color:      #166534;
    border:     1px solid #bbf7d0;
}

.form-error {
    background: #fee2e2;
    color:      #991b1b;
    border:     1px solid #fecaca;
}

[data-theme="dark"] .form-success {
    background:   #052e16;
    color:        #4ade80;
    border-color: #166534;
}

[data-theme="dark"] .form-error {
    background:   #450a0a;
    color:        #f87171;
    border-color: #991b1b;
}


/* =============================================================================
   16. ABOUT / TIMELINE
   ============================================================================= */

.timeline-section { overflow: hidden; }

.timeline {
    position:   relative;
    list-style: none;
    padding:    2rem 0;
    margin:     0;
}

.timeline::before {
    content:    '';
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       50%;
    transform:  translateX(-50%);
    width:      2px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--border) 5%,
        var(--border) 95%,
        transparent
    );
}

.timeline-item {
    position:      relative;
    width:         44%;
    margin-bottom: 3rem;
    opacity:       0;
    transform:     translateY(30px);
    transition:    opacity 0.5s ease, transform 0.5s ease;
}

.timeline-item.is-visible {
    opacity:   1;
    transform: translateY(0);
}

.timeline-right { left: 56%; }
.timeline-left  { left: 0; margin-right: 56%; }

.timeline-dot {
    position:      absolute;
    top:           24px;
    width:         14px;
    height:        14px;
    border-radius: 50%;
    background:    var(--accent);
    border:        3px solid var(--bg);
    box-shadow:    0 0 0 2px var(--accent);
    transition:    transform var(--transition), box-shadow var(--transition);
    z-index:       1;
}

.timeline-right .timeline-dot { left:  calc(-56% + (85% / 2) - 7px); }
.timeline-left  .timeline-dot { right: calc(-56% + (85% / 2) - 7px); }

.timeline-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 10px;
    padding:       1.4rem;
    transition:    border-color var(--transition), transform var(--transition);
}

.timeline-card:hover {
    border-color: var(--accent);
    transform:    translateY(-2px);
}

.timeline-logo {
    width:           36px;
    height:          36px;
    border-radius:   8px;
    background:      var(--accent-soft);
    border:          1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   0.8rem;
    overflow:        hidden;
}

.timeline-logo svg {
    width:  18px;
    height: 18px;
    color:  var(--accent);
}

.timeline-logo img {
    width:      100%;
    height:     100%;
    object-fit: contain;
}

.timeline-meta {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 0.4rem;
    flex-wrap:     wrap;
}

.timeline-date {
    font-family:    var(--ff-mono);
    font-size:      10px;
    color:          var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.timeline-company {
    font-family:    var(--ff-mono);
    font-size:      10px;
    color:          var(--accent);
    background:     var(--accent-soft);
    padding:        2px 8px;
    border-radius:  3px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.timeline-title {
    font-size:     14px;
    font-weight:   500;
    color:         var(--ink);
    margin-bottom: 0.5rem;
}

.timeline-desc {
    font-size:     12px;
    color:         var(--muted);
    line-height:   1.7;
    margin-bottom: 0.8rem;
}

.timeline-stack {
    display:    flex;
    flex-wrap:  wrap;
    gap:        5px;
    list-style: none;
    padding:    0;
    margin:     0;
}


/* =============================================================================
   17. CERTIFICATIONS
   ============================================================================= */

.certs-list {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.cert-card {
    display:       flex;
    gap:           2rem;
    align-items:   flex-start;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 10px;
    padding:       1.8rem;
    transition:    border-color var(--transition);
}

.cert-card:hover { border-color: var(--accent); }

.cert-badge {
    flex-shrink: 0;
    width:       120px;
    height:      120px;
}

.cert-badge img {
    width:      100%;
    height:     100%;
    object-fit: contain;
}

.cert-issuer {
    font-family:    var(--ff-mono);
    font-size:      10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  0.3rem;
}

.cert-name {
    font-size:     14px;
    font-weight:   500;
    color:         var(--ink);
    margin-bottom: 0.4rem;
}

.cert-meta {
    font-family:    var(--ff-mono);
    font-size:      10px;
    color:          var(--muted);
    letter-spacing: 0.04em;
    margin-bottom:  0.8rem;
}

.cert-id  { color: var(--muted); }

.cert-desc {
    font-size:     13px;
    color:         var(--ink-2);
    line-height:   1.7;
    margin-bottom: 1rem;
}


/* =============================================================================
   18. 404
   ============================================================================= */

.not-found {
    max-width:      820px;
    margin:         0 auto;
    padding:        6rem 2.5rem;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            1rem;
}

.not-found-icon {
    width:           120px;
    height:          120px;
    border-radius:   28px;
    background:      var(--accent-soft);
    border:          1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   1rem;
    box-shadow:
        0 20px 60px rgba(47, 111, 212, 0.15),
        0 4px  16px rgba(0, 0, 0, 0.08);
    transition:      transform var(--transition), box-shadow var(--transition);
}

[data-theme="dark"] .not-found-icon {
    box-shadow:
        0 20px 60px rgba(91, 156, 246, 0.2),
        0 4px  16px rgba(0, 0, 0, 0.4);
}

.not-found-icon:hover {
    transform:  translateY(-4px);
    box-shadow:
        0 28px 72px rgba(47, 111, 212, 0.2),
        0 6px  24px rgba(0, 0, 0, 0.1);
}

.not-found-icon svg {
    width:  52px;
    height: 52px;
    color:  var(--accent);
}

.not-found-code {
    font-family:    var(--ff-mono);
    font-size:      11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--accent);
    background:     var(--accent-soft);
    padding:        4px 14px;
    border-radius:  99px;
    border:         1px solid var(--tag-bg);
}

.not-found h1 {
    font-size:      clamp(1.4rem, 3vw, 2rem);
    font-weight:    500;
    letter-spacing: -0.02em;
    color:          var(--ink);
    max-width:      480px;
    line-height:    1.3;
}

.not-found-sub {
    font-size:     14px;
    color:         var(--muted);
    max-width:     400px;
    line-height:   1.7;
    margin-bottom: 0.5rem;
}


/* =============================================================================
   19. FOOTER
   ============================================================================= */

.site-footer {
    border-top:  1px solid var(--border);
    background:  var(--surface);
    width:       100%;
    transition:  background var(--transition), border-color var(--transition);
}

.footer-inner {
    max-width:       820px;
    margin:          0 auto;
    padding:         1.4rem 2.5rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    font-family:     var(--ff-mono);
    font-size:       11px;
    color:           var(--muted);
    letter-spacing:  0.04em;
}

.footer-inner span a            { color: var(--accent); transition: color var(--transition); }
.footer-inner span a:hover      { color: var(--accent-2); }


/* =============================================================================
   20. CODE BLOCKS
   ============================================================================= */

.code-block {
    background:    var(--code-bg);
    border:        1px solid var(--code-border);
    border-radius: 8px;
    margin:        1.8rem 0;
    overflow:      hidden;
}

.code-block pre[class*="language-"] {
    background:    var(--code-bg) !important;
    border:        none !important;
    border-radius: 0 !important;
    margin:        0 !important;
    padding:       1.2rem 1.4rem !important;
    box-shadow:    none !important;
}

.code-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 16px;
    border-bottom:   1px solid var(--code-border);
}

.code-lang {
    font-family:    var(--ff-mono);
    font-size:      10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--code-cm);
}

.code-dots       { display: flex; gap: 5px; }

.code-dots span {
    width:         10px;
    height:        10px;
    border-radius: 50%;
}

.code-dots span:nth-child(1) { background: #ff5f5640 !important; }
.code-dots span:nth-child(2) { background: #febc2e40 !important; }
.code-dots span:nth-child(3) { background: #28c84040 !important; }

pre {
    padding:     1.2rem 1.4rem;
    overflow-x:  auto;
    font-family: var(--ff-mono);
    font-size:   13px;
    line-height: 1.75;
    color:       var(--code-fg);
    margin:      0;
}

code {
    font-family:   var(--ff-mono);
    font-size:     12px;
    background:    var(--tag-bg);
    color:         var(--accent);
    padding:       1px 6px;
    border-radius: 3px;
}

pre code {
    background: transparent;
    color:      var(--code-fg);
    padding:    0;
    font-size:  inherit;
}


/* =============================================================================
   21. PRISM OVERRIDES
   ============================================================================= */

code[class*="language-"],
pre[class*="language-"] {
    font-family:   var(--ff-mono) !important;
    font-size:     13px !important;
    line-height:   1.75 !important;
    background:    var(--code-bg) !important;
    color:         var(--code-fg) !important;
    text-shadow:   none !important;
    border-radius: 0 !important;
}

.token.comment,
.token.prolog,
.token.doctype  { color: var(--code-cm) !important; font-style: italic; }
.token.keyword  { color: var(--code-kw) !important; }
.token.string   { color: var(--code-str) !important; }
.token.function { color: var(--code-fn) !important; }
.token.number   { color: var(--code-num) !important; }
.token.class-name,
.token.builtin  { color: var(--code-cl) !important; }
.token.operator,
.token.punctuation { color: var(--code-fg) !important; }
.token.boolean  { color: var(--code-kw) !important; }


/* =============================================================================
   22. ANIMATIONS
   ============================================================================= */

@keyframes pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(0.85); opacity: 0.5; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.about        { animation: fadeUp 0.45s ease both; opacity: 0; }
.post-card    { animation: fadeUp 0.45s ease both; }
.post-card:nth-child(2) { animation-delay: 0.05s; }
.post-card:nth-child(3) { animation-delay: 0.10s; }
.project-card { animation: fadeUp 0.4s ease both; }


/* =============================================================================
   23. RESPONSIVE
   ============================================================================= */

@media (max-width: 640px) {

    /* Navigation */
    .site-nav      { padding: 0 1.25rem; }
    .nav-links     { display: none; }
    .nav-hamburger { display: flex; }

    /* Layout */
    .section { padding: 2.5rem 1.25rem; }

    /* Hero */
    .about-grid    { grid-template-columns: 1fr; }
    .avatar-figure { display: none; }

    /* Portfolio */
    .portfolio-grid { grid-template-columns: 1fr; }

    /* GitHub Repos */
    .github-repos { grid-template-columns: 1fr; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }

    /* Timeline */
    .timeline::before {
        left:      20px;
        transform: none;
    }

    .timeline-item {
        width:        calc(100% - 48px) !important;
        margin-left:  48px !important;
        margin-right: 0 !important;
    }

    .timeline-right { left: 0; }

    .timeline-right .timeline-dot,
    .timeline-left  .timeline-dot {
        left:      -35px !important;
        right:     auto !important;
        transform: none !important;
    }

    .timeline-card { width: 100%; }

    /* Certifications */
    .cert-card {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
    }

    /* 404 */
    .not-found       { padding: 4rem 1.25rem; }
    .not-found-icon  { width: 96px; height: 96px; }
    .not-found-icon svg { width: 40px; height: 40px; }

    /* Footer */
    .footer-inner { flex-direction: column-reverse; }
}