/* Define the professional accent color */
:root {
    --primary-blue: #004c99; /* A deep, professional blue */
    --text-dark: #333;
    --background-light: #f9f9f9;
}

/* Apply padding to the scroll container to account for the fixed header */
html {
    /* Adjust this value (e.g., 60px) to match the height of your #navbar */
    scroll-padding-top: 40px; 
    scroll-behavior: smooth; /* Optional: Makes the jump less jarring */
}

/* Reset and apply base font */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: white;
    margin: 0;
}

/* Base header styles */
h2 {
    color: var(--primary-blue);
    border-bottom: 2px solid var(--primary-blue); /* Subtle divider */
    padding-bottom: 5px;
    margin-top: 1em;
}

/* Hyperlinks */
a {
    color: var(--primary-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Fixed Navigation Bar */
#navbar {
    background-color: white;
    border-bottom: 1px solid #ddd;
    padding: 15px 5%;
    position: sticky; /* Keeps it at the top */
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
}

#navbar nav a {
    margin-right: 25px;
    font-weight: 600; /* Semi-bold for clarity */
    font-size: 1.1em;
}

/* Main content container */
#container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 5%;
}

/* General Section Padding */
section {
    padding: 20px 0;
}

/* Two-Column Layout for Home/Profile */
.two-column-layout {
    display: grid;
    grid-template-columns: 3fr max(250px, 30ch); /* 75% for content, 25% for sidebar */
    gap: 40px;
    align-items: start;
}

/* Sidebar Styling (for photo and contact) - REVISED */
.sidebar {
    background-color: var(--background-light);
    padding: 20px;
    border-radius: 8px;
    /* Ensure text in the sidebar is slightly smaller for dense information */
    font-size: 0.95em; 
    line-height: 1.4; /* Tighter line spacing */
}
.sidebar img {
    width: 100%;
    border-radius: 5%; /* Optional: Round photo for a friendly, modern look */
    margin-bottom: 20px;
}

/* Specific Contact Block Styling */
.contact-block h3, .external-links h3 {
    /* Use a smaller, subtle heading for section titles */
    font-size: 1.1em;
    font-weight: 700;
    color: #555; /* Slightly muted color */
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Ensure no extra margin is applied to paragraphs in the contact block */
.contact-block p {
    margin: 5px 0;
    word-wrap: break-word; /* Essential: Allows long strings (like phone numbers) to break if absolutely necessary */
}

/* Style for external links (icons) to keep them clean */
.external-links a {
    display: block; /* Make each link take a full line */
    margin-bottom: 8px;
    text-align: left;
}

.external-links i {
    margin-right: 8px;
    width: 20px; /* Give the icon a fixed width for alignment */
    text-align: center;
}

/* Project Card Style */
.project-card {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 6px;
    transition: box-shadow 0.2s;
}

.project-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Lift effect on hover */
}

.project-card h3 {
    margin-top: 0;
    color: var(--primary-blue);
}

.project-meta {
    font-style: italic;
    color: #666;
    margin-top: -10px;
    font-size: 0.9em;
}

/* Base style for the entire software container */
.software-block {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle lift */
}

/* Header for logo/title alignment */
.software-header {
    display: flex;
    align-items: center; /* Vertically align logo and text */
    margin-bottom: 10px;
}

/* 🌟 LOGO AND ICON STYLING 🌟 */
.software-logo {
    /*width: 60px;*/ /* Fixed size for consistency */
    height: 40px;
    margin-right: 15px;
    border-radius: 4px; /* Optional: smooth corners on the logo image */
}

.software-icon {
    font-size: 36px; /* Larger size for Font Awesome icons */
    color: var(--primary-blue);
    margin-right: 15px;
    width: 60px;
    text-align: center;
}

.software-header h3 {
    margin: 0;
    color: #333;
}

/* License and Metadata Text */
.license-info {
    font-size: 0.9em;
    color: #666;
    margin-top: -10px; /* Pull metadata closer to the description */
    margin-bottom: 15px;
}

/* Secondary Button Style (e.g., for GitHub links) */
.button-secondary {
    display: inline-block;
    background-color: #555; /* A dark gray for contrast */
    color: white !important;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 600;
    margin-right: 10px;
    transition: background-color 0.2s;
}

.button-secondary:hover {
    background-color: #333; 
    text-decoration: none;
}

/* Base Footer Styling */
footer {
    border-top: 1px solid #eee; 
    /* Remove padding and width: 100% from here */
    padding: 5px 0; /* Only vertical padding */
    margin-top: 0px; 
    background-color: var(--background-light); 
}

/* Use Flexbox to manage alignment and set width constraints */
.footer-content {
    /* **CRITICAL FIXES:** Apply the same width constraints as #container */
    max-width: 1200px; /* Matches max-width of #container */
    margin: 0 auto; /* Centers the footer content */
    
    /* Apply horizontal padding (matching the 5% used in #container) */
    padding: 0 5%; 
    
    /* Flexbox rules to position content */
    display: flex;
    justify-content: flex-end; 
    align-items: center;
}

/* De-emphasize the Copyright Text (Keep this for styling) */
.copyright-info {
    font-size: 0.85em; 
    color: #888; 
    margin: 0; 
}

.mobileonly {
    display: none
}

/* =============================================
   7. Mobile Responsiveness (Max Width: 768px)
   ============================================= */
@media (max-width: 768px) {
    /* 1. Eliminate the Two-Column Layout */
    .two-column-layout {
        grid-template-columns: 1fr; 
        gap: 20px; 
        padding: 10px; 
    }
    
    /* 2. Revert sidebar alignment to stack content */
    .sidebar {
        order: 1; 
        text-align: center; /* Center the entire sidebar block */
        padding: 15px 10px;
    }
    
    /* 3. Main Profile Info comes SECOND on Mobile */
    .main-profile-info {
        order: 2; /* Main content is second on mobile */
        padding: 10px;
    }

    /* 4. Adjust Mobile Photo Layout */
    .sidebar img {
        max-width: 100%; /* Photo takes full width (max 180px, but centers better) */
        height: auto;
        margin: 0 auto 15px auto; /* Centers the photo and adds margin below */
        display: block; /* CRITICAL: Forces the photo to occupy its own line */
        float: none; /* CRITICAL: Removes the text wrap */
    }

    /* 5. Adjust Contact/Link Block Alignment */
    .contact-block, .external-links, .opportunities {
        text-align: left; /* Keep text aligned left for readability */
        /* Ensure these blocks take full width if they have internal centering issues */
        width: 100%;
        display: block; 
    }
    
    .sidebar .external-links a {
        /* Ensure icon links are centered or aligned appropriately */
        text-align: left;
    }
    h1 {
        text-align: left;
    }
    .title-primary {
        text-align: left;
    }
    .desktoponly {
        display:none
    }
    .mobileonly {
        display:contents
    }
    /* ... rest of your mobile styles ... */
}