/* --- Design System & Variables (Default Dark) --- */
:root {
    --bg-color: #0f141c;
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #38bdf8;
    --border-color: #2e3c51;
    --card-bg: #1e293b;
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.light-theme {
    --bg-color: #f8fafc;
    --text-main: #0f172a;
    --text-muted: #475569;
    --accent: #0284c7;
    --border-color: #cbd5e1;
    --card-bg: #ffffff;
}

body.light-theme .project-card:hover .project-img {
    filter: invert(0%) grayscale(0%) contrast(100%) brightness(100%);
    mix-blend-mode: normal;
    opacity: 1;
}

/* --- LIGHT MODE FILTER ENGINE --- */
body.light-theme .project-img {
    opacity: 0.25;

    /* Inverts the image data so dark elements act like light layers,
       then utilizes 'screen' to cleanly blend into your light blue accent background */
    filter: invert(0%) grayscale(100%) contrast(140%) brightness(80%);
    mix-blend-mode: normal;

    /* Controls the speed of the color fade-in reveal when hovering */
    transition: filter 0.4s ease, mix-blend-mode 0.4s ease, opacity 0.4s ease;
}

body.light-theme .project-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #a9e2fe;
    transition: background 0.15s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-stack);
    line-height: 1.6;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.container {
    margin: 0 auto;
    /* 5rem top padding clears the fixed header space perfectly */
    /* 4rem bottom padding keeps the layout protected from the fixed footer */
    padding: 5rem 2rem 4rem 2rem;
}

header {
    position: fixed;            /* Fixed to the viewport window */
    top: 0;                     /* Stick directly to the top edge */
    left: 0;                    /* Span across from the left boundary */
    width: 100%;                /* Full viewport width coverage */

    /* Technical Layout Adjustments */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;      /* Tightened vertical padding for fixed header flow */
    background-color: var(--bg-color); /* Matches current dark/light background variable */
    border-bottom: 1px solid var(--border-color); /* Separating technical line */

    z-index: 1000;              /* Elevated z-index so it sits above all scrolling panels */

    /* Smooth theme mode color transitions */
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.logo {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--accent);
    text-decoration: none;
}

nav {
    display: flex;
    align-items: center;
}

/************************GENERAL*****************************/
.about-text { /*IN JS FILE!*/
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
    hyphens: auto;
    margin-bottom: 1.5rem;
}

.lang-selector {
    margin-left: 1.5rem;
}

/***********************ABOUT SECTION***************************/
.hero-title {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 800;
}

/************************SKILLS SECTION*************************/
.skills-tab-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.skills-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two perfect equal columns */
    gap: 0.75rem 1.5rem; /* Row gap and Column gap */
    list-style: none; /* Strip standard round bullets */
    padding: 0;
    margin: 0;
}

.skills-list-grid li {
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
}

.skills-list-grid li::before {
    content: ">";
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: bold;
    margin-right: 0.5rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.tab-buttons {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.05);
}

.tab-btn {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.tab-btn:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.tab-btn:hover {
    color: var(--text-main);
    background: rgba(56, 189, 248, 0.05);
}

.tab-btn.active {
    color: var(--accent);
    background: var(--card-bg);
    font-weight: 600;
}

.tab-content {
    padding: 1.5rem;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/************************CONTACT SECTION*************************/
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Space between fields */
    margin: 1.5rem 0;
    width: 100%;
    box-sizing: border-box;
}

.form-result-log.success {
    display: block;
    color: #4ade80; /* Standard console green */
}

.form-result-log.error {
    display: block;
    color: #f87171; /* Warning red */
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.form-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent); /* Your signature blue */
    text-transform: lowercase;
}

.form-input,
.form-textarea {
    font-family: var(--font-stack);
    font-size: 0.95rem;
    background: var(--card-bg) !important; /* Force matching card background */
    color: var(--text-main) !important; /* Light text color */
    border: 1px solid var(--border-color) !important; /* Subtle grid border */
    padding: 0.6rem;
    border-radius: 4px;
    width: 100% !important; /* Fill out the 1/3 sidebar lane */
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent);
}

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

.submit-btn {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    align-self: flex-start; /* Stops button from stretching full-width */
}

.submit-btn:hover {
    background: var(--card-bg) !important;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15);
}

.form-result-log {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    min-height: 1.2rem;
}

.lang-selector select {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    border-radius: 3px;
    outline: none;
}

/* --- Toggle Button --- */
.toggle-btn {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border-color);
    padding: 0.2rem 0.5rem;
    margin-left: 1.5rem;
    cursor: pointer;
    border-radius: 3px;
}

.workbench-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5rem;
    align-items: start;

    /* 1. Locks the entire row height perfectly between your fixed header and footer */
    height: calc(100vh - 9rem);
    max-height: calc(100vh - 9rem);

    /* 2. Keeps the parent layout context frozen in place */
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 2rem;
}

/* --- Isolated Sidebar --- */
.sidebar {
    /* Changed from sticky to normal display since the layout frame is now frozen */
    display: flex;
    flex-direction: column;
    gap: 2.2rem;

    /* Takes up 100% of the available workspace height box */
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;

    /* Prevents the sidebar from ever scrolling or jittering */
    overflow-y: hidden;
}

/* Safety Fallback: If a user has a tiny laptop screen, allow them to scroll the sidebar
   by hovering over it, but keep the scrollbar invisible so it looks like a clean terminal dashboard.
*/
.sidebar:hover {
    overflow-y: auto;
}

.sidebar {
    scrollbar-width: none; /* Firefox */
}

.sidebar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.content-area {
    width: 100%;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden; /* <-- ADD THIS: Prevents horizontal scrollbars */

    padding-right: 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.content-area::-webkit-scrollbar {
    display: none;
}

.projects-viewport {
    width: 100%;
    overflow: visible; /* <-- CHANGE THIS: from hidden to visible */
    position: relative;
    padding: 8px 0;
    margin-top: -8px;
}

.projects-sliding-canvas {
    display: flex;
    width: 200%;

    /* <-- CHANGE THESE TWO LINES: Swap transform for margin-left */
    transition: margin-left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: margin-left;

    align-items: flex-start;
}

.projects-sliding-canvas.slide-left {
    /* <-- CHANGE THIS: Replaces transform: translateX(-50%); */
    margin-left: -100%;
}


.project-grid {
    width: 50%;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 4px;
}

.project-details-pane {
    width: 50%;
    flex-shrink: 0;
    padding-left: 2rem;
}

.panel-section-title {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--accent);
    margin: 1.2rem 0 0.4rem 0;
    text-transform: uppercase;
}
.panel-section-title::before { content: "> "; }

/* --- Single Photo Carousel Slider --- */
.carousel-viewport {
    position: relative;
    width: 100%;

    aspect-ratio: 4 / 3;

    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

.carousel-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* Controlled dynamically via active state class handles */
}

.carousel-slide.active {
    display: block;
}

/* absolute controls mapping overlay */
.carousel-btn { /*IN JS FILE!*/
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 20, 28, 0.75);
    color: var(--accent);
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: bold;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    user-select: none;
    z-index: 5;
}

.carousel-btn:hover { /*IN JS FILE!*/
    color: var(--text-main);
    background: var(--accent);
    border-color: var(--accent);
}

.carousel-btn.prev { left: 10px; } /*IN JS FILE!*/
.carousel-btn.next { right: 10px; } /*IN JS FILE!*/

/* Micro Indicator Ticker text */
.carousel-counter { /*IN JS FILE!*/
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 0.25rem;
}

.project-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Split into description on left, images on right */
    gap: 2rem;
    align-items: start;
    margin-top: 1rem;
}

.details-column-left { /*IN JS FILE!*/
    display: flex;
    flex-direction: column;
}

.details-column-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    position: sticky;

    /* CHANGED: Locks to a position 25% down the screen */
    top: 15vh;
    margin-top: 5rem;
    align-self: flex-start;
}

h2 {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
}

h2::before {
    content: "// ";
    color: var(--accent);
}

.project-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    overflow: hidden; /* Important: keeps image corners clipped to card radius */

    /* Split card into text side and image side */
    display: grid;
    grid-template-columns: 1.5fr 1fr;
}

.project-card-left {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-card-right {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 160px; /* Ensures space stays consistent */

    /* Smoothly fades the image to zero opacity from right-to-left */
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

/* Hover States */
.project-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    z-index: 10;
}

/* --- HOVER INTERACTION --- */
/* Smoothly snaps back to the original JPG full-color asset on hover */
.project-card:hover .project-img {
    filter: grayscale(0%) contrast(100%) brightness(100%) invert(0%);
    mix-blend-mode: normal;
    opacity: 1;
}

.project-card.active-inspection {
    border-color: var(--accent);
}


/* --- Core Project Image Container --- */
.project-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent); /* Uses your dynamic #38bdf8 or #0284c7 color */
    transition: background 0.15s ease;
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;

    /* --- DARK MODE FILTER ENGINE (Default) --- */
    /* Converts JPG to high-contrast monochrome and burns it into the dark blue */
    filter: grayscale(100%) contrast(140%) brightness(90%);
    mix-blend-mode: multiply;

    /* Controls the speed of the color fade-in reveal when hovering */
    transition: filter 0.4s ease, mix-blend-mode 0.4s ease, opacity 0.4s ease;
}

.project-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.project-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.panel-section-subtitle {
    font-family: var(--font-mono);
    font-size: 0.8rem;             /* Slightly smaller than panel-section-title's 0.9rem */
    color: var(--text-muted);      /* Muted gray instead of vibrant blue accent */
    margin: 0.8rem 0 0.3rem 0;     /* Tighter spacing context */
    text-transform: uppercase;
    letter-spacing: 0.05em;        /* Increases tracking slightly for technical readability */
    display: flex;
    align-items: center;
    opacity: 0.8;                  /* Adds a layer of visual hierarchy soft blend */
}

/* Optional terminal-style prefix, matching your theme's design language */
.panel-section-subtitle::before {
    content: ">> ";
    color: var(--border-color);    /* Muted prefix instead of blue accent */
    margin-right: 0.25rem;
}

.project-type {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent);
}

.project-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.skills-tags { /*IN JS FILE!*/
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background: var(--card-bg);
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.close-panel-btn {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    background: transparent;
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    margin-bottom: 1.5rem;
}

.panel-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.panel-meta {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.panel-section-title /*In JS FILE!*/{
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--accent);
    margin: 1.5rem 0 0.5rem 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.panel-section-title::before { /*In JS FILE!*/
    content: "> ";
}

.contact-buttons {
    display: flex;
    justify-content: space-between; /* <--- Pushes item 1 to left, item 2 to right */
    align-items: center;
    width: 100%;                     /* Ensures container stretches full width */
    margin-top: 2rem;
}

/* New sub-group container to hold your icons together */
.contact-social-group {
    display: flex;
    gap: 1.5rem;                    /* Creates the space between the icons themselves */
    align-items: center;
}

.contact-link {
    font-size: 1.4rem; /* Makes icons easily clickable and legible */
    color: var(--text-muted); /* Blends icons into default muted theme state */
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

/* Hover Interaction Strategy */
.contact-link:hover {
    color: var(--accent); /* Lights up using your accent blue code on hover */
    transform: translateY(-2px); /* Subtle technical micro-lift animation */
}

footer {
    position: fixed;            /* Fixed to the viewport window */
    bottom: 0;                  /* Stick directly to the bottom edge */
    left: 0;                    /* Span across from the left boundary */
    width: 100%;                /* Full viewport width coverage */

    /* Technical Styling */
    background-color: var(--bg-color); /* Matches your current theme background */
    border-top: 1px solid var(--border-color); /* Separating technical line */
    padding: 1rem 2rem;         /* Balanced, tight spacing padding */
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);

    z-index: 100;               /* Ensures it stays layered above sliding canvases */

    /* Adds a smooth animation if you toggle dark/light theme */
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* --- Completely Revamped Mobile Architecture (< 768px) --- */
@media (max-width: 768px) {
    /* 1. Reset container constraints for mobile edge safety tracks */
    .container {
        padding: 5.5rem 1rem 5rem 1rem;
    }

    /* 2. Break the workbench wide columns into a clean, simple vertical block sequence */
    .workbench-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: none;
        overflow: visible;
        gap: 3rem; /* Generous breathing room between sections */
        padding-top: 0;
    }

    /* 3. Unlock scrolling states on content areas */
    .sidebar, .content-area {
        height: auto;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    /* 4. Layout Sequence Ordering */
    .sidebar {
        order: 1; /* Profile info, Skills matrices, and Contact form flow first */
    }

    .content-area {
        order: 2; /* Your main work grid displays second right below */
    }

    /* 5. Deconstruct the desktop split cards into full-width visual stacked rows */
    .project-card {
        grid-template-columns: 1fr; /* Image stacks under/over text */
    }

    .project-card-right {
        height: 180px;
        min-height: 180px;
        /* Modify blending mask to clip cleanly from bottom up instead of right-to-left */
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    }

    /* 6. Strip out sliding canvas animations so all content flows naturally in a singular stream */
    .projects-sliding-canvas {
        display: flex;
        flex-direction: column;
        width: 100%;
        transform: none !important; /* Forces the canvas to remain neutral */
        gap: 2rem;
    }

    .project-grid, .project-details-pane {
        width: 100%;
        padding-left: 0;
    }

    /* 7. Drop the split inspection view into single column flow layout */
    .project-details-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* 8. Neutralize margins from previous sticky experiments on mobile screens */
    .details-column-right {
        position: static; /* Removes stickiness on mobile devices */
        margin-top: 0;
        order: -1; /* Pushes the image carousel to the very top of the details view */
    }
}

/* Extra safety rule for ultra-compressed phone screens */
@media (max-width: 480px) {
    .skills-list-grid {
        grid-template-columns: 1fr;
    }

    header, footer {
        padding: 1rem;
    }
}