/* Layout Styles */

/* Header & Navigation (including sticky/scrolled states) */
#main-nav {
    background-color: #101823;
    padding: 7px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: padding 0.3s ease, top 0.3s ease, background-color 0.3s ease;
    min-height: 48px;
}

#main-nav.nav-scrolled {
    padding: 10px 0;
    background-color: #101823;
    box-shadow: 0 5px 20px rgba(0,0,0,0.7);
}

#main-nav .nav-container {
    width: 90%; /* Consistent with .container */
    max-width: 1200px; /* Can be larger than general content for nav */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-nav .nav-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3em;
    color: #00aaff;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
}

#main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

#main-nav ul li {
    margin-left: 16px;
}

#main-nav ul li:first-child {
    margin-left: 0;
}

#main-nav ul li a {
    color: #f0f0f0; /* Base color for links */
    text-decoration: none;
    font-size: 1.0em;
    font-family: 'Anta', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    padding: 3px 0;
    position: relative;
    top: 8px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#main-nav ul li:nth-child(even) a {
    color: #c0c0c0; /* Alternate color for even links */
}

#main-nav ul li a:hover,
#main-nav ul li a.active-link {
    color: #5a9a6a; /* Changed to darker green */
    text-shadow: 0 0 7px rgba(90, 154, 106, 0.35); /* Adjusted shadow for darker green */
}

/* Underline effect for nav links */
#main-nav ul li a::after { /* Combined from old hero nav and main-nav */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #5a9a6a; /* Changed to darker green */
    transition: width 0.3s ease, left 0.3s ease;
}

#main-nav ul li a:hover::after,
#main-nav ul li a.active-link::after {
    width: 100%;
    left: 0;
}

/* Hero Section */
#hero {
    height: 55vh;
    min-height: 320px;
    max-height: 60vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: relative;
    background: transparent;
    padding-top: 56px;
    padding-bottom: 0;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 0.5rem;
}

#hero h1 {
    font-size: 2.2rem;
    color: #fff; /* Text color remains white */
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.8),  /* Green glow */
                 0 0 20px rgba(57, 255, 20, 0.6),  /* Green glow */
                 0 0 35px rgba(57, 255, 20, 0.45); /* Green glow */
    margin-top: 0;
    margin-bottom: 0.8em; /* Increased space below name */
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

#hero-taglines {
    margin-bottom: 18px;
}

#hero-taglines .hero-tagline {
    font-size: 1.08rem;
    font-family: 'Oxanium', sans-serif; /* Changed font to Oxanium */
    color: #e0e0e0;
    margin: 0.2em auto;
    max-width: 700px;
    line-height: 1.7;
    text-shadow: none;
    opacity: 1;
    transform: none;
}

/* All .tagline-bubble, .tagline-bubbles-container, and specific bubble ID styles are removed. */
/* Ensure any styles for .hero-main-content are also removed if they were added. */

.hero-cta-container {
    margin-top: 10px;
}

/* General Section Styling */
#about {
    padding: 2px 0 5px 0;
    background: #101823; /* Changed to new color */
    border-radius: 14px;
    margin-bottom: 22px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    border: 1px solid rgba(16, 24, 35, 0.3); /* Adjusted border for new background */
}

#skills,
#contact,
#core-strengths {
    padding: 2px 0 5px 0; /* Further reduced top padding, adjusted bottom padding */
    background: #101823; /* Unified background color with #about */
    border-radius: 14px;
    margin-bottom: 22px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25); /* Adjusted shadow */
    border: 1px solid rgba(16, 24, 35, 0.3); /* Border to complement new background */
}

#projects,
#philosophy {
    padding: 5px 0 32px 0; /* Adjusted top padding, retained others */
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0; /* Remove border-radius as it's no longer a distinct block */
    margin-bottom: 22px;
}

.about-content { /* Specific to About section layout */
    display: flex;
    align-items: center;
    gap: 40px;
}

.about-text {
    flex: 2;
    margin: 0 auto; /* Center the text block */
}

.about-image {
    flex: 1;
    text-align: center;
}

.about-image img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #00aaff;
}

/* Skills Section Layout */
/* .skills-categories and .skill-category h3 styles are no longer needed due to unified grid */

/* .skill-category styling is removed as it's no longer a separate box */
/* Core Strengths Section Specifics */
/* Old ul/li styles are removed as it now uses .skills-grid and .skill-item */
#core-strengths .skill-item i { /* Changed span to i to target Font Awesome icons */
    font-size: 1.8em; /* Match skill icon size */
    display: block;
    text-align: center; /* Center the icon glyph */
    margin-bottom: 8px; /* Match skill icon margin */
    color: #6fbe83; /* Theme color for icons - CHANGED TO GREEN */
}

#core-strengths .skill-item p {
    font-size: 0.85em; /* Match skill item text size */
    line-height: 1.4; /* Match skill item line height */
    margin: 0;
    color: #e0e0e0; /* Ensure text color matches skills items */
}

/* Philosophy Section Specifics */
#philosophy .container {
    max-width: 1400px;
    padding: 0 1.5rem;
}

#philosophy h2 {
    color: #6fbe83; /* Changed to match About Me title color */
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 20px;
    text-align: center;
}

#philosophy p {
    font-family: 'Oxanium', sans-serif; /* Added to match About Me paragraph font */
    font-size: 1.1em;
    color: #ccc;
    text-align: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Standardizing other section titles to match About Me & Philosophy */
#projects h2,
#skills h2,
#core-strengths h2,
#contact h2 {
    color: #6fbe83; /* Match About Me & Philosophy title color */
    /* Retain Orbitron font if specified in base or other general h2 rule, otherwise consider adding it if desired */
    /* text-align and margin-bottom will likely be inherited or can be added if needed */
}

#about h2 { /* Specific adjustment for About Me title */
    color: #6fbe83; /* Changed title color */
    margin-bottom: 10px; /* Reduced margin */
}

#about p { /* Specific adjustment for About Me paragraph */
    font-family: 'Oxanium', sans-serif; /* Changed font to Oxanium */
    max-width: 1500px !important; /* Make text block wider */
    /* margin-left and margin-right are already auto from base.css for p */
    line-height: 1.9; /* Further increased line-height for readability */
}

.highlight-text-blue {
    color: #5a9a6a; /* Darker green text color */
    text-shadow: 0 0 5px rgba(90, 154, 106, 0.6), 
                 0 0 8px rgba(90, 154, 106, 0.4);
    font-weight: 600; /* Slightly bolder to help text stand out */
}

/* Contact Section */
#contact {
    text-align: center;
}

#contact p {
    max-width: 1400px;
    margin-left: auto; /* To keep it centered if the text doesn't fill the max-width */
    margin-right: auto; /* To keep it centered */
}

/* Footer */
footer {
    text-align: center;
    padding: 10px 0 8px 0;
    background: #101823; /* Changed to match other section backgrounds */
    color: #aaa;
    font-size: 0.92em;
    border-top: 1px solid rgba(16, 24, 35, 0.7); /* Adjusted border to complement new background */
    box-shadow: 0 -1px 6px rgba(0,0,0,0.08);
    letter-spacing: 0.2px;
}

/* Layout for Project Detail Pages */
main#project-detail-page {
    padding-top: 80px; /* Ensure content below fixed nav */
}

.project-detail-header {
    padding: 30px 0;
    text-align: center;
}

.project-detail-header h1 {
    font-size: 2.6em; /* Specific for project titles */
    line-height: 1.35;
    color: #6fbe83; /* Updated title color to match About Me green */
    font-family: 'Orbitron', sans-serif;
    margin-top: 0;
    margin-bottom: 20px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 0 10px rgba(111, 190, 131, 0.35); /* Adjusted shadow to match new green */
}

.project-section h2 {
    font-family: 'Orbitron', sans-serif;
    color: #6fbe83; /* Match other green titles */
    font-size: 2.2em; /* Slightly smaller than h1, larger than h3 */
    margin-top: 25px; /* Adjusted spacing */
    margin-bottom: 15px; /* Adjusted spacing */
    text-align: center; /* Align to center */
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(111, 190, 131, 0.3); /* Consistent green shadow */
}

.project-section h3 {
    font-family: 'Orbitron', sans-serif;
    color: #6fbe83; /* Updated title color */
    font-size: 1.9em;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: left;
    letter-spacing: 1px;
    text-shadow: 0 0 7px rgba(111, 190, 131, 0.3); /* Adjusted shadow */
}

.project-section h4 {
    font-family: 'Orbitron', sans-serif;
    color: #6fbe83; /* Updated title color */
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: left;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(111, 190, 131, 0.25); /* Adjusted shadow */
}

.project-section p {
    font-family: 'Oxanium', sans-serif;
    font-size: 1.1em; /* Consistent with #philosophy p */
    line-height: 1.7; /* Good for readability */
    color: #ccc; /* Consistent with #philosophy p */
    margin-bottom: 1em; /* Standard paragraph spacing */
}

#scroll-progress-bar {
    position: fixed;
    top: 56px; /* Positioned below the nav bar */
    left: 0;
    height: 2px; /* Made thinner */
    width: 0;
    background: #6fbe83; /* Changed to About Me title green */
    z-index: 1999; /* Below nav bar (nav-bar is 1000, but other elements might be higher) */
    transition: width 0.1s linear; /* Smoother, faster transition */
    border-radius: 0 1px 1px 0; /* Adjusted border-radius for thinner bar */
    box-shadow: 0 1px 3px rgba(111, 190, 131, 0.3); /* Adjusted shadow to match new green */
}