/* =====================================================================
   GLOBAL STYLES & CSS CUSTOM PROPERTIES (VARIABLES)
   ===================================================================== */
:root {
    /* Theme Colors (Default: Light Mode as requested) */
    --color-bg-primary: #F0F2F5; /* Light grey for primary background */
    --color-bg-secondary: #FFFFFF; /* White for cards/elements */
    --color-text-primary: #333333; /* Dark grey for main text */
    --color-text-secondary: #555555; /* Slightly lighter dark grey for less emphasis */
    --color-accent-blue: #5D72E1; /* Your chosen rare blue: a sophisticated periwinkle */
    --color-accent-blue-light: #8B9FFD; /* Lighter shade for hover */
    --color-border: rgba(0, 0, 0, 0.1); /* Subtle black border for glass */
    --color-gradient-start: #F0F2F5;
    --color-gradient-end: #E0E2E5;
    --color-success: #28a745; /* For share success message */

    /* RGB values for rgba() fallback/dynamic use (updated by JS) */
    /* These will be dynamically updated by JS on load, but good to have a default */
    --color-bg-primary-rgb: 240, 242, 245;
    --color-bg-secondary-rgb: 255, 255, 255;
    --color-accent-blue-rgb: 93, 114, 225;

    /* Glassmorphism */
    --glass-blur: 10px;
    --glass-bg-opacity: 0.8; /* Slightly more opaque for light mode */

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;

    /* Fonts */
    --font-family-primary: 'Poppins', sans-serif; /* For headings, prominent text */
    --font-family-secondary: 'Inter', sans-serif; /* For body text, paragraphs */
    --font-family-heading: 'Nunito', sans-serif; /* Alternative heading, can choose one of primary/heading */

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-easing: ease-in-out;
}

/* =====================================================================
   CUSTOM SCROLLBAR STYLES (for Chrome, Safari, and Edge)
   ===================================================================== */

/* 1. Scrollbar Track (the background path) */
::-webkit-scrollbar {
    width: 10px; /* Width of vertical scrollbar */
    height: 10px; /* Height of horizontal scrollbar */
}

/* 2. Scrollbar Track (using a subtle background color) */
::-webkit-scrollbar-track {
    background: var(--color-bg-primary); /* Light grey background */
    border-radius: 10px;
}

/* 3. Scrollbar Thumb (the draggable part) - Using your accent blue */
::-webkit-scrollbar-thumb {
    background-color: var(--color-accent-blue); /* Your main accent color */
    border-radius: 10px;
    border: 2px solid var(--color-bg-primary); /* Padding/border for a floating look */
}

/* 4. Scrollbar Thumb Hover state */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent-blue-light);
}

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

html {
    scroll-behavior: smooth; /* For smooth internal anchor links */
}

body {
    font-family: var(--font-family-secondary);
    color: var(--color-text-primary);
    background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
    min-height: 100vh; /* Ensure body takes full height for gradient */
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Prevent horizontal scroll */
    transition: background var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading); /* Or var(--font-family-primary) */
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1; }
h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2.2rem); }

p {
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

a {
    color: var(--color-accent-blue);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-easing);
}

a:hover {
    color: var(--color-accent-blue-light);
    text-decoration: underline;
}

/* Reusable Buttons */
.btn-primary {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-accent-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: var(--font-family-primary);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-speed) var(--transition-easing), transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
    text-align: center;
    box-shadow: 0 4px 15px rgba(var(--color-accent-blue-rgb), 0.2);
}

.btn-primary:hover {
    background-color: var(--color-accent-blue-light);
    transform: translateY(-3px);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(var(--color-accent-blue-rgb), 0.3);
}
.btn-primary.btn-small {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}

/* Glassmorphic Card/Element Base Style */
.glass-card {
    background-color: rgba(var(--color-bg-secondary-rgb), var(--glass-bg-opacity));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--spacing-md);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
}

/* Global Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    width: 100%; /* Ensure it takes full width up to max-width */
}

/* =====================================================================
   GLOBAL NAVIGATION
   ===================================================================== */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: rgba(var(--color-bg-primary-rgb), 0.8); /* Semi-transparent */
    backdrop-filter: blur(5px);
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: background-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
}

.nav-logo {
    font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--color-accent-blue);
}

.nav-links {
    display: flex;
    gap: var(--spacing-md);
    list-style: none;
}

.nav-links a {
    color: var(--color-text-primary);
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
    background-color: rgba(var(--color-accent-blue-rgb), 0.2);
    color: var(--color-accent-blue-light);
}

.nav-link.contact-button {
    background-color: var(--color-accent-blue);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    margin-left: var(--spacing-md);
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.nav-link.contact-button:hover {
    background-color: var(--color-accent-blue-light);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Mobile Nav Toggle (Hamburger) */
.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-primary);
    cursor: pointer;
    z-index: 1001; /* Above nav links when open */
}

/* =====================================================================
   PAGE SECTIONS (Shared Styles for all pages)
   ===================================================================== */
.page-section {
    min-height: calc(100vh - 80px); /* Full viewport height minus nav height */
    padding-top: calc(var(--spacing-xl) + 80px); /* Adjust for fixed nav */
    padding-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    opacity: 0; /* Hidden by default */
    transform: translateY(20px);
    transition: opacity 0.8s var(--transition-easing), transform 0.8s var(--transition-easing);
    scroll-margin-top: 80px; /* Offset for fixed header when linking */
}

/* Used for the active page, which will be visible initially and on navigation */
.page-section.active {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================================
   HOME / PROFILE PAGE SPECIFIC STYLES (`index.html`)
   ===================================================================== */
#home-profile-page {
    /* Mobile First: Default to column layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 900px; /* Limit width of content on home page */
    margin: 0 auto;
    padding: calc(var(--spacing-xl) + 60px) var(--spacing-md) var(--spacing-xl); /* Adjust top padding for nav */
    text-align: center; /* Default for mobile */
}

/* Left Column Content */
.profile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Take full width on mobile */
    margin-bottom: var(--spacing-xl); /* Space between sections on mobile */
}

.profile-photo {
    width: clamp(150px, 25vw, 250px);
    height: clamp(150px, 25vw, 250px);
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid var(--color-accent-blue);
    box-shadow: 0 0 0 10px rgba(var(--color-accent-blue-rgb), 0.2), 0 0 30px rgba(0,0,0,0.4);
    margin-bottom: var(--spacing-lg);
    transition: transform 0.3s ease-out;
}

.profile-photo:hover {
    transform: scale(1.03);
}

#home-profile-page h1 {
    margin-bottom: var(--spacing-sm);
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    font-weight: 700;
}

.tagline {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: var(--color-accent-blue-light);
    font-weight: 500;
    margin-bottom: var(--spacing-lg);
}

.intro-text {
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    max-width: 700px;
    margin: 0 auto; /* Center on mobile */
    line-height: 1.8;
}

.intro-text strong {
    color: var(--color-accent-blue);
    font-weight: 600;
}

/* Right Column Content (Initially stacked on mobile) */
.right-column-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Take full width on mobile */
    gap: var(--spacing-xl); /* Space between contact info and social share */
}

.contact-info {
    margin: 0; /* Remove auto margins for flex item */
    padding: var(--spacing-lg);
    max-width: 500px; /* Constrain width even as flex item */
    width: 100%;
    text-align: left; /* Align text within card */
}

.contact-info h3 {
    color: var(--color-accent-blue);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.contact-info p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.contact-info p:last-child {
    margin-bottom: 0;
}

.icon-spacing {
    min-width: 20px; /* Ensure icon has minimum width to prevent text shifting */
    text-align: center;
    color: var(--color-accent-blue); /* Ensure icons are the accent color */
}

.social-share-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
}

.social-links-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: var(--spacing-md); /* Space between each social link item */
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm); /* Space between icon and text */
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 1.1rem;
    font-weight: 500;
    transition: background-color var(--transition-speed) var(--transition-easing), transform var(--transition-speed) var(--transition-easing), color var(--transition-speed);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.social-link:hover {
    background-color: var(--color-accent-blue);
    color: white;
    transform: translateY(-3px);
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(var(--color-accent-blue-rgb), 0.2);
}

.social-link .fab, .social-link .fas { /* Style for Font Awesome icons */
    font-size: 1.5rem;
    color: var(--color-accent-blue); /* Default icon color */
    transition: color var(--transition-speed);
}

.social-link:hover .fab, .social-link:hover .fas {
    color: white; /* Icon turns white on hover */
}

.share-button {
    margin-top: var(--spacing-md);
    width: clamp(200px, 50%, 250px);
}

/* Share success message */
.share-message {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-success);
    color: white;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    font-size: 0.9rem;
}

.share-message.show {
    opacity: 1;
    visibility: visible;
}

/* =====================================================================
   FOOTER (Shared across all pages)
   ===================================================================== */
footer {
    text-align: center;
    padding: var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    background-color: rgba(var(--color-bg-primary-rgb), 0.6); /* Semi-transparent */
    backdrop-filter: blur(3px);
    border-top: 1px solid var(--color-border);
    margin-top: auto; /* Push footer to bottom */
}


/* =====================================================================
   RESPONSIVENESS (Mobile-first with min-width breakpoints)
   ===================================================================== */

/* Mobile navigation specific styles */
@media (max-width: 767px) {
    .main-nav {
        flex-wrap: wrap; /* Allow wrapping */
        padding: var(--spacing-sm) var(--spacing-md);
    }
    .menu-toggle {
        display: block; /* Show hamburger */
    }
    .nav-links {
        /* Initially hidden on mobile */
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        padding: var(--spacing-md) 0;
        margin-top: var(--spacing-md); /* Space below logo/toggle */
        border-top: 1px solid var(--color-border);
    }
    .nav-links.active {
        display: flex; /* Show when active */
    }
    .nav-links li {
        margin-bottom: var(--spacing-sm);
    }
    .nav-links li:last-child {
        margin-bottom: 0;
    }
    /* Align logo and toggle when menu is closed */
    .main-nav .nav-logo {
        flex-grow: 1; /* Pushes toggle to right */
        text-align: left;
    }
    .main-nav .menu-toggle {
        margin-left: auto; /* Pushes toggle to right */
    }

    /* Home/Profile Page mobile adjustments */
    #home-profile-page {
        padding-top: calc(var(--spacing-xl) + 80px); /* More space from top for fixed nav */
        padding-bottom: var(--spacing-lg);
    }
    .profile-photo {
        margin-bottom: var(--spacing-md);
    }
    .tagline {
        font-size: 1rem;
        margin-bottom: var(--spacing-md);
    }
    .intro-text {
        font-size: 0.95rem;
        margin-bottom: var(--spacing-lg);
    }
    .contact-info {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg); /* Space between contact and social on mobile */
    }
    .contact-info p {
        font-size: 1rem;
        flex-direction: column; /* Stack info and icon/label on small screens */
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    .social-share-wrapper {
        margin-top: 0; /* No extra top margin on mobile, handled by parent flex gap */
    }
    .social-link {
        font-size: 1rem;
        padding: var(--spacing-sm);
    }
    .social-link .fab, .social-link .fas {
        font-size: 1.2rem;
    }
    .share-button {
        width: 100%; /* Full width on mobile */
        max-width: 250px; /* But not too wide */
    }
}

/* Medium devices (e.g., tablets) */
@media (min-width: 768px) {
    .main-nav {
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    .nav-links {
        gap: var(--spacing-lg);
    }
    .page-section {
        padding-top: calc(var(--spacing-xl) + 60px);
    }
    #home-profile-page {
        padding-top: calc(var(--spacing-xl) + 60px);
    }
    .profile-photo {
        width: 200px;
        height: 200px;
    }
    #home-profile-page h1 {
        font-size: 3.5rem;
    }
    .tagline {
        font-size: 1.5rem;
    }
    .intro-text {
        font-size: 1.1rem;
    }
    .contact-info {
        max-width: 600px; /* Slightly wider */
        margin-bottom: var(--spacing-xl); /* Maintain space */
    }
    .contact-info p {
        flex-direction: row; /* Back to row layout */
        align-items: center;
        gap: var(--spacing-sm);
    }
    .social-link {
        font-size: 1.1rem;
    }
    .social-link .fab, .social-link .fas {
        font-size: 1.5rem;
    }
    .share-button {
        width: 250px;
    }
}

/* Large devices (e.g., desktops) */
@media (min-width: 1024px) {
    .container {
        padding: 0; /* Remove horizontal padding on large screens as max-width handles it */
    }
    .menu-toggle {
        display: none; /* Ensure hidden on desktop */
    }
    .nav-links {
        display: flex !important; /* Ensure always visible on desktop */
    }

    /* Home/Profile Page Desktop Split Layout */
    #home-profile-page {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        grid-template-areas: "left-col right-col";
        gap: var(--spacing-xl); /* Space between columns */
        align-items: start; /* Align content to the top of each column */
        text-align: left; /* Align text within each column to the left */
        max-width: 1200px; /* Max width for the whole section */
        padding: calc(var(--spacing-xl) + 60px) var(--spacing-xl) var(--spacing-xl);
        min-height: calc(100vh - 80px); /* Adjusted for full height */
    }

    .profile-content {
        grid-area: left-col;
        align-items: flex-start; /* Align content within left column to the start (left) */
        margin-bottom: 0; /* Remove mobile margin */
        text-align: left; /* Ensure text alignment for the content */
    }

    .profile-photo {
        margin: 0; /* Remove auto margins for grid item positioning */
        margin-bottom: var(--spacing-lg); /* Add back spacing below photo */
        align-self: flex-start; /* Align photo to top within its column */
    }

    #home-profile-page h1,
    .tagline,
    .intro-text {
        margin-left: 0; /* Ensure no external centering */
        margin-right: 0;
        max-width: 100%; /* Take full width of its column */
        text-align: left; /* Ensure text is left-aligned */
    }
    #home-profile-page h1 {
        font-size: clamp(3rem, 4vw, 4.5rem); /* Adjust font size for column */
    }

    .right-column-content {
        grid-area: right-col;
        align-items: flex-start; /* Align content within right column to the start (left) */
        justify-content: flex-start; /* Align content to top of column */
        gap: var(--spacing-xl); /* Maintain space between contact and social */
    }

    .contact-info {
        margin: 0; /* Reset margins for grid item */
        width: 100%; /* Take full width of its column */
        max-width: none; /* Remove max-width constraint */
        text-align: left;
    }
    .contact-info h3 {
        text-align: left; /* Align heading left within contact card */
    }

    .social-share-wrapper {
        margin-top: 0; /* Reset margin */
        align-items: flex-start; /* Align to the left within its column */
    }
    .social-links-container {
        justify-content: flex-start; /* Align social links to the left */
        flex-wrap: wrap; /* Keep wrapping in case of many links */
        width: 100%; /* Take full width */
    }
    .share-button {
        margin-top: var(--spacing-md); /* Add back margin below social links */
        align-self: flex-start; /* Align button to the left */
    }
}

/* =====================================================================
   PROJECTS PAGE SPECIFIC STYLES (`projects.html`)
   ===================================================================== */
#projects {
    padding-top: 100px;
}

#projects-page {
    /* Uses general .page-section styles, no special layout for the section itself */
}

.section-intro {
    max-width: 800px;
    margin: 0 auto var(--spacing-lg);
    font-size: 1.1rem;
    color: var(--color-text-secondary);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: var(--spacing-lg);
    width: 100%;
    max-width: 1200px; /* Aligns with container */
    margin-top: var(--spacing-md);
}

.project-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push button to bottom */
    text-align: left; /* Text aligns left within card */
    padding: var(--spacing-md);
    height: 100%; /* Ensure cards in a row have consistent height */
    transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(var(--color-accent-blue-rgb), 0.1);
}

.project-card-image {
    width: 100%;
    height: 180px; /* Fixed height for image consistency */
    object-fit: cover; /* Cover area without distortion */
    border-radius: 8px;
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--color-border);
}

.project-card h3 {
    color: var(--color-accent-blue);
    margin-bottom: var(--spacing-xs);
    font-size: 1.35rem;
    line-height: 1.3;
}

.project-card .project-brief {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    flex-grow: 1; /* Allow description to take available space */
    margin-bottom: var(--spacing-md); /* Space before tags/button */
}

.project-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md); /* Space before button */
}

.project-card .btn-small {
    margin-top: auto; /* Push button to the bottom */
    align-self: flex-start; /* Align button to the left within card */
}


/* =====================================================================
   PROJECT DETAIL MODAL STYLES
   ===================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh; /* Limit height to prevent overflow */
    overflow-y: auto; /* Enable scrolling for long content */
    padding: var(--spacing-lg);
    text-align: left; /* Content inside modal aligns left */
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-close-btn {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-primary);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease-out;
}

.modal-close-btn:hover {
    color: var(--color-accent-blue);
}

.modal-image {
    width: 100%;
    height: auto;
    max-height: 300px; /* Max height for modal image */
    object-fit: contain; /* Keep aspect ratio, fit within container */
    border-radius: 8px;
    margin-top: var(--spacing-lg); /* Space below title */
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--color-border);
}

#modal-project-title {
    color: var(--color-accent-blue);
    margin-top: var(--spacing-md); /* Space for close button */
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

#modal-project-description {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
}

.modal-content h4 {
    color: var(--color-text-secondary);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
}

.modal-tech-tags {
    margin-bottom: var(--spacing-lg);
}

.modal-tech-tags .highlight-tag { /* Reusing existing highlight-tag styles */
    display: inline-block;
    margin-right: var(--spacing-xs);
    margin-bottom: var(--spacing-xs); /* For wrapping */
}

.modal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.modal-share-button {
    width: auto; /* Auto width for button inside modal */
    margin-top: 0; /* Override default margin from share-button class */
}

/* Share message inside modal */
.modal-content .share-message {
    text-align: center;
    width: 100%;
    margin: var(--spacing-sm) 0 0 0;
}


/* =====================================================================
   RESPONSIVENESS (Adjustments for new elements)
   ===================================================================== */

/* Mobile navigation specific styles (already in place) */
@media (max-width: 767px) {
    /* ... existing mobile nav styles ... */

    /* Project grid on mobile */
    .project-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
    }

    /* Modal on mobile */
    .modal-content {
        max-width: 95%; /* Wider on small screens */
        padding: var(--spacing-md);
    }
    .modal-close-btn {
        font-size: 1.8rem;
    }
    #modal-project-title {
        font-size: 1.5rem;
    }
    .modal-image {
        max-height: 200px;
    }
    .modal-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    .modal-links .btn-primary {
        width: 100%; /* Full width buttons in modal links */
    }
    .modal-share-button {
        width: 100%; /* Full width share button in modal */
    }
}

/* Medium devices (e.g., tablets) */
@media (min-width: 768px) {
    /* ... existing tablet styles ... */

    /* Project grid on tablets */
    .project-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Two columns generally */
    }

    /* Modal on tablets */
    .modal-content {
        max-width: 700px;
        padding: var(--spacing-xl);
    }
}

/* Large devices (e.g., desktops) */
@media (min-width: 1024px) {
    /* ... existing desktop styles ... */

    /* Project grid on desktops */
    .project-grid {
        grid-template-columns: repeat(3, 1fr); /* Three columns for desktops */
    }
}

/* =====================================================================
   SKYE PROMOTION PAGE SPECIFIC STYLES (`skye.html`)
   ===================================================================== */
#skye-page {
    /* Inherits general .page-section styles */
}

.skye-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text within the container */
    max-width: 900px; /* Limit content width for readability */
    margin: 0 auto; /* Center the container itself */
    padding-top: calc(var(--spacing-xl) + 80px); /* Adjust for fixed nav */
    padding-bottom: var(--spacing-xl);
}

.skye-logo {
    width: clamp(150px, 30vw, 300px); /* Responsive width for logo */
    height: auto;
    margin-bottom: var(--spacing-lg);
    filter: drop-shadow(0 5px 15px rgba(var(--color-accent-blue-rgb), 0.2)); /* Subtle shadow */
}

.skye-slogan {
    font-family: var(--font-family-primary);
    font-size: clamp(1.5rem, 3.5vw, 2.8rem);
    color: var(--color-accent-blue);
    font-weight: 600;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    line-height: 1.2;
}

.skye-text-block {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    text-align: left; /* Align text left within the glass card */
    max-width: 700px; /* Max width for text blocks */
    width: 100%;
}

.skye-text-block h4 {
    color: var(--color-accent-blue-light);
    margin-bottom: var(--spacing-sm);
    font-size: 1.5rem;
}

.skye-text-block p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.skye-cta-button {
    margin-top: var(--spacing-md);
    font-size: 1.1rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    display: inline-flex; /* Align icon and text */
    align-items: center;
    gap: var(--spacing-xs); /* Space between icon and text */
}

.skye-cta-note {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xl); /* Space before footer */
}

/* =====================================================================
   RESPONSIVENESS (Skye Page specific adjustments)
   ===================================================================== */
@media (max-width: 767px) {
    .skye-content {
        padding-top: calc(var(--spacing-lg) + 80px); /* Adjust top padding for smaller screens */
        padding-bottom: var(--spacing-lg);
    }
    .skye-logo {
        width: clamp(100px, 40vw, 200px);
        margin-bottom: var(--spacing-md);
    }
    .skye-slogan {
        font-size: clamp(1.2rem, 4.5vw, 2rem);
        margin-bottom: var(--spacing-lg);
    }
    .skye-text-block {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    .skye-text-block p {
        font-size: 0.95rem;
    }
    .skye-cta-button {
        width: 100%; /* Full width button on small screens */
        max-width: 300px; /* But not too wide */
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    .skye-logo {
        width: clamp(200px, 25vw, 250px);
    }
    .skye-slogan {
        font-size: clamp(2rem, 3vw, 2.5rem);
    }
    .skye-text-block {
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

/* =====================================================================
   TIMELINE PAGE SPECIFIC STYLES (`timeline.html`)
   ===================================================================== */
#timeline-page {
    /* Inherits general .page-section styles */
}

.timeline-container {
    padding-top: calc(var(--spacing-xl) + 80px); /* Adjust for fixed nav */
    padding-bottom: var(--spacing-xl);
    max-width: 1000px; /* Max width for the timeline content on larger screens */
    margin: 0 auto;
    position: relative; /* For the timeline line */
}

.timeline-wrapper {
    position: relative;
    padding: var(--spacing-md) 0;
}

/* Vertical line for the timeline */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; /* Center the line on larger screens */
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: var(--color-border);
    z-index: 1; /* Behind items */
}

.timeline-item {
    display: flex;
    position: relative;
    margin-bottom: var(--spacing-lg);
    z-index: 2; /* Above the line */
    width: 100%; /* Ensure item takes full width of its parent */
}

/* Circles on the timeline line */
.timeline-item::after {
    content: '';
    position: absolute;
    top: 0; /* Default vertical position */
    width: 16px;
    height: 16px;
    background-color: var(--color-accent-blue);
    border-radius: 50%;
    border: 3px solid var(--color-bg-primary); /* Circle border matching background */
    z-index: 3; /* On top of the line */
}

/* Default for larger screens: two-column layout */
.timeline-item.left-aligned {
    flex-direction: row-reverse; /* Swap order for left side content */
    justify-content: center; /* Center the item's children within the flex context */
}

.timeline-item.right-aligned {
    flex-direction: row; /* Default order for right side content */
    justify-content: center; /* Center the item's children within the flex context */
}

.timeline-item.left-aligned::after {
    right: 50%; /* Position circle on the left side of the line */
    transform: translateX(50%);
}

.timeline-item.right-aligned::after {
    left: 50%; /* Position circle on the right side of the line */
    transform: translateX(-50%);
}

.timeline-date {
    flex: 0 0 150px; /* Fixed width for date column on larger screens */
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding-top: var(--spacing-xs); /* Align with content */
}

.timeline-item.left-aligned .timeline-date {
    text-align: right;
    padding-right: var(--spacing-xl);
}

.timeline-item.right-aligned .timeline-date {
    text-align: left;
    padding-left: var(--spacing-xl);
}

.timeline-content {
    flex: 1; /* Take remaining space */
    padding: var(--spacing-md);
    text-align: left;
    max-width: calc(50% - 150px); /* Adjust content width to fit on one side */
    box-sizing: border-box; /* Include padding in width */
    min-width: 0; /* Prevent content from overflowing flex container */
}

.timeline-item.left-aligned .timeline-content {
    margin-right: var(--spacing-lg); /* Space between content and date/line */
}

.timeline-item.right-aligned .timeline-content {
    margin-left: var(--spacing-lg); /* Space between content and date/line */
}

.timeline-content h3 {
    color: var(--color-accent-blue-light);
    margin-bottom: var(--spacing-xs);
    font-size: 1.4rem;
}

.timeline-content p {
    font-size: 0.95rem;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.timeline-category {
    display: inline-block;
    background-color: rgba(var(--color-accent-blue-rgb), 0.1);
    color: var(--color-accent-blue);
    padding: 0.3em 0.8em;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: var(--spacing-sm);
}

/* =====================================================================
   RESPONSIVENESS (Timeline Page specific adjustments)
   ===================================================================== */
@media (max-width: 767px) {
    .timeline-container {
        padding-top: calc(var(--spacing-lg) + 80px); /* Adjust for smaller screens */
        padding-bottom: var(--spacing-lg);
        padding-left: var(--spacing-md); /* Added side padding for overall container */
        padding-right: var(--spacing-md);
    }

    /* Make the timeline a single column */
    .timeline-wrapper::before {
        left: 50%; /* Keep line truly centered on mobile */
        transform: translateX(-50%);
    }

    .timeline-item {
        flex-direction: column; /* Stack date and content vertically within the item */
        margin-bottom: var(--spacing-md);
        align-items: center; /* Center the date and content blocks horizontally */
        padding-left: 0; /* Reset any left padding from desktop */
        padding-right: 0; /* Reset any right padding from desktop */
    }

    /* Circles for timeline items on mobile: align with the centered line */
    .timeline-item::after {
        left: 50%; /* Align with the centered line */
        transform: translateX(-50%); /* Center the circle */
        top: -8px; /* Position above the item for visual connection */
    }

    /* Ensure .left-aligned and .right-aligned don't interfere with mobile stacking */
    .timeline-item.left-aligned,
    .timeline-item.right-aligned {
        flex-direction: column; /* Force vertical stacking */
        justify-content: center; /* Center content blocks */
    }

    .timeline-item.left-aligned::after, /* Unify circle position for mobile */
    .timeline-item.right-aligned::after {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    /* Date and content layout on mobile */
    .timeline-date {
        flex: auto; /* Allow date to size naturally */
        padding: var(--spacing-xs) 0; /* Vertical padding only */
        text-align: center; /* Center the date text */
        font-size: 0.9rem;
        width: 100%; /* Date takes full width available to it */
        box-sizing: border-box;
    }

    /* Reset specific text alignments that might come from larger screens */
    .timeline-item.left-aligned .timeline-date,
    .timeline-item.right-aligned .timeline-date {
        text-align: center;
        padding-right: 0;
        padding-left: 0;
    }

    .timeline-content {
        flex: 1; /* Allow content to take up remaining space */
        max-width: 90%; /* Limit content width for readability, keep some side padding */
        margin-left: auto; /* Center the content block */
        margin-right: auto; /* Center the content block */
        padding: var(--spacing-sm); /* Smaller padding inside card */
        text-align: center; /* Center text within the card for single column */
        box-sizing: border-box;
    }

    /* Reset specific content margins from two-column layout */
    .timeline-item.left-aligned .timeline-content,
    .timeline-item.right-aligned .timeline-content {
        margin-left: auto;
        margin-right: auto;
    }

    .timeline-content h3 {
        font-size: 1.15rem; /* Slightly smaller for mobile */
    }

    .timeline-content p {
        font-size: 0.85rem; /* More compact text */
    }

    .timeline-category {
        font-size: 0.75rem; /* Smaller category text */
    }
}

/* Medium devices (tablets) - original styles should be fine or minor tweaks */
@media (min-width: 768px) and (max-width: 1023px) {
    .timeline-date {
        flex: 0 0 120px; /* Slightly narrower date column */
        font-size: 1rem;
    }
    .timeline-item.left-aligned .timeline-date {
        padding-right: var(--spacing-md);
    }
    .timeline-item.right-aligned .timeline-date {
        padding-left: var(--spacing-md);
    }
    .timeline-content {
        max-width: calc(50% - 120px);
    }
    .timeline-item.left-aligned .timeline-content {
        margin-right: var(--spacing-md);
    }
    .timeline-item.right-aligned .timeline-content {
        margin-left: var(--spacing-md);
    }
}

/* =====================================================================
   MODAL STYLES (For Project Details)
   ===================================================================== */
.modals-container {
    /* This is just a semantic wrapper, not directly styled for layout */
}

.modal {
    display: none; /* Hidden by default - JS will change this to 'flex' */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top (higher than nav) */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
    backdrop-filter: blur(8px); /* Glassmorphism background */
    -webkit-backdrop-filter: blur(8px); /* For Safari */
    animation: fadeIn 0.3s forwards; /* Fade in animation */

    /* === NEW: Flexbox for centering === */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    padding: var(--spacing-lg); /* Add some padding so content doesn't stick to screen edges */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    overflow: auto; /* Allow the entire modal overlay to scroll if content is too tall */
}

.modal-content {
    position: relative; /* Keep relative for inner elements like close button */
    
    background-color: rgba(var(--color-bg-primary-rgb), 0.9); /* Opaque background for content */
    
    /* === CHANGED: Remove margin, flexbox handles centering === */
    margin: 0; /* Reset margin from previous attempts */

    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 800px; /* Max width of the modal content */
    width: 90%; /* Responsive width */
    
    /* === NEW: Ensure content scrollability if it overflows === */
    max-height: 90vh; /* Limit height to 90% of viewport height */
    overflow-y: auto; /* Enable vertical scroll if content exceeds max-height */
    
    color: var(--color-text-primary);
    animation: slideInTop 0.4s ease-out forwards; /* Slide in animation */
    
    border: 1px solid rgba(255, 255, 255, 0.2); /* Slightly more opaque border */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Stronger shadow for depth */
}

.modal-content h3 {
    color: var(--color-accent-blue-light);
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.modal-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-lg);
    display: block; /* Ensure no extra space below image */
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--shadow-md);
}

.modal-content p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.modal-tags {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center; /* Center tags */
}

.modal-tags .highlight-tag {
    font-size: 0.9rem;
    padding: 0.4em 0.8em;
}

.modal-links {
    text-align: center;
    margin-top: var(--spacing-lg);
    display: flex; /* Use flexbox for buttons */
    justify-content: center; /* Center buttons */
    gap: var(--spacing-md); /* Space between buttons */
}

.modal-links .btn {
    min-width: 150px; /* Ensure buttons have a minimum width */
}

.close-button {
    color: var(--color-text-secondary);
    font-size: 2.5rem;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 25px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--color-accent-blue);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInTop {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Adjustments for Modals */
@media (max-width: 767px) {
    .modal {
        padding: var(--spacing-md); /* Adjust padding for smaller screens */
    }

    .modal-content {
        margin: 0; /* Reset margin again for mobile specific */
        padding: var(--spacing-md);
        width: 95%; /* Take more width */
        max-height: 95vh; /* Adjust max height for smaller viewports */
    }

    .modal-content h3 {
        font-size: 1.6rem; /* Smaller title */
    }

    .modal-content p {
        font-size: 0.9rem; /* Smaller text */
    }

    .modal-image {
        margin-bottom: var(--spacing-md);
    }

    .modal-tags {
        gap: var(--spacing-xs);
    }

    .modal-tags .highlight-tag {
        font-size: 0.8rem;
        padding: 0.3em 0.6em;
    }

    .modal-links {
        flex-direction: column; /* Stack buttons vertically */
        gap: var(--spacing-sm);
    }

    .modal-links .btn {
        width: 100%; /* Full width buttons */
        min-width: unset; /* Remove min-width */
    }

    .close-button {
        font-size: 2rem;
        top: 10px;
        right: 15px;
    }
}

/* New styles for individual project pages */
.project-detail-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.project-detail-section {
    padding-top: calc(var(--spacing-xl) + 80px); /* Adjust for fixed nav */
    padding-bottom: var(--spacing-xl);
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align content to top within section */
    flex-grow: 1; /* Allow section to grow and push footer down */
    text-align: left; /* Default text alignment */
}

.project-detail-container {
    max-width: 900px;
    width: 100%;
    padding: var(--spacing-lg);
    position: relative; /* For back button positioning */
    margin-top: var(--spacing-md); /* Give some space below nav */
    margin-bottom: var(--spacing-md); /* Space before footer */
}

.back-button {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    z-index: 10;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.project-detail-title {
    color: var(--color-accent-blue);
    margin-top: var(--spacing-xl); /* Space below back button */
    margin-bottom: var(--spacing-md);
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
}

.project-detail-image {
    width: 100%;
    height: auto;
    max-height: 400px; /* Limit image height */
    object-fit: contain; /* Ensure image fits without cropping */
    border-radius: 8px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--color-border);
    display: block; /* Remove extra space below image */
    margin-left: auto;
    margin-right: auto;
}

.project-detail-description {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.project-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    justify-content: center; /* Center tags */
}

.project-detail-links {
    text-align: center;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

/* Responsive adjustments for project detail pages */
@media (max-width: 767px) {
    .project-detail-container {
        padding: var(--spacing-md);
        margin-top: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }
    .back-button {
        top: var(--spacing-sm);
        left: var(--spacing-sm);
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    .project-detail-title {
        font-size: clamp(1.8rem, 6vw, 2.2rem);
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }
    .project-detail-image {
        max-height: 250px;
        margin-bottom: var(--spacing-md);
    }
    .project-detail-description {
        font-size: 1rem;
        margin-bottom: var(--spacing-md);
    }
    .project-detail-tags {
        gap: var(--spacing-xs);
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    .project-detail-links .btn-primary {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }
}

@media (min-width: 768px) {
    .project-detail-container {
        padding: var(--spacing-xl);
    }
    .back-button {
        top: var(--spacing-lg);
        left: var(--spacing-lg);
    }
    .project-detail-title {
        margin-top: var(--spacing-lg);
    }
}

/* =====================================================================
   NEW CONTENT LAYOUT (Grid Structure for Projects and Sidebar)
   ===================================================================== */
/* =====================================================================
   NEW CONTENT LAYOUT (Grid Structure for Projects and Sidebar)
   ===================================================================== */
.content-layout {
    display: grid;
    gap: var(--spacing-lg);
    /* This line creates the two columns: 3 parts for projects, 1 part for card */
    grid-template-columns: 3fr 1fr; 
    padding-top: var(--spacing-sm);
}

.main-projects-column {
    min-width: 0; 
}

.sidebar-column {
    min-width: 0;
}

/* =====================================================================
   GITHUB PROFILE CARD STYLES
   ===================================================================== */
.github-card {
    background-color: var(--color-bg-secondary);
    border-radius: 12px;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--color-border);
    transition: box-shadow 0.3s ease;
    /* Aligns the card to the top of its grid cell */
    align-self: start; 
}

.github-card:hover {
    box-shadow: var(--shadow-hover);
}

.github-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--spacing-sm);
    border: 3px solid var(--color-accent-blue);
}

.github-username {
    font-family: var(--font-family-title);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.github-bio {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.github-link .fa-github {
    font-size: 1.2rem;
    margin-right: 8px;
}

/* =====================================================================
   RESPONSIVE DESIGN 
   ===================================================================== */
@media (max-width: 1024px) {
    .content-layout {
        /* Tablet adjustment */
        grid-template-columns: 2fr 1fr; 
    }
}

@media (max-width: 768px) {
    .content-layout {
        /* Mobile: Collapse to single column */
        grid-template-columns: 1fr; 
        gap: var(--spacing-md);
    }
    .sidebar-column {
        /* Pushes the GitHub card to the very top before the projects list on mobile */
        order: -1; 
    }
    /* Ensure the project grid also uses a single column on mobile */
    .projects-grid {
        grid-template-columns: 1fr; 
    }
}