/* 
    Author: Kane Miller
    Date: 10-26-2024
    File: styles.css
    Version: 2.5
    Description: This stylesheet defines global styles and layout settings for the portfolio website.
                 It ensures consistency across components like buttons, navigation, and section content.
                 Version 2.4 includes updates for color consistency, hover effects, and aesthetic improvements 
                 for a more professional appearance.
*/

/* Resetting margin and padding for consistency across browsers */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

/* Global styling */
body {
    font-family: 'Poppins', Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.8;
    scroll-behavior: smooth;
    font-size: 1.1rem;
}

/* Consistent body text styling for all main sections */
.section-body {
    font-size: 1.1rem; 
    color: #555; 
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Styling for section containers to maintain consistent spacing */
.section-container {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Header section */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #001f5b; 
    color: #fff;
    border-bottom: 3px solid #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Logo styling */
.logo {
    width: 200px;
    height: auto;
    vertical-align: middle;
}

/* Styling for the header content */
.header-content {
    flex-grow: 1;
    text-align: center;
}

/* Main site title styling */
.site-title {
    font-size: 3rem;
    letter-spacing: 1.5px;
    margin: 0;
    font-weight: bold;
}

/* Navigation menu styling */
.site-navigation {
    background-color: #33415c;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* List for navigation items */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

/* Styling individual navigation list items */
.nav-list li {
    display: inline-block;
    margin-right: 25px;
}

.nav-list li:last-child {
    margin-right: 0;
}

/* Styling the links inside the navigation menu */
.nav-list li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s, border-bottom 0.3s;
}

.nav-list li a:hover,
.nav-list li a:focus {
    color: #ffd700; 
    border-bottom: 2px solid #ffd700;
    outline: none;
}

.nav-list li a.active {
    color: #ffd700;
    border-bottom: 2px solid #ffd700;
}

/* Main content area styling */
.main-content {
    max-width: 1000px;
    margin: 60px auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Section title styling */
h2 {
    font-size: 2.4rem;
    margin-bottom: 20px;
    text-align: center;
}

/* Content text styling */
.section-content {
    font-size: 1rem;
    color: #555;
}

/* Resume button styling */
.resume-download {
    margin-top: 40px;
    text-align: center;
}

.resume-button {
    background-color: #1e73be; 
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 1rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.2s;
    cursor: pointer;
    display: inline-block; 
    margin: 0 auto; 
}

.resume-button:hover,
.resume-button:focus {
    background-color: #145a8b; 
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

/* Social section styling */
.social-section {
    margin-top: 40px;
}

.social-links {
    text-align: center;
    margin-top: 20px;
}

.social-links a {
    text-decoration: none;
    color: #1e73be;
    font-weight: bold;
    margin: 0 10px;
    transition: color 0.3s, transform 0.3s;
}

.social-links a:hover,
.social-links a:focus {
    color: #145a8b;
    transform: scale(1.05); 
    outline: none;
}

/* Footer section styling */
.site-footer {
    background-color: #001f5b;
    color: #fff;
    padding: 40px 0;
    border-top: 3px solid #495057;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; 
}

/* Styling for the text and links in the footer */
.footer-text {
    display: flex;
    align-items: center; 
    justify-content: center; 
    gap: 15px; 
    font-size: 1rem;
}

.footer-text a {
    color: #ffd700;
    text-decoration: none;
    transition: color 0.3s, text-decoration 0.3s;
}

.footer-text a:hover,
.footer-text a:focus {
    color: #ffc107;
    text-decoration: underline;
    outline: none;
}

/* Footer icon styling */
.footer-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.footer-icon:hover,
.footer-icon:focus {
    transform: scale(1.1);
    outline: none;
}

/* Footer logo styling */
.footer-logo {
    width: 65px;
    height: 65px;
    margin-right: 5px;
    transition: transform 0.3s;
}

.footer-logo:hover,
.footer-logo:focus {
    transform: scale(1.1);
    outline: none;
}

/* Contact form styles */
.contact-section {
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 10px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    background-color: #fff;
    color: #333;
}

.contact-form textarea {
    resize: vertical;
}

/* About page: Profile image and text */
.about-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.about-text {
    flex: 1;
    margin-right: 20px;
}

.profile-image {
    flex: 0 0 200px;
    max-width: 100%;
}

.profile-picture {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column;
        align-items: center; 
        padding: 15px 20px; 
    }

    .logo {
        width: 120px; 
        margin-bottom: 10px; 
    }

    .header-content {
        text-align: center;
        max-width: 100%; 
    }

    .site-title {
        font-size: 2rem; 
        line-height: 1.2;
        margin: 5px 0; 
        word-wrap: break-word; 
    }

    /* Adjust image within the header */
    .header-content img {
        display: block;
        margin: 10px auto; 
    }

    /* Navigation adjustments for better spacing */
    .site-navigation {
        padding: 10px 0;
        text-align: center; 
    }

    .nav-list li {
        margin: 0 10px; 
        display: inline-block;
    }

    /* Adjust margin and padding for the main content */
    .main-content {
        padding: 20px 10px; 
        margin: 20px auto; 
    }

    /* Footer adjustments */
    .site-footer {
        padding: 30px 10px; 
    }

    .footer-logo {
        width: 50px; 
    }

    /* Additional section adjustments if needed */
    .section-content {
        font-size: 1rem; 
    }

    .about-section {
        display: flex;
        flex-direction: column; 
        align-items: center;
        padding: 20px;
    }

    .about-text {
        margin: 10px 0;
        text-align: center;
        max-width: 100%; 
    }

    .profile-image {
        order: 2; 
        margin-bottom: 15px;
        width: 80%; 
    }

    .profile-picture {
        width: 100%;
        height: auto;
        border-radius: 8px;
        margin-top: 10px; 
    }
}

/* Project section styles */
.project {
    border: 1px solid #ddd;
    padding: 30px;
    margin: 30px auto;
    width: 75%;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Project titles */
#projects-titles {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 25px;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
}

/* Individual project title */
.project-title {
    margin: 0;
    font-size: 1.6rem;
    color: #333;
}

/* Navigation buttons container */
.nav-buttons {
    text-align: center;
    margin: 40px 0;
}

/* Buttons styling */
button,
.next-button,
.prev-button {
    padding: 12px 24px;
    margin: 10px;
    background-color: #1e73be; 
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s;
    font-size: 1rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

button:hover,
button:focus,
.next-button:hover,
.next-button:focus,
.prev-button:hover,
.prev-button:focus {
    background-color: #145a8b; 
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    outline: none;
}

/* Disabled button styling (if applicable) */
button:disabled,
.next-button:disabled,
.prev-button:disabled {
    background-color: #ccc;
    color: #888;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Projects list */
#projects-list {
    list-style: none;
    padding: 0;
}

/* Individual project item */
#projects-list li {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 12px 20px;
    font-weight: bold;
    background-color: #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s;
    font-size: 0.9rem;
}

#projects-list li:hover,
#projects-list li:focus {
    background-color: #1e73be; 
    color: white;
    transform: translateY(-2px);
    outline: none;
}

/* Highlight active project title */
#projects-list li.active-project {
    background-color: #1e73be; /* Highlight color */
    color: white; /* Text color */
    border: 2px solid #145a8b; /* Optional border for emphasis */
}

/* Project list links */
#projects-list li a {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}