/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #f8f9fa; /* Changed from #333 to light color for readability */
    background: linear-gradient(to right, #3494e6, #ec6ead); /* Same gradient as hero section */
    min-height: 100vh; /* Ensure the background covers the full viewport height */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    text-decoration: none;
    color: #3498db; /* Changed to a brighter blue for better visibility on dark background */
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Header styles */
header {
    background: linear-gradient(to right, #3494e6, #ec6ead);
    color: white;
    padding: 1.5rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    font-size: 1.8rem;
    margin: 0;
}

nav ul {
    display: flex;
}

nav ul li {
    margin-left: 1.5rem;
}

nav ul li a {
    color: white;
    font-weight: 600;
    padding: 0.5rem;
    transition: all 0.3s ease;
}

nav ul li a:hover, nav ul li a.active {
    color: #3498db;
}

/* Hero section */
.hero {
    /* Remove background since body already has the gradient */
    color: white;
    padding: 4rem 0; /* Original padding */
    text-align: center;
    margin-bottom: 0; /* No margin needed */
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}

/* Main content area */
main {
    position: relative;
    width: calc(100% - 40px); /* Full width minus 20px on each side */
    margin: 0 20px; /* Add horizontal margins */
    padding-top: 2rem;
    padding-bottom: 2rem; /* Add bottom padding for spacing */
    background-color: #333; /* Solid dark background */
    border-radius: 12px; /* Rounded corners on all sides */
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.3), /* Top shadow */
                0 10px 25px rgba(0, 0, 0, 0.3),  /* Bottom shadow */
                -10px 0 25px rgba(0, 0, 0, 0.3), /* Left shadow */
                10px 0 25px rgba(0, 0, 0, 0.3);  /* Right shadow */
}

/* Container inside main should still be centered with controlled width */
main .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    padding-top: 3rem;
    margin-bottom: 3rem;
}

/* First section after hero needs extra padding for spacing */
main section:first-child {
    padding-top: 3rem;
}

section h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: white;
}

/* Project grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    display: block;
    background: #2c3e50;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    position: relative;
    overflow: hidden; /* Keep the shine effect contained within the card */
    color: #f8f9fa; /* Text color */
    text-align: left;
    text-decoration: none;
    height: 100%;
    transform-origin: center left; /* Scale from left side */
    cursor: pointer; /* Indicate the card is clickable */
    border: 1px solid transparent; /* Pre-add border to prevent layout shift */
}

.project-card::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -150%;
    width: 100%;
    height: 300%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.2) 45%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.2) 55%,
        rgba(255, 255, 255, 0.05) 75%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    transition: transform 0s;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.project-card:hover {
    transform: translateY(-5px) scale(1.01); /* Smaller scale to prevent text wrapping */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8f9fa; /* Ensure text color doesn't change on hover */
}

.project-card:hover::before {
    animation: shine 0.4s ease-out forwards;
    opacity: 1;
}

@keyframes shine {
    0% {
        left: -150%;
        opacity: 1;
    }
    100% {
        left: 150%;
        opacity: 0;
    }
}

.project-card h3 {
    margin-bottom: 1rem;
    color: #f8f9fa; /* Changed from dark to light color */
}

.project-card p {
    color: #f8f9fa; /* Added light text color */
}

.project-card p:last-child {
    margin-bottom: 0; /* Remove margin from last paragraph since we don't have buttons anymore */
    display: flex;
    align-items: center;
}

.project-card p:last-child::after {
    content: "→";
    margin-left: 8px;
    font-size: 1.2em;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.project-card:hover p:last-child::after {
    opacity: 1;
    transform: translateX(0);
}

.btn {
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 0.7rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #2980b9;
}

/* Updates section */
.updates-list-card { /* This is the single card for all updates */
    background: #2c3e50;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem; /* Margin for the entire card section */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Styling for individual entries within the card */
.individual-update-entry {
    /* No specific card styles here; it's a content flow within .updates-list-card */
    /* Add padding or margin if needed between the entry and the <hr> or next entry */
}

/* Font inheritance and specific styles for elements within each update entry */
.individual-update-entry h1,
.individual-update-entry h2,
.individual-update-entry h3,
.individual-update-entry h4,
.individual-update-entry h5,
.individual-update-entry h6,
.individual-update-entry p,
.individual-update-entry ul,
.individual-update-entry ol,
.individual-update-entry li,
.individual-update-entry blockquote,
.individual-update-entry strong,
.individual-update-entry em,
.individual-update-entry a {
    font-family: inherit; /* Inherit from body ('Segoe UI', etc.) */
    color: #f8f9fa; /* Default light text color for readability */
}

/* Make links in updates use the global link color or a custom one */
.individual-update-entry a {
    color: #3498db; /* This is your site's global link color */
    /* text-decoration: underline; */ /* Uncomment this line if you want underlines */
}

/* Retain specific styling for headings within updates if necessary */
.individual-update-entry h3 {
    color: #f8f9fa; /* Ensures heading color if not inherited properly */
    margin-top: 0.5em; /* Add some space above headings */
    margin-bottom: 0.5em; /* Add some space below headings */
}

/* Styles for code blocks and inline code within individual update entries */
.individual-update-entry pre,
.individual-update-entry code {
    font-family: 'Courier New', Courier, monospace;
    background-color: rgba(0,0,0,0.1);
    padding: 2px 4px;
    border-radius: 4px;
    color: #e0e0e0;
}

.individual-update-entry pre {
    padding: 0.75em;
    margin: 0.5em 0;
    overflow-x: auto;
    background-color: rgba(0,0,0,0.2);
}

    /* Styling for lists within updates to show bullets/numbers */
    .individual-update-entry ul {
        list-style: disc; /* Show dot bullets */
        margin-left: 20px; /* Indentation for the list */
        padding-left: 20px; /* Space for the bullet itself */
    }

    .individual-update-entry ol {
        list-style: decimal; /* Show numbers for ordered lists */
        margin-left: 20px;
        padding-left: 20px;
    }

/* Separator between update entries */
hr.update-separator {
    border: none;
    height: 1px;
    background-color: rgba(248, 249, 250, 0.2); /* Light separator on dark card */
    margin: 1.5rem 0; /* Space around hr */
}

/* Remove bottom margin from the last individual-update-entry if using hr, or adjust hr margin */
.individual-update-entry:last-child {
    margin-bottom: 0; /* Optional: if hr provides enough spacing */
}
/* Remove the last hr separator */
.individual-update-entry:last-child + hr.update-separator {
    display: none; /* This CSS selector might not work as <hr> is a sibling of the wrapper */
}
/* A better way to handle the last separator is not to add it in JS if it's the last item,
   or style the last hr specifically if the JS always adds it.
   The current JS adds it via .join(), so the last item won't have an <hr> after it. This is good.
*/

/* Ensure text in update items uses the body font (excluding code/pre) */
.update-item h1,
.update-item h2,
.update-item h3,
.update-item h4,
.update-item h5,
.update-item h6,
.update-item p,
.update-item ul,
.update-item ol,
.update-item li,
.update-item blockquote,
.update-item strong,
.update-item em,
.update-item a {
    font-family: inherit; /* This will inherit from 'Segoe UI', etc. */
}

/* Styles for code blocks and inline code within updates */
.update-item pre,
.update-item code {
    font-family: 'Courier New', Courier, monospace; /* Monospace font stack */
    background-color: rgba(0,0,0,0.1); /* Subtle background for code elements */
    padding: 2px 4px;
    border-radius: 4px;
    color: #e0e0e0; /* Lighter text color for code on dark backgrounds */
}

.update-item pre { /* Specific styles for multi-line code blocks */
    padding: 0.75em; /* More padding for blocks */
    margin: 0.5em 0; /* Add some space around code blocks */
    overflow-x: auto; /* Allow horizontal scrolling for long lines of code */
    background-color: rgba(0,0,0,0.2); /* Slightly darker for blocks */
}

/* Footer */
footer {
    background: linear-gradient(to right, #3494e6, #ec6ead); /* Same gradient as body/hero */
    color: white;
    padding: 2rem 0;
    text-align: center;
    margin-top: auto; /* Push footer to the bottom */
}

/* Page structure for sticky footer */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* Take up available space to push footer down */
}

/* About page styles */
.about-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.about-text h3 {
    color: #f8f9fa; /* Changed to light color for dark background */
    margin: 1.5rem 0 1rem;
}

.about-text h3:first-child {
    margin-top: 0;
}

.skills-list {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.skills-list li {
    margin-bottom: 0.5rem;
    position: relative;
}

.skills-list li::before {
    content: "•";
    color: #3498db;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* Styling for standard lists within .about-text to show bullets/numbers */
.about-text ul {
    list-style: disc; /* Show dot bullets */
    margin-top: 0.5em; /* Space above the list */
    margin-bottom: 1em; /* Space below the list */
    padding-left: 40px; /* Indentation and space for bullets */
}

.about-text ul li {
    margin-bottom: 0.5em; /* Space between list items */
}

.about-text ol { /* For numbered lists, if you use them */
    list-style: decimal;
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding-left: 40px;
}

.about-text ol li {
    margin-bottom: 0.5em;
}

/* Styling for standard lists within .about-text to show bullets/numbers */
.about-text ul {
    list-style: disc; /* Show dot bullets */
    margin-top: 0.5em; /* Space above the list */
    margin-bottom: 1em; /* Space below the list */
    padding-left: 40px; /* Indentation and space for bullets */
}

.about-text ul li {
    margin-bottom: 0.5em; /* Space between list items */
}

.about-text ol { /* For numbered lists, if you use them */
    list-style: decimal;
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding-left: 40px;
}

.about-text ol li {
    margin-bottom: 0.5em;
}

.profile-card {
    background: linear-gradient(to right, #3494e6, #ec6ead); /* Changed background */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
    color: white; /* Added default light text color */
}

.profile-card h3 {
    padding: 1rem;
    margin: 0;
    text-align: center;
    color: white; /* Changed color */
}

.job-title {
    text-align: center;
    color: #f0f0f0; /* Changed to a light color */
    margin: 0 0 1rem;
}

.social-links {
    display: flex;
    justify-content: center;
    padding: 0 1rem 1rem;
}

.social-links a {
    margin: 0 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    background-color: #f8f9fa;
    transition: background-color 0.3s ease;
}

.social-links a:hover {
    background-color: #e9ecef;
}

/* About page - Profile Card Photo Styling */
.profile-placeholder {
    padding: 20px; /* Creates the "border" by showing .profile-card background */
}

.profile-placeholder img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Rounded corners for the image itself */
}

.testimonial {
    background: linear-gradient(to right, #3494e6, #ec6ead); /* Changed background */
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: #f8f9fa; /* Added default light text color */
}

.testimonial blockquote {
    font-style: italic;
    margin-bottom: 1rem;
    position: relative;
}

.testimonial blockquote::before {
    content: "\201C";
    font-size: 2.5rem;
    position: absolute;
    left: -1rem;
    top: -1rem;
    color: #e1e1e1;
}

.testimonial cite {
    display: block;
    text-align: right;
    font-weight: 600;
    font-style: normal;
    color: #f0f0f0; /* Changed to a light color */
}

/* Contact page styles */
.contact-form {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2c3e50;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-submit {
    text-align: right;
}

.contact-info {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-top: 2rem;
}

.contact-info h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.contact-info p {
    margin-bottom: 0.5rem;
}

.contact-info .contact-method {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.contact-method span {
    font-weight: 600;
    min-width: 80px;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
    header .container {
        flex-direction: column;
    }
    
    header h1 {
        margin-bottom: 1rem;
    }
    
    nav ul {
        justify-content: center;
    }
    
    nav ul li {
        margin: 0 0.75rem;
    }
    
    .hero {
        padding: 3rem 0;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .project-grid {
        grid-template-columns: 1fr;
    }
    
    .hero h2 {
        font-size: 1.8rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    nav ul {
        flex-wrap: wrap;
    }
    
    /* Adjust main container for smaller screens */
    main {
        width: calc(100% - 20px); /* Reduce horizontal margins */
        margin: 0 10px; /* Smaller margins on mobile */
    }
}